added queue system on rooms

desktop/src/api/rooms/rooms.service.ts

@@ -7,7 +7,14 @@ interface RoomUser {
     avatar?: string;
     isHost: boolean;
     isGuest: boolean;
-    userId?: number; // ID real del usuario si está logueado
+    userId?: number;
+}
+
+export interface QueueItem {
+    uid: string;
+    metadata: RoomMetadata;
+    videoData: any;
+    addedBy: string;
 }
 
 interface RoomMetadata {
@@ -36,6 +43,7 @@ interface RoomData {
     metadata?: RoomMetadata | null;
     exposed: boolean;
     publicUrl?: string;
+    queue: QueueItem[];
 }
 
 const rooms = new Map<string, RoomData>();
@@ -57,7 +65,8 @@ export function createRoom(name: string, host: RoomUser, password?: string, expo
         password: password || undefined,
         metadata: null,
         exposed,
-        publicUrl
+        publicUrl,
+        queue: []
     };
 
     rooms.set(roomId, room);
@@ -75,6 +84,55 @@ export function getAllRooms(): RoomData[] {
     }));
 }
 
+export function addQueueItem(roomId: string, item: QueueItem): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    room.queue.push(item);
+    return true;
+}
+
+export function removeQueueItem(roomId: string, itemUid: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    room.queue = room.queue.filter(i => i.uid !== itemUid);
+    return true;
+}
+
+export function getNextQueueItem(roomId: string): QueueItem | undefined {
+    const room = rooms.get(roomId);
+    if (!room || room.queue.length === 0) return undefined;
+    return room.queue.shift(); // Saca el primero y lo retorna
+}
+
+export function getAndRemoveQueueItem(roomId: string, itemUid: string): QueueItem | undefined {
+    const room = rooms.get(roomId);
+    if (!room) return undefined;
+
+    const index = room.queue.findIndex(i => i.uid === itemUid);
+    if (index === -1) return undefined;
+
+    const [item] = room.queue.splice(index, 1);
+    return item;
+}
+
+export function moveQueueItem(roomId: string, itemUid: string, direction: 'up' | 'down'): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    const index = room.queue.findIndex(i => i.uid === itemUid);
+    if (index === -1) return false;
+
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+
+    if (newIndex < 0 || newIndex >= room.queue.length) return false;
+
+    const temp = room.queue[newIndex];
+    room.queue[newIndex] = room.queue[index];
+    room.queue[index] = temp;
+
+    return true;
+}
+
 export function addUserToRoom(roomId: string, user: RoomUser): boolean {
     const room = rooms.get(roomId);
     if (!room) return false;

desktop/src/api/rooms/rooms.websocket.ts

@@ -155,7 +155,6 @@ async function handleWebSocketConnection(connection: any, req: any) {
         isGuest
     });
 
-    // Enviar estado inicial
     socket.send(JSON.stringify({
         type: 'init',
         userId,
@@ -171,7 +170,8 @@ async function handleWebSocketConnection(connection: any, req: any) {
                 isHost: u.isHost,
                 isGuest: u.isGuest
             })),
-            currentVideo: room.currentVideo
+            currentVideo: room.currentVideo,
+            queue: room.queue || []
         }
     }));
 
@@ -226,6 +226,46 @@ function handleMessage(roomId: string, userId: string, data: any) {
             });
             break;
 
+        case 'queue_play_item':
+            if (room.host.id !== userId) return;
+
+            const itemToPlay = roomService.getAndRemoveQueueItem(roomId, data.itemUid);
+            if (itemToPlay) {
+                const videoPayload = {
+                    videoData: itemToPlay.videoData.videoData,
+                    subtitles: itemToPlay.videoData.subtitles,
+                    currentTime: 0,
+                    isPlaying: true
+                };
+
+                roomService.updateRoomVideo(roomId, videoPayload);
+                roomService.updateRoomMetadata(roomId, itemToPlay.metadata);
+
+                broadcastToRoom(roomId, {
+                    type: 'video_update',
+                    video: videoPayload,
+                    metadata: itemToPlay.metadata
+                });
+
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
+        case 'queue_move':
+            if (room.host.id !== userId) return;
+
+            const moved = roomService.moveQueueItem(roomId, data.itemUid, data.direction);
+            if (moved) {
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
         case 'request_sync':
             // Cualquier usuario puede pedir sync
             const host = clients.get(room.host.id);
@@ -375,6 +415,63 @@ function handleMessage(roomId: string, userId: string, data: any) {
             }
             break;
 
+        case 'queue_add':
+            // Solo el host (o todos si quisieras) pueden añadir
+            if (room.host.id !== userId) return;
+
+            const newItem = {
+                uid: `q_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
+                metadata: data.metadata,
+                videoData: data.video, // El objeto que contiene url, type, subtitles
+                addedBy: room.users.get(userId)?.username || 'Unknown'
+            };
+
+            roomService.addQueueItem(roomId, newItem);
+
+            // Avisar a todos que la cola cambió
+            broadcastToRoom(roomId, {
+                type: 'queue_update',
+                queue: room.queue
+            });
+            break;
+
+        case 'queue_remove':
+            if (room.host.id !== userId) return;
+            roomService.removeQueueItem(roomId, data.itemUid);
+            broadcastToRoom(roomId, {
+                type: 'queue_update',
+                queue: room.queue
+            });
+            break;
+
+        case 'play_next':
+            if (room.host.id !== userId) return;
+
+            const nextItem = roomService.getNextQueueItem(roomId);
+            if (nextItem) {
+                const videoPayload = {
+                    videoData: nextItem.videoData.videoData,
+                    subtitles: nextItem.videoData.subtitles,
+                    currentTime: 0,
+                    isPlaying: true
+                };
+
+                roomService.updateRoomVideo(roomId, videoPayload);
+                roomService.updateRoomMetadata(roomId, nextItem.metadata);
+
+                broadcastToRoom(roomId, {
+                    type: 'video_update',
+                    video: videoPayload,
+                    metadata: nextItem.metadata
+                });
+
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
         default:
             console.warn('Unknown message type:', data.type);
             break;

desktop/src/scripts/room-modal.js

@@ -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 {

desktop/src/scripts/room.js

@@ -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) {

desktop/views/css/room.css

@@ -637,29 +637,27 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 0;
 }
 input[type=number] {
-    -moz-appearance: textfield; /* Firefox */
+    -moz-appearance: textfield;
 }
 
-/* Enhanced Episode Control Container */
 .ep-control {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: rgba(0, 0, 0, 0.4); /* Darker background for visibility */
-    border: 1px solid rgba(255, 255, 255, 0.2); /* brighter border */
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     padding: 4px;
     width: 100%;
-    height: 48px; /* Fixed height */
+    height: 48px;
     margin-top: 8px;
     box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
 }
 
-/* Button Styling */
 .ep-btn {
-    width: 40px; /* Fixed width */
-    height: 38px; /* Fixed height */
-    flex-shrink: 0; /* Prevent shrinking */
+    width: 40px;
+    height: 38px;
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -682,10 +680,9 @@ input[type=number] {
     transform: translateY(1px);
 }
 
-/* Input Styling */
 .ep-input {
     flex: 1;
-    min-width: 0; /* Allows flex item to shrink below content size */
+    min-width: 0;
     background: transparent;
     border: none;
     color: white;
@@ -693,7 +690,7 @@ input[type=number] {
     font-size: 1.2rem;
     font-weight: 800;
     outline: none;
-    font-family: monospace; /* Better number alignment */
+    font-family: monospace;
 }
 
 .ep-input:focus {
@@ -978,3 +975,182 @@ input[type=number] {
         opacity: 1;
     }
 }
+
+.sidebar-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--glass-border);
+    background: rgba(0,0,0,0.2);
+}
+
+.tab-btn {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    padding: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+}
+
+.tab-btn:hover { color: white; background: rgba(255,255,255,0.05); }
+.tab-btn.active { color: white; border-bottom-color: var(--brand-color); background: rgba(255,255,255,0.02); }
+
+.tab-content {
+    display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
+}
+
+.queue-list {
+    padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
+}
+
+.queue-item {
+    display: flex; gap: 10px; padding: 10px;
+    background: rgba(255,255,255,0.05); border-radius: 8px;
+    border: 1px solid transparent; position: relative;
+}
+
+.queue-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
+
+.q-img { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; }
+.q-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
+.q-title { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.q-meta { font-size: 0.8rem; color: #aaa; }
+.q-remove {
+    position: absolute; top: 5px; right: 5px;
+    background: rgba(0,0,0,0.5); border: none; color: #ff6b6b;
+    width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+}
+.q-remove:hover { background: #ff6b6b; color: white; }
+
+.badge { background: var(--brand-color); padding: 1px 6px; border-radius: 10px; font-size: 0.7rem; margin-left: 6px; }
+.queue-empty { text-align: center; color: #666; margin-top: 40px; font-style: italic; }
+
+.chat-sidebar-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background: rgba(15, 15, 15, 0.95);
+    border-left: 1px solid var(--glass-border);
+    overflow: hidden;
+}
+
+@media (max-width: 1200px) {
+    .chat-sidebar-wrapper {
+        height: 400px;
+        border-left: none;
+        border-top: 1px solid var(--glass-border);
+    }
+}
+
+.queue-item {
+    display: flex;
+    gap: 10px;
+    padding: 10px;
+    background: rgba(255,255,255,0.05);
+    border-radius: 8px;
+    border: 1px solid transparent;
+    position: relative;
+    align-items: center;
+    transition: transform 0.2s;
+}
+
+.queue-item:hover {
+    background: rgba(255,255,255,0.08);
+    border-color: rgba(255,255,255,0.1);
+}
+
+.q-img { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
+.q-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
+
+.q-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+.queue-item:hover .q-actions { opacity: 1; }
+
+.q-btn {
+    background: rgba(255,255,255,0.1);
+    border: none;
+    color: white;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.q-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
+.q-btn.play:hover { background: var(--brand-color); }
+.q-btn.remove:hover { background: #ff6b6b; }
+
+.chat-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: rgba(15, 15, 15, 0.95);
+    border-left: 1px solid var(--glass-border);
+    overflow: hidden;
+}
+
+.sidebar-tabs {
+    display: flex;
+    width: 100%;
+    flex: 0 0 auto;
+    height: 50px;
+    border-bottom: 1px solid var(--glass-border);
+    background: rgba(0,0,0,0.2);
+}
+
+.tab-btn {
+    flex: 1;
+    height: 100%;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-weight: 600;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+}
+
+.tab-btn:hover { background: rgba(255,255,255,0.05); color: white; }
+.tab-btn.active { border-bottom-color: var(--brand-color); color: white; background: rgba(255,255,255,0.02); }
+
+.tab-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.queue-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}

desktop/views/room.html

@@ -33,9 +33,6 @@
         <div class="video-area">
             <div class="room-header">
                 <div class="header-left">
-                    <button id="leave-room-btn" class="btn-icon-glass" title="Leave" style="visibility: hidden;">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
-                    </button>
                     <div class="room-info">
                         <h2 id="room-name">Loading...</h2>
                         <div id="now-playing-info" class="np-fade">
@@ -140,27 +137,36 @@
                 </div>
             </div>
         </div>
-
-        <div class="chat-sidebar" id="chat-sidebar">
-            <div class="chat-header">
-                <h3>Chat</h3>
-                <button id="toggle-users-btn" class="btn-icon-glass" title="Toggle User List">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-                        <circle cx="9" cy="7" r="4"></circle>
-                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
-                    </svg>
-                </button>
+        <div class="chat-sidebar">
+            <div class="sidebar-tabs">
+                <button class="tab-btn active" id="tab-chat-btn">Chat</button>
+                <button class="tab-btn" id="tab-queue-btn">Queue <span id="queue-count" class="badge">0</span></button>
             </div>
 
-            <div class="users-list" id="users-list" style="display: none;"></div>
-            <div class="chat-messages" id="chat-messages"></div>
-            <form class="chat-input" id="chat-form" autocomplete="off">
-                <input type="text" id="chat-input" placeholder="Type a message..."  maxlength="500" autocomplete="off" autocapitalize="off" spellcheck="false" />
-                <button type="submit">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                </button>
-            </form>
+            <div id="tab-content-chat" class="tab-content active" style="display: flex; flex-direction: column; height: 100%;">
+                <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: flex-end;">
+                    <button id="toggle-users-btn" class="btn-icon-glass" title="Toggle User List" style="width: 32px; height: 32px;">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                            <circle cx="9" cy="7" r="4"></circle>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                        </svg>
+                    </button>
+                </div>
+                <div class="users-list" id="users-list" style="display: none;"></div>
+                <div class="chat-messages" id="chat-messages"></div>
+                <form class="chat-input" id="chat-form" autocomplete="off">
+                    <input type="text" id="chat-input" placeholder="Type a message..." maxlength="500" autocomplete="off" />
+                    <button type="submit">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                    </button>
+                </form>
+            </div>
+            <div id="tab-content-queue" class="tab-content" style="display: none;">
+                <div class="queue-list" id="queue-list">
+                    <div class="queue-empty">Queue is empty</div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -256,10 +262,14 @@
 
                     <div id="config-error" style="color:#ff6b6b; font-size:0.9rem; display:none; background:rgba(255,0,0,0.1); padding:10px; border-radius:8px;"></div>
 
-                    <div class="form-actions" style="margin-top:auto;">
-                        <button id="btn-launch-stream" class="btn-confirm full-width" disabled>
+                    <div class="form-actions" style="margin-top:auto; display:flex; gap:10px;">
+                        <button id="btn-add-queue" class="btn-cancel" style="flex:1; justify-content: center; border-color: var(--brand-color); color: white;" disabled>
+                            + Add to Queue
+                        </button>
+
+                        <button id="btn-launch-stream" class="btn-confirm" style="flex:1;" disabled>
                             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
-                            Play in Room
+                            Play Now
                         </button>
                     </div>
                 </div>

docker/src/api/rooms/rooms.service.ts

@@ -7,7 +7,14 @@ interface RoomUser {
     avatar?: string;
     isHost: boolean;
     isGuest: boolean;
-    userId?: number; // ID real del usuario si está logueado
+    userId?: number;
+}
+
+export interface QueueItem {
+    uid: string;
+    metadata: RoomMetadata;
+    videoData: any;
+    addedBy: string;
 }
 
 interface RoomMetadata {
@@ -36,6 +43,7 @@ interface RoomData {
     metadata?: RoomMetadata | null;
     exposed: boolean;
     publicUrl?: string;
+    queue: QueueItem[];
 }
 
 const rooms = new Map<string, RoomData>();
@@ -57,7 +65,8 @@ export function createRoom(name: string, host: RoomUser, password?: string, expo
         password: password || undefined,
         metadata: null,
         exposed,
-        publicUrl
+        publicUrl,
+        queue: []
     };
 
     rooms.set(roomId, room);
@@ -75,6 +84,55 @@ export function getAllRooms(): RoomData[] {
     }));
 }
 
+export function addQueueItem(roomId: string, item: QueueItem): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    room.queue.push(item);
+    return true;
+}
+
+export function removeQueueItem(roomId: string, itemUid: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    room.queue = room.queue.filter(i => i.uid !== itemUid);
+    return true;
+}
+
+export function getNextQueueItem(roomId: string): QueueItem | undefined {
+    const room = rooms.get(roomId);
+    if (!room || room.queue.length === 0) return undefined;
+    return room.queue.shift(); // Saca el primero y lo retorna
+}
+
+export function getAndRemoveQueueItem(roomId: string, itemUid: string): QueueItem | undefined {
+    const room = rooms.get(roomId);
+    if (!room) return undefined;
+
+    const index = room.queue.findIndex(i => i.uid === itemUid);
+    if (index === -1) return undefined;
+
+    const [item] = room.queue.splice(index, 1);
+    return item;
+}
+
+export function moveQueueItem(roomId: string, itemUid: string, direction: 'up' | 'down'): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    const index = room.queue.findIndex(i => i.uid === itemUid);
+    if (index === -1) return false;
+
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+
+    if (newIndex < 0 || newIndex >= room.queue.length) return false;
+
+    const temp = room.queue[newIndex];
+    room.queue[newIndex] = room.queue[index];
+    room.queue[index] = temp;
+
+    return true;
+}
+
 export function addUserToRoom(roomId: string, user: RoomUser): boolean {
     const room = rooms.get(roomId);
     if (!room) return false;

docker/src/api/rooms/rooms.websocket.ts

@@ -155,7 +155,6 @@ async function handleWebSocketConnection(connection: any, req: any) {
         isGuest
     });
 
-    // Enviar estado inicial
     socket.send(JSON.stringify({
         type: 'init',
         userId,
@@ -171,7 +170,8 @@ async function handleWebSocketConnection(connection: any, req: any) {
                 isHost: u.isHost,
                 isGuest: u.isGuest
             })),
-            currentVideo: room.currentVideo
+            currentVideo: room.currentVideo,
+            queue: room.queue || []
         }
     }));
 
@@ -226,6 +226,46 @@ function handleMessage(roomId: string, userId: string, data: any) {
             });
             break;
 
+        case 'queue_play_item':
+            if (room.host.id !== userId) return;
+
+            const itemToPlay = roomService.getAndRemoveQueueItem(roomId, data.itemUid);
+            if (itemToPlay) {
+                const videoPayload = {
+                    videoData: itemToPlay.videoData.videoData,
+                    subtitles: itemToPlay.videoData.subtitles,
+                    currentTime: 0,
+                    isPlaying: true
+                };
+
+                roomService.updateRoomVideo(roomId, videoPayload);
+                roomService.updateRoomMetadata(roomId, itemToPlay.metadata);
+
+                broadcastToRoom(roomId, {
+                    type: 'video_update',
+                    video: videoPayload,
+                    metadata: itemToPlay.metadata
+                });
+
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
+        case 'queue_move':
+            if (room.host.id !== userId) return;
+
+            const moved = roomService.moveQueueItem(roomId, data.itemUid, data.direction);
+            if (moved) {
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
         case 'request_sync':
             // Cualquier usuario puede pedir sync
             const host = clients.get(room.host.id);
@@ -375,6 +415,63 @@ function handleMessage(roomId: string, userId: string, data: any) {
             }
             break;
 
+        case 'queue_add':
+            // Solo el host (o todos si quisieras) pueden añadir
+            if (room.host.id !== userId) return;
+
+            const newItem = {
+                uid: `q_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
+                metadata: data.metadata,
+                videoData: data.video, // El objeto que contiene url, type, subtitles
+                addedBy: room.users.get(userId)?.username || 'Unknown'
+            };
+
+            roomService.addQueueItem(roomId, newItem);
+
+            // Avisar a todos que la cola cambió
+            broadcastToRoom(roomId, {
+                type: 'queue_update',
+                queue: room.queue
+            });
+            break;
+
+        case 'queue_remove':
+            if (room.host.id !== userId) return;
+            roomService.removeQueueItem(roomId, data.itemUid);
+            broadcastToRoom(roomId, {
+                type: 'queue_update',
+                queue: room.queue
+            });
+            break;
+
+        case 'play_next':
+            if (room.host.id !== userId) return;
+
+            const nextItem = roomService.getNextQueueItem(roomId);
+            if (nextItem) {
+                const videoPayload = {
+                    videoData: nextItem.videoData.videoData,
+                    subtitles: nextItem.videoData.subtitles,
+                    currentTime: 0,
+                    isPlaying: true
+                };
+
+                roomService.updateRoomVideo(roomId, videoPayload);
+                roomService.updateRoomMetadata(roomId, nextItem.metadata);
+
+                broadcastToRoom(roomId, {
+                    type: 'video_update',
+                    video: videoPayload,
+                    metadata: nextItem.metadata
+                });
+
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
         default:
             console.warn('Unknown message type:', data.type);
             break;

docker/src/scripts/room-modal.js

@@ -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 {

docker/src/scripts/room.js

@@ -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) {

docker/views/css/room.css

@@ -637,29 +637,27 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 0;
 }
 input[type=number] {
-    -moz-appearance: textfield; /* Firefox */
+    -moz-appearance: textfield;
 }
 
-/* Enhanced Episode Control Container */
 .ep-control {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: rgba(0, 0, 0, 0.4); /* Darker background for visibility */
-    border: 1px solid rgba(255, 255, 255, 0.2); /* brighter border */
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     padding: 4px;
     width: 100%;
-    height: 48px; /* Fixed height */
+    height: 48px;
     margin-top: 8px;
     box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
 }
 
-/* Button Styling */
 .ep-btn {
-    width: 40px; /* Fixed width */
-    height: 38px; /* Fixed height */
-    flex-shrink: 0; /* Prevent shrinking */
+    width: 40px;
+    height: 38px;
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -682,10 +680,9 @@ input[type=number] {
     transform: translateY(1px);
 }
 
-/* Input Styling */
 .ep-input {
     flex: 1;
-    min-width: 0; /* Allows flex item to shrink below content size */
+    min-width: 0;
     background: transparent;
     border: none;
     color: white;
@@ -693,7 +690,7 @@ input[type=number] {
     font-size: 1.2rem;
     font-weight: 800;
     outline: none;
-    font-family: monospace; /* Better number alignment */
+    font-family: monospace;
 }
 
 .ep-input:focus {
@@ -978,3 +975,182 @@ input[type=number] {
         opacity: 1;
     }
 }
+
+.sidebar-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--glass-border);
+    background: rgba(0,0,0,0.2);
+}
+
+.tab-btn {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    padding: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+}
+
+.tab-btn:hover { color: white; background: rgba(255,255,255,0.05); }
+.tab-btn.active { color: white; border-bottom-color: var(--brand-color); background: rgba(255,255,255,0.02); }
+
+.tab-content {
+    display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
+}
+
+.queue-list {
+    padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
+}
+
+.queue-item {
+    display: flex; gap: 10px; padding: 10px;
+    background: rgba(255,255,255,0.05); border-radius: 8px;
+    border: 1px solid transparent; position: relative;
+}
+
+.queue-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
+
+.q-img { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; }
+.q-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
+.q-title { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.q-meta { font-size: 0.8rem; color: #aaa; }
+.q-remove {
+    position: absolute; top: 5px; right: 5px;
+    background: rgba(0,0,0,0.5); border: none; color: #ff6b6b;
+    width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+}
+.q-remove:hover { background: #ff6b6b; color: white; }
+
+.badge { background: var(--brand-color); padding: 1px 6px; border-radius: 10px; font-size: 0.7rem; margin-left: 6px; }
+.queue-empty { text-align: center; color: #666; margin-top: 40px; font-style: italic; }
+
+.chat-sidebar-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background: rgba(15, 15, 15, 0.95);
+    border-left: 1px solid var(--glass-border);
+    overflow: hidden;
+}
+
+@media (max-width: 1200px) {
+    .chat-sidebar-wrapper {
+        height: 400px;
+        border-left: none;
+        border-top: 1px solid var(--glass-border);
+    }
+}
+
+.queue-item {
+    display: flex;
+    gap: 10px;
+    padding: 10px;
+    background: rgba(255,255,255,0.05);
+    border-radius: 8px;
+    border: 1px solid transparent;
+    position: relative;
+    align-items: center;
+    transition: transform 0.2s;
+}
+
+.queue-item:hover {
+    background: rgba(255,255,255,0.08);
+    border-color: rgba(255,255,255,0.1);
+}
+
+.q-img { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
+.q-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
+
+.q-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+.queue-item:hover .q-actions { opacity: 1; }
+
+.q-btn {
+    background: rgba(255,255,255,0.1);
+    border: none;
+    color: white;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.q-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
+.q-btn.play:hover { background: var(--brand-color); }
+.q-btn.remove:hover { background: #ff6b6b; }
+
+.chat-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: rgba(15, 15, 15, 0.95);
+    border-left: 1px solid var(--glass-border);
+    overflow: hidden;
+}
+
+.sidebar-tabs {
+    display: flex;
+    width: 100%;
+    flex: 0 0 auto;
+    height: 50px;
+    border-bottom: 1px solid var(--glass-border);
+    background: rgba(0,0,0,0.2);
+}
+
+.tab-btn {
+    flex: 1;
+    height: 100%;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-weight: 600;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+}
+
+.tab-btn:hover { background: rgba(255,255,255,0.05); color: white; }
+.tab-btn.active { border-bottom-color: var(--brand-color); color: white; background: rgba(255,255,255,0.02); }
+
+.tab-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.queue-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}

docker/views/room.html

@@ -21,9 +21,6 @@
         <div class="video-area">
             <div class="room-header">
                 <div class="header-left">
-                    <button id="leave-room-btn" class="btn-icon-glass" title="Leave" style="visibility: hidden;">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
-                    </button>
                     <div class="room-info">
                         <h2 id="room-name">Loading...</h2>
                         <div id="now-playing-info" class="np-fade">
@@ -128,27 +125,36 @@
                 </div>
             </div>
         </div>
-
-        <div class="chat-sidebar" id="chat-sidebar">
-            <div class="chat-header">
-                <h3>Chat</h3>
-                <button id="toggle-users-btn" class="btn-icon-glass" title="Toggle User List">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-                        <circle cx="9" cy="7" r="4"></circle>
-                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
-                    </svg>
-                </button>
+        <div class="chat-sidebar">
+            <div class="sidebar-tabs">
+                <button class="tab-btn active" id="tab-chat-btn">Chat</button>
+                <button class="tab-btn" id="tab-queue-btn">Queue <span id="queue-count" class="badge">0</span></button>
             </div>
 
-            <div class="users-list" id="users-list" style="display: none;"></div>
-            <div class="chat-messages" id="chat-messages"></div>
-            <form class="chat-input" id="chat-form" autocomplete="off">
-                <input type="text" id="chat-input" placeholder="Type a message..."  maxlength="500" autocomplete="off" autocapitalize="off" spellcheck="false" />
-                <button type="submit">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                </button>
-            </form>
+            <div id="tab-content-chat" class="tab-content active" style="display: flex; flex-direction: column; height: 100%;">
+                <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: flex-end;">
+                    <button id="toggle-users-btn" class="btn-icon-glass" title="Toggle User List" style="width: 32px; height: 32px;">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                            <circle cx="9" cy="7" r="4"></circle>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                        </svg>
+                    </button>
+                </div>
+                <div class="users-list" id="users-list" style="display: none;"></div>
+                <div class="chat-messages" id="chat-messages"></div>
+                <form class="chat-input" id="chat-form" autocomplete="off">
+                    <input type="text" id="chat-input" placeholder="Type a message..." maxlength="500" autocomplete="off" />
+                    <button type="submit">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                    </button>
+                </form>
+            </div>
+            <div id="tab-content-queue" class="tab-content" style="display: none;">
+                <div class="queue-list" id="queue-list">
+                    <div class="queue-empty">Queue is empty</div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -244,10 +250,14 @@
 
                     <div id="config-error" style="color:#ff6b6b; font-size:0.9rem; display:none; background:rgba(255,0,0,0.1); padding:10px; border-radius:8px;"></div>
 
-                    <div class="form-actions" style="margin-top:auto;">
-                        <button id="btn-launch-stream" class="btn-confirm full-width" disabled>
+                    <div class="form-actions" style="margin-top:auto; display:flex; gap:10px;">
+                        <button id="btn-add-queue" class="btn-cancel" style="flex:1; justify-content: center; border-color: var(--brand-color); color: white;" disabled>
+                            + Add to Queue
+                        </button>
+
+                        <button id="btn-launch-stream" class="btn-confirm" style="flex:1;" disabled>
                             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
-                            Play in Room
+                            Play Now
                         </button>
                     </div>
                 </div>