added watchparties

desktop/package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@fastify/static": "^8.3.0",
+        "@fastify/websocket": "^11.2.0",
         "@xhayper/discord-rpc": "^1.3.0",
         "adm-zip": "^0.5.16",
         "bcryptjs": "^3.0.3",
@@ -24,13 +25,15 @@
         "node-addon-api": "^8.5.0",
         "node-cron": "^4.2.1",
         "playwright-chromium": "^1.57.0",
-        "sqlite3": "^5.1.7"
+        "sqlite3": "^5.1.7",
+        "ws": "^8.18.3"
       },
       "devDependencies": {
         "@types/adm-zip": "^0.5.7",
         "@types/bcrypt": "^6.0.0",
         "@types/jsonwebtoken": "^9.0.10",
         "@types/node": "^24.0.0",
+        "@types/ws": "^8.18.1",
         "electron": "^39.2.5",
         "electron-builder": "^26.0.12",
         "node-gyp": "^12.1.0",
@@ -1193,6 +1196,27 @@
         "glob": "^11.0.0"
       }
     },
+    "node_modules/@fastify/websocket": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@fastify/websocket/-/websocket-11.2.0.tgz",
+      "integrity": "sha512-3HrDPbAG1CzUCqnslgJxppvzaAZffieOVbLp1DAy1huCSynUWPifSvfdEDUR8HlJLp3sp1A36uOM2tJogADS8w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "duplexify": "^4.1.3",
+        "fastify-plugin": "^5.0.0",
+        "ws": "^8.16.0"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -1640,6 +1664,16 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -3398,6 +3432,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/duplexify": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.3.tgz",
+      "integrity": "sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -7645,6 +7691,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stream-shift": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
+      "integrity": "sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==",
+      "license": "MIT"
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",

desktop/package.json

@@ -13,6 +13,7 @@
   "type": "commonjs",
   "dependencies": {
     "@fastify/static": "^8.3.0",
+    "@fastify/websocket": "^11.2.0",
     "@xhayper/discord-rpc": "^1.3.0",
     "adm-zip": "^0.5.16",
     "bcryptjs": "^3.0.3",
@@ -27,13 +28,15 @@
     "node-addon-api": "^8.5.0",
     "node-cron": "^4.2.1",
     "playwright-chromium": "^1.57.0",
-    "sqlite3": "^5.1.7"
+    "sqlite3": "^5.1.7",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",
     "@types/bcrypt": "^6.0.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.0.0",
+    "@types/ws": "^8.18.1",
     "electron": "^39.2.5",
     "electron-builder": "^26.0.12",
     "node-gyp": "^12.1.0",

desktop/server.js

@@ -32,6 +32,8 @@ const listRoutes = require("./electron/api/list/list.routes");
 const anilistRoute = require("./electron/api/anilist/anilist");
 const localRoutes = require("./electron/api/local/local.routes");
 const configRoutes = require("./electron/api/config/config.routes");
+const roomRoutes = require("./electron/api/rooms/rooms.routes");
+const { setupRoomWebSocket } = require("./electron/api/rooms/rooms.websocket");
 
 fastify.addHook("preHandler", async (request) => {
   const auth = request.headers.authorization;
@@ -75,11 +77,13 @@ fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });
 fastify.register(localRoutes, { prefix: "/api" });
 fastify.register(configRoutes, { prefix: "/api" });
+fastify.register(roomRoutes, { prefix: "/api" });
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 
 const start = async () => {
   try {
+    await fastify.register(require('@fastify/websocket'));
     ensureConfigFile()
     initDatabase("anilist");
     initDatabase("favorites");
@@ -87,7 +91,7 @@ const start = async () => {
     initDatabase("userdata");
     initDatabase("local_library");
     init();
-
+    setupRoomWebSocket(fastify);
 
     const refreshAll = async () => {
       await refreshTrendingAnime();

desktop/src/api/rooms/rooms.controller.ts

@@ -0,0 +1,141 @@
+import { FastifyReply, FastifyRequest } from 'fastify';
+import * as roomService from './rooms.service';
+import { getUserById } from '../user/user.service';
+
+interface CreateRoomBody {
+    name: string;
+    password?: string;
+}
+
+interface JoinRoomBody {
+    password?: string;
+    guestName?: string;
+}
+
+export async function createRoom(req: any, reply: FastifyReply) {
+    try {
+        const { name, password } = req.body as CreateRoomBody;
+        const userId = req.user?.id;
+
+        if (!userId) {
+            return reply.code(401).send({ error: "Authentication required to create room" });
+        }
+
+        if (!name || name.trim().length === 0) {
+            return reply.code(400).send({ error: "Room name is required" });
+        }
+
+        const user = await getUserById(userId);
+        if (!user) {
+            return reply.code(404).send({ error: "User not found" });
+        }
+
+        const host = {
+            id: `user_${userId}`,
+            username: user.username,
+            avatar: user.profile_picture_url || undefined,
+            isHost: true,
+            isGuest: false,
+            userId
+        };
+
+        const room = roomService.createRoom(name, host, password);
+
+        return reply.send({
+            success: true,
+            room: {
+                id: room.id,
+                name: room.name,
+                hasPassword: !!room.password,
+                userCount: room.users.size
+            }
+        });
+    } catch (err) {
+        console.error("Create Room Error:", err);
+        return reply.code(500).send({ error: "Failed to create room" });
+    }
+}
+
+export async function getRooms(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const rooms = roomService.getAllRooms();
+
+        const roomList = rooms.map((room) => ({
+            id: room.id,
+            name: room.name,
+            host: room.host.username,
+            userCount: room.users.size,
+            hasPassword: !!room.password,
+            currentlyWatching: room.currentVideo ? {
+                animeId: room.currentVideo.animeId,
+                episode: room.currentVideo.episode
+            } : null
+        }));
+
+        return reply.send({ rooms: roomList });
+    } catch (err) {
+        console.error("Get Rooms Error:", err);
+        return reply.code(500).send({ error: "Failed to retrieve rooms" });
+    }
+}
+
+export async function getRoom(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const { id } = req.params as { id: string };
+        const room = roomService.getRoom(id);
+
+        if (!room) {
+            return reply.code(404).send({ error: "Room not found" });
+        }
+
+        return reply.send({
+            room: {
+                id: room.id,
+                name: room.name,
+                host: {
+                    username: room.host.username,
+                    avatar: room.host.avatar
+                },
+                users: Array.from(room.users.values()).map(u => ({
+                    id: u.id,
+                    username: u.username,
+                    avatar: u.avatar,
+                    isHost: u.isHost,
+                    isGuest: u.isGuest
+                })),
+                hasPassword: !!room.password,
+                currentVideo: room.currentVideo
+            }
+        });
+    } catch (err) {
+        console.error("Get Room Error:", err);
+        return reply.code(500).send({ error: "Failed to retrieve room" });
+    }
+}
+
+export async function deleteRoom(req: any, reply: FastifyReply) {
+    try {
+        const { id } = req.params as { id: string };
+        const userId = req.user?.id;
+
+        if (!userId) {
+            return reply.code(401).send({ error: "Authentication required" });
+        }
+
+        const room = roomService.getRoom(id);
+        if (!room) {
+            return reply.code(404).send({ error: "Room not found" });
+        }
+
+        if (room.host.userId !== userId) {
+            return reply.code(403).send({ error: "Only the host can delete the room" });
+        }
+
+        roomService.deleteRoom(id);
+
+        return reply.send({ success: true });
+    } catch (err) {
+        console.error("Delete Room Error:", err);
+        return reply.code(500).send({ error: "Failed to delete room" });
+    }
+}

desktop/src/api/rooms/rooms.routes.ts

@@ -0,0 +1,11 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './rooms.controller';
+
+async function roomRoutes(fastify: FastifyInstance) {
+    fastify.post('/rooms', controller.createRoom);
+    fastify.get('/rooms', controller.getRooms);
+    fastify.get('/rooms/:id', controller.getRoom);
+    fastify.delete('/rooms/:id', controller.deleteRoom);
+}
+
+export default roomRoutes;

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

@@ -0,0 +1,130 @@
+import crypto from 'crypto';
+
+interface RoomUser {
+    id: string;
+    username: string;
+    avatar?: string;
+    isHost: boolean;
+    isGuest: boolean;
+    userId?: number; // ID real del usuario si está logueado
+}
+
+interface RoomMetadata {
+    id: string;
+    title: string;
+    episode: number;
+    image?: string;
+    source?: string;
+}
+
+interface RoomData {
+    id: string;
+    name: string;
+    host: RoomUser;
+    users: Map<string, RoomUser>;
+    createdAt: number;
+    currentVideo: {
+        animeId?: number;
+        episode?: number;
+        source?: string;
+        videoData?: any;
+        currentTime: number;
+        isPlaying: boolean;
+    } | null;
+    password?: string;
+    metadata?: RoomMetadata | null;
+}
+
+const rooms = new Map<string, RoomData>();
+
+export function generateRoomId(): string {
+    return crypto.randomBytes(8).toString('hex');
+}
+
+export function createRoom(name: string, host: RoomUser, password?: string): RoomData {
+    const roomId = generateRoomId();
+
+    const room: RoomData = {
+        id: roomId,
+        name,
+        host,
+        users: new Map([[host.id, host]]),
+        createdAt: Date.now(),
+        currentVideo: null,
+        password: password || undefined,
+        metadata: null,
+    };
+
+    rooms.set(roomId, room);
+    return room;
+}
+
+export function getRoom(roomId: string): RoomData | null {
+    return rooms.get(roomId) || null;
+}
+
+export function getAllRooms(): RoomData[] {
+    return Array.from(rooms.values()).map(room => ({
+        ...room,
+        users: room.users
+    }));
+}
+
+export function addUserToRoom(roomId: string, user: RoomUser): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.users.set(user.id, user);
+    return true;
+}
+
+export function removeUserFromRoom(roomId: string, userId: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.users.delete(userId);
+
+    // Si no quedan usuarios, eliminar la sala
+    if (room.users.size === 0) {
+        rooms.delete(roomId);
+        return true;
+    }
+
+    // Si era el host, asignar nuevo host
+    if (room.host.id === userId && room.users.size > 0) {
+        const newHost = Array.from(room.users.values())[0];
+        newHost.isHost = true;
+        room.host = newHost;
+    }
+
+    return true;
+}
+
+export function updateRoomVideo(roomId: string, videoData: any): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.currentVideo = videoData;
+    return true;
+}
+
+export function deleteRoom(roomId: string): boolean {
+    return rooms.delete(roomId);
+}
+
+export function verifyRoomPassword(roomId: string, password?: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    if (!room.password) return true;
+    if (!password) return false;
+
+    return room.password === password;
+}
+
+export function updateRoomMetadata(roomId: string, metadata: any): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.metadata = metadata;
+    return true;
+}

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

@@ -0,0 +1,397 @@
+import { FastifyInstance, FastifyRequest } from 'fastify';
+import * as roomService from './rooms.service';
+import { getUserById } from '../user/user.service';
+import jwt from 'jsonwebtoken';
+
+interface WSClient {
+    socket: any;
+    userId: string;
+    username: string;
+    roomId: string;
+    isGuest: boolean;
+}
+
+const clients = new Map<string, WSClient>();
+
+interface WSParams {
+    roomId: string;
+}
+
+interface WSQuery {
+    token?: string;
+    guestName?: string;
+    password?: string;
+}
+
+export function setupRoomWebSocket(fastify: FastifyInstance) {
+    // @ts-ignore
+    fastify.get('/ws/room/:roomId', { websocket: true }, (connection: any, req: any) => {
+        handleWebSocketConnection(connection, req).catch(err => {
+            console.error('WebSocket error:', err);
+            try {
+                connection.socket.close();
+            } catch (e) {
+                // Socket already closed
+            }
+        });
+    });
+}
+
+async function handleWebSocketConnection(connection: any, req: any) {
+    const socket = connection.socket || connection;
+    const roomId = req.params.roomId;
+    const token = req.query.token;
+    const guestName = req.query.guestName;
+    const password = req.query.password;
+
+    let userId: string;
+    let username: string;
+    let avatar: string | undefined;
+    let isGuest = false;
+    let realUserId: any;
+
+    // Verificar si la sala existe
+    const room = roomService.getRoom(roomId);
+    if (!room) {
+        socket.send(JSON.stringify({
+            type: 'error',
+            message: 'Room not found'
+        }));
+        socket.close();
+        return;
+    }
+
+    // Verificar contraseña si existe
+    if (room.password) {
+        if (!password || !roomService.verifyRoomPassword(roomId, password)) {
+            socket.send(JSON.stringify({
+                type: 'error',
+                message: 'Invalid password'
+            }));
+            socket.close();
+            return;
+        }
+    }
+
+    // Autenticar usuario o crear invitado
+    if (token) {
+        try {
+            const decoded: any = jwt.verify(token, process.env.JWT_SECRET!);
+            realUserId = decoded.id;
+            const user = await getUserById(realUserId);
+
+            if (user) {
+                userId = `user_${realUserId}`;
+                username = user.username;
+                avatar = user.profile_picture_url || undefined;
+                isGuest = false;
+            } else {
+                throw new Error('User not found');
+            }
+        } catch (err) {
+            socket.send(JSON.stringify({
+                type: 'error',
+                message: 'Invalid token'
+            }));
+            socket.close();
+            return;
+        }
+    } else if (guestName && guestName.trim()) {
+        const nameToCheck = guestName.trim();
+
+        const isNameTaken = Array.from(room.users.values()).some(
+            u => u.username.toLowerCase() === nameToCheck.toLowerCase()
+        );
+
+        if (isNameTaken) {
+            socket.send(JSON.stringify({
+                type: 'error',
+                message: 'Username is already taken'
+            }));
+            socket.close();
+            return;
+        }
+
+        userId = `guest_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        username = nameToCheck;
+        isGuest = true;
+    } else {
+        socket.send(JSON.stringify({
+            type: 'error',
+            message: 'Authentication required'
+        }));
+        socket.close();
+        return;
+    }
+
+    const isHost = room.host.userId === realUserId || room.host.id === userId;
+
+    console.log('WebSocket Connection:', {
+        userId,
+        realUserId,
+        roomHostId: room.host.id,
+        roomHostUserId: room.host.userId,
+        isHost
+    });
+
+    // Agregar usuario a la sala
+    const userInRoom = {
+        id: userId,
+        username,
+        avatar,
+        isHost: isHost,  // ← CORREGIDO: Usar la verificación correcta
+        isGuest,
+        userId: realUserId
+    };
+
+    roomService.addUserToRoom(roomId, userInRoom);
+
+    // Registrar cliente
+    clients.set(userId, {
+        socket: socket,
+        userId,
+        username,
+        roomId,
+        isGuest
+    });
+
+    // Enviar estado inicial
+    socket.send(JSON.stringify({
+        type: 'init',
+        userId,
+        username,
+        isGuest,
+        room: {
+            id: room.id,
+            name: room.name,
+            users: Array.from(room.users.values()).map(u => ({
+                id: u.id,
+                username: u.username,
+                avatar: u.avatar,
+                isHost: u.isHost,
+                isGuest: u.isGuest
+            })),
+            currentVideo: room.currentVideo
+        }
+    }));
+
+    // Notificar a otros usuarios
+    broadcastToRoom(roomId, {
+        type: 'user_joined',
+        user: {
+            id: userId,
+            username,
+            avatar,
+            isGuest
+        }
+    }, userId);
+
+    // Manejar mensajes
+    socket.on('message', (message: Buffer) => {
+        try {
+            const data = JSON.parse(message.toString());
+            handleMessage(roomId, userId, data);
+        } catch (err) {
+            console.error('WebSocket message error:', err);
+        }
+    });
+
+    // Manejar desconexión
+    socket.on('close', () => {
+        clients.delete(userId);
+        roomService.removeUserFromRoom(roomId, userId);
+
+        broadcastToRoom(roomId, {
+            type: 'user_left',
+            user: { userId, username }
+        });
+    });
+}
+
+function handleMessage(roomId: string, userId: string, data: any) {
+    const room = roomService.getRoom(roomId);
+    if (!room) return;
+
+    console.log('Handling message:', data.type, 'from user:', userId, 'isHost:', room.host.id === userId);
+
+    switch (data.type) {
+        case 'chat':
+            broadcastToRoom(roomId, {
+                type: 'chat',
+                userId,
+                username: room.users.get(userId)?.username || 'Unknown',
+                avatar: room.users.get(userId)?.avatar,
+                message: data.message,
+                timestamp: Date.now()
+            });
+            break;
+
+        case 'video_update':
+            if (room.host.id !== userId) return;
+
+            roomService.updateRoomVideo(roomId, data.video);
+            roomService.updateRoomMetadata(roomId, data.metadata);
+
+            broadcastToRoom(roomId, {
+                type: 'video_update',
+                video: data.video,
+                metadata: data.metadata // ✅ CLAVE
+            });
+
+            break;
+
+
+        case 'sync':
+            // Solo el host puede hacer sync
+            if (room.host.id !== userId) return;
+
+            if (room.currentVideo) {
+                room.currentVideo.currentTime = data.currentTime;
+                room.currentVideo.isPlaying = data.isPlaying;
+            }
+
+            broadcastToRoom(roomId, {
+                type: 'sync',
+                currentTime: data.currentTime,
+                isPlaying: data.isPlaying
+            }, userId);
+            break;
+
+        case 'request_users':
+            const currentRoom = roomService.getRoom(roomId);
+            if (currentRoom) {
+                const client = clients.get(userId);
+                if (client && client.socket && client.socket.readyState === 1) {
+                    client.socket.send(JSON.stringify({
+                        type: 'users_update', // Nuevo tipo de respuesta
+                        users: Array.from(currentRoom.users.values()).map(u => ({
+                            id: u.id,
+                            username: u.username,
+                            avatar: u.avatar,
+                            isHost: u.isHost,
+                            isGuest: u.isGuest
+                        }))
+                    }));
+                }
+            }
+            break;
+
+        case 'play':
+            // Solo el host puede controlar la reproducción
+            if (room.host.id !== userId) {
+                console.warn('Non-host attempted play:', userId);
+                return;
+            }
+
+            console.log('Broadcasting play event to room:', roomId);
+            broadcastToRoom(roomId, {
+                type: 'play',
+                currentTime: data.currentTime,
+                timestamp: Date.now()
+            }, userId); // IMPORTANTE: excludeUserId para no enviar al host
+            break;
+
+        case 'pause':
+            // Solo el host puede controlar la reproducción
+            if (room.host.id !== userId) {
+                console.warn('Non-host attempted pause:', userId);
+                return;
+            }
+
+            console.log('Broadcasting pause event to room:', roomId);
+            broadcastToRoom(roomId, {
+                type: 'pause',
+                currentTime: data.currentTime,
+                timestamp: Date.now()
+            }, userId); // IMPORTANTE: excludeUserId para no enviar al host
+            break;
+
+        case 'seek':
+            // Solo el host puede controlar la reproducción
+            if (room.host.id !== userId) {
+                console.warn('Non-host attempted seek:', userId);
+                return;
+            }
+
+            console.log('Broadcasting seek event to room:', roomId);
+            broadcastToRoom(roomId, {
+                type: 'seek',
+                currentTime: data.currentTime,
+                timestamp: Date.now()
+            }, userId); // IMPORTANTE: excludeUserId para no enviar al host
+            break;
+
+        case 'request_sync':
+            // Cualquier usuario puede pedir sync
+            const host = clients.get(room.host.id);
+            if (host && host.socket && host.socket.readyState === 1) {
+                host.socket.send(JSON.stringify({
+                    type: 'sync_requested',
+                    requestedBy: userId
+                }));
+            }
+            break;
+
+        case 'request_state':
+            // Enviar estado actual de la sala al usuario que lo solicita
+            const client = clients.get(userId);
+            if (client && client.socket && client.socket.readyState === 1) {
+                const updatedRoom = roomService.getRoom(roomId);
+                if (updatedRoom) {
+                    client.socket.send(JSON.stringify({
+                        type: 'init',
+                        userId,
+                        username: client.username,
+                        isGuest: client.isGuest,
+                        room: {
+                            id: updatedRoom.id,
+                            name: updatedRoom.name,
+                            users: Array.from(updatedRoom.users.values()).map(u => ({
+                                id: u.id,
+                                username: u.username,
+                                avatar: u.avatar,
+                                isHost: u.isHost,
+                                isGuest: u.isGuest
+                            })),
+                            currentVideo: room.currentVideo,
+                            metadata: room.metadata
+                        }
+                    }));
+                }
+            }
+            break;
+
+        default:
+            console.warn('Unknown message type:', data.type);
+            break;
+    }
+}
+
+function broadcastToRoom(roomId: string, message: any, excludeUserId?: string) {
+    const room = roomService.getRoom(roomId);
+    if (!room) return;
+
+    const messageStr = JSON.stringify(message);
+
+    console.log('Broadcasting to room:', roomId, 'message type:', message.type, 'excluding:', excludeUserId);
+
+    let sentCount = 0;
+    room.users.forEach((user) => {
+        if (user.id !== excludeUserId) {
+            const client = clients.get(user.id);
+            if (client && client.socket && client.socket.readyState === 1) {
+                try {
+                    client.socket.send(messageStr);
+                    sentCount++;
+                    console.log('Sent to user:', user.id, user.username);
+                } catch (err) {
+                    console.error('Error sending message to user:', user.id, err);
+                }
+            } else {
+                console.warn('User socket not ready:', user.id, 'readyState:', client?.socket?.readyState);
+            }
+        }
+    });
+
+    console.log(`Broadcast complete: sent to ${sentCount} users`);
+}

desktop/src/scripts/anime/player.js

@@ -16,6 +16,9 @@ const AnimePlayer = (function() {
     let _totalEpisodes = 0;
     let _manualExtensionId = null;
     let _activeSubtitleIndex = -1;
+    let _roomMode = false;
+    let _isRoomHost = false;
+    let _roomWebSocket = null;
 
     let hlsInstance = null;
     let subtitleRenderer = null;
@@ -61,23 +64,30 @@ const AnimePlayer = (function() {
         subtitlesCanvas: null
     };
 
-    function init(animeId, initialSource, isLocal, animeData) {
+    function init(animeId, initialSource, isLocal, animeData, roomMode = false) {
+        _roomMode = roomMode;
         _animeId = animeId;
         _entrySource = initialSource || 'anilist';
         _isLocal = isLocal;
-        _malId = animeData.idMal || null;
         _totalEpisodes = animeData.episodes || 1000;
 
         if (animeData.title) {
-            _animeTitle = animeData.title.romaji || animeData.title.english || animeData.title.native || animeData.title || "Anime";
+            _animeTitle = animeData.title.romaji || animeData.title.english || "Anime";
         }
 
-        _skipIntervals = [];
-        _localEntryId = null;
-
         initElements();
         setupEventListeners();
-        loadExtensionsList();
+
+        // In Room Mode, we show the player immediately and hide extra controls
+        if (_roomMode) {
+            if(els.playerWrapper) {
+                els.playerWrapper.style.display = 'block';
+                els.playerWrapper.classList.add('room-mode');
+            }
+            // Hide extension list loading in room mode
+        } else {
+            loadExtensionsList();
+        }
     }
 
     function initElements() {
@@ -134,8 +144,10 @@ const AnimePlayer = (function() {
 
     function setupEventListeners() {
         // Close player
-        const closeBtn = document.getElementById('close-player-btn');
-        if(closeBtn) closeBtn.addEventListener('click', closePlayer);
+        if(!_roomMode) {
+            const closeBtn = document.getElementById('close-player-btn');
+            if(closeBtn) closeBtn.addEventListener('click', closePlayer);
+        }
 
         // Episode navigation
         if(els.prevBtn) els.prevBtn.onclick = () => playEpisode(_currentEpisode - 1);
@@ -183,18 +195,35 @@ const AnimePlayer = (function() {
         setupKeyboardShortcuts();
     }
 
-    function setupCustomControls() {
-        // Play/Pause
-        if(els.playPauseBtn) {
-            els.playPauseBtn.onclick = togglePlayPause;
-        }
-        if(els.video) {
-            // Remove old listeners to be safe (though usually new element)
-            els.video.onclick = togglePlayPause;
-            els.video.ondblclick = toggleFullscreen;
+    function loadVideoFromRoom(videoData) {
+        console.log('AnimePlayer.loadVideoFromRoom called with:', videoData);
+
+        if (!videoData || !videoData.url) {
+            console.error('Invalid video data provided to loadVideoFromRoom');
+            return;
         }
 
-        // Volume
+        _currentSubtitles = videoData.subtitles || [];
+
+        if (els.loader) els.loader.style.display = 'none';
+
+        initVideoPlayer(videoData.url, videoData.type || 'm3u8', videoData.subtitles || []);
+    }
+
+    function setupCustomControls() {
+        // ELIMINADO: if (_roomMode && !_isRoomHost) return;
+        // Ahora permitimos que el código fluya para habilitar volumen y ajustes a todos
+
+        // 1. Play/Pause (SOLO HOST)
+        if(els.playPauseBtn) {
+            els.playPauseBtn.onclick = togglePlayPause; // La validación de permiso se hará dentro de togglePlayPause
+        }
+        if(els.video) {
+            els.video.onclick = togglePlayPause; // Click en video para pausar
+            els.video.ondblclick = toggleFullscreen; // Doble click siempre permitido
+        }
+
+        // 2. Volume (TODOS)
         if(els.volumeBtn) {
             els.volumeBtn.onclick = toggleMute;
         }
@@ -204,7 +233,7 @@ const AnimePlayer = (function() {
             };
         }
 
-        // Settings
+        // 3. Settings (TODOS - Aquí están los subtítulos y audio)
         if(els.settingsBtn) {
             els.settingsBtn.onclick = (e) => {
                 e.stopPropagation();
@@ -219,7 +248,7 @@ const AnimePlayer = (function() {
             };
         }
 
-        // Close settings when clicking outside
+        // Close settings when clicking outside (TODOS)
         document.onclick = (e) => {
             if (settingsPanelActive && els.settingsPanel &&
                 !els.settingsPanel.contains(e.target) &&
@@ -229,19 +258,19 @@ const AnimePlayer = (function() {
             }
         };
 
-        // Fullscreen
+        // 4. Fullscreen (TODOS)
         if(els.fullscreenBtn) {
             els.fullscreenBtn.onclick = toggleFullscreen;
         }
 
-        // Progress bar
+        // 5. Progress bar (SOLO HOST para buscar, TODOS para ver)
         if(els.progressContainer) {
+            // El listener se añade, pero seekToPosition bloqueará a los invitados
             els.progressContainer.onclick = seekToPosition;
         }
 
-        // Video events
+        // 6. Video events (TODOS - Necesarios para actualizar la UI localmente)
         if(els.video) {
-            // Remove previous listeners first if sticking to same element, but we replace element usually
             els.video.onplay = onPlay;
             els.video.onpause = onPause;
             els.video.ontimeupdate = onTimeUpdate;
@@ -283,9 +312,27 @@ const AnimePlayer = (function() {
         document.addEventListener('keydown', (e) => {
             if (!els.playerWrapper || els.playerWrapper.style.display === 'none') return;
 
-            // Ignore if typing in input
             if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
 
+            // En room mode, solo el host puede usar shortcuts de control
+            if (_roomMode && !_isRoomHost) {
+                // Permitir fullscreen y volumen para todos
+                if (e.key.toLowerCase() === 'f') {
+                    e.preventDefault();
+                    toggleFullscreen();
+                } else if (e.key.toLowerCase() === 'm') {
+                    e.preventDefault();
+                    toggleMute();
+                } else if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    adjustVolume(0.1);
+                } else if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    adjustVolume(-0.1);
+                }
+                return;
+            }
+
             switch(e.key.toLowerCase()) {
                 case ' ':
                 case 'k':
@@ -352,11 +399,23 @@ const AnimePlayer = (function() {
 
     // Control functions
     function togglePlayPause() {
+        if (_roomMode && !_isRoomHost) {
+            console.log('Guests cannot control playback');
+            return;
+        }
+
         if (!els.video) return;
+
         if (els.video.paused) {
             els.video.play().catch(() => {});
+            if (_roomMode && _isRoomHost) {
+                sendRoomEvent('play', { currentTime: els.video.currentTime });
+            }
         } else {
             els.video.pause();
+            if (_roomMode && _isRoomHost) {
+                sendRoomEvent('pause', { currentTime: els.video.currentTime });
+            }
         }
     }
 
@@ -398,9 +457,18 @@ const AnimePlayer = (function() {
 
     function seekToPosition(e) {
         if (!els.video || !els.progressContainer) return;
+        if (_roomMode && !_isRoomHost) return;
+
         const rect = els.progressContainer.getBoundingClientRect();
         const pos = (e.clientX - rect.left) / rect.width;
-        els.video.currentTime = pos * els.video.duration;
+        const newTime = pos * els.video.duration;
+
+        els.video.currentTime = newTime;
+
+        // En room mode, enviar evento de seek
+        if (_roomMode && _isRoomHost) {
+            sendRoomEvent('seek', { currentTime: newTime });
+        }
     }
 
     function updateProgressHandle(e) {
@@ -410,14 +478,30 @@ const AnimePlayer = (function() {
         els.progressHandle.style.left = `${pos * 100}%`;
     }
 
+
     function seekRelative(seconds) {
         if (!els.video) return;
-        els.video.currentTime = Math.max(0, Math.min(els.video.duration, els.video.currentTime + seconds));
-    }
+        if (_roomMode && !_isRoomHost) return;
 
+        const newTime = Math.max(0, Math.min(els.video.duration, els.video.currentTime + seconds));
+        els.video.currentTime = newTime;
+
+        // En room mode, enviar evento de seek
+        if (_roomMode && _isRoomHost) {
+            sendRoomEvent('seek', { currentTime: newTime });
+        }
+    }
     function seekToPercent(percent) {
         if (!els.video) return;
-        els.video.currentTime = els.video.duration * percent;
+        if (_roomMode && !_isRoomHost) return;
+
+        const newTime = els.video.duration * percent;
+        els.video.currentTime = newTime;
+
+        // En room mode, enviar evento de seek
+        if (_roomMode && _isRoomHost) {
+            sendRoomEvent('seek', { currentTime: newTime });
+        }
     }
 
     // Video event handlers
@@ -476,7 +560,7 @@ const AnimePlayer = (function() {
     }
 
     function onEnded() {
-        if (_currentEpisode < _totalEpisodes) {
+        if (!_roomMode && _currentEpisode < _totalEpisodes) {
             playEpisode(_currentEpisode + 1);
         }
     }
@@ -501,6 +585,22 @@ const AnimePlayer = (function() {
         els.volumeBtn.innerHTML = icon;
     }
 
+    function sendRoomEvent(eventType, data = {}) {
+        if (!_roomMode || !_isRoomHost || !_roomWebSocket) return;
+        if (_roomWebSocket.readyState !== WebSocket.OPEN) return;
+
+        console.log('Sending room event:', eventType, data);
+        _roomWebSocket.send(JSON.stringify({
+            type: eventType,
+            ...data
+        }));
+    }
+
+    function setWebSocket(ws) {
+        console.log('Setting WebSocket reference in AnimePlayer');
+        _roomWebSocket = ws;
+    }
+
     function formatTime(seconds) {
         if (!isFinite(seconds) || isNaN(seconds)) return '0:00';
         const h = Math.floor(seconds / 3600);
@@ -563,7 +663,7 @@ const AnimePlayer = (function() {
         }
 
         // 4. Playback Speed
-        if (els.video) {
+        if (els.video && (!_roomMode || _isRoomHost)) {
             const label = els.video.playbackRate === 1 ? 'Normal' : `${els.video.playbackRate}x`;
             html += createMenuItem('speed', 'Playback Speed', label, Icons.speed);
         }
@@ -812,7 +912,7 @@ const AnimePlayer = (function() {
         }
 
         // Update progress for AniList
-        if (!_progressUpdated && els.video.duration) {
+        if (!_roomMode && !_progressUpdated && els.video.duration) {
             const percentage = els.video.currentTime / els.video.duration;
             if (percentage >= 0.8) {
                 updateProgress();
@@ -1183,8 +1283,9 @@ const AnimePlayer = (function() {
     }
 
     function initVideoPlayer(url, type, subtitles = []) {
-        // 1. CLEANUP FIRST: Destroy subtitle renderer while elements still exist
-        // This prevents "removeChild" errors because the DOM is still intact
+        console.log('initVideoPlayer called:', { url, type, subtitles });
+
+        // 1. CLEANUP FIRST
         if (subtitleRenderer) {
             try {
                 subtitleRenderer.dispose();
@@ -1194,16 +1295,18 @@ const AnimePlayer = (function() {
             subtitleRenderer = null;
         }
 
-        // 2. Destroy HLS instance
         if (hlsInstance) {
             hlsInstance.destroy();
             hlsInstance = null;
         }
 
         const container = document.querySelector('.video-frame');
-        if (!container) return;
+        if (!container) {
+            console.error('Video frame container not found!');
+            return;
+        }
 
-        // 3. Remove OLD Elements
+        // 2. Remove OLD Elements
         const oldVideo = container.querySelector('video');
         const oldCanvas = container.querySelector('#subtitles-canvas');
 
@@ -1216,65 +1319,65 @@ const AnimePlayer = (function() {
             oldCanvas.remove();
         }
 
-        // 4. Create NEW Elements
+        // 3. Create NEW Elements - CANVAS FIRST, then VIDEO
+        const newCanvas = document.createElement('canvas');
+        newCanvas.id = 'subtitles-canvas';
+
         const newVideo = document.createElement('video');
         newVideo.id = 'player';
         newVideo.crossOrigin = 'anonymous';
         newVideo.playsInline = true;
 
-        const newCanvas = document.createElement('canvas');
-        newCanvas.id = 'subtitles-canvas';
-        container.appendChild(newCanvas)
+        container.appendChild(newCanvas);
         container.appendChild(newVideo);
 
         els.video = newVideo;
         els.subtitlesCanvas = newCanvas;
 
+        console.log('Video and canvas elements created:', { video: els.video, canvas: els.subtitlesCanvas });
+
+        // Re-setup controls with new video element
         setupCustomControls();
 
-        // 5. Initialize Player (HLS or Native)
+        // Hide loader
+        if (els.loader) els.loader.style.display = 'none';
+
+        // 4. Initialize Player
         if (Hls.isSupported() && type === 'm3u8') {
+            console.log('Initializing HLS player');
+
             hlsInstance = new Hls({
                 enableWorker: true,
                 lowLatencyMode: false,
-                backBufferLength: 90
+                backBufferLength: 90,
+                debug: false
+            });
+
+            hlsInstance.on(Hls.Events.ERROR, (event, data) => {
+                console.error('HLS Error:', data);
+                if (data.fatal) {
+                    if (els.loader) {
+                        els.loader.style.display = 'flex';
+                        if (els.loaderText) els.loaderText.textContent = 'Stream error: ' + (data.details || 'Unknown');
+                    }
+                }
             });
 
             hlsInstance.attachMedia(els.video);
 
             hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
+                console.log('HLS media attached, loading source:', url);
                 hlsInstance.loadSource(url);
             });
 
             hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
+                console.log('HLS manifest parsed, attaching subtitles');
                 attachSubtitles(subtitles);
                 buildSettingsPanel();
-                if (els.downloadBtn) els.downloadBtn.style.display = 'flex';
-                els.video.play().catch(() => {});
-                if (els.loader) els.loader.style.display = 'none';
-            });
 
-            hlsInstance.on(Hls.Events.LEVEL_SWITCHED, () => buildSettingsPanel());
-            hlsInstance.on(Hls.Events.AUDIO_TRACK_SWITCHED, () => buildSettingsPanel());
+                if (els.downloadBtn && !_roomMode) els.downloadBtn.style.display = 'flex';
 
-        } else {
-            els.video.src = url;
-            attachSubtitles(subtitles);
-            buildSettingsPanel();
-            els.video.play().catch(() => {});
-            if(els.loader) els.loader.style.display = 'none';
-            if (els.downloadBtn) els.downloadBtn.style.display = 'flex';
-        }
-
-        // 6. Init Subtitles with explicit delay
-        // We use setTimeout instead of requestAnimationFrame to let the Layout Engine catch up
-        if (type === 'm3u8') {
-            hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
-                attachSubtitles(subtitles);
-                buildSettingsPanel();
-                if (els.downloadBtn) els.downloadBtn.style.display = 'flex';
-
-                // IMPORTANTE: Esperar a loadedmetadata antes de init subtitles
+                // --- FIX: Inicializar el renderizador de subtítulos para HLS ---
                 if (els.video.readyState >= 1) {
                     initSubtitleRenderer();
                 } else {
@@ -1282,23 +1385,34 @@ const AnimePlayer = (function() {
                         initSubtitleRenderer();
                     }, { once: true });
                 }
+                // -------------------------------------------------------------
 
-                els.video.play().catch(() => {});
-                if (els.loader) els.loader.style.display = 'none';
+                console.log('Attempting to play video');
+                els.video.play().catch(err => {
+                    console.error('Play error:', err);
+                });
             });
+
+            hlsInstance.on(Hls.Events.LEVEL_SWITCHED, () => buildSettingsPanel());
+            hlsInstance.on(Hls.Events.AUDIO_TRACK_SWITCHED, () => buildSettingsPanel());
+
         } else {
+            console.log('Using native video player');
             els.video.src = url;
             attachSubtitles(subtitles);
             buildSettingsPanel();
 
-            // Para video directo, esperar metadata
             els.video.addEventListener('loadedmetadata', () => {
+                console.log('Video metadata loaded');
                 initSubtitleRenderer();
             }, { once: true });
 
-            els.video.play().catch(() => {});
-            if(els.loader) els.loader.style.display = 'none';
-            if (els.downloadBtn) els.downloadBtn.style.display = 'flex';
+            console.log('Attempting to play video');
+            els.video.play().catch(err => {
+                console.error('Play error:', err);
+            });
+
+            if (els.downloadBtn && !_roomMode) els.downloadBtn.style.display = 'flex';
         }
     }
 
@@ -1762,12 +1876,19 @@ const AnimePlayer = (function() {
 
     // RPC
     function sendRPC({ startTimestamp, endTimestamp, paused = false } = {}) {
+        let stateText = `Episode ${_currentEpisode}`;
+        let detailsText = _animeTitle;
+
+        if (_roomMode) {
+            stateText = `Watch Party - Ep ${_currentEpisode}`;
+        }
+
         fetch("/api/rpc", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
-                details: _animeTitle,
-                state: `Episode ${_currentEpisode}`,
+                details: detailsText,
+                state: stateText,
                 mode: "watching",
                 startTimestamp,
                 endTimestamp,
@@ -1800,9 +1921,29 @@ const AnimePlayer = (function() {
         }
     }
 
+    function setRoomHost(isHost) {
+        console.log('Setting player host status:', isHost);
+        _isRoomHost = isHost;
+
+        // Re-ejecutar la configuración de controles con el nuevo permiso
+        setupCustomControls();
+
+        // Forzar actualización visual si es necesario
+        if (els.playerWrapper) {
+            if (isHost) els.playerWrapper.classList.add('is-host');
+            else els.playerWrapper.classList.remove('is-host');
+        }
+    }
+
     return {
         init,
         playEpisode,
-        getCurrentEpisode: () => _currentEpisode
+        getCurrentEpisode: () => _currentEpisode,
+        loadVideoFromRoom,
+        getVideoElement: () => els.video,
+        setRoomHost,
+        setWebSocket
     };
-})();
+})();
+
+window.AnimePlayer = AnimePlayer;

desktop/src/scripts/auth-guard.js

@@ -115,4 +115,16 @@ function setupDropdown() {
     })
 }
 
-loadMeUI()
+loadMeUI()
+const createRoomModal = new CreateRoomModal();
+
+const createBtn = document.getElementById('nav-create-party');
+if (createBtn) {
+    createBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        const dropdown = document.getElementById('nav-dropdown');
+        if(dropdown) dropdown.classList.remove('active');
+
+        createRoomModal.open();
+    });
+}

desktop/src/scripts/room-modal.js

@@ -0,0 +1,128 @@
+class CreateRoomModal {
+    constructor() {
+        this.modalId = 'cr-modal-overlay';
+        this.isRendered = false;
+        this.render(); // Crear el HTML en el DOM al instanciar
+    }
+
+    render() {
+        if (document.getElementById(this.modalId)) return;
+
+        const modalHtml = `
+            <div class="cr-modal-overlay" id="${this.modalId}">
+                <div class="cr-modal-content">
+                    <button class="cr-modal-close" id="cr-close">✕</button>
+                    <h2 class="cr-modal-title">Create Watch Party</h2>
+                    
+                    <form id="cr-form">
+                        <div class="cr-form-group">
+                            <label>Room Name</label>
+                            <input type="text" class="cr-input" name="name" placeholder="My Awesome Room" required maxlength="50" />
+                        </div>
+
+                        <div class="cr-form-group">
+                            <label>Password (Optional)</label>
+                            <input type="password" class="cr-input" name="password" placeholder="Leave empty for public" maxlength="50" />
+                        </div>
+
+                        <div class="cr-actions">
+                            <button type="button" class="cr-btn-cancel" id="cr-cancel">Cancel</button>
+                            <button type="submit" class="cr-btn-confirm">Create Room</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        `;
+
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+        this.bindEvents();
+        this.isRendered = true;
+    }
+
+    bindEvents() {
+        const modal = document.getElementById(this.modalId);
+        const closeBtn = document.getElementById('cr-close');
+        const cancelBtn = document.getElementById('cr-cancel');
+        const form = document.getElementById('cr-form');
+
+        const close = () => this.close();
+
+        closeBtn.onclick = close;
+        cancelBtn.onclick = close;
+
+        // Cerrar si clicamos fuera del contenido
+        modal.onclick = (e) => {
+            if (e.target === modal) close();
+        };
+
+        form.onsubmit = (e) => this.handleSubmit(e);
+    }
+
+    open() {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            // Aquí puedes disparar tu modal de login o redirigir
+            alert('You must be logged in to create a room');
+            window.location.href = '/login'; // Opcional
+            return;
+        }
+
+        const modal = document.getElementById(this.modalId);
+        modal.classList.add('show');
+        document.querySelector('#cr-form input[name="name"]').focus();
+    }
+
+    close() {
+        const modal = document.getElementById(this.modalId);
+        modal.classList.remove('show');
+        document.getElementById('cr-form').reset();
+    }
+
+    async handleSubmit(e) {
+        e.preventDefault();
+        const btn = e.target.querySelector('button[type="submit"]');
+        const originalText = btn.textContent;
+
+        btn.disabled = true;
+        btn.textContent = 'Creating...';
+
+        const formData = new FormData(e.target);
+        const name = formData.get('name').trim();
+        const password = formData.get('password').trim();
+        const token = localStorage.getItem('token');
+
+        try {
+            const res = await fetch('/api/rooms', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({
+                    name,
+                    password: password || undefined
+                })
+            });
+
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Failed to create room');
+
+            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}`;
+
+        } catch (err) {
+            alert(err.message);
+        } finally {
+            btn.disabled = false;
+            btn.textContent = originalText;
+        }
+    }
+}
+
+window.CreateRoomModal = CreateRoomModal;

desktop/src/views/views.routes.ts

@@ -130,6 +130,12 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(html);
     });
 
+    fastify.get('/room', (req: FastifyRequest, reply: FastifyReply) => {
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'room.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
+    });
+
     fastify.setNotFoundHandler((req, reply) => {
         const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
         const html = fs.readFileSync(htmlPath, 'utf-8');

desktop/views/anime/animes.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/components/local-library.css">
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <script src="/src/scripts/titlebar.js"></script>
 </head>
@@ -124,6 +125,7 @@
     </a>
 </div>
 <script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/search-manager.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>

desktop/views/books/books.html

@@ -10,9 +10,9 @@
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <script src="/src/scripts/room-modal.js"></script>
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <script src="/src/scripts/titlebar.js"></script>
-    <link rel="stylesheet" href="/views/css/components/local-library.css">
 </head>
 <body>
 <div id="titlebar"> <div class="title-left">
@@ -101,6 +101,7 @@
 </div>
 
 <script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/search-manager.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>

desktop/views/components/navbar.html

@@ -53,6 +53,13 @@
           <span>Profile</span>
         </a>
 
+        <button class="dropdown-item" id="nav-create-party">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+          </svg>
+          <span>Watchparty</span>
+        </button>
+
         <button class="dropdown-item" id="nav-settings">
           <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
             <circle cx="12" cy="12" r="3"/>

desktop/views/css/components/create-room.css

@@ -0,0 +1,291 @@
+/* create-room.css */
+.cr-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001; /* Mayor que el navbar */
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.cr-modal-overlay.show {
+    display: flex;
+    opacity: 1;
+}
+
+.cr-modal-content {
+    background: rgba(20, 20, 20, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    border-radius: 16px;
+    padding: 32px;
+    max-width: 450px;
+    width: 90%;
+    position: relative;
+    transform: scale(0.95);
+    transition: transform 0.2s ease;
+}
+
+.cr-modal-overlay.show .cr-modal-content {
+    transform: scale(1);
+}
+
+.cr-modal-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    padding: 5px;
+    transition: color 0.2s;
+}
+
+.cr-modal-close:hover {
+    color: white;
+}
+
+.cr-modal-title {
+    margin: 0 0 24px 0;
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: white;
+    background: linear-gradient(to right, #fff, #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.cr-form-group {
+    margin-bottom: 20px;
+}
+
+.cr-form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: #e5e7eb;
+    font-size: 0.9rem;
+}
+
+.cr-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.cr-input:focus {
+    border-color: #8b5cf6; /* Tu color primario */
+}
+
+.cr-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 24px;
+}
+
+.cr-btn-cancel {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.cr-btn-confirm {
+    background: #8b5cf6;
+    border: none;
+    color: white;
+    padding: 10px 24px;
+    border-radius: 8px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.cr-btn-confirm:hover {
+    background: #7c3aed;
+}
+
+.cr-btn-confirm:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+/* Add to room.css */
+.modal-header-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.btn-icon-small {
+    background: rgba(255,255,255,0.1);
+    border: none;
+    color: white;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.config-grid {
+    display: flex;
+    gap: 24px;
+}
+
+.config-poster img {
+    width: 140px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+}
+
+.config-form {
+    flex: 1;
+}
+
+.form-select, .form-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 10px 12px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    outline: none;
+    margin-bottom: 5px;
+}
+
+.form-select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.form-row {
+    display: flex;
+    gap: 12px;
+}
+
+.form-group.half {
+    flex: 1;
+}
+
+.full-width {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+@media (max-width: 600px) {
+    .config-grid { flex-direction: column; align-items: center; }
+    .config-poster img { width: 100px; }
+}
+
+.modal-header-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.btn-icon-small {
+    background: rgba(255,255,255,0.1);
+    border: none;
+    color: white;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon-small:hover {
+    background: rgba(255,255,255,0.2);
+}
+
+/* Config Grid Layout */
+.config-grid {
+    display: flex;
+    gap: 24px;
+}
+
+.config-poster img {
+    width: 140px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.config-form {
+    flex: 1;
+}
+
+/* Form Elements */
+.form-select, .form-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 10px 12px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    outline: none;
+    margin-bottom: 5px;
+}
+
+.form-select:focus, .form-input:focus {
+    border-color: var(--brand-color);
+}
+
+.form-select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Form Select specific for dark mode options */
+.form-select option {
+    background: #1a1a1a;
+    color: white;
+}
+
+.form-row {
+    display: flex;
+    gap: 12px;
+}
+
+.form-group.half {
+    flex: 1;
+}
+
+.full-width {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 600px) {
+    .config-grid { flex-direction: column; align-items: center; }
+    .config-poster img { width: 100px; }
+    .form-row { flex-direction: column; gap: 0; }
+}

desktop/views/css/components/titlebar.css

@@ -198,3 +198,13 @@ body {
 .hidden {
     display: none;
 }
+
+html.electron #room-view {
+    height: calc(100vh - var(--titlebar-height));
+    margin-top: var(--titlebar-height);
+    overflow: hidden;
+}
+
+html.electron #room-view .room-layout {
+    height: 100%;
+}

desktop/views/css/room.css

@@ -0,0 +1,900 @@
+/* =========================================
+   1. VARIABLES & UTILITIES
+   ========================================= */
+:root {
+    --brand-color: #8b5cf6;
+    --brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
+    --glass-bg: rgba(20, 20, 20, 0.6);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-blur: blur(12px);
+    --text-main: #ffffff;
+    --text-muted: rgba(255, 255, 255, 0.6);
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.spinner {
+    width: 24px;
+    height: 24px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
+    border-top-color: var(--brand-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* =========================================
+   2. UI COMPONENTS (Buttons, Inputs, Chips)
+   ========================================= */
+
+/* Glass Buttons & Icons */
+.btn-icon-glass, .btn-icon-small, .modal-close {
+    appearance: none;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    color: #eee;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon-glass { width: 36px; height: 36px; backdrop-filter: blur(8px); }
+.btn-icon-small { padding: 6px; }
+.modal-close { width: 32px; height: 32px; position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.1); }
+
+.btn-icon-glass:hover, .btn-icon-small:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-1px);
+    color: white;
+}
+.modal-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }
+
+.btn-glass-primary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(139, 92, 246, 0.25);
+    border: 1px solid rgba(139, 92, 246, 0.4);
+    color: white;
+    padding: 0 16px;
+    height: 36px;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+    transition: all 0.2s;
+}
+
+.btn-glass-primary:hover {
+    background: rgba(139, 92, 246, 0.4);
+    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
+    transform: translateY(-1px);
+}
+
+/* Primary/Confirm Buttons */
+.btn-confirm, .btn-primary {
+    background: var(--brand-color);
+    border: none;
+    color: white;
+    padding: 10px 24px;
+    border-radius: 10px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.btn-confirm:hover, .btn-primary:hover {
+    background: #7c3aed;
+    transform: translateY(-2px);
+}
+.btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.btn-confirm.full-width { width: 100%; }
+
+.btn-cancel {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+.btn-cancel:hover { background: rgba(255, 255, 255, 0.1); color: white; }
+
+/* Inputs & Selects */
+input[type="text"], input[type="password"], input[type="number"], .form-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+input:focus, .form-input:focus {
+    border-color: var(--brand-color);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* Glass Select (Header Style - FIX: Better alignment) */
+.glass-select-sm {
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #eee;
+    padding: 0 32px 0 12px; /* Extra padding right for arrow */
+    height: 32px;
+    line-height: 30px; /* Vertically center text */
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    outline: none;
+    transition: all 0.2s;
+    max-width: 140px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    /* SVG Arrow */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 14px;
+}
+
+.glass-select-sm:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255,255,255,0.3);
+    color: #fff;
+}
+.glass-select-sm option { background: #1a1a1a; color: #e0e0e0; }
+
+/* Chips (Config Modal) */
+.chips-grid { display: flex; flex-wrap: wrap; gap: 10px; }
+.chip {
+    padding: 8px 16px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    color: #ccc;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    user-select: none;
+}
+.chip:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
+.chip.active {
+    background: var(--brand-color);
+    border-color: var(--brand-color);
+    color: white;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+}
+.chip.disabled { opacity: 0.5; pointer-events: none; filter: grayscale(1); }
+
+/* =========================================
+   3. ROOM LAYOUT (The Watch Page)
+   ========================================= */
+.room-layout {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    height: 100vh;
+    overflow: hidden;
+    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.room-layout.chat-hidden {
+    grid-template-columns: 1fr 0px !important;
+}
+
+.video-area {
+    display: flex;
+    flex-direction: column;
+    background: #000;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Responsive Layout */
+@media (max-width: 1200px) {
+    .room-layout {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr auto;
+    }
+    .room-layout.chat-hidden {
+        grid-template-rows: 1fr 0px;
+    }
+    .chat-sidebar {
+        height: 350px;
+        border-left: none;
+        border-top: 1px solid var(--glass-border);
+    }
+}
+
+/* =========================================
+   4. ROOM HEADER
+   ========================================= */
+.room-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 24px;
+    background: rgba(10, 10, 10, 0.85);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+    height: 64px;
+    z-index: 20;
+    flex-shrink: 0;
+}
+
+.header-left, .header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1;
+}
+.header-right { justify-content: flex-end; }
+
+/* Info Section */
+.room-info { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
+#room-name {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+    color: white;
+    letter-spacing: -0.01em;
+}
+.np-fade { display: flex; align-items: center; opacity: 0.7; font-size: 0.8rem; gap: 6px; margin-top: 2px; }
+.np-title { color: #ccc; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.np-sep { color: #555; }
+.np-badge {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: 700;
+}
+
+/* Host Controls (Center) - FIX: Better alignment container */
+.header-center { flex: 2; display: flex; justify-content: center; z-index: 50; }
+
+.quick-controls-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(20, 20, 20, 0.6);
+    backdrop-filter: blur(12px);
+    padding: 4px 8px; /* Slightly tighter padding */
+    border-radius: 10px;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    transition: all 0.2s ease;
+    height: 42px; /* Explicit height to align children */
+}
+.quick-controls-group:hover { border-color: rgba(255,255,255,0.15); background: rgba(30, 30, 30, 0.7); }
+
+/* Toggle Sub/Dub Mini */
+.sd-toggle.small {
+    height: 32px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 8px;
+    padding: 2px;
+    display: flex;
+    position: relative;
+    cursor: pointer;
+    min-width: 80px;
+    box-sizing: border-box;
+}
+.sd-toggle.small .sd-bg {
+    position: absolute;
+    top: 2px; left: 2px;
+    width: calc(50% - 2px); height: calc(100% - 4px);
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
+.sd-toggle.small .sd-option {
+    flex: 1;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: rgba(255,255,255,0.4);
+    transition: color 0.2s;
+    user-select: none;
+}
+.sd-toggle.small .sd-option.active { color: #fff; }
+
+/* Viewers Pill */
+.viewers-pill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(0,0,0,0.3);
+    padding: 0 10px;
+    border-radius: 20px;
+    border: 1px solid rgba(255,255,255,0.05);
+    font-size: 0.8rem;
+    color: #aaa;
+    height: 32px;
+}
+
+/* =========================================
+   5. VIDEO PLAYER AREA
+   ========================================= */
+.player-wrapper {
+    display: flex !important;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    height: auto !important;
+    min-height: 0;
+    position: relative !important;
+    z-index: 1 !important;
+    background: transparent !important;
+    overflow: hidden;
+}
+
+.player-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.video-frame {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    background: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#player {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+}
+
+/* Custom Controls Layout Fixes */
+.custom-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 60;
+    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
+    padding: 20px 10px 10px;
+}
+
+/* FIX: Ensure left controls stay in one line (time display fix) */
+.controls-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.time-display {
+    white-space: nowrap; /* Prevent line break */
+    font-variant-numeric: tabular-nums; /* Monospaced numbers prevent jitter */
+    font-size: 0.9rem;
+    color: #ddd;
+    min-width: fit-content;
+}
+
+/* Subtitles Canvas */
+#subtitles-canvas {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    pointer-events: none;
+    z-index: 10;
+}
+
+/* Hide unused player buttons in Room Mode */
+#download-btn,
+#manual-match-btn,
+#server-select,
+#extension-select,
+#sd-toggle,
+.side-nav-btn {
+    display: none !important;
+}
+
+/* Settings Panel Position Fix */
+.settings-panel {
+    position: absolute;
+    bottom: 70px;
+    right: 20px;
+    z-index: 1000;
+    max-height: 60vh;
+    overflow-y: auto;
+    background: rgba(15, 15, 15, 0.95);
+    border: 1px solid var(--glass-border);
+    border-radius: 8px;
+}
+
+/* =========================================
+   6. CHAT SIDEBAR
+   ========================================= */
+.chat-sidebar {
+    display: flex;
+    flex-direction: column;
+    background: rgba(15, 15, 15, 0.95);
+    border-left: 1px solid var(--glass-border);
+    height: 100%;
+}
+.room-layout.chat-hidden .chat-sidebar {
+    opacity: 0;
+    pointer-events: none;
+    border-left: none;
+}
+
+.chat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--glass-border);
+}
+.chat-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: white; }
+
+/* User List */
+.users-list {
+    padding: 12px;
+    border-bottom: 1px solid var(--glass-border);
+    max-height: 200px;
+    overflow-y: auto;
+    background: rgba(0,0,0,0.2);
+}
+.user-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    margin-bottom: 4px;
+}
+.user-item:hover { background: rgba(255, 255, 255, 0.05); }
+.user-avatar {
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    background: var(--brand-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: white;
+    font-size: 0.8rem;
+}
+.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
+.user-name { flex: 1; font-size: 0.9rem; color: white; }
+.user-badge {
+    font-size: 0.7rem;
+    background: var(--brand-color);
+    color: white;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: 600;
+}
+
+/* Messages */
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.chat-message { display: flex; gap: 10px; }
+.chat-message.system { justify-content: center; margin: 8px 0; }
+.chat-message.system .message-content {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    text-align: center;
+    padding: 4px 12px;
+    border-radius: 12px;
+}
+.message-avatar {
+    width: 36px; height: 36px;
+    border-radius: 50%;
+    background: var(--brand-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: white;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+}
+.message-body { flex: 1; min-width: 0; }
+.message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+.message-username { font-weight: 600; color: white; font-size: 0.9rem; }
+.message-time { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
+.message-content {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.95rem;
+    line-height: 1.4;
+    word-wrap: break-word;
+}
+
+/* Input Area */
+.chat-input {
+    display: flex;
+    gap: 8px;
+    padding: 16px;
+    border-top: 1px solid var(--glass-border);
+}
+.chat-input input {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--glass-border);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 10px;
+    outline: none;
+}
+.chat-input button {
+    background: var(--brand-color);
+    border: none;
+    color: white;
+    padding: 0 16px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.chat-input button:hover { background: #7c3aed; }
+
+/* =========================================
+   7. MODALS & CONFIGURATION
+   ========================================= */
+.modal-overlay {
+    position: fixed; inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.modal-overlay.show { display: flex; opacity: 1; }
+
+.modal-content {
+    background: rgba(20, 20, 20, 0.95);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 32px;
+    max-width: 500px;
+    width: 90%;
+    position: relative;
+    transform: scale(0.9);
+    transition: transform 0.3s ease;
+}
+.modal-overlay.show .modal-content { transform: scale(1); }
+.modal-title { margin: 0 0 24px 0; font-size: 1.5rem; font-weight: 800; color: white; }
+.modal-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
+.modal-header-row .modal-title { margin: 0; }
+
+/* Forms inside modal */
+.form-group { margin-bottom: 20px; }
+.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: white; }
+.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
+
+/* Search Step */
+.anime-search-content { max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; }
+.search-bar { display: flex; gap: 12px; margin-bottom: 20px; }
+.search-bar button {
+    background: var(--brand-color);
+    border: none; color: white; padding: 12px 24px;
+    border-radius: 10px; font-weight: 700; cursor: pointer;
+}
+.anime-results {
+    flex: 1; overflow-y: auto;
+    display: flex; flex-direction: column; gap: 12px;
+    min-height: 300px;
+}
+.anime-result-item, .search-item {
+    display: flex; gap: 16px; padding: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    cursor: pointer; text-decoration: none; color: inherit;
+    transition: all 0.2s;
+}
+.anime-result-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--brand-color);
+    transform: translateX(4px);
+}
+.search-poster { width: 60px; height: 85px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
+.search-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
+.search-title { font-weight: 700; color: white; margin-bottom: 4px; font-size: 1rem; }
+.search-meta { font-size: 0.85rem; color: var(--text-muted); }
+
+/* Config Step (Unified UI) */
+.config-layout { display: flex; gap: 24px; margin-top: 20px; }
+.config-sidebar { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.config-cover {
+    width: 100%; aspect-ratio: 2/3; object-fit: cover;
+    border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
+    border: 1px solid var(--glass-border);
+}
+.config-main { flex: 1; display: flex; flex-direction: column; gap: 20px; }
+.cfg-section-title {
+    font-size: 0.85rem; text-transform: uppercase;
+    letter-spacing: 1px; color: rgba(255,255,255,0.5);
+    margin-bottom: 8px; font-weight: 700;
+}
+
+/* Episode Stepper */
+.ep-control {
+    display: flex; align-items: center;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid var(--glass-border);
+    border-radius: 10px; padding: 4px; width: 100%;
+}
+.ep-btn {
+    width: 36px; height: 36px;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(255,255,255,0.1);
+    border: none; color: white; border-radius: 8px;
+    cursor: pointer; transition: 0.2s;
+}
+.ep-btn:hover { background: rgba(255,255,255,0.2); }
+.ep-input {
+    flex: 1; background: transparent; border: none;
+    color: white; text-align: center; font-size: 1.1rem;
+    font-weight: 700; outline: none;
+}
+
+/* Category Toggle */
+.cat-toggle {
+    display: flex; background: rgba(0,0,0,0.3);
+    padding: 4px; border-radius: 10px; width: fit-content;
+}
+.cat-opt {
+    padding: 6px 16px; border-radius: 8px;
+    font-size: 0.85rem; color: #888;
+    cursor: pointer; transition: all 0.2s; font-weight: 600;
+}
+.cat-opt.active { background: rgba(255,255,255,0.15); color: white; }
+.cat-opt.disabled { opacity: 0.3; pointer-events: none; text-decoration: line-through; }
+
+.grid-loader {
+    width: 100%; padding: 20px; text-align: center;
+    color: var(--text-muted); font-size: 0.9rem;
+}
+
+@media (max-width: 600px) {
+    .config-layout { flex-direction: column; }
+    .config-sidebar { width: 100%; flex-direction: row; }
+    .config-cover { width: 80px; }
+    .ep-control { width: auto; flex: 1; }
+}
+
+/* =========================================
+   8. ROOM LIST / LOBBY (If used externally)
+   ========================================= */
+.container { max-width: 1400px; margin: 0 auto; padding: 80px 40px 40px; }
+.header h1 {
+    font-size: 2.5rem; font-weight: 800;
+    background: var(--brand-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.rooms-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 24px;
+}
+.room-card {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px; padding: 24px;
+    backdrop-filter: var(--glass-blur);
+    cursor: pointer; transition: all 0.3s;
+}
+.room-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--brand-color);
+    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
+}
+.room-card-title { font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 4px; }
+.room-card-host { font-size: 0.85rem; color: var(--text-muted); }
+.room-card-footer {
+    display: flex; justify-content: space-between;
+    align-items: center; padding-top: 16px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 16px;
+}
+
+.join-host-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 24px;
+    animation: fadeIn 0.5s ease;
+}
+
+.join-avatar-container {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    padding: 3px;
+    background: var(--brand-gradient);
+    margin-bottom: 12px;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
+}
+
+.join-avatar-container img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid #1a1a1a; /* Borde oscuro para separar del gradiente */
+    background: #2a2a2a;
+}
+
+.join-text {
+    font-size: 1.1rem;
+    color: white;
+    font-weight: 500;
+    text-align: center;
+    margin: 0;
+}
+
+.join-text span {
+    font-weight: 700;
+    color: #a78bfa;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.video-toast-container {
+    position: absolute;
+    bottom: 100px; /* Encima de la barra de controles */
+    left: 20px;
+    z-index: 80; /* Por encima del video, debajo de los controles */
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    pointer-events: none; /* Permitir clicks a través de ellos */
+    max-width: 400px;
+}
+
+.video-toast {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(15, 15, 15, 0.85);
+    backdrop-filter: blur(8px);
+    padding: 8px 12px;
+    border-radius: 8px;
+    border-left: 3px solid var(--brand-color);
+    color: white;
+    font-size: 0.9rem;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+
+    /* Animación de entrada y salida */
+    animation: toastSlideIn 0.3s ease forwards, toastFadeOut 0.5s ease 4.5s forwards;
+    pointer-events: auto; /* Permitir seleccionar texto si se quiere */
+    opacity: 0;
+}
+
+.toast-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+}
+
+.toast-content {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.2;
+}
+
+.toast-user {
+    font-weight: 700;
+    font-size: 0.8rem;
+    color: #a78bfa;
+}
+
+.toast-msg {
+    color: #eee;
+    margin-top: 2px;
+}
+
+/* --- BADGE DE NOTIFICACIÓN (Punto Rojo) --- */
+#toggle-chat-btn {
+    position: relative;
+}
+
+#toggle-chat-btn.has-unread::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 10px;
+    height: 10px;
+    background-color: #ef4444; /* Rojo */
+    border: 2px solid #1a1a1a;
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+
+@keyframes toastSlideIn {
+    from { opacity: 0; transform: translateX(-20px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes toastFadeOut {
+    from { opacity: 1; transform: translateY(0); }
+    to { opacity: 0; transform: translateY(-10px); visibility: hidden; }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
+    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+}
+
+.video-toast.system-toast {
+    border-left-color: #9ca3af; /* Borde gris */
+    background: rgba(20, 20, 20, 0.7); /* Un poco más transparente */
+    justify-content: center;
+    padding: 6px 12px;
+    min-height: auto; /* Más compacto */
+}
+
+.video-toast.system-toast .toast-msg {
+    font-size: 0.85rem;
+    font-style: italic;
+    color: rgba(255, 255, 255, 0.8);
+    margin: 0;
+}

desktop/views/gallery/gallery.html

@@ -10,7 +10,7 @@
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
-
+    <script src="/src/scripts/room-modal.js"></script>
     <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
     <script src="/src/scripts/titlebar.js"></script>
@@ -66,6 +66,7 @@
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/gallery/gallery.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>

desktop/views/gallery/image.html

@@ -12,6 +12,7 @@
   <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+  <script src="/src/scripts/room-modal.js"></script>
   <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
@@ -56,6 +57,7 @@
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/gallery/image.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>

desktop/views/marketplace.html

@@ -10,6 +10,8 @@
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
+    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
 <div id="titlebar">
@@ -66,9 +68,9 @@
 </main>
 
 <script src="/src/scripts/utils/notification-utils.js"></script>
+<link rel="stylesheet" href="/views/css/components/create-room.css"/>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/marketplace.js"></script>
-<script src="/src/scripts/titlebar.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/settings.js"></script>

desktop/views/profile.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/views/css/profile.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
@@ -227,6 +228,7 @@
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/utils/auth-utils.js"></script>

desktop/views/room.html

@@ -0,0 +1,267 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
+    <title>Watch Party - WaifuBoard</title>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <script type="module">
+        import JASSUB from 'https://cdn.jsdelivr.net/npm/jassub@1.8.8/dist/jassub.es.js';
+        window.JASSUB = JASSUB;
+    </script>
+    <link rel="stylesheet" href="/views/css/globals.css" />
+    <link rel="stylesheet" href="/views/css/anime/player.css" />
+    <link rel="stylesheet" href="/views/css/room.css" />
+    <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <script src="/src/scripts/titlebar.js"></script>
+</head>
+<body>
+<div id="titlebar">
+    <div class="title-left">
+        <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
+        <span class="app-title">WaifuBoard</span>
+    </div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
+<div id="room-view">
+    <div class="room-layout" id="room-layout">
+        <div class="video-area">
+            <div class="room-header">
+                <div class="header-left">
+                    <button id="leave-room-btn" class="btn-icon-glass" title="Leave">
+                        <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">
+                            <span id="np-title" class="np-title">Waiting selection...</span>
+                            <span class="np-sep">•</span>
+                            <span id="np-episode" class="np-badge">Episode --</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="header-center" id="host-controls" style="display: none;">
+                    <div class="quick-controls-group">
+                        <div class="sd-toggle small" id="room-sd-toggle" data-state="sub">
+                            <div class="sd-bg"></div>
+                            <div class="sd-option active" data-val="sub">Sub</div>
+                            <div class="sd-option" data-val="dub">Dub</div>
+                        </div>
+
+                        <select id="room-ext-select" class="glass-select-sm" title="Extension">
+                            <option value="" disabled selected>Ext</option>
+                        </select>
+
+                        <select id="room-server-select" class="glass-select-sm" title="Server">
+                            <option value="" disabled selected>Server</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="header-right">
+                    <div class="viewers-pill">
+                        <svg width="14" height="14" 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><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                        <span id="room-viewers">0</span>
+                    </div>
+
+                    <button id="select-anime-btn" class="btn-glass-primary" style="display: none;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                        <span>Change Anime</span>
+                    </button>
+
+                    <button id="toggle-chat-btn" class="btn-icon-glass" title="Toggle Chat">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
+                    </button>
+                </div>
+            </div>
+
+            <div class="player-wrapper">
+                <div class="player-container show-cursor">
+                    <div class="video-frame">
+                        <canvas id="subtitles-canvas"></canvas>
+                        <div id="video-toast-container" class="video-toast-container"></div>
+                        <video id="player" crossorigin="anonymous" playsinline></video>
+
+                        <div id="player-loading" class="player-loading-overlay">
+                            <div class="spinner"></div>
+                            <p id="player-loading-text">Waiting for host...</p>
+                        </div>
+                    </div>
+
+                    <div class="custom-controls">
+                        <div class="progress-container">
+                            <div class="progress-buffer"></div>
+                            <div class="progress-played"></div>
+                            <div class="progress-handle"></div>
+                        </div>
+
+                        <div class="controls-row">
+                            <div class="controls-left">
+                                <button class="control-btn play-pause" id="play-pause-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                                </button>
+                                <button class="control-btn volume" id="volume-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>
+                                </button>
+                                <input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
+                                <span class="time-display" id="time-display">0:00 / 0:00</span>
+                            </div>
+
+                            <div class="controls-center"></div>
+
+                            <div class="controls-right">
+                                <button class="control-btn settings" id="settings-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
+                                </button>
+                                <div class="settings-panel" id="settings-panel"></div>
+                                <button class="control-btn fullscreen" id="fullscreen-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </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>
+
+            <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>
+    </div>
+</div>
+
+<div class="modal-overlay" id="join-room-modal">
+    <div class="modal-content">
+        <div id="join-host-info" class="join-host-info" style="display: none;">
+            <div class="join-avatar-container">
+                <img id="join-host-avatar" src="" alt="Host">
+            </div>
+            <p id="join-host-text" class="join-text"></p>
+        </div>
+
+        <h2 class="modal-title" style="text-align: center;">Join Room</h2>
+
+        <form id="join-room-form">
+            <div class="form-group">
+                <label>Your Name</label>
+                <input type="text" id="guest-name-input" placeholder="Enter your name" maxlength="30" />
+            </div>
+
+            <div class="form-group" id="password-group" style="display: none;">
+                <label>Room Password</label>
+                <input type="password" id="join-password-input" placeholder="Enter password" maxlength="50" />
+            </div>
+
+            <div class="form-actions" style="justify-content: center;">
+                <button type="button" class="btn-cancel" id="cancel-join-btn">Go Back</button>
+                <button type="submit" class="btn-confirm">Join Party</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div class="modal-overlay" id="anime-search-modal">
+    <div class="modal-content anime-search-content">
+        <button class="modal-close" id="close-search-modal">✕</button>
+
+        <div id="step-search">
+            <h2 class="modal-title">Select Anime</h2>
+            <div class="search-bar">
+                <input type="text" id="anime-search-input" placeholder="Search anime..." />
+                <button id="anime-search-btn">Search</button>
+            </div>
+            <div id="anime-results" class="anime-results"></div>
+        </div>
+
+        <div id="step-config" style="display: none;">
+            <div class="modal-header-row">
+                <button class="btn-icon-small" id="back-to-search" title="Back">
+                    <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>
+                <h2 class="modal-title" id="selected-anime-title">Configure Stream</h2>
+            </div>
+
+            <div class="config-layout">
+                <div class="config-sidebar">
+                    <img id="config-cover" class="config-cover" src="" alt="Cover">
+
+                    <div style="width: 100%">
+                        <div class="cfg-section-title">Episode</div>
+                        <div class="ep-control">
+                            <button class="ep-btn" id="ep-dec">−</button>
+                            <input type="number" id="inp-episode" class="ep-input" value="1" min="1">
+                            <button class="ep-btn" id="ep-inc">+</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="config-main">
+                    <div style="display:flex; justify-content:space-between; align-items:end; gap:10px; flex-wrap:wrap;">
+                        <div>
+                            <div class="cfg-section-title">Source</div>
+                            <div class="chips-grid" id="ext-chips-container">
+                            </div>
+                        </div>
+
+                        <div>
+                            <div class="cfg-section-title">Audio</div>
+                            <div class="cat-toggle" id="modal-sd-toggle">
+                                <div class="cat-opt active" data-val="sub">Subtitles</div>
+                                <div class="cat-opt" data-val="dub">Dubbed</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div>
+                        <div class="cfg-section-title">Select Server</div>
+                        <div class="chips-grid" id="server-chips-container">
+                            <div class="grid-loader">Select a source first</div>
+                        </div>
+                    </div>
+
+                    <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>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                            Play in Room
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/utils/search-manager.js"></script>
+<script src="/src/scripts/anime/subtitle-renderer.js"></script>
+<script src="/src/scripts/anime/player.js"></script>
+<script src="/src/scripts/room.js"></script>
+
+</body>
+</html>

desktop/views/schedule.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="/views/css/components/navbar.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
@@ -89,6 +90,7 @@
     </div>
 
     <script src="/src/scripts/updateNotifier.js"></script>
+    <script src="/src/scripts/room-modal.js"></script>
     <script src="/src/scripts/schedule/schedule.js"></script>
     <script src="/src/scripts/rpc-inapp.js"></script>
     <script src="/src/scripts/auth-guard.js"></script>

docker/package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@fastify/static": "^8.3.0",
+        "@fastify/websocket": "^11.2.0",
         "adm-zip": "^0.5.16",
         "bcrypt": "^6.0.0",
         "bindings": "^1.5.0",
@@ -22,13 +23,15 @@
         "node-addon-api": "^8.5.0",
         "node-cron": "^4.2.1",
         "playwright-chromium": "^1.57.0",
-        "sqlite3": "^5.1.7"
+        "sqlite3": "^5.1.7",
+        "ws": "^8.18.3"
       },
       "devDependencies": {
         "@types/adm-zip": "^0.5.7",
         "@types/bcrypt": "^6.0.0",
         "@types/jsonwebtoken": "^9.0.10",
         "@types/node": "^24.0.0",
+        "@types/ws": "^8.18.1",
         "node-gyp": "^12.1.0",
         "ts-node": "^10.9.0",
         "typescript": "^5.3.0"
@@ -221,6 +224,27 @@
         "glob": "^11.0.0"
       }
     },
+    "node_modules/@fastify/websocket": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@fastify/websocket/-/websocket-11.2.0.tgz",
+      "integrity": "sha512-3HrDPbAG1CzUCqnslgJxppvzaAZffieOVbLp1DAy1huCSynUWPifSvfdEDUR8HlJLp3sp1A36uOM2tJogADS8w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "duplexify": "^4.1.3",
+        "fastify-plugin": "^5.0.0",
+        "ws": "^8.16.0"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -453,6 +477,16 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/abbrev": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-4.0.0.tgz",
@@ -1161,6 +1195,18 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/duplexify": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.3.tgz",
+      "integrity": "sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -4027,6 +4073,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stream-shift": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
+      "integrity": "sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==",
+      "license": "MIT"
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -4558,6 +4610,27 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xml2js": {
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",

docker/package.json

@@ -13,6 +13,7 @@
   "type": "commonjs",
   "dependencies": {
     "@fastify/static": "^8.3.0",
+    "@fastify/websocket": "^11.2.0",
     "adm-zip": "^0.5.16",
     "bcrypt": "^6.0.0",
     "bindings": "^1.5.0",
@@ -25,13 +26,15 @@
     "node-addon-api": "^8.5.0",
     "node-cron": "^4.2.1",
     "playwright-chromium": "^1.57.0",
-    "sqlite3": "^5.1.7"
+    "sqlite3": "^5.1.7",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",
     "@types/bcrypt": "^6.0.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.0.0",
+    "@types/ws": "^8.18.1",
     "node-gyp": "^12.1.0",
     "ts-node": "^10.9.0",
     "typescript": "^5.3.0"

docker/server.js

@@ -26,6 +26,8 @@ const listRoutes = require("./dist/api/list/list.routes");
 const anilistRoute = require("./dist/api/anilist/anilist");
 const localRoutes = require("./dist/api/local/local.routes");
 const configRoutes = require("./dist/api/config/config.routes");
+const roomRoutes = require("./dist/api/rooms/rooms.routes");
+const { setupRoomWebSocket } = require("./dist/api/rooms/rooms.websocket");
 
 fastify.addHook("preHandler", async (request) => {
   const auth = request.headers.authorization;
@@ -68,17 +70,20 @@ fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });
 fastify.register(localRoutes, { prefix: "/api" });
 fastify.register(configRoutes, { prefix: "/api" });
+fastify.register(roomRoutes, { prefix: "/api" });
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 
 const start = async () => {
   try {
+    await fastify.register(require('@fastify/websocket'));
     ensureConfigFile()
     initDatabase("anilist");
     initDatabase("favorites");
     initDatabase("cache");
     initDatabase("userdata");
     initDatabase("local_library");
+    setupRoomWebSocket(fastify);
 
     const refreshAll = async () => {
       await refreshTrendingAnime();

docker/src/api/rooms/rooms.controller.ts

@@ -0,0 +1,141 @@
+import { FastifyReply, FastifyRequest } from 'fastify';
+import * as roomService from './rooms.service';
+import { getUserById } from '../user/user.service';
+
+interface CreateRoomBody {
+    name: string;
+    password?: string;
+}
+
+interface JoinRoomBody {
+    password?: string;
+    guestName?: string;
+}
+
+export async function createRoom(req: any, reply: FastifyReply) {
+    try {
+        const { name, password } = req.body as CreateRoomBody;
+        const userId = req.user?.id;
+
+        if (!userId) {
+            return reply.code(401).send({ error: "Authentication required to create room" });
+        }
+
+        if (!name || name.trim().length === 0) {
+            return reply.code(400).send({ error: "Room name is required" });
+        }
+
+        const user = await getUserById(userId);
+        if (!user) {
+            return reply.code(404).send({ error: "User not found" });
+        }
+
+        const host = {
+            id: `user_${userId}`,
+            username: user.username,
+            avatar: user.profile_picture_url || undefined,
+            isHost: true,
+            isGuest: false,
+            userId
+        };
+
+        const room = roomService.createRoom(name, host, password);
+
+        return reply.send({
+            success: true,
+            room: {
+                id: room.id,
+                name: room.name,
+                hasPassword: !!room.password,
+                userCount: room.users.size
+            }
+        });
+    } catch (err) {
+        console.error("Create Room Error:", err);
+        return reply.code(500).send({ error: "Failed to create room" });
+    }
+}
+
+export async function getRooms(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const rooms = roomService.getAllRooms();
+
+        const roomList = rooms.map((room) => ({
+            id: room.id,
+            name: room.name,
+            host: room.host.username,
+            userCount: room.users.size,
+            hasPassword: !!room.password,
+            currentlyWatching: room.currentVideo ? {
+                animeId: room.currentVideo.animeId,
+                episode: room.currentVideo.episode
+            } : null
+        }));
+
+        return reply.send({ rooms: roomList });
+    } catch (err) {
+        console.error("Get Rooms Error:", err);
+        return reply.code(500).send({ error: "Failed to retrieve rooms" });
+    }
+}
+
+export async function getRoom(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const { id } = req.params as { id: string };
+        const room = roomService.getRoom(id);
+
+        if (!room) {
+            return reply.code(404).send({ error: "Room not found" });
+        }
+
+        return reply.send({
+            room: {
+                id: room.id,
+                name: room.name,
+                host: {
+                    username: room.host.username,
+                    avatar: room.host.avatar
+                },
+                users: Array.from(room.users.values()).map(u => ({
+                    id: u.id,
+                    username: u.username,
+                    avatar: u.avatar,
+                    isHost: u.isHost,
+                    isGuest: u.isGuest
+                })),
+                hasPassword: !!room.password,
+                currentVideo: room.currentVideo
+            }
+        });
+    } catch (err) {
+        console.error("Get Room Error:", err);
+        return reply.code(500).send({ error: "Failed to retrieve room" });
+    }
+}
+
+export async function deleteRoom(req: any, reply: FastifyReply) {
+    try {
+        const { id } = req.params as { id: string };
+        const userId = req.user?.id;
+
+        if (!userId) {
+            return reply.code(401).send({ error: "Authentication required" });
+        }
+
+        const room = roomService.getRoom(id);
+        if (!room) {
+            return reply.code(404).send({ error: "Room not found" });
+        }
+
+        if (room.host.userId !== userId) {
+            return reply.code(403).send({ error: "Only the host can delete the room" });
+        }
+
+        roomService.deleteRoom(id);
+
+        return reply.send({ success: true });
+    } catch (err) {
+        console.error("Delete Room Error:", err);
+        return reply.code(500).send({ error: "Failed to delete room" });
+    }
+}

docker/src/api/rooms/rooms.routes.ts

@@ -0,0 +1,11 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './rooms.controller';
+
+async function roomRoutes(fastify: FastifyInstance) {
+    fastify.post('/rooms', controller.createRoom);
+    fastify.get('/rooms', controller.getRooms);
+    fastify.get('/rooms/:id', controller.getRoom);
+    fastify.delete('/rooms/:id', controller.deleteRoom);
+}
+
+export default roomRoutes;

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

@@ -0,0 +1,130 @@
+import crypto from 'crypto';
+
+interface RoomUser {
+    id: string;
+    username: string;
+    avatar?: string;
+    isHost: boolean;
+    isGuest: boolean;
+    userId?: number; // ID real del usuario si está logueado
+}
+
+interface RoomMetadata {
+    id: string;
+    title: string;
+    episode: number;
+    image?: string;
+    source?: string;
+}
+
+interface RoomData {
+    id: string;
+    name: string;
+    host: RoomUser;
+    users: Map<string, RoomUser>;
+    createdAt: number;
+    currentVideo: {
+        animeId?: number;
+        episode?: number;
+        source?: string;
+        videoData?: any;
+        currentTime: number;
+        isPlaying: boolean;
+    } | null;
+    password?: string;
+    metadata?: RoomMetadata | null;
+}
+
+const rooms = new Map<string, RoomData>();
+
+export function generateRoomId(): string {
+    return crypto.randomBytes(8).toString('hex');
+}
+
+export function createRoom(name: string, host: RoomUser, password?: string): RoomData {
+    const roomId = generateRoomId();
+
+    const room: RoomData = {
+        id: roomId,
+        name,
+        host,
+        users: new Map([[host.id, host]]),
+        createdAt: Date.now(),
+        currentVideo: null,
+        password: password || undefined,
+        metadata: null,
+    };
+
+    rooms.set(roomId, room);
+    return room;
+}
+
+export function getRoom(roomId: string): RoomData | null {
+    return rooms.get(roomId) || null;
+}
+
+export function getAllRooms(): RoomData[] {
+    return Array.from(rooms.values()).map(room => ({
+        ...room,
+        users: room.users
+    }));
+}
+
+export function addUserToRoom(roomId: string, user: RoomUser): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.users.set(user.id, user);
+    return true;
+}
+
+export function removeUserFromRoom(roomId: string, userId: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.users.delete(userId);
+
+    // Si no quedan usuarios, eliminar la sala
+    if (room.users.size === 0) {
+        rooms.delete(roomId);
+        return true;
+    }
+
+    // Si era el host, asignar nuevo host
+    if (room.host.id === userId && room.users.size > 0) {
+        const newHost = Array.from(room.users.values())[0];
+        newHost.isHost = true;
+        room.host = newHost;
+    }
+
+    return true;
+}
+
+export function updateRoomVideo(roomId: string, videoData: any): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.currentVideo = videoData;
+    return true;
+}
+
+export function deleteRoom(roomId: string): boolean {
+    return rooms.delete(roomId);
+}
+
+export function verifyRoomPassword(roomId: string, password?: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    if (!room.password) return true;
+    if (!password) return false;
+
+    return room.password === password;
+}
+
+export function updateRoomMetadata(roomId: string, metadata: any): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.metadata = metadata;
+    return true;
+}

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

@@ -0,0 +1,397 @@
+import { FastifyInstance, FastifyRequest } from 'fastify';
+import * as roomService from './rooms.service';
+import { getUserById } from '../user/user.service';
+import jwt from 'jsonwebtoken';
+
+interface WSClient {
+    socket: any;
+    userId: string;
+    username: string;
+    roomId: string;
+    isGuest: boolean;
+}
+
+const clients = new Map<string, WSClient>();
+
+interface WSParams {
+    roomId: string;
+}
+
+interface WSQuery {
+    token?: string;
+    guestName?: string;
+    password?: string;
+}
+
+export function setupRoomWebSocket(fastify: FastifyInstance) {
+    // @ts-ignore
+    fastify.get('/ws/room/:roomId', { websocket: true }, (connection: any, req: any) => {
+        handleWebSocketConnection(connection, req).catch(err => {
+            console.error('WebSocket error:', err);
+            try {
+                connection.socket.close();
+            } catch (e) {
+                // Socket already closed
+            }
+        });
+    });
+}
+
+async function handleWebSocketConnection(connection: any, req: any) {
+    const socket = connection.socket || connection;
+    const roomId = req.params.roomId;
+    const token = req.query.token;
+    const guestName = req.query.guestName;
+    const password = req.query.password;
+
+    let userId: string;
+    let username: string;
+    let avatar: string | undefined;
+    let isGuest = false;
+    let realUserId: any;
+
+    // Verificar si la sala existe
+    const room = roomService.getRoom(roomId);
+    if (!room) {
+        socket.send(JSON.stringify({
+            type: 'error',
+            message: 'Room not found'
+        }));
+        socket.close();
+        return;
+    }
+
+    // Verificar contraseña si existe
+    if (room.password) {
+        if (!password || !roomService.verifyRoomPassword(roomId, password)) {
+            socket.send(JSON.stringify({
+                type: 'error',
+                message: 'Invalid password'
+            }));
+            socket.close();
+            return;
+        }
+    }
+
+    // Autenticar usuario o crear invitado
+    if (token) {
+        try {
+            const decoded: any = jwt.verify(token, process.env.JWT_SECRET!);
+            realUserId = decoded.id;
+            const user = await getUserById(realUserId);
+
+            if (user) {
+                userId = `user_${realUserId}`;
+                username = user.username;
+                avatar = user.profile_picture_url || undefined;
+                isGuest = false;
+            } else {
+                throw new Error('User not found');
+            }
+        } catch (err) {
+            socket.send(JSON.stringify({
+                type: 'error',
+                message: 'Invalid token'
+            }));
+            socket.close();
+            return;
+        }
+    } else if (guestName && guestName.trim()) {
+        const nameToCheck = guestName.trim();
+
+        const isNameTaken = Array.from(room.users.values()).some(
+            u => u.username.toLowerCase() === nameToCheck.toLowerCase()
+        );
+
+        if (isNameTaken) {
+            socket.send(JSON.stringify({
+                type: 'error',
+                message: 'Username is already taken'
+            }));
+            socket.close();
+            return;
+        }
+
+        userId = `guest_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        username = nameToCheck;
+        isGuest = true;
+    } else {
+        socket.send(JSON.stringify({
+            type: 'error',
+            message: 'Authentication required'
+        }));
+        socket.close();
+        return;
+    }
+
+    const isHost = room.host.userId === realUserId || room.host.id === userId;
+
+    console.log('WebSocket Connection:', {
+        userId,
+        realUserId,
+        roomHostId: room.host.id,
+        roomHostUserId: room.host.userId,
+        isHost
+    });
+
+    // Agregar usuario a la sala
+    const userInRoom = {
+        id: userId,
+        username,
+        avatar,
+        isHost: isHost,  // ← CORREGIDO: Usar la verificación correcta
+        isGuest,
+        userId: realUserId
+    };
+
+    roomService.addUserToRoom(roomId, userInRoom);
+
+    // Registrar cliente
+    clients.set(userId, {
+        socket: socket,
+        userId,
+        username,
+        roomId,
+        isGuest
+    });
+
+    // Enviar estado inicial
+    socket.send(JSON.stringify({
+        type: 'init',
+        userId,
+        username,
+        isGuest,
+        room: {
+            id: room.id,
+            name: room.name,
+            users: Array.from(room.users.values()).map(u => ({
+                id: u.id,
+                username: u.username,
+                avatar: u.avatar,
+                isHost: u.isHost,
+                isGuest: u.isGuest
+            })),
+            currentVideo: room.currentVideo
+        }
+    }));
+
+    // Notificar a otros usuarios
+    broadcastToRoom(roomId, {
+        type: 'user_joined',
+        user: {
+            id: userId,
+            username,
+            avatar,
+            isGuest
+        }
+    }, userId);
+
+    // Manejar mensajes
+    socket.on('message', (message: Buffer) => {
+        try {
+            const data = JSON.parse(message.toString());
+            handleMessage(roomId, userId, data);
+        } catch (err) {
+            console.error('WebSocket message error:', err);
+        }
+    });
+
+    // Manejar desconexión
+    socket.on('close', () => {
+        clients.delete(userId);
+        roomService.removeUserFromRoom(roomId, userId);
+
+        broadcastToRoom(roomId, {
+            type: 'user_left',
+            user: { userId, username }
+        });
+    });
+}
+
+function handleMessage(roomId: string, userId: string, data: any) {
+    const room = roomService.getRoom(roomId);
+    if (!room) return;
+
+    console.log('Handling message:', data.type, 'from user:', userId, 'isHost:', room.host.id === userId);
+
+    switch (data.type) {
+        case 'chat':
+            broadcastToRoom(roomId, {
+                type: 'chat',
+                userId,
+                username: room.users.get(userId)?.username || 'Unknown',
+                avatar: room.users.get(userId)?.avatar,
+                message: data.message,
+                timestamp: Date.now()
+            });
+            break;
+
+        case 'video_update':
+            if (room.host.id !== userId) return;
+
+            roomService.updateRoomVideo(roomId, data.video);
+            roomService.updateRoomMetadata(roomId, data.metadata);
+
+            broadcastToRoom(roomId, {
+                type: 'video_update',
+                video: data.video,
+                metadata: data.metadata // ✅ CLAVE
+            });
+
+            break;
+
+
+        case 'sync':
+            // Solo el host puede hacer sync
+            if (room.host.id !== userId) return;
+
+            if (room.currentVideo) {
+                room.currentVideo.currentTime = data.currentTime;
+                room.currentVideo.isPlaying = data.isPlaying;
+            }
+
+            broadcastToRoom(roomId, {
+                type: 'sync',
+                currentTime: data.currentTime,
+                isPlaying: data.isPlaying
+            }, userId);
+            break;
+
+        case 'request_users':
+            const currentRoom = roomService.getRoom(roomId);
+            if (currentRoom) {
+                const client = clients.get(userId);
+                if (client && client.socket && client.socket.readyState === 1) {
+                    client.socket.send(JSON.stringify({
+                        type: 'users_update', // Nuevo tipo de respuesta
+                        users: Array.from(currentRoom.users.values()).map(u => ({
+                            id: u.id,
+                            username: u.username,
+                            avatar: u.avatar,
+                            isHost: u.isHost,
+                            isGuest: u.isGuest
+                        }))
+                    }));
+                }
+            }
+            break;
+
+        case 'play':
+            // Solo el host puede controlar la reproducción
+            if (room.host.id !== userId) {
+                console.warn('Non-host attempted play:', userId);
+                return;
+            }
+
+            console.log('Broadcasting play event to room:', roomId);
+            broadcastToRoom(roomId, {
+                type: 'play',
+                currentTime: data.currentTime,
+                timestamp: Date.now()
+            }, userId); // IMPORTANTE: excludeUserId para no enviar al host
+            break;
+
+        case 'pause':
+            // Solo el host puede controlar la reproducción
+            if (room.host.id !== userId) {
+                console.warn('Non-host attempted pause:', userId);
+                return;
+            }
+
+            console.log('Broadcasting pause event to room:', roomId);
+            broadcastToRoom(roomId, {
+                type: 'pause',
+                currentTime: data.currentTime,
+                timestamp: Date.now()
+            }, userId); // IMPORTANTE: excludeUserId para no enviar al host
+            break;
+
+        case 'seek':
+            // Solo el host puede controlar la reproducción
+            if (room.host.id !== userId) {
+                console.warn('Non-host attempted seek:', userId);
+                return;
+            }
+
+            console.log('Broadcasting seek event to room:', roomId);
+            broadcastToRoom(roomId, {
+                type: 'seek',
+                currentTime: data.currentTime,
+                timestamp: Date.now()
+            }, userId); // IMPORTANTE: excludeUserId para no enviar al host
+            break;
+
+        case 'request_sync':
+            // Cualquier usuario puede pedir sync
+            const host = clients.get(room.host.id);
+            if (host && host.socket && host.socket.readyState === 1) {
+                host.socket.send(JSON.stringify({
+                    type: 'sync_requested',
+                    requestedBy: userId
+                }));
+            }
+            break;
+
+        case 'request_state':
+            // Enviar estado actual de la sala al usuario que lo solicita
+            const client = clients.get(userId);
+            if (client && client.socket && client.socket.readyState === 1) {
+                const updatedRoom = roomService.getRoom(roomId);
+                if (updatedRoom) {
+                    client.socket.send(JSON.stringify({
+                        type: 'init',
+                        userId,
+                        username: client.username,
+                        isGuest: client.isGuest,
+                        room: {
+                            id: updatedRoom.id,
+                            name: updatedRoom.name,
+                            users: Array.from(updatedRoom.users.values()).map(u => ({
+                                id: u.id,
+                                username: u.username,
+                                avatar: u.avatar,
+                                isHost: u.isHost,
+                                isGuest: u.isGuest
+                            })),
+                            currentVideo: room.currentVideo,
+                            metadata: room.metadata
+                        }
+                    }));
+                }
+            }
+            break;
+
+        default:
+            console.warn('Unknown message type:', data.type);
+            break;
+    }
+}
+
+function broadcastToRoom(roomId: string, message: any, excludeUserId?: string) {
+    const room = roomService.getRoom(roomId);
+    if (!room) return;
+
+    const messageStr = JSON.stringify(message);
+
+    console.log('Broadcasting to room:', roomId, 'message type:', message.type, 'excluding:', excludeUserId);
+
+    let sentCount = 0;
+    room.users.forEach((user) => {
+        if (user.id !== excludeUserId) {
+            const client = clients.get(user.id);
+            if (client && client.socket && client.socket.readyState === 1) {
+                try {
+                    client.socket.send(messageStr);
+                    sentCount++;
+                    console.log('Sent to user:', user.id, user.username);
+                } catch (err) {
+                    console.error('Error sending message to user:', user.id, err);
+                }
+            } else {
+                console.warn('User socket not ready:', user.id, 'readyState:', client?.socket?.readyState);
+            }
+        }
+    });
+
+    console.log(`Broadcast complete: sent to ${sentCount} users`);
+}

docker/src/scripts/anime/player.js

@@ -16,6 +16,9 @@ const AnimePlayer = (function() {
     let _totalEpisodes = 0;
     let _manualExtensionId = null;
     let _activeSubtitleIndex = -1;
+    let _roomMode = false;
+    let _isRoomHost = false;
+    let _roomWebSocket = null;
 
     let hlsInstance = null;
     let subtitleRenderer = null;
@@ -61,23 +64,30 @@ const AnimePlayer = (function() {
         subtitlesCanvas: null
     };
 
-    function init(animeId, initialSource, isLocal, animeData) {
+    function init(animeId, initialSource, isLocal, animeData, roomMode = false) {
+        _roomMode = roomMode;
         _animeId = animeId;
         _entrySource = initialSource || 'anilist';
         _isLocal = isLocal;
-        _malId = animeData.idMal || null;
         _totalEpisodes = animeData.episodes || 1000;
 
         if (animeData.title) {
-            _animeTitle = animeData.title.romaji || animeData.title.english || animeData.title.native || animeData.title || "Anime";
+            _animeTitle = animeData.title.romaji || animeData.title.english || "Anime";
         }
 
-        _skipIntervals = [];
-        _localEntryId = null;
-
         initElements();
         setupEventListeners();
-        loadExtensionsList();
+
+        // In Room Mode, we show the player immediately and hide extra controls
+        if (_roomMode) {
+            if(els.playerWrapper) {
+                els.playerWrapper.style.display = 'block';
+                els.playerWrapper.classList.add('room-mode');
+            }
+            // Hide extension list loading in room mode
+        } else {
+            loadExtensionsList();
+        }
     }
 
     function initElements() {
@@ -134,8 +144,10 @@ const AnimePlayer = (function() {
 
     function setupEventListeners() {
         // Close player
-        const closeBtn = document.getElementById('close-player-btn');
-        if(closeBtn) closeBtn.addEventListener('click', closePlayer);
+        if(!_roomMode) {
+            const closeBtn = document.getElementById('close-player-btn');
+            if(closeBtn) closeBtn.addEventListener('click', closePlayer);
+        }
 
         // Episode navigation
         if(els.prevBtn) els.prevBtn.onclick = () => playEpisode(_currentEpisode - 1);
@@ -183,18 +195,35 @@ const AnimePlayer = (function() {
         setupKeyboardShortcuts();
     }
 
-    function setupCustomControls() {
-        // Play/Pause
-        if(els.playPauseBtn) {
-            els.playPauseBtn.onclick = togglePlayPause;
-        }
-        if(els.video) {
-            // Remove old listeners to be safe (though usually new element)
-            els.video.onclick = togglePlayPause;
-            els.video.ondblclick = toggleFullscreen;
+    function loadVideoFromRoom(videoData) {
+        console.log('AnimePlayer.loadVideoFromRoom called with:', videoData);
+
+        if (!videoData || !videoData.url) {
+            console.error('Invalid video data provided to loadVideoFromRoom');
+            return;
         }
 
-        // Volume
+        _currentSubtitles = videoData.subtitles || [];
+
+        if (els.loader) els.loader.style.display = 'none';
+
+        initVideoPlayer(videoData.url, videoData.type || 'm3u8', videoData.subtitles || []);
+    }
+
+    function setupCustomControls() {
+        // ELIMINADO: if (_roomMode && !_isRoomHost) return;
+        // Ahora permitimos que el código fluya para habilitar volumen y ajustes a todos
+
+        // 1. Play/Pause (SOLO HOST)
+        if(els.playPauseBtn) {
+            els.playPauseBtn.onclick = togglePlayPause; // La validación de permiso se hará dentro de togglePlayPause
+        }
+        if(els.video) {
+            els.video.onclick = togglePlayPause; // Click en video para pausar
+            els.video.ondblclick = toggleFullscreen; // Doble click siempre permitido
+        }
+
+        // 2. Volume (TODOS)
         if(els.volumeBtn) {
             els.volumeBtn.onclick = toggleMute;
         }
@@ -204,7 +233,7 @@ const AnimePlayer = (function() {
             };
         }
 
-        // Settings
+        // 3. Settings (TODOS - Aquí están los subtítulos y audio)
         if(els.settingsBtn) {
             els.settingsBtn.onclick = (e) => {
                 e.stopPropagation();
@@ -219,7 +248,7 @@ const AnimePlayer = (function() {
             };
         }
 
-        // Close settings when clicking outside
+        // Close settings when clicking outside (TODOS)
         document.onclick = (e) => {
             if (settingsPanelActive && els.settingsPanel &&
                 !els.settingsPanel.contains(e.target) &&
@@ -229,19 +258,19 @@ const AnimePlayer = (function() {
             }
         };
 
-        // Fullscreen
+        // 4. Fullscreen (TODOS)
         if(els.fullscreenBtn) {
             els.fullscreenBtn.onclick = toggleFullscreen;
         }
 
-        // Progress bar
+        // 5. Progress bar (SOLO HOST para buscar, TODOS para ver)
         if(els.progressContainer) {
+            // El listener se añade, pero seekToPosition bloqueará a los invitados
             els.progressContainer.onclick = seekToPosition;
         }
 
-        // Video events
+        // 6. Video events (TODOS - Necesarios para actualizar la UI localmente)
         if(els.video) {
-            // Remove previous listeners first if sticking to same element, but we replace element usually
             els.video.onplay = onPlay;
             els.video.onpause = onPause;
             els.video.ontimeupdate = onTimeUpdate;
@@ -283,9 +312,27 @@ const AnimePlayer = (function() {
         document.addEventListener('keydown', (e) => {
             if (!els.playerWrapper || els.playerWrapper.style.display === 'none') return;
 
-            // Ignore if typing in input
             if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
 
+            // En room mode, solo el host puede usar shortcuts de control
+            if (_roomMode && !_isRoomHost) {
+                // Permitir fullscreen y volumen para todos
+                if (e.key.toLowerCase() === 'f') {
+                    e.preventDefault();
+                    toggleFullscreen();
+                } else if (e.key.toLowerCase() === 'm') {
+                    e.preventDefault();
+                    toggleMute();
+                } else if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    adjustVolume(0.1);
+                } else if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    adjustVolume(-0.1);
+                }
+                return;
+            }
+
             switch(e.key.toLowerCase()) {
                 case ' ':
                 case 'k':
@@ -352,11 +399,23 @@ const AnimePlayer = (function() {
 
     // Control functions
     function togglePlayPause() {
+        if (_roomMode && !_isRoomHost) {
+            console.log('Guests cannot control playback');
+            return;
+        }
+
         if (!els.video) return;
+
         if (els.video.paused) {
             els.video.play().catch(() => {});
+            if (_roomMode && _isRoomHost) {
+                sendRoomEvent('play', { currentTime: els.video.currentTime });
+            }
         } else {
             els.video.pause();
+            if (_roomMode && _isRoomHost) {
+                sendRoomEvent('pause', { currentTime: els.video.currentTime });
+            }
         }
     }
 
@@ -398,9 +457,18 @@ const AnimePlayer = (function() {
 
     function seekToPosition(e) {
         if (!els.video || !els.progressContainer) return;
+        if (_roomMode && !_isRoomHost) return;
+
         const rect = els.progressContainer.getBoundingClientRect();
         const pos = (e.clientX - rect.left) / rect.width;
-        els.video.currentTime = pos * els.video.duration;
+        const newTime = pos * els.video.duration;
+
+        els.video.currentTime = newTime;
+
+        // En room mode, enviar evento de seek
+        if (_roomMode && _isRoomHost) {
+            sendRoomEvent('seek', { currentTime: newTime });
+        }
     }
 
     function updateProgressHandle(e) {
@@ -410,14 +478,30 @@ const AnimePlayer = (function() {
         els.progressHandle.style.left = `${pos * 100}%`;
     }
 
+
     function seekRelative(seconds) {
         if (!els.video) return;
-        els.video.currentTime = Math.max(0, Math.min(els.video.duration, els.video.currentTime + seconds));
-    }
+        if (_roomMode && !_isRoomHost) return;
 
+        const newTime = Math.max(0, Math.min(els.video.duration, els.video.currentTime + seconds));
+        els.video.currentTime = newTime;
+
+        // En room mode, enviar evento de seek
+        if (_roomMode && _isRoomHost) {
+            sendRoomEvent('seek', { currentTime: newTime });
+        }
+    }
     function seekToPercent(percent) {
         if (!els.video) return;
-        els.video.currentTime = els.video.duration * percent;
+        if (_roomMode && !_isRoomHost) return;
+
+        const newTime = els.video.duration * percent;
+        els.video.currentTime = newTime;
+
+        // En room mode, enviar evento de seek
+        if (_roomMode && _isRoomHost) {
+            sendRoomEvent('seek', { currentTime: newTime });
+        }
     }
 
     // Video event handlers
@@ -476,7 +560,7 @@ const AnimePlayer = (function() {
     }
 
     function onEnded() {
-        if (_currentEpisode < _totalEpisodes) {
+        if (!_roomMode && _currentEpisode < _totalEpisodes) {
             playEpisode(_currentEpisode + 1);
         }
     }
@@ -501,6 +585,22 @@ const AnimePlayer = (function() {
         els.volumeBtn.innerHTML = icon;
     }
 
+    function sendRoomEvent(eventType, data = {}) {
+        if (!_roomMode || !_isRoomHost || !_roomWebSocket) return;
+        if (_roomWebSocket.readyState !== WebSocket.OPEN) return;
+
+        console.log('Sending room event:', eventType, data);
+        _roomWebSocket.send(JSON.stringify({
+            type: eventType,
+            ...data
+        }));
+    }
+
+    function setWebSocket(ws) {
+        console.log('Setting WebSocket reference in AnimePlayer');
+        _roomWebSocket = ws;
+    }
+
     function formatTime(seconds) {
         if (!isFinite(seconds) || isNaN(seconds)) return '0:00';
         const h = Math.floor(seconds / 3600);
@@ -563,7 +663,7 @@ const AnimePlayer = (function() {
         }
 
         // 4. Playback Speed
-        if (els.video) {
+        if (els.video && (!_roomMode || _isRoomHost)) {
             const label = els.video.playbackRate === 1 ? 'Normal' : `${els.video.playbackRate}x`;
             html += createMenuItem('speed', 'Playback Speed', label, Icons.speed);
         }
@@ -812,7 +912,7 @@ const AnimePlayer = (function() {
         }
 
         // Update progress for AniList
-        if (!_progressUpdated && els.video.duration) {
+        if (!_roomMode && !_progressUpdated && els.video.duration) {
             const percentage = els.video.currentTime / els.video.duration;
             if (percentage >= 0.8) {
                 updateProgress();
@@ -1183,8 +1283,9 @@ const AnimePlayer = (function() {
     }
 
     function initVideoPlayer(url, type, subtitles = []) {
-        // 1. CLEANUP FIRST: Destroy subtitle renderer while elements still exist
-        // This prevents "removeChild" errors because the DOM is still intact
+        console.log('initVideoPlayer called:', { url, type, subtitles });
+
+        // 1. CLEANUP FIRST
         if (subtitleRenderer) {
             try {
                 subtitleRenderer.dispose();
@@ -1194,16 +1295,18 @@ const AnimePlayer = (function() {
             subtitleRenderer = null;
         }
 
-        // 2. Destroy HLS instance
         if (hlsInstance) {
             hlsInstance.destroy();
             hlsInstance = null;
         }
 
         const container = document.querySelector('.video-frame');
-        if (!container) return;
+        if (!container) {
+            console.error('Video frame container not found!');
+            return;
+        }
 
-        // 3. Remove OLD Elements
+        // 2. Remove OLD Elements
         const oldVideo = container.querySelector('video');
         const oldCanvas = container.querySelector('#subtitles-canvas');
 
@@ -1216,65 +1319,65 @@ const AnimePlayer = (function() {
             oldCanvas.remove();
         }
 
-        // 4. Create NEW Elements
+        // 3. Create NEW Elements - CANVAS FIRST, then VIDEO
+        const newCanvas = document.createElement('canvas');
+        newCanvas.id = 'subtitles-canvas';
+
         const newVideo = document.createElement('video');
         newVideo.id = 'player';
         newVideo.crossOrigin = 'anonymous';
         newVideo.playsInline = true;
 
-        const newCanvas = document.createElement('canvas');
-        newCanvas.id = 'subtitles-canvas';
-        container.appendChild(newCanvas)
+        container.appendChild(newCanvas);
         container.appendChild(newVideo);
 
         els.video = newVideo;
         els.subtitlesCanvas = newCanvas;
 
+        console.log('Video and canvas elements created:', { video: els.video, canvas: els.subtitlesCanvas });
+
+        // Re-setup controls with new video element
         setupCustomControls();
 
-        // 5. Initialize Player (HLS or Native)
+        // Hide loader
+        if (els.loader) els.loader.style.display = 'none';
+
+        // 4. Initialize Player
         if (Hls.isSupported() && type === 'm3u8') {
+            console.log('Initializing HLS player');
+
             hlsInstance = new Hls({
                 enableWorker: true,
                 lowLatencyMode: false,
-                backBufferLength: 90
+                backBufferLength: 90,
+                debug: false
+            });
+
+            hlsInstance.on(Hls.Events.ERROR, (event, data) => {
+                console.error('HLS Error:', data);
+                if (data.fatal) {
+                    if (els.loader) {
+                        els.loader.style.display = 'flex';
+                        if (els.loaderText) els.loaderText.textContent = 'Stream error: ' + (data.details || 'Unknown');
+                    }
+                }
             });
 
             hlsInstance.attachMedia(els.video);
 
             hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
+                console.log('HLS media attached, loading source:', url);
                 hlsInstance.loadSource(url);
             });
 
             hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
+                console.log('HLS manifest parsed, attaching subtitles');
                 attachSubtitles(subtitles);
                 buildSettingsPanel();
-                if (els.downloadBtn) els.downloadBtn.style.display = 'flex';
-                els.video.play().catch(() => {});
-                if (els.loader) els.loader.style.display = 'none';
-            });
 
-            hlsInstance.on(Hls.Events.LEVEL_SWITCHED, () => buildSettingsPanel());
-            hlsInstance.on(Hls.Events.AUDIO_TRACK_SWITCHED, () => buildSettingsPanel());
+                if (els.downloadBtn && !_roomMode) els.downloadBtn.style.display = 'flex';
 
-        } else {
-            els.video.src = url;
-            attachSubtitles(subtitles);
-            buildSettingsPanel();
-            els.video.play().catch(() => {});
-            if(els.loader) els.loader.style.display = 'none';
-            if (els.downloadBtn) els.downloadBtn.style.display = 'flex';
-        }
-
-        // 6. Init Subtitles with explicit delay
-        // We use setTimeout instead of requestAnimationFrame to let the Layout Engine catch up
-        if (type === 'm3u8') {
-            hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
-                attachSubtitles(subtitles);
-                buildSettingsPanel();
-                if (els.downloadBtn) els.downloadBtn.style.display = 'flex';
-
-                // IMPORTANTE: Esperar a loadedmetadata antes de init subtitles
+                // --- FIX: Inicializar el renderizador de subtítulos para HLS ---
                 if (els.video.readyState >= 1) {
                     initSubtitleRenderer();
                 } else {
@@ -1282,23 +1385,34 @@ const AnimePlayer = (function() {
                         initSubtitleRenderer();
                     }, { once: true });
                 }
+                // -------------------------------------------------------------
 
-                els.video.play().catch(() => {});
-                if (els.loader) els.loader.style.display = 'none';
+                console.log('Attempting to play video');
+                els.video.play().catch(err => {
+                    console.error('Play error:', err);
+                });
             });
+
+            hlsInstance.on(Hls.Events.LEVEL_SWITCHED, () => buildSettingsPanel());
+            hlsInstance.on(Hls.Events.AUDIO_TRACK_SWITCHED, () => buildSettingsPanel());
+
         } else {
+            console.log('Using native video player');
             els.video.src = url;
             attachSubtitles(subtitles);
             buildSettingsPanel();
 
-            // Para video directo, esperar metadata
             els.video.addEventListener('loadedmetadata', () => {
+                console.log('Video metadata loaded');
                 initSubtitleRenderer();
             }, { once: true });
 
-            els.video.play().catch(() => {});
-            if(els.loader) els.loader.style.display = 'none';
-            if (els.downloadBtn) els.downloadBtn.style.display = 'flex';
+            console.log('Attempting to play video');
+            els.video.play().catch(err => {
+                console.error('Play error:', err);
+            });
+
+            if (els.downloadBtn && !_roomMode) els.downloadBtn.style.display = 'flex';
         }
     }
 
@@ -1762,12 +1876,19 @@ const AnimePlayer = (function() {
 
     // RPC
     function sendRPC({ startTimestamp, endTimestamp, paused = false } = {}) {
+        let stateText = `Episode ${_currentEpisode}`;
+        let detailsText = _animeTitle;
+
+        if (_roomMode) {
+            stateText = `Watch Party - Ep ${_currentEpisode}`;
+        }
+
         fetch("/api/rpc", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
-                details: _animeTitle,
-                state: `Episode ${_currentEpisode}`,
+                details: detailsText,
+                state: stateText,
                 mode: "watching",
                 startTimestamp,
                 endTimestamp,
@@ -1800,9 +1921,29 @@ const AnimePlayer = (function() {
         }
     }
 
+    function setRoomHost(isHost) {
+        console.log('Setting player host status:', isHost);
+        _isRoomHost = isHost;
+
+        // Re-ejecutar la configuración de controles con el nuevo permiso
+        setupCustomControls();
+
+        // Forzar actualización visual si es necesario
+        if (els.playerWrapper) {
+            if (isHost) els.playerWrapper.classList.add('is-host');
+            else els.playerWrapper.classList.remove('is-host');
+        }
+    }
+
     return {
         init,
         playEpisode,
-        getCurrentEpisode: () => _currentEpisode
+        getCurrentEpisode: () => _currentEpisode,
+        loadVideoFromRoom,
+        getVideoElement: () => els.video,
+        setRoomHost,
+        setWebSocket
     };
-})();
+})();
+
+window.AnimePlayer = AnimePlayer;

docker/src/scripts/auth-guard.js

@@ -115,4 +115,16 @@ function setupDropdown() {
     })
 }
 
-loadMeUI()
+loadMeUI()
+const createRoomModal = new CreateRoomModal();
+
+const createBtn = document.getElementById('nav-create-party');
+if (createBtn) {
+    createBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        const dropdown = document.getElementById('nav-dropdown');
+        if(dropdown) dropdown.classList.remove('active');
+
+        createRoomModal.open();
+    });
+}

docker/src/scripts/room-modal.js

@@ -0,0 +1,128 @@
+class CreateRoomModal {
+    constructor() {
+        this.modalId = 'cr-modal-overlay';
+        this.isRendered = false;
+        this.render(); // Crear el HTML en el DOM al instanciar
+    }
+
+    render() {
+        if (document.getElementById(this.modalId)) return;
+
+        const modalHtml = `
+            <div class="cr-modal-overlay" id="${this.modalId}">
+                <div class="cr-modal-content">
+                    <button class="cr-modal-close" id="cr-close">✕</button>
+                    <h2 class="cr-modal-title">Create Watch Party</h2>
+                    
+                    <form id="cr-form">
+                        <div class="cr-form-group">
+                            <label>Room Name</label>
+                            <input type="text" class="cr-input" name="name" placeholder="My Awesome Room" required maxlength="50" />
+                        </div>
+
+                        <div class="cr-form-group">
+                            <label>Password (Optional)</label>
+                            <input type="password" class="cr-input" name="password" placeholder="Leave empty for public" maxlength="50" />
+                        </div>
+
+                        <div class="cr-actions">
+                            <button type="button" class="cr-btn-cancel" id="cr-cancel">Cancel</button>
+                            <button type="submit" class="cr-btn-confirm">Create Room</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        `;
+
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+        this.bindEvents();
+        this.isRendered = true;
+    }
+
+    bindEvents() {
+        const modal = document.getElementById(this.modalId);
+        const closeBtn = document.getElementById('cr-close');
+        const cancelBtn = document.getElementById('cr-cancel');
+        const form = document.getElementById('cr-form');
+
+        const close = () => this.close();
+
+        closeBtn.onclick = close;
+        cancelBtn.onclick = close;
+
+        // Cerrar si clicamos fuera del contenido
+        modal.onclick = (e) => {
+            if (e.target === modal) close();
+        };
+
+        form.onsubmit = (e) => this.handleSubmit(e);
+    }
+
+    open() {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            // Aquí puedes disparar tu modal de login o redirigir
+            alert('You must be logged in to create a room');
+            window.location.href = '/login'; // Opcional
+            return;
+        }
+
+        const modal = document.getElementById(this.modalId);
+        modal.classList.add('show');
+        document.querySelector('#cr-form input[name="name"]').focus();
+    }
+
+    close() {
+        const modal = document.getElementById(this.modalId);
+        modal.classList.remove('show');
+        document.getElementById('cr-form').reset();
+    }
+
+    async handleSubmit(e) {
+        e.preventDefault();
+        const btn = e.target.querySelector('button[type="submit"]');
+        const originalText = btn.textContent;
+
+        btn.disabled = true;
+        btn.textContent = 'Creating...';
+
+        const formData = new FormData(e.target);
+        const name = formData.get('name').trim();
+        const password = formData.get('password').trim();
+        const token = localStorage.getItem('token');
+
+        try {
+            const res = await fetch('/api/rooms', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({
+                    name,
+                    password: password || undefined
+                })
+            });
+
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Failed to create room');
+
+            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}`;
+
+        } catch (err) {
+            alert(err.message);
+        } finally {
+            btn.disabled = false;
+            btn.textContent = originalText;
+        }
+    }
+}
+
+window.CreateRoomModal = CreateRoomModal;

