addVideoToPlaylist(video.id.videoId, videoData);
container.innerHTML = '';
container.style.display = 'none';
};
div.innerHTML = `
${video.snippet.title}
${video.snippet.channelTitle}
לחץ להוספה
`;
container.appendChild(div);
});
}
function addVideoToPlaylist(videoId, videoData = null) {
const songData = videoData || {
videoId,
title: `YouTube Video (${videoId})`,
channelTitle: 'YouTube',
thumbnail: `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`,
addedBy: currentUser,
addedAt: Date.now()
};
const songKey = 'demo_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
const newSong = { key: songKey, ...songData };
window.demoPlaylist.push(newSong);
updatePlaylistDisplayDemo();
addChatMessage({
username: 'System',
message: `${currentUser} הוסיף שיר: ${songData.title}`,
type: 'system'
});
checkAutoPlay();
}
function startDJMode() {
if (isInQueue) {
alert('כבר בתור!');
return;
}
if (!window.demoPlaylist || window.demoPlaylist.length === 0) {
alert('אין שירים בפלייליסט! הוסף שירים תחילה.');
return;
}
isInQueue = true;
djQueue.push(currentUser);
document.getElementById('startDJBtn').style.display = 'none';
document.getElementById('stopDJBtn').style.display = 'inline-block';
updateUsersDisplayDemo();
updateDJQueueDisplay();
addChatMessage({
username: 'System',
message: `${currentUser} הצטרף לתור הדי-ג'יים`,
type: 'system'
});
checkAutoPlay();
}
function stopDJMode() {
isInQueue = false;
djQueue = djQueue.filter(user => user !== currentUser);
document.getElementById('startDJBtn').style.display = 'inline-block';
document.getElementById('stopDJBtn').style.display = 'none';
updateUsersDisplayDemo();
updateDJQueueDisplay();
addChatMessage({
username: 'System',
message: `${currentUser} יצא מתור הדי-ג'יים`,
type:
🎵 THE GRAVE - חדר מוזיקה משותף
⚠️ מצב DEMO - YouTube API חסום ב-Claude Artifacts. העלה לאתר WordPress לפונקציונליות מלאה!
🎧 בקרת די-ג'יי
במצב דמו - לחץ "הוסף שירי דמו" ואז "התחל לנגן"
📊 הצבעות
👍 0
👎 0
🎼 פלייליסט
גרור שירים כדי לשנות את הסדר ⋮⋮
function sendMessage() {
if (!currentUser) {
alert('יש להתחבר תחילה');
return;
}
const input = document.getElementById('chatInput');
const message = input.value.trim();
if (!message) return;
addChatMessage({
username: currentUser,
message: message
});
input.value = '';
}
function addDemoSongs() {
const demoSongs = [
{
videoId: 'dQw4w9WgXcQ',
title: 'Rick Astley - Never Gonna Give You Up',
channelTitle: 'Rick Astley',
thumbnail: 'https://img.youtube.com/vi/dQw4w9WgXcQ/mqdefault.jpg'
},
{
videoId: 'fJ9rUzIMcZQ',
title: 'Queen - Bohemian Rhapsody',
channelTitle: 'Queen Official',
thumbnail: 'https://img.youtube.com/vi/fJ9rUzIMcZQ/mqdefault.jpg'
},
{
videoId: 'kJQP7kiw5Fk',
title: 'Luis Fonsi - Despacito ft. Daddy Yankee',
channelTitle: 'Luis Fonsi',
thumbnail: 'https://img.youtube.com/vi/kJQP7kiw5Fk/mqdefault.jpg'
}
];
demoSongs.forEach((song, index) => {
setTimeout(() => {
addVideoToPlaylist(song.videoId, song);
}, index * 500);
});
addChatMessage({
username: 'System',
message: `🎵 ${currentUser} הוסיף שירי דמו לפלייליסט!`,
type: 'system'
});
}
// Helper functions
function initializeApp() {
if (isAppInitialized) return;
isAppInitialized = true;
createPlayer();
// Welcome message
addChatMessage({
username: 'System',
message: `ברוך הבא ${currentUser}! זהו מצב דמו. העלה לאתר WordPress לפונקציונליות מלאה.`,
type: 'system'
});
}
function createPlayer() {
if (!ytApiReady) {
setTimeout(createPlayer, 1000);
return;
}
try {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: '',
playerVars: {
'autoplay': 1,
'controls': 1,
'showinfo': 0,
'rel': 0,
'iv_load_policy': 3
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': handlePlayerError
}
});
} catch (error) {
console.error('Error creating player:', error);
}
}
function onPlayerReady(event) {
isPlayerReady = true;
console.log('🎵 Player is ready');
// Check if there's a pending song
if (window.pendingSong) {
currentSongKey = window.pendingSong.songKey;
loadVideoSafely(window.pendingSong.videoId);
updateCurrentSongDisplay(window.pendingSong.songData);
updatePlaylistDisplayDemo();
window.pendingSong = null;
}
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
// Remove current song and move to next DJ
if (currentSongKey && window.demoPlaylist) {
window.demoPlaylist = window.demoPlaylist.filter(song => song.key !== currentSongKey);
updatePlaylistDisplayDemo();
}
if (djQueue.length > 0) {
const currentDJ = djQueue.shift();
updateDJQueueDisplay();
updateUsersDisplayDemo();
addChatMessage({
username: 'System',
message: `🎵 השיר של ${currentDJ} הסתיים`,
type: 'system'
});
}
playNextSong();
}
}
function handlePlayerError(errorEvent) {
console.error('Player error:', errorEvent.data);
addChatMessage({
username: 'System',
message: '⚠️ שגיאה בנגינת הוידאו - עובר לשיר הבא',
type: 'system'
});
setTimeout(playNextSong, 2000);
}
function loadVideoSafely(videoId) {
try {
if (player && player.loadVideoById) {
player.loadVideoById(videoId);
console.log('🎵 Loading video:', videoId);
}
} catch (error) {
console.error('Error loading video:', error);
}
}
function extractVideoId(url) {
const match = url.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w-]{11})/);
return match ? match[1] : null;
}
function showDemoSearchResults(query) {
const resultsContainer = document.getElementById('searchResults');
const demoResults = [
{
id: { videoId: '9bZkp7q19f0' },
snippet: {
title: 'PSY - GANGNAM STYLE',
channelTitle: 'officialpsy',
thumbnails: { default: { url: 'https://img.youtube.com/vi/9bZkp7q19f0/default.jpg' } }
}
},
{
id: { videoId: 'L_jWHffIx5E' },
snippet: {
title: 'Smash Mouth - All Star',
channelTitle: 'Smash Mouth',
thumbnails: { default: { url: 'https://img.youtube.com/vi/L_jWHffIx5E/default.jpg' } }
}
},
{
id: { videoId: 'ZbZSe6N_BXs' },
snippet: {
title: 'Pharrell Williams - Happy',
channelTitle: 'Pharrell Williams',
thumbnails: { default: { url: 'https://img.youtube.com/vi/ZbZSe6N_BXs/default.jpg' } }
}
}
];
displaySearchResults(demoResults);
}
function displaySearchResults(results) {
const container = document.getElementById('searchResults');
container.style.display = 'block';
container.innerHTML = '';
results.forEach(video => {
const div = document.createElement('div');
div.className = 'search-result';
div.onclick = () => {
const videoData = {
videoId: video.id.videoId,
title: video.snippet.title,
channelTitle: video.snippet.channelTitle,
thumbnail: video.snippet.thumbnails.default.url
};
addVideoToPlaylist(video.id.videoId, videoData);