ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

added queue system on rooms

Browse Source
This commit is contained in:
lenafx
2026-01-04 21:09:04 +01:00
parent 4bf23980c2
commit 6e51bf8568
12 changed files with 1060 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
desktop/src/scripts/room-modal.js
View File

@@ -118,13 +118,7 @@ class CreateRoomModal {
this.close();
// REDIRECCIÓN:
// Si estamos en la página de rooms, recargamos o dejamos que el socket actualice.
// Si estamos en otra página, vamos a la sala creada.
// Asumo que tu ruta de sala es /room (o query params).
// Ajusta esta línea según tu router:
window.location.href = `/room?id=${data.room.id}`;
window.open(`/room?id=${data.room.id}`, '_blank', 'noopener,noreferrer');
} catch (err) {
alert(err.message);
} finally {

176
desktop/src/scripts/room.js
View File

@@ -81,6 +81,14 @@ const RoomsApp = (function() {
configError: document.getElementById('config-error'),
toastContainer: document.getElementById('video-toast-container'),
tabChatBtn: document.getElementById('tab-chat-btn'),
tabQueueBtn: document.getElementById('tab-queue-btn'),
tabContentChat: document.getElementById('tab-content-chat'),
tabContentQueue: document.getElementById('tab-content-queue'),
queueList: document.getElementById('queue-list'),
queueCount: document.getElementById('queue-count'),
btnAddQueue: document.getElementById('btn-add-queue'),
};
const ui = {
@@ -193,6 +201,11 @@ const RoomsApp = (function() {
if (elements.roomExtSelect) elements.roomExtSelect.onchange = (e) => onQuickExtensionChange(e, false);
if (elements.roomServerSelect) elements.roomServerSelect.onchange = onQuickServerChange;
elements.tabChatBtn.onclick = () => switchTab('chat');
elements.tabQueueBtn.onclick = () => switchTab('queue');
if(elements.btnAddQueue) elements.btnAddQueue.onclick = () => launchStream(true, true);
if (elements.roomSdToggle) {
elements.roomSdToggle.onclick = () => {
if (!isHost) return;
@@ -241,6 +254,16 @@ const RoomsApp = (function() {
}
}
function switchTab(tab) {
elements.tabChatBtn.classList.toggle('active', tab === 'chat');
elements.tabQueueBtn.classList.toggle('active', tab === 'queue');
elements.tabContentChat.style.display = tab === 'chat' ? 'flex' : 'none';
elements.tabContentQueue.style.display = tab === 'queue' ? 'flex' : 'none';
if(tab === 'queue') elements.chatForm.style.display = 'none';
else elements.chatForm.style.display = 'flex';
}
// --- QUICK CONTROLS LOGIC (Header) ---
async function populateQuickControls() {
@@ -376,6 +399,7 @@ const RoomsApp = (function() {
if(ui.epInput) ui.epInput.value = 1;
if(ui.launchBtn) ui.launchBtn.disabled = true;
if(elements.btnAddQueue) elements.btnAddQueue.disabled = true;
updateSDUI();
setupConfigListeners();
@@ -439,6 +463,7 @@ const RoomsApp = (function() {
configState.extension = ext;
configState.server = null;
ui.launchBtn.disabled = true;
if(elements.btnAddQueue) elements.btnAddQueue.disabled = true;
loadServersForExtension(ext);
};
@@ -452,6 +477,7 @@ const RoomsApp = (function() {
if (!extensionsReady) return;
ui.serverContainer.innerHTML = '<div class="grid-loader"><div class="spinner" style="width:20px;height:20px;"></div> Loading servers...</div>';
ui.launchBtn.disabled = true;
if(elements.btnAddQueue) elements.btnAddQueue.disabled = true;
try {
const settings = extensionsStore.settings[extName];
@@ -496,6 +522,7 @@ const RoomsApp = (function() {
configState.server = srv;
ui.launchBtn.disabled = false;
if(elements.btnAddQueue) elements.btnAddQueue.disabled = false;
};
ui.serverContainer.appendChild(chip);
@@ -543,7 +570,7 @@ const RoomsApp = (function() {
// --- STREAM LAUNCHER (Unified) ---
async function launchStream(fromModal = false) {
async function launchStream(fromModal = false, isQueueAction = false) {
if (!selectedAnimeData) {
console.warn("No anime selected data found");
return;
@@ -556,6 +583,10 @@ const RoomsApp = (function() {
server = configState.server;
episode = configState.episode;
category = configState.category;
if(isQueueAction) {
elements.btnAddQueue.disabled = true;
elements.btnAddQueue.textContent = 'Adding...';
}
} else {
ext = elements.roomExtSelect.value;
server = elements.roomServerSelect.value;
@@ -585,12 +616,6 @@ const RoomsApp = (function() {
return;
}
if(fromModal) {
elements.btnLaunch.disabled = true;
elements.btnLaunch.innerHTML = '<div class="spinner" style="width:20px;height:20px;"></div> Fetching...';
elements.configError.style.display = 'none';
}
try {
const apiUrl = `/api/watch/stream?animeId=${selectedAnimeData.id}&episode=${episode}&server=${encodeURIComponent(server)}&category=${category}&ext=${ext}&source=${selectedAnimeData.source}`;
console.log('Fetching stream:', apiUrl);
@@ -614,28 +639,36 @@ const RoomsApp = (function() {
}));
const videoPayload = {
type: 'video_update',
video: {
videoData: {
url: proxyUrl,
type: source.type || 'm3u8',
headers: headers
},
subtitles: subtitles,
currentTime: 0,
isPlaying: true
},
metadata: {
title: selectedAnimeData.title,
episode: episode,
image: selectedAnimeData.image,
id: selectedAnimeData.id
}
videoData: { url: proxyUrl, type: source.type || 'm3u8', headers: headers },
subtitles: subtitles
};
const metaPayload = {
title: selectedAnimeData.title,
episode: episode,
image: selectedAnimeData.image,
id: selectedAnimeData.id,
source: ext
};
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(videoPayload));
if (isQueueAction) {
ws.send(JSON.stringify({
type: 'queue_add',
video: videoPayload,
metadata: metaPayload
}));
showSystemToast("Added to queue!");
if(fromModal) closeAnimeSearchModal();
} else {
ws.send(JSON.stringify({
type: 'video_update',
video: { ...videoPayload, currentTime: 0, isPlaying: true },
metadata: metaPayload
}));
}
loadVideo(videoPayload.video);
updateHeaderInfo(videoPayload.metadata);
@@ -669,9 +702,9 @@ const RoomsApp = (function() {
alert(msg);
}
} finally {
if(fromModal) {
elements.btnLaunch.disabled = false;
elements.btnLaunch.innerHTML = 'Play in Room';
if(fromModal && isQueueAction) {
elements.btnAddQueue.disabled = false;
elements.btnAddQueue.textContent = '+ Add to Queue';
}
}
}
@@ -817,7 +850,7 @@ const RoomsApp = (function() {
case 'init':
const reconnectToast = document.getElementById('reconnecting-toast');
if (reconnectToast) reconnectToast.remove();
if (data.room.queue) renderQueue(data.room.queue);
elements.joinRoomModal.classList.remove('show');
currentUserId = data.userId;
currentUsername = data.username;
@@ -842,6 +875,10 @@ const RoomsApp = (function() {
}
break;
case 'queue_update':
renderQueue(data.queue);
break;
case 'users_update':
renderUsersList(data.users);
break;
@@ -932,6 +969,77 @@ const RoomsApp = (function() {
}
}
function renderQueue(queueItems) {
if (!elements.queueList) return;
elements.queueCount.textContent = queueItems.length;
if (queueItems.length === 0) {
elements.queueList.innerHTML = '<div class="queue-empty">Queue is empty</div>';
return;
}
elements.queueList.innerHTML = queueItems.map((item, index) => {
let actionsHtml = '';
if (isHost) {
const isFirst = index === 0;
const isLast = index === queueItems.length - 1;
actionsHtml = `
<div class="q-actions">
<button class="q-btn play" onclick="playQueueItem('${item.uid}')" title="Play Now">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
<div style="display:flex; gap:2px;">
${!isFirst ? `
<button class="q-btn" onclick="moveQueueItem('${item.uid}', 'up')" title="Move Up">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg>
</button>` : ''}
${!isLast ? `
<button class="q-btn" onclick="moveQueueItem('${item.uid}', 'down')" title="Move Down">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
</button>` : ''}
</div>
<button class="q-btn remove" onclick="removeQueueItem('${item.uid}')" title="Remove">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
`;
}
return `
<div class="queue-item">
<img src="${item.metadata.image || '/public/assets/placeholder.png'}" class="q-img">
<div class="q-info">
<div class="q-title" title="${escapeHtml(item.metadata.title)}">${escapeHtml(item.metadata.title)}</div>
<div class="q-meta">Ep ${item.metadata.episode} • ${escapeHtml(item.addedBy)}</div>
</div>
${actionsHtml}
</div>
`;
}).join('');
}
// Funciones globales (window) para los botones onclick
window.playQueueItem = function(uid) {
if(ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'queue_play_item', itemUid: uid }));
}
};
window.moveQueueItem = function(uid, direction) {
if(ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'queue_move', itemUid: uid, direction }));
}
};
window.removeQueueItem = function(uid) {
if(ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'queue_remove', itemUid: uid }));
}
};
function updateRoomUI(room) {
elements.roomName.textContent = room.name;
elements.roomViewers.textContent = `${room.users.length}`;
@@ -1361,6 +1469,16 @@ const RoomsApp = (function() {
if(elements.timeDisplay) elements.timeDisplay.textContent = formatTime(video.currentTime) + " / " + formatTime(video.duration);
if(elements.progressPlayed) elements.progressPlayed.style.width = (video.currentTime/video.duration*100) + "%";
});
video.addEventListener('ended', () => {
if (isHost) {
console.log('Video ended. Checking queue...');
setTimeout(() => {
if(ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'play_next' }));
}
}, 1000);
}
});
}
function formatTime(s) {