docker/src/views/views.routes.ts

@@ -130,6 +130,12 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(html);
     });
 
+    fastify.get('/room', (req: FastifyRequest, reply: FastifyReply) => {
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'room.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
+    });
+
     fastify.setNotFoundHandler((req, reply) => {
         const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
         const html = fs.readFileSync(htmlPath, 'utf-8');

docker/views/anime/animes.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="/views/css/components/hero.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
 </head>
 <body>
@@ -111,6 +112,7 @@
     </a>
 </div>
 <script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/search-manager.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>

docker/views/books/books.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/components/local-library.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
 </head>
 <body>
@@ -82,6 +83,7 @@
 </div>
 
 <script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/search-manager.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>

docker/views/components/navbar.html

@@ -53,6 +53,13 @@
           <span>Profile</span>
         </a>
 
+        <button class="dropdown-item" id="nav-create-party">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+          </svg>
+          <span>Watchparty</span>
+        </button>
+
         <button class="dropdown-item" id="nav-settings">
           <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
             <circle cx="12" cy="12" r="3"/>

docker/views/css/components/create-room.css

@@ -0,0 +1,291 @@
+/* create-room.css */
+.cr-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001; /* Mayor que el navbar */
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.cr-modal-overlay.show {
+    display: flex;
+    opacity: 1;
+}
+
+.cr-modal-content {
+    background: rgba(20, 20, 20, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    border-radius: 16px;
+    padding: 32px;
+    max-width: 450px;
+    width: 90%;
+    position: relative;
+    transform: scale(0.95);
+    transition: transform 0.2s ease;
+}
+
+.cr-modal-overlay.show .cr-modal-content {
+    transform: scale(1);
+}
+
+.cr-modal-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    padding: 5px;
+    transition: color 0.2s;
+}
+
+.cr-modal-close:hover {
+    color: white;
+}
+
+.cr-modal-title {
+    margin: 0 0 24px 0;
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: white;
+    background: linear-gradient(to right, #fff, #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.cr-form-group {
+    margin-bottom: 20px;
+}
+
+.cr-form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: #e5e7eb;
+    font-size: 0.9rem;
+}
+
+.cr-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.cr-input:focus {
+    border-color: #8b5cf6; /* Tu color primario */
+}
+
+.cr-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 24px;
+}
+
+.cr-btn-cancel {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.cr-btn-confirm {
+    background: #8b5cf6;
+    border: none;
+    color: white;
+    padding: 10px 24px;
+    border-radius: 8px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.cr-btn-confirm:hover {
+    background: #7c3aed;
+}
+
+.cr-btn-confirm:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+/* Add to room.css */
+.modal-header-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.btn-icon-small {
+    background: rgba(255,255,255,0.1);
+    border: none;
+    color: white;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.config-grid {
+    display: flex;
+    gap: 24px;
+}
+
+.config-poster img {
+    width: 140px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+}
+
+.config-form {
+    flex: 1;
+}
+
+.form-select, .form-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 10px 12px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    outline: none;
+    margin-bottom: 5px;
+}
+
+.form-select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.form-row {
+    display: flex;
+    gap: 12px;
+}
+
+.form-group.half {
+    flex: 1;
+}
+
+.full-width {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+@media (max-width: 600px) {
+    .config-grid { flex-direction: column; align-items: center; }
+    .config-poster img { width: 100px; }
+}
+
+.modal-header-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.btn-icon-small {
+    background: rgba(255,255,255,0.1);
+    border: none;
+    color: white;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon-small:hover {
+    background: rgba(255,255,255,0.2);
+}
+
+/* Config Grid Layout */
+.config-grid {
+    display: flex;
+    gap: 24px;
+}
+
+.config-poster img {
+    width: 140px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.config-form {
+    flex: 1;
+}
+
+/* Form Elements */
+.form-select, .form-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 10px 12px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    outline: none;
+    margin-bottom: 5px;
+}
+
+.form-select:focus, .form-input:focus {
+    border-color: var(--brand-color);
+}
+
+.form-select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Form Select specific for dark mode options */
+.form-select option {
+    background: #1a1a1a;
+    color: white;
+}
+
+.form-row {
+    display: flex;
+    gap: 12px;
+}
+
+.form-group.half {
+    flex: 1;
+}
+
+.full-width {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 600px) {
+    .config-grid { flex-direction: column; align-items: center; }
+    .config-poster img { width: 100px; }
+    .form-row { flex-direction: column; gap: 0; }
+}

docker/views/css/components/navbar.css

@@ -523,4 +523,4 @@
         min-width: auto;
         z-index: 9999;
     }
-}
+}

docker/views/css/room.css

@@ -0,0 +1,900 @@
+/* =========================================
+   1. VARIABLES & UTILITIES
+   ========================================= */
+:root {
+    --brand-color: #8b5cf6;
+    --brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
+    --glass-bg: rgba(20, 20, 20, 0.6);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-blur: blur(12px);
+    --text-main: #ffffff;
+    --text-muted: rgba(255, 255, 255, 0.6);
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.spinner {
+    width: 24px;
+    height: 24px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
+    border-top-color: var(--brand-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* =========================================
+   2. UI COMPONENTS (Buttons, Inputs, Chips)
+   ========================================= */
+
+/* Glass Buttons & Icons */
+.btn-icon-glass, .btn-icon-small, .modal-close {
+    appearance: none;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    color: #eee;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon-glass { width: 36px; height: 36px; backdrop-filter: blur(8px); }
+.btn-icon-small { padding: 6px; }
+.modal-close { width: 32px; height: 32px; position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.1); }
+
+.btn-icon-glass:hover, .btn-icon-small:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-1px);
+    color: white;
+}
+.modal-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }
+
+.btn-glass-primary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(139, 92, 246, 0.25);
+    border: 1px solid rgba(139, 92, 246, 0.4);
+    color: white;
+    padding: 0 16px;
+    height: 36px;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+    transition: all 0.2s;
+}
+
+.btn-glass-primary:hover {
+    background: rgba(139, 92, 246, 0.4);
+    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
+    transform: translateY(-1px);
+}
+
+/* Primary/Confirm Buttons */
+.btn-confirm, .btn-primary {
+    background: var(--brand-color);
+    border: none;
+    color: white;
+    padding: 10px 24px;
+    border-radius: 10px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.btn-confirm:hover, .btn-primary:hover {
+    background: #7c3aed;
+    transform: translateY(-2px);
+}
+.btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.btn-confirm.full-width { width: 100%; }
+
+.btn-cancel {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+.btn-cancel:hover { background: rgba(255, 255, 255, 0.1); color: white; }
+
+/* Inputs & Selects */
+input[type="text"], input[type="password"], input[type="number"], .form-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+input:focus, .form-input:focus {
+    border-color: var(--brand-color);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* Glass Select (Header Style - FIX: Better alignment) */
+.glass-select-sm {
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #eee;
+    padding: 0 32px 0 12px; /* Extra padding right for arrow */
+    height: 32px;
+    line-height: 30px; /* Vertically center text */
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    outline: none;
+    transition: all 0.2s;
+    max-width: 140px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    /* SVG Arrow */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 14px;
+}
+
+.glass-select-sm:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255,255,255,0.3);
+    color: #fff;
+}
+.glass-select-sm option { background: #1a1a1a; color: #e0e0e0; }
+
+/* Chips (Config Modal) */
+.chips-grid { display: flex; flex-wrap: wrap; gap: 10px; }
+.chip {
+    padding: 8px 16px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    color: #ccc;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    user-select: none;
+}
+.chip:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
+.chip.active {
+    background: var(--brand-color);
+    border-color: var(--brand-color);
+    color: white;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+}
+.chip.disabled { opacity: 0.5; pointer-events: none; filter: grayscale(1); }
+
+/* =========================================
+   3. ROOM LAYOUT (The Watch Page)
+   ========================================= */
+.room-layout {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    height: 100vh;
+    overflow: hidden;
+    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.room-layout.chat-hidden {
+    grid-template-columns: 1fr 0px !important;
+}
+
+.video-area {
+    display: flex;
+    flex-direction: column;
+    background: #000;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Responsive Layout */
+@media (max-width: 1200px) {
+    .room-layout {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr auto;
+    }
+    .room-layout.chat-hidden {
+        grid-template-rows: 1fr 0px;
+    }
+    .chat-sidebar {
+        height: 350px;
+        border-left: none;
+        border-top: 1px solid var(--glass-border);
+    }
+}
+
+/* =========================================
+   4. ROOM HEADER
+   ========================================= */
+.room-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 24px;
+    background: rgba(10, 10, 10, 0.85);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+    height: 64px;
+    z-index: 20;
+    flex-shrink: 0;
+}
+
+.header-left, .header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1;
+}
+.header-right { justify-content: flex-end; }
+
+/* Info Section */
+.room-info { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
+#room-name {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+    color: white;
+    letter-spacing: -0.01em;
+}
+.np-fade { display: flex; align-items: center; opacity: 0.7; font-size: 0.8rem; gap: 6px; margin-top: 2px; }
+.np-title { color: #ccc; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.np-sep { color: #555; }
+.np-badge {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: 700;
+}
+
+/* Host Controls (Center) - FIX: Better alignment container */
+.header-center { flex: 2; display: flex; justify-content: center; z-index: 50; }
+
+.quick-controls-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(20, 20, 20, 0.6);
+    backdrop-filter: blur(12px);
+    padding: 4px 8px; /* Slightly tighter padding */
+    border-radius: 10px;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    transition: all 0.2s ease;
+    height: 42px; /* Explicit height to align children */
+}
+.quick-controls-group:hover { border-color: rgba(255,255,255,0.15); background: rgba(30, 30, 30, 0.7); }
+
+/* Toggle Sub/Dub Mini */
+.sd-toggle.small {
+    height: 32px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 8px;
+    padding: 2px;
+    display: flex;
+    position: relative;
+    cursor: pointer;
+    min-width: 80px;
+    box-sizing: border-box;
+}
+.sd-toggle.small .sd-bg {
+    position: absolute;
+    top: 2px; left: 2px;
+    width: calc(50% - 2px); height: calc(100% - 4px);
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
+.sd-toggle.small .sd-option {
+    flex: 1;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: rgba(255,255,255,0.4);
+    transition: color 0.2s;
+    user-select: none;
+}
+.sd-toggle.small .sd-option.active { color: #fff; }
+
+/* Viewers Pill */
+.viewers-pill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(0,0,0,0.3);
+    padding: 0 10px;
+    border-radius: 20px;
+    border: 1px solid rgba(255,255,255,0.05);
+    font-size: 0.8rem;
+    color: #aaa;
+    height: 32px;
+}
+
+/* =========================================
+   5. VIDEO PLAYER AREA
+   ========================================= */
+.player-wrapper {
+    display: flex !important;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    height: auto !important;
+    min-height: 0;
+    position: relative !important;
+    z-index: 1 !important;
+    background: transparent !important;
+    overflow: hidden;
+}
+
+.player-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.video-frame {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    background: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#player {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+}
+
+/* Custom Controls Layout Fixes */
+.custom-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 60;
+    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
+    padding: 20px 10px 10px;
+}
+
+/* FIX: Ensure left controls stay in one line (time display fix) */
+.controls-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.time-display {
+    white-space: nowrap; /* Prevent line break */
+    font-variant-numeric: tabular-nums; /* Monospaced numbers prevent jitter */
+    font-size: 0.9rem;
+    color: #ddd;
+    min-width: fit-content;
+}
+
+/* Subtitles Canvas */
+#subtitles-canvas {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    pointer-events: none;
+    z-index: 10;
+}
+
+/* Hide unused player buttons in Room Mode */
+#download-btn,
+#manual-match-btn,
+#server-select,
+#extension-select,
+#sd-toggle,
+.side-nav-btn {
+    display: none !important;
+}
+
+/* Settings Panel Position Fix */
+.settings-panel {
+    position: absolute;
+    bottom: 70px;
+    right: 20px;
+    z-index: 1000;
+    max-height: 60vh;
+    overflow-y: auto;
+    background: rgba(15, 15, 15, 0.95);
+    border: 1px solid var(--glass-border);
+    border-radius: 8px;
+}
+
+/* =========================================
+   6. CHAT SIDEBAR
+   ========================================= */
+.chat-sidebar {
+    display: flex;
+    flex-direction: column;
+    background: rgba(15, 15, 15, 0.95);
+    border-left: 1px solid var(--glass-border);
+    height: 100%;
+}
+.room-layout.chat-hidden .chat-sidebar {
+    opacity: 0;
+    pointer-events: none;
+    border-left: none;
+}
+
+.chat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--glass-border);
+}
+.chat-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: white; }
+
+/* User List */
+.users-list {
+    padding: 12px;
+    border-bottom: 1px solid var(--glass-border);
+    max-height: 200px;
+    overflow-y: auto;
+    background: rgba(0,0,0,0.2);
+}
+.user-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    margin-bottom: 4px;
+}
+.user-item:hover { background: rgba(255, 255, 255, 0.05); }
+.user-avatar {
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    background: var(--brand-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: white;
+    font-size: 0.8rem;
+}
+.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
+.user-name { flex: 1; font-size: 0.9rem; color: white; }
+.user-badge {
+    font-size: 0.7rem;
+    background: var(--brand-color);
+    color: white;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: 600;
+}
+
+/* Messages */
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.chat-message { display: flex; gap: 10px; }
+.chat-message.system { justify-content: center; margin: 8px 0; }
+.chat-message.system .message-content {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    text-align: center;
+    padding: 4px 12px;
+    border-radius: 12px;
+}
+.message-avatar {
+    width: 36px; height: 36px;
+    border-radius: 50%;
+    background: var(--brand-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: white;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+}
+.message-body { flex: 1; min-width: 0; }
+.message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+.message-username { font-weight: 600; color: white; font-size: 0.9rem; }
+.message-time { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
+.message-content {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.95rem;
+    line-height: 1.4;
+    word-wrap: break-word;
+}
+
+/* Input Area */
+.chat-input {
+    display: flex;
+    gap: 8px;
+    padding: 16px;
+    border-top: 1px solid var(--glass-border);
+}
+.chat-input input {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--glass-border);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 10px;
+    outline: none;
+}
+.chat-input button {
+    background: var(--brand-color);
+    border: none;
+    color: white;
+    padding: 0 16px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.chat-input button:hover { background: #7c3aed; }
+
+/* =========================================
+   7. MODALS & CONFIGURATION
+   ========================================= */
+.modal-overlay {
+    position: fixed; inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.modal-overlay.show { display: flex; opacity: 1; }
+
+.modal-content {
+    background: rgba(20, 20, 20, 0.95);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 32px;
+    max-width: 500px;
+    width: 90%;
+    position: relative;
+    transform: scale(0.9);
+    transition: transform 0.3s ease;
+}
+.modal-overlay.show .modal-content { transform: scale(1); }
+.modal-title { margin: 0 0 24px 0; font-size: 1.5rem; font-weight: 800; color: white; }
+.modal-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
+.modal-header-row .modal-title { margin: 0; }
+
+/* Forms inside modal */
+.form-group { margin-bottom: 20px; }
+.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: white; }
+.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
+
+/* Search Step */
+.anime-search-content { max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; }
+.search-bar { display: flex; gap: 12px; margin-bottom: 20px; }
+.search-bar button {
+    background: var(--brand-color);
+    border: none; color: white; padding: 12px 24px;
+    border-radius: 10px; font-weight: 700; cursor: pointer;
+}
+.anime-results {
+    flex: 1; overflow-y: auto;
+    display: flex; flex-direction: column; gap: 12px;
+    min-height: 300px;
+}
+.anime-result-item, .search-item {
+    display: flex; gap: 16px; padding: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    cursor: pointer; text-decoration: none; color: inherit;
+    transition: all 0.2s;
+}
+.anime-result-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--brand-color);
+    transform: translateX(4px);
+}
+.search-poster { width: 60px; height: 85px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
+.search-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
+.search-title { font-weight: 700; color: white; margin-bottom: 4px; font-size: 1rem; }
+.search-meta { font-size: 0.85rem; color: var(--text-muted); }
+
+/* Config Step (Unified UI) */
+.config-layout { display: flex; gap: 24px; margin-top: 20px; }
+.config-sidebar { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.config-cover {
+    width: 100%; aspect-ratio: 2/3; object-fit: cover;
+    border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
+    border: 1px solid var(--glass-border);
+}
+.config-main { flex: 1; display: flex; flex-direction: column; gap: 20px; }
+.cfg-section-title {
+    font-size: 0.85rem; text-transform: uppercase;
+    letter-spacing: 1px; color: rgba(255,255,255,0.5);
+    margin-bottom: 8px; font-weight: 700;
+}
+
+/* Episode Stepper */
+.ep-control {
+    display: flex; align-items: center;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid var(--glass-border);
+    border-radius: 10px; padding: 4px; width: 100%;
+}
+.ep-btn {
+    width: 36px; height: 36px;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(255,255,255,0.1);
+    border: none; color: white; border-radius: 8px;
+    cursor: pointer; transition: 0.2s;
+}
+.ep-btn:hover { background: rgba(255,255,255,0.2); }
+.ep-input {
+    flex: 1; background: transparent; border: none;
+    color: white; text-align: center; font-size: 1.1rem;
+    font-weight: 700; outline: none;
+}
+
+/* Category Toggle */
+.cat-toggle {
+    display: flex; background: rgba(0,0,0,0.3);
+    padding: 4px; border-radius: 10px; width: fit-content;
+}
+.cat-opt {
+    padding: 6px 16px; border-radius: 8px;
+    font-size: 0.85rem; color: #888;
+    cursor: pointer; transition: all 0.2s; font-weight: 600;
+}
+.cat-opt.active { background: rgba(255,255,255,0.15); color: white; }
+.cat-opt.disabled { opacity: 0.3; pointer-events: none; text-decoration: line-through; }
+
+.grid-loader {
+    width: 100%; padding: 20px; text-align: center;
+    color: var(--text-muted); font-size: 0.9rem;
+}
+
+@media (max-width: 600px) {
+    .config-layout { flex-direction: column; }
+    .config-sidebar { width: 100%; flex-direction: row; }
+    .config-cover { width: 80px; }
+    .ep-control { width: auto; flex: 1; }
+}
+
+/* =========================================
+   8. ROOM LIST / LOBBY (If used externally)
+   ========================================= */
+.container { max-width: 1400px; margin: 0 auto; padding: 80px 40px 40px; }
+.header h1 {
+    font-size: 2.5rem; font-weight: 800;
+    background: var(--brand-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.rooms-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 24px;
+}
+.room-card {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px; padding: 24px;
+    backdrop-filter: var(--glass-blur);
+    cursor: pointer; transition: all 0.3s;
+}
+.room-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--brand-color);
+    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
+}
+.room-card-title { font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 4px; }
+.room-card-host { font-size: 0.85rem; color: var(--text-muted); }
+.room-card-footer {
+    display: flex; justify-content: space-between;
+    align-items: center; padding-top: 16px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 16px;
+}
+
+.join-host-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 24px;
+    animation: fadeIn 0.5s ease;
+}
+
+.join-avatar-container {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    padding: 3px;
+    background: var(--brand-gradient);
+    margin-bottom: 12px;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
+}
+
+.join-avatar-container img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid #1a1a1a; /* Borde oscuro para separar del gradiente */
+    background: #2a2a2a;
+}
+
+.join-text {
+    font-size: 1.1rem;
+    color: white;
+    font-weight: 500;
+    text-align: center;
+    margin: 0;
+}
+
+.join-text span {
+    font-weight: 700;
+    color: #a78bfa;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.video-toast-container {
+    position: absolute;
+    bottom: 100px; /* Encima de la barra de controles */
+    left: 20px;
+    z-index: 80; /* Por encima del video, debajo de los controles */
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    pointer-events: none; /* Permitir clicks a través de ellos */
+    max-width: 400px;
+}
+
+.video-toast {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(15, 15, 15, 0.85);
+    backdrop-filter: blur(8px);
+    padding: 8px 12px;
+    border-radius: 8px;
+    border-left: 3px solid var(--brand-color);
+    color: white;
+    font-size: 0.9rem;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+
+    /* Animación de entrada y salida */
+    animation: toastSlideIn 0.3s ease forwards, toastFadeOut 0.5s ease 4.5s forwards;
+    pointer-events: auto; /* Permitir seleccionar texto si se quiere */
+    opacity: 0;
+}
+
+.toast-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+}
+
+.toast-content {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.2;
+}
+
+.toast-user {
+    font-weight: 700;
+    font-size: 0.8rem;
+    color: #a78bfa;
+}
+
+.toast-msg {
+    color: #eee;
+    margin-top: 2px;
+}
+
+/* --- BADGE DE NOTIFICACIÓN (Punto Rojo) --- */
+#toggle-chat-btn {
+    position: relative;
+}
+
+#toggle-chat-btn.has-unread::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 10px;
+    height: 10px;
+    background-color: #ef4444; /* Rojo */
+    border: 2px solid #1a1a1a;
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+
+@keyframes toastSlideIn {
+    from { opacity: 0; transform: translateX(-20px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes toastFadeOut {
+    from { opacity: 1; transform: translateY(0); }
+    to { opacity: 0; transform: translateY(-10px); visibility: hidden; }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
+    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+}
+
+.video-toast.system-toast {
+    border-left-color: #9ca3af; /* Borde gris */
+    background: rgba(20, 20, 20, 0.7); /* Un poco más transparente */
+    justify-content: center;
+    padding: 6px 12px;
+    min-height: auto; /* Más compacto */
+}
+
+.video-toast.system-toast .toast-msg {
+    font-size: 0.85rem;
+    font-style: italic;
+    color: rgba(255, 255, 255, 0.8);
+    margin: 0;
+}

docker/views/gallery/gallery.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="/views/css/gallery/gallery.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
 
     <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
@@ -54,6 +55,7 @@
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/gallery/gallery.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>

docker/views/gallery/image.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="/views/css/gallery/image.css">
   <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+  <link rel="stylesheet" href="/views/css/components/create-room.css"/>
   <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
 </head>
 <body>
@@ -44,6 +45,7 @@
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
+<link rel="stylesheet" href="/views/css/components/create-room.css"/>
 <script src="/src/scripts/gallery/image.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>

docker/views/marketplace.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="/views/css/components/navbar.css">
     <link rel="stylesheet" href="/views/css/marketplace.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
 </head>
 <body>
@@ -54,6 +55,7 @@
 </main>
 
 <script src="/src/scripts/utils/notification-utils.js"></script>
+<link rel="stylesheet" href="/views/css/components/create-room.css"/>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/marketplace.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>

docker/views/profile.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/profile.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
 </head>
 <body>
 
@@ -214,6 +215,7 @@
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/utils/auth-utils.js"></script>

docker/views/room.html

@@ -0,0 +1,255 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
+    <title>Watch Party - WaifuBoard</title>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <script type="module">
+        import JASSUB from 'https://cdn.jsdelivr.net/npm/jassub@1.8.8/dist/jassub.es.js';
+        window.JASSUB = JASSUB;
+    </script>
+    <link rel="stylesheet" href="/views/css/globals.css" />
+    <link rel="stylesheet" href="/views/css/anime/player.css" />
+    <link rel="stylesheet" href="/views/css/room.css" />
+</head>
+<body>
+
+<div id="room-view">
+    <div class="room-layout" id="room-layout">
+        <div class="video-area">
+            <div class="room-header">
+                <div class="header-left">
+                    <button id="leave-room-btn" class="btn-icon-glass" title="Leave">
+                        <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">
+                            <span id="np-title" class="np-title">Waiting selection...</span>
+                            <span class="np-sep">•</span>
+                            <span id="np-episode" class="np-badge">Episode --</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="header-center" id="host-controls" style="display: none;">
+                    <div class="quick-controls-group">
+                        <div class="sd-toggle small" id="room-sd-toggle" data-state="sub">
+                            <div class="sd-bg"></div>
+                            <div class="sd-option active" data-val="sub">Sub</div>
+                            <div class="sd-option" data-val="dub">Dub</div>
+                        </div>
+
+                        <select id="room-ext-select" class="glass-select-sm" title="Extension">
+                            <option value="" disabled selected>Ext</option>
+                        </select>
+
+                        <select id="room-server-select" class="glass-select-sm" title="Server">
+                            <option value="" disabled selected>Server</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="header-right">
+                    <div class="viewers-pill">
+                        <svg width="14" height="14" 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><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                        <span id="room-viewers">0</span>
+                    </div>
+
+                    <button id="select-anime-btn" class="btn-glass-primary" style="display: none;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                        <span>Change Anime</span>
+                    </button>
+
+                    <button id="toggle-chat-btn" class="btn-icon-glass" title="Toggle Chat">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
+                    </button>
+                </div>
+            </div>
+
+            <div class="player-wrapper">
+                <div class="player-container show-cursor">
+                    <div class="video-frame">
+                        <canvas id="subtitles-canvas"></canvas>
+                        <div id="video-toast-container" class="video-toast-container"></div>
+                        <video id="player" crossorigin="anonymous" playsinline></video>
+
+                        <div id="player-loading" class="player-loading-overlay">
+                            <div class="spinner"></div>
+                            <p id="player-loading-text">Waiting for host...</p>
+                        </div>
+                    </div>
+
+                    <div class="custom-controls">
+                        <div class="progress-container">
+                            <div class="progress-buffer"></div>
+                            <div class="progress-played"></div>
+                            <div class="progress-handle"></div>
+                        </div>
+
+                        <div class="controls-row">
+                            <div class="controls-left">
+                                <button class="control-btn play-pause" id="play-pause-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                                </button>
+                                <button class="control-btn volume" id="volume-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>
+                                </button>
+                                <input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
+                                <span class="time-display" id="time-display">0:00 / 0:00</span>
+                            </div>
+
+                            <div class="controls-center"></div>
+
+                            <div class="controls-right">
+                                <button class="control-btn settings" id="settings-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
+                                </button>
+                                <div class="settings-panel" id="settings-panel"></div>
+                                <button class="control-btn fullscreen" id="fullscreen-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </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>
+
+            <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>
+    </div>
+</div>
+
+<div class="modal-overlay" id="join-room-modal">
+    <div class="modal-content">
+        <div id="join-host-info" class="join-host-info" style="display: none;">
+            <div class="join-avatar-container">
+                <img id="join-host-avatar" src="" alt="Host">
+            </div>
+            <p id="join-host-text" class="join-text"></p>
+        </div>
+
+        <h2 class="modal-title" style="text-align: center;">Join Room</h2>
+
+        <form id="join-room-form">
+            <div class="form-group">
+                <label>Your Name</label>
+                <input type="text" id="guest-name-input" placeholder="Enter your name" maxlength="30" />
+            </div>
+
+            <div class="form-group" id="password-group" style="display: none;">
+                <label>Room Password</label>
+                <input type="password" id="join-password-input" placeholder="Enter password" maxlength="50" />
+            </div>
+
+            <div class="form-actions" style="justify-content: center;">
+                <button type="button" class="btn-cancel" id="cancel-join-btn">Go Back</button>
+                <button type="submit" class="btn-confirm">Join Party</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div class="modal-overlay" id="anime-search-modal">
+    <div class="modal-content anime-search-content">
+        <button class="modal-close" id="close-search-modal">✕</button>
+
+        <div id="step-search">
+            <h2 class="modal-title">Select Anime</h2>
+            <div class="search-bar">
+                <input type="text" id="anime-search-input" placeholder="Search anime..." />
+                <button id="anime-search-btn">Search</button>
+            </div>
+            <div id="anime-results" class="anime-results"></div>
+        </div>
+
+        <div id="step-config" style="display: none;">
+            <div class="modal-header-row">
+                <button class="btn-icon-small" id="back-to-search" title="Back">
+                    <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>
+                <h2 class="modal-title" id="selected-anime-title">Configure Stream</h2>
+            </div>
+
+            <div class="config-layout">
+                <div class="config-sidebar">
+                    <img id="config-cover" class="config-cover" src="" alt="Cover">
+
+                    <div style="width: 100%">
+                        <div class="cfg-section-title">Episode</div>
+                        <div class="ep-control">
+                            <button class="ep-btn" id="ep-dec">−</button>
+                            <input type="number" id="inp-episode" class="ep-input" value="1" min="1">
+                            <button class="ep-btn" id="ep-inc">+</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="config-main">
+                    <div style="display:flex; justify-content:space-between; align-items:end; gap:10px; flex-wrap:wrap;">
+                        <div>
+                            <div class="cfg-section-title">Source</div>
+                            <div class="chips-grid" id="ext-chips-container">
+                            </div>
+                        </div>
+
+                        <div>
+                            <div class="cfg-section-title">Audio</div>
+                            <div class="cat-toggle" id="modal-sd-toggle">
+                                <div class="cat-opt active" data-val="sub">Subtitles</div>
+                                <div class="cat-opt" data-val="dub">Dubbed</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div>
+                        <div class="cfg-section-title">Select Server</div>
+                        <div class="chips-grid" id="server-chips-container">
+                            <div class="grid-loader">Select a source first</div>
+                        </div>
+                    </div>
+
+                    <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>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                            Play in Room
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/utils/search-manager.js"></script>
+<script src="/src/scripts/anime/subtitle-renderer.js"></script>
+<script src="/src/scripts/anime/player.js"></script>
+<script src="/src/scripts/room.js"></script>
+
+</body>
+</html>

docker/views/schedule.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/views/css/globals.css">
     <link rel="stylesheet" href="/views/css/schedule/schedule.css">
     <link rel="stylesheet" href="/views/css/components/navbar.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
 </head>
 <body>
@@ -76,6 +77,7 @@
     </div>
 
     <script src="/src/scripts/updateNotifier.js"></script>
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <script src="/src/scripts/schedule/schedule.js"></script>
     <script src="/src/scripts/auth-guard.js"></script>
     <script src="/src/scripts/settings.js"></script>