Merge remote-tracking branch origin/main into main

.env.example

@@ -0,0 +1,10 @@
+# Copiar a .env y ajustar
+PORT=3000
+JWT_SECRET=cambia_esto_en_produccion
+
+# Backend Xtream (Dispatcharr en tu red)
+# Ejemplo: http://10.10.10.101:9191
+# En la UI de KiraTV añades una fuente Xtream con la misma URL y usuario/contraseña de Dispatcharr.
+
+# Opcional: si usas balanceador dedicado solo para /api/transcode, la app debe generar URLs absolutas
+# con ese host (requiere cambios en front); por defecto mismo origen vía reverse proxy en 10.10.10.115

README.md

@@ -2,6 +2,11 @@
   <img src="public/img/logo-banner.png" alt="nodecast-tv" height="60" />
 </p>
 
+La aplicacion se ha modificado y personalizado.
+Esta app por defecto tenía problemas a la hora de desconectarse de un canal y conectarse a otro. Se han añadido comandos para que cuando desconectamos un canal haga un "delete" y así envitar en medida de lo posible conexiones múltiples y zombies.
+
+Se han añadido 3 Workers
+
 # What is nodecast-tv?
 
 nodecast-tv is a modern, web-based IPTV player featuring Live TV, EPG, Movies (VOD), and Series support. Built with performance and user experience in mind.
@@ -46,7 +51,7 @@ nodecast-tv is a modern, web-based IPTV player featuring Live TV, EPG, Movies (V
 
 1.  Clone the repository:
     ```bash
-    git clone https://github.com/yourusername/nodecast-tv.git
+    git clone https://github.com/technomancer702/nodecast-tv.git
     cd nodecast-tv
     ```
 
@@ -114,7 +119,7 @@ Ensure you have the [NVIDIA Container Toolkit](https://docs.nvidia.com/datacente
           devices:
             - driver: nvidia
               count: 1
-              capabilities: [gpu]
+              capabilities: [gpu, utility, video, compute]
 ```
 
 **Verify:**

nodecast.patch

@@ -0,0 +1,869 @@
+diff --git a/public/index.html b/public/index.html
+index dd74211..9205ef7 100644
+--- a/public/index.html
++++ b/public/index.html
+@@ -9,7 +9,7 @@
+   <meta name="mobile-web-app-capable" content="yes">
+   <title>nodecast-tv | IPTV Player</title>
+   <meta name="description" content="Stream live TV, movies, and series with EPG support">
+-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
++  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+   <link rel="stylesheet" href="css/main.css">
+   <link rel="preconnect" href="https://fonts.googleapis.com">
+   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+@@ -1095,20 +1095,20 @@
+   </div>
+ 
+   <!-- JavaScript -->
+-  <script src="/js/icons.js"></script>
+-  <script src="/js/api.js?v=2"></script>
+-  <script src="/js/components/VideoPlayer.js?v=2"></script>
+-  <script src="/js/components/ChannelList.js?v=3"></script>
+-  <script src="/js/components/SourceManager.js?v=2"></script>
+-  <script src="/js/components/EpgGuide.js?v=2"></script>
+-  <script src="/js/pages/HomePage.js?v=2"></script>
+-  <script src="/js/pages/LivePage.js?v=2"></script>
+-  <script src="/js/pages/Guide.js?v=2"></script>
+-  <script src="/js/pages/MoviesPage.js?v=4"></script>
+-  <script src="/js/pages/SeriesPage.js?v=1"></script>
+-  <script src="/js/pages/Settings.js?v=2"></script>
+-  <script src="/js/pages/WatchPage.js?v=1"></script>
+-  <script src="/js/app.js?v=4"></script>
++  <script src="js/icons.js"></script>
++  <script src="js/api.js?v=2"></script>
++  <script src="js/components/VideoPlayer.js?v=2"></script>
++  <script src="js/components/ChannelList.js?v=3"></script>
++  <script src="js/components/SourceManager.js?v=2"></script>
++  <script src="js/components/EpgGuide.js?v=2"></script>
++  <script src="js/pages/HomePage.js?v=2"></script>
++  <script src="js/pages/LivePage.js?v=2"></script>
++  <script src="js/pages/Guide.js?v=2"></script>
++  <script src="js/pages/MoviesPage.js?v=4"></script>
++  <script src="js/pages/SeriesPage.js?v=1"></script>
++  <script src="js/pages/Settings.js?v=2"></script>
++  <script src="js/pages/WatchPage.js?v=1"></script>
++  <script src="js/app.js?v=4"></script>
+   <script>
+     // Check for SSO token in URL
+     (function () {
+@@ -1125,4 +1125,4 @@
+   </script>
+ </body>
+ 
+-</html>
+\ No newline at end of file
++</html>
+diff --git a/public/js/api.js b/public/js/api.js
+index 77b1306..ed4b354 100644
+--- a/public/js/api.js
++++ b/public/js/api.js
+@@ -24,7 +24,7 @@ const API = {
+             options.body = JSON.stringify(data);
+         }
+ 
+-        const response = await fetch(`/api${endpoint}`, options);
++        const response = await fetch(`api/${endpoint}`, options);
+ 
+         let result;
+         const contentType = response.headers.get('content-type');
+@@ -39,7 +39,7 @@ const API = {
+             // If unauthorized, redirect to login
+             if (response.status === 401) {
+                 localStorage.removeItem('authToken');
+-                window.location.href = '/login.html';
++                window.location.href = 'login.html';
+                 return;
+             }
+             throw new Error(result.error || `Server responded with ${response.status}`);
+@@ -50,37 +50,37 @@ const API = {
+ 
+     // Sources
+     sources: {
+-        getAll: () => API.request('GET', '/sources'),
+-        getByType: (type) => API.request('GET', `/sources/type/${type}`),
+-        getById: (id) => API.request('GET', `/sources/${id}`),
+-        create: (data) => API.request('POST', '/sources', data),
+-        update: (id, data) => API.request('PUT', `/sources/${id}`, data),
+-        delete: (id) => API.request('DELETE', `/sources/${id}`),
+-        toggle: (id) => API.request('POST', `/sources/${id}/toggle`),
+-        test: (id) => API.request('POST', `/sources/${id}/test`),
+-        sync: (id) => API.request('POST', `/sources/${id}/sync`), // Manual sync
+-        getStatus: () => API.request('GET', '/sources/status'), // Get all statuses
+-        estimate: (id) => API.request('GET', `/sources/${id}/estimate`), // Estimate M3U size
+-        estimateByUrl: (url, type) => API.request('POST', '/sources/estimate', { url, type }), // Estimate by URL (before creation)
++        getAll: () => API.request('GET', 'sources'),
++        getByType: (type) => API.request('GET', `sources/type/${type}`),
++        getById: (id) => API.request('GET', `sources/${id}`),
++        create: (data) => API.request('POST', 'sources', data),
++        update: (id, data) => API.request('PUT', `sources/${id}`, data),
++        delete: (id) => API.request('DELETE', `sources/${id}`),
++        toggle: (id) => API.request('POST', `sources/${id}/toggle`),
++        test: (id) => API.request('POST', `sources/${id}/test`),
++        sync: (id) => API.request('POST', `sources/${id}/sync`), // Manual sync
++        getStatus: () => API.request('GET', 'sources/status'), // Get all statuses
++        estimate: (id) => API.request('GET', `sources/${id}/estimate`), // Estimate M3U size
++        estimateByUrl: (url, type) => API.request('POST', 'sources/estimate', { url, type }), // Estimate by URL (before creation)
+     },
+ 
+     // Channels (hidden items)
+     channels: {
+-        getHidden: (sourceId = null) => API.request('GET', `/channels/hidden${sourceId ? `?sourceId=${sourceId}` : ''}`),
+-        hide: (sourceId, itemType, itemId) => API.request('POST', '/channels/hide', { sourceId, itemType, itemId }),
+-        show: (sourceId, itemType, itemId) => API.request('POST', '/channels/show', { sourceId, itemType, itemId }),
+-        isHidden: (sourceId, itemType, itemId) => API.request('GET', `/channels/hidden/check?sourceId=${sourceId}&itemType=${itemType}&itemId=${itemId}`),
+-        bulkHide: (items) => API.request('POST', '/channels/hide/bulk', { items }),
+-        bulkShow: (items) => API.request('POST', '/channels/show/bulk', { items }),
++        getHidden: (sourceId = null) => API.request('GET', `channels/hidden${sourceId ? `?sourceId=${sourceId}` : ''}`),
++        hide: (sourceId, itemType, itemId) => API.request('POST', 'channels/hide', { sourceId, itemType, itemId }),
++        show: (sourceId, itemType, itemId) => API.request('POST', 'channels/show', { sourceId, itemType, itemId }),
++        isHidden: (sourceId, itemType, itemId) => API.request('GET', `channels/hidden/check?sourceId=${sourceId}&itemType=${itemType}&itemId=${itemId}`),
++        bulkHide: (items) => API.request('POST', 'channels/hide/bulk', { items }),
++        bulkShow: (items) => API.request('POST', 'channels/show/bulk', { items }),
+         // Fast bulk operations - single SQL statement
+-        showAll: (sourceId, contentType) => API.request('POST', '/channels/show/all', { sourceId, contentType }),
+-        hideAll: (sourceId, contentType) => API.request('POST', '/channels/hide/all', { sourceId, contentType })
++        showAll: (sourceId, contentType) => API.request('POST', 'channels/show/all', { sourceId, contentType }),
++        hideAll: (sourceId, contentType) => API.request('POST', 'channels/hide/all', { sourceId, contentType })
+     },
+ 
+     // Favorites
+     favorites: {
+         getAll: (sourceId = null, itemType = null) => {
+-            let url = '/favorites';
++            let url = 'favorites';
+             const params = [];
+             if (sourceId) params.push(`sourceId=${sourceId}`);
+             if (itemType) params.push(`itemType=${itemType}`);
+@@ -88,84 +88,84 @@ const API = {
+             return API.request('GET', url);
+         },
+         add: (sourceId, itemId, itemType = 'channel') =>
+-            API.request('POST', '/favorites', { sourceId, itemId, itemType }),
++            API.request('POST', 'favorites', { sourceId, itemId, itemType }),
+         remove: (sourceId, itemId, itemType = 'channel') =>
+-            API.request('DELETE', '/favorites', { sourceId, itemId, itemType }),
++            API.request('DELETE', 'favorites', { sourceId, itemId, itemType }),
+         check: (sourceId, itemId, itemType = 'channel') =>
+-            API.request('GET', `/favorites/check?sourceId=${sourceId}&itemId=${itemId}&itemType=${itemType}`)
++            API.request('GET', `favorites/check?sourceId=${sourceId}&itemId=${itemId}&itemType=${itemType}`)
+     },
+ 
+     // Proxy
+     proxy: {
+         // Xtream
+         xtream: {
+-            auth: (sourceId) => API.request('GET', `/proxy/xtream/${sourceId}/auth`),
++            auth: (sourceId) => API.request('GET', `proxy/xtream/${sourceId}/auth`),
+             liveCategories: (sourceId, options = {}) => {
+                 const params = options.includeHidden ? '?includeHidden=true' : '';
+-                return API.request('GET', `/proxy/xtream/${sourceId}/live_categories${params}`);
++                return API.request('GET', `proxy/xtream/${sourceId}/live_categories${params}`);
+             },
+             liveStreams: (sourceId, categoryId = null, options = {}) => {
+                 const params = [];
+                 if (categoryId) params.push(`category_id=${categoryId}`);
+                 if (options.includeHidden) params.push('includeHidden=true');
+                 const query = params.length ? `?${params.join('&')}` : '';
+-                return API.request('GET', `/proxy/xtream/${sourceId}/live_streams${query}`);
++                return API.request('GET', `proxy/xtream/${sourceId}/live_streams${query}`);
+             },
+             vodCategories: (sourceId, options = {}) => {
+                 const params = options.includeHidden ? '?includeHidden=true' : '';
+-                return API.request('GET', `/proxy/xtream/${sourceId}/vod_categories${params}`);
++                return API.request('GET', `proxy/xtream/${sourceId}/vod_categories${params}`);
+             },
+             vodStreams: (sourceId, categoryId = null, options = {}) => {
+                 const params = [];
+                 if (categoryId) params.push(`category_id=${categoryId}`);
+                 if (options.includeHidden) params.push('includeHidden=true');
+                 const query = params.length ? `?${params.join('&')}` : '';
+-                return API.request('GET', `/proxy/xtream/${sourceId}/vod_streams${query}`);
++                return API.request('GET', `proxy/xtream/${sourceId}/vod_streams${query}`);
+             },
+             seriesCategories: (sourceId, options = {}) => {
+                 const params = options.includeHidden ? '?includeHidden=true' : '';
+-                return API.request('GET', `/proxy/xtream/${sourceId}/series_categories${params}`);
++                return API.request('GET', `proxy/xtream/${sourceId}/series_categories${params}`);
+             },
+             series: (sourceId, categoryId = null, options = {}) => {
+                 const params = [];
+                 if (categoryId) params.push(`category_id=${categoryId}`);
+                 if (options.includeHidden) params.push('includeHidden=true');
+                 const query = params.length ? `?${params.join('&')}` : '';
+-                return API.request('GET', `/proxy/xtream/${sourceId}/series${query}`);
++                return API.request('GET', `proxy/xtream/${sourceId}/series${query}`);
+             },
+             seriesInfo: (sourceId, seriesId) =>
+-                API.request('GET', `/proxy/xtream/${sourceId}/series_info?series_id=${seriesId}`),
+-            shortEpg: (sourceId, streamId) => API.request('GET', `/proxy/xtream/${sourceId}/short_epg?stream_id=${streamId}`),
++                API.request('GET', `proxy/xtream/${sourceId}/series_info?series_id=${seriesId}`),
++            shortEpg: (sourceId, streamId) => API.request('GET', `proxy/xtream/${sourceId}/short_epg?stream_id=${streamId}`),
+             getStreamUrl: (sourceId, streamId, type = 'live', container = 'm3u8') =>
+-                API.request('GET', `/proxy/xtream/${sourceId}/stream/${streamId}/${type}?container=${container}`)
++                API.request('GET', `proxy/xtream/${sourceId}/stream/${streamId}/${type}?container=${container}`)
+         },
+ 
+         // EPG
+         epg: {
+-            get: (sourceId) => API.request('GET', `/proxy/epg/${sourceId}`),
+-            getForChannels: (sourceId, channelIds) => API.request('POST', `/proxy/epg/${sourceId}/channels`, { channelIds })
++            get: (sourceId) => API.request('GET', `proxy/epg/${sourceId}`),
++            getForChannels: (sourceId, channelIds) => API.request('POST', `proxy/epg/${sourceId}/channels`, { channelIds })
+         },
+ 
+         // Cache management
+         cache: {
+-            clear: (sourceId) => API.request('DELETE', `/proxy/cache/${sourceId}`)
++            clear: (sourceId) => API.request('DELETE', `proxy/cache/${sourceId}`)
+         }
+     },
+ 
+     // Settings
+     settings: {
+-        get: () => API.request('GET', '/settings'),
+-        update: (data) => API.request('PUT', '/settings', data),
+-        reset: () => API.request('DELETE', '/settings'),
+-        getDefaults: () => API.request('GET', '/settings/defaults')
++        get: () => API.request('GET', 'settings'),
++        update: (data) => API.request('PUT', 'settings', data),
++        reset: () => API.request('DELETE', 'settings'),
++        getDefaults: () => API.request('GET', 'settings/defaults')
+     },
+ 
+     // Users (admin only)
+     users: {
+-        getAll: () => API.request('GET', '/auth/users'),
+-        create: (data) => API.request('POST', '/auth/users', data),
+-        update: (id, data) => API.request('PUT', `/auth/users/${id}`, data),
+-        delete: (id) => API.request('DELETE', `/auth/users/${id}`)
++        getAll: () => API.request('GET', 'auth/users'),
++        create: (data) => API.request('POST', 'auth/users', data),
++        update: (id, data) => API.request('PUT', `auth/users/${id}`, data),
++        delete: (id) => API.request('DELETE', `auth/users/${id}`)
+     }
+ };
+ 
+diff --git a/public/js/app.js b/public/js/app.js
+index c4d2f8c..f00dc38 100644
+--- a/public/js/app.js
++++ b/public/js/app.js
+@@ -169,13 +169,13 @@ class App {
+ 
+         if (!token) {
+             // No token, redirect to login (replace to avoid back button issues)
+-            window.location.replace('/login.html');
++            window.location.replace('login.html');
+             return;
+         }
+ 
+         try {
+             // Verify token with server
+-            const response = await fetch('/api/auth/me', {
++            const response = await fetch('api/auth/me', {
+                 headers: {
+                     'Authorization': `Bearer ${token}`
+                 }
+@@ -201,7 +201,7 @@ class App {
+         } catch (err) {
+             console.error('Authentication error:', err);
+             localStorage.removeItem('authToken');
+-            window.location.replace('/login.html');
++            window.location.replace('login.html');
+         }
+     }
+ 
+@@ -225,7 +225,7 @@ class App {
+ 
+             const token = localStorage.getItem('authToken');
+             if (token) {
+-                await fetch('/api/auth/logout', {
++                await fetch('api/auth/logout', {
+                     method: 'POST',
+                     headers: {
+                         'Authorization': `Bearer ${token}`
+@@ -234,7 +234,7 @@ class App {
+             }
+ 
+             localStorage.removeItem('authToken');
+-            window.location.replace('/login.html');
++            window.location.replace('login.html');
+         });
+ 
+         navbar.appendChild(logoutLink);
+@@ -283,7 +283,7 @@ document.addEventListener('DOMContentLoaded', () => {
+     window.app = new App();
+ 
+     // Fetch and display version badge
+-    fetch('/api/version')
++    fetch('api/version')
+         .then(res => res.json())
+         .then(data => {
+             const badge = document.getElementById('version-badge');
+diff --git a/public/js/components/ChannelList.js b/public/js/components/ChannelList.js
+index e8da5ad..2047dbf 100644
+--- a/public/js/components/ChannelList.js
++++ b/public/js/components/ChannelList.js
+@@ -33,10 +33,10 @@ class ChannelList {
+      * Only proxies HTTP URLs when on HTTPS page
+      */
+     getProxiedImageUrl(url) {
+-        if (!url || url.length === 0) return '/img/placeholder.png';
++        if (!url || url.length === 0) return 'img/placeholder.png';
+         // Only proxy if we're on HTTPS and the image is HTTP
+         if (window.location.protocol === 'https:' && url.startsWith('http://')) {
+-            return `/api/proxy/image?url=${encodeURIComponent(url)}`;
++            return `api/proxy/image?url=${encodeURIComponent(url)}`;
+         }
+         return url;
+     }
+@@ -510,7 +510,7 @@ class ChannelList {
+                data-render-id="${renderId}"
+                data-render-group="${renderGroup}">
+             <img class="channel-logo" src="${this.getProxiedImageUrl(channel.tvgLogo)}" 
+-                 alt="" onerror="this.onerror=null;this.src='/img/placeholder.png'">
++                 alt="" onerror="this.onerror=null;this.src='img/placeholder.png'">
+             <div class="channel-info">
+               <div class="channel-name">${this.escapeHtml(channel.name)}</div>
+               <div class="channel-program">${this.escapeHtml(this.getProgramInfo(channel) || '')}</div>
+@@ -623,7 +623,7 @@ class ChannelList {
+                data-render-id="${renderId}"
+                data-render-group="${renderGroup}">
+             <img class="channel-logo" src="${this.getProxiedImageUrl(channel.tvgLogo)}" 
+-                 alt="" onerror="this.onerror=null;this.src='/img/placeholder.png'">
++                 alt="" onerror="this.onerror=null;this.src='img/placeholder.png'">
+             <div class="channel-info">
+               <div class="channel-name">${this.escapeHtml(channel.name)}</div>
+               <div class="channel-program">${this.escapeHtml(this.getProgramInfo(channel) || '')}</div>
+@@ -1052,7 +1052,7 @@ class ChannelList {
+ 
+         div.innerHTML = `
+             <img class="channel-logo" src="${this.getProxiedImageUrl(channel.tvgLogo)}" 
+-                 alt="" onerror="this.onerror=null;this.src='/img/placeholder.png'">
++                 alt="" onerror="this.onerror=null;this.src='img/placeholder.png'">
+             <div class="channel-info">
+               <div class="channel-name">${this.escapeHtml(channel.name)}</div>
+               <div class="channel-program">${this.getProgramInfo(channel) || ''}</div>
+@@ -1305,7 +1305,7 @@ class ChannelList {
+             <div class="epg-info-modal">
+                 <div class="channel-details">
+                     <img class="channel-logo" src="${this.getProxiedImageUrl(channel.tvgLogo)}" 
+-                         onerror="this.onerror=null;this.src='/img/placeholder.png'" />
++                         onerror="this.onerror=null;this.src='img/placeholder.png'" />
+                     <div class="channel-meta">
+                         <p><strong>Group:</strong> ${this.escapeHtml(channel.groupTitle || 'Uncategorized')}</p>
+                         <p><strong>Source:</strong> ${channel.sourceType}</p>
+diff --git a/public/js/components/EpgGuide.js b/public/js/components/EpgGuide.js
+index ce4a01d..7b0da96 100644
+--- a/public/js/components/EpgGuide.js
++++ b/public/js/components/EpgGuide.js
+@@ -43,10 +43,10 @@ class EpgGuide {
+      * Only proxies HTTP URLs when on HTTPS page
+      */
+     getProxiedImageUrl(url) {
+-        if (!url || url.length === 0) return '/img/placeholder.png';
++        if (!url || url.length === 0) return 'img/placeholder.png';
+         // Only proxy if we're on HTTPS and the image is HTTP
+         if (window.location.protocol === 'https:' && url.startsWith('http://')) {
+-            return `/api/proxy/image?url=${encodeURIComponent(url)}`;
++            return `api/proxy/image?url=${encodeURIComponent(url)}`;
+         }
+         return url;
+     }
+@@ -212,7 +212,7 @@ class EpgGuide {
+         // Load EPG from ALL sources in parallel
+         const fetchPromises = sources.map(async (source) => {
+             try {
+-                const response = await fetch(`/api/proxy/epg/${source.id}${queryParams}`);
++                const response = await fetch(`api/proxy/epg/${source.id}${queryParams}`);
+                 if (!response.ok) throw new Error(`Status ${response.status}`);
+                 return await response.json();
+             } catch (e) {
+@@ -596,7 +596,7 @@ class EpgGuide {
+               ${isFavorite ? Icons.favorite : Icons.favoriteOutline}
+             </button>
+             <img class="epg-channel-logo" src="${logo}" 
+-                 alt="" onerror="this.onerror=null;this.src='/img/placeholder.png'">
++                 alt="" onerror="this.onerror=null;this.src='img/placeholder.png'">
+             <span class="epg-channel-name">${name}</span>
+             <div class="resize-handle"></div>
+           </div>
+diff --git a/public/js/components/VideoPlayer.js b/public/js/components/VideoPlayer.js
+index a089dab..ac3b71c 100644
+--- a/public/js/components/VideoPlayer.js
++++ b/public/js/components/VideoPlayer.js
+@@ -805,7 +805,7 @@ class VideoPlayer {
+     async startTranscodeSession(url, options = {}) {
+         try {
+             console.log('[Player] Starting HLS transcode session...', options);
+-            const res = await fetch('/api/transcode/session', {
++            const res = await fetch('api/transcode/session', {
+                 method: 'POST',
+                 headers: { 'Content-Type': 'application/json' },
+                 body: JSON.stringify({ url, ...options })
+@@ -817,7 +817,7 @@ class VideoPlayer {
+         } catch (err) {
+             console.error('[Player] Session start failed:', err);
+             // Fallback to direct transcode if session fails
+-            return `/api/transcode?url=${encodeURIComponent(url)}`;
++            return `api/transcode?url=${encodeURIComponent(url)}`;
+         }
+     }
+ 
+@@ -829,7 +829,7 @@ class VideoPlayer {
+             console.log('[Player] Stopping transcode session:', this.currentSessionId);
+             try {
+                 // Fire and forget cleanup
+-                fetch(`/api/transcode/${this.currentSessionId}`, { method: 'DELETE' });
++                fetch(`api/transcode/${this.currentSessionId}`, { method: 'DELETE' });
+             } catch (err) {
+                 console.error('Failed to stop session:', err);
+             }
+@@ -865,7 +865,7 @@ class VideoPlayer {
+             if (this.settings.autoTranscode) {
+                 console.log('[Player] Auto Transcode enabled. Probing stream...');
+                 try {
+-                    const probeRes = await fetch(`/api/probe?url=${encodeURIComponent(streamUrl)}`);
++                    const probeRes = await fetch(`api/probe?url=${encodeURIComponent(streamUrl)}`);
+                     const info = await probeRes.json();
+                     console.log(`[Player] Probe result: video=${info.video}, audio=${info.audio}, ${info.width}x${info.height}, compatible=${info.compatible}`);
+ 
+@@ -885,7 +885,7 @@ class VideoPlayer {
+                             track.kind = 'subtitles';
+                             track.label = sub.title;
+                             track.srclang = sub.language;
+-                            track.src = `/api/subtitle?url=${encodeURIComponent(streamUrl)}&index=${sub.index}`;
++                            track.src = `api/subtitle?url=${encodeURIComponent(streamUrl)}&index=${sub.index}`;
+                             this.video.appendChild(track);
+                         });
+ 
+@@ -925,7 +925,7 @@ class VideoPlayer {
+                         // Raw .ts container - use remux
+                         console.log('[Player] Auto: Using remux (.ts container)');
+                         this.updateTranscodeStatus('remuxing', 'Remux (Auto)');
+-                        const remuxUrl = `/api/remux?url=${encodeURIComponent(streamUrl)}`;
++                        const remuxUrl = `api/remux?url=${encodeURIComponent(streamUrl)}`;
+                         this.currentUrl = remuxUrl;
+                         this.video.src = remuxUrl;
+                         this.video.play().catch(e => {
+@@ -997,7 +997,7 @@ class VideoPlayer {
+                 // Probe to get video codec for HEVC tag handling
+                 let videoCodec = 'unknown';
+                 try {
+-                    const probeRes = await fetch(`/api/probe?url=${encodeURIComponent(streamUrl)}`);
++                    const probeRes = await fetch(`api/probe?url=${encodeURIComponent(streamUrl)}`);
+                     const info = await probeRes.json();
+                     videoCodec = info.video;
+                 } catch (e) { console.warn('Probe failed for force audio, assuming h264'); }
+@@ -1096,7 +1096,7 @@ class VideoPlayer {
+                             (data.type === Hls.ErrorTypes.MEDIA_ERROR && data.details === 'fragParsingError');
+ 
+                         // Don't proxy if it's already a local API URL
+-                        const isLocalApi = this.currentUrl.startsWith('/api/');
++                        const isLocalApi = this.currentUrl.startsWith('api/');
+ 
+                         if (isCorsLikely && !this.isUsingProxy && !isLocalApi) {
+                             console.log('CORS/Network error detected, retrying via proxy...', data.details);
+@@ -1344,14 +1344,14 @@ class VideoPlayer {
+      * Get proxied URL for a stream
+      */
+     getProxiedUrl(url) {
+-        return `/api/proxy/stream?url=${encodeURIComponent(url)}`;
++        return `api/proxy/stream?url=${encodeURIComponent(url)}`;
+     }
+ 
+     /**
+      * Get transcoded URL for a stream (audio transcoding for browser compatibility)
+      */
+     getTranscodeUrl(url) {
+-        return `/api/transcode?url=${encodeURIComponent(url)}`;
++        return `api/transcode?url=${encodeURIComponent(url)}`;
+     }
+ 
+     /**
+@@ -1359,7 +1359,7 @@ class VideoPlayer {
+      * Used for raw .ts streams that browsers can't play directly
+      */
+     getRemuxUrl(url) {
+-        return `/api/remux?url=${encodeURIComponent(url)}`;
++        return `api/remux?url=${encodeURIComponent(url)}`;
+     }
+ 
+     /**
+diff --git a/public/js/login.js b/public/js/login.js
+index a246d10..e2339f3 100644
+--- a/public/js/login.js
++++ b/public/js/login.js
+@@ -5,10 +5,10 @@ document.getElementById('login-form').addEventListener('submit', async (e) => {
+     const password = document.getElementById('password').value;
+ 
+     try {
+-        const response = await API.request('POST', '/auth/login', { username, password });
++        const response = await API.request('POST', 'auth/login', { username, password });
+         localStorage.setItem('sessionToken', response.token);
+-        window.location.href = '/';
++        window.location.href = 'index.html';
+     } catch (err) {
+         document.getElementById('login-error').textContent = 'Login failed: ' + err.message;
+     }
+-});
+\ No newline at end of file
++});
+diff --git a/public/js/pages/HomePage.js b/public/js/pages/HomePage.js
+index 6ddadc1..c8a1805 100644
+--- a/public/js/pages/HomePage.js
++++ b/public/js/pages/HomePage.js
+@@ -174,7 +174,7 @@ class HomePage {
+             await this.renderFavoriteChannels();
+ 
+             // 1. Load Watch History
+-            const history = await window.API.request('GET', '/history?limit=12');
++            const history = await window.API.request('GET', 'history?limit=12');
+             if (history && Array.isArray(history)) {
+                 this.renderHistory(history);
+             }
+@@ -197,7 +197,7 @@ class HomePage {
+ 
+         try {
+             // Fetch favorite channels for current user
+-            const favorites = await window.API.request('GET', '/favorites?itemType=channel');
++            const favorites = await window.API.request('GET', 'favorites?itemType=channel');
+ 
+             if (!favorites || favorites.length === 0) {
+                 list.innerHTML = '<div class="empty-state hint">Add channels to favorites from Live TV</div>';
+@@ -251,14 +251,14 @@ class HomePage {
+     }
+ 
+     createChannelTile(channel) {
+-        const logo = channel.tvgLogo || '/img/placeholder.png';
+-        const logoUrl = logo.startsWith('http') ? `/api/proxy/image?url=${encodeURIComponent(logo)}` : logo;
++        const logo = channel.tvgLogo || 'img/placeholder.png';
++        const logoUrl = logo.startsWith('http') ? `api/proxy/image?url=${encodeURIComponent(logo)}` : logo;
+         const name = channel.name || 'Unknown';
+ 
+         return `
+             <div class="channel-tile" data-channel-id="${channel.id}" data-source-id="${channel.sourceId}">
+                 <div class="tile-logo">
+-                    <img src="${logoUrl}" alt="${name}" loading="lazy" onerror="this.onerror=null;this.src='/img/placeholder.png'">
++                    <img src="${logoUrl}" alt="${name}" loading="lazy" onerror="this.onerror=null;this.src='img/placeholder.png'">
+                 </div>
+                 <div class="tile-name" title="${name}">${name}</div>
+             </div>
+@@ -352,7 +352,7 @@ class HomePage {
+         if (!list) return;
+ 
+         try {
+-            const movies = await window.API.request('GET', '/channels/recent?type=movie&limit=12');
++            const movies = await window.API.request('GET', 'channels/recent?type=movie&limit=12');
+             if (!movies || movies.length === 0) {
+                 list.innerHTML = '<div class="empty-state hint">No recently added movies found</div>';
+                 return;
+@@ -381,7 +381,7 @@ class HomePage {
+         if (!list) return;
+ 
+         try {
+-            const series = await window.API.request('GET', '/channels/recent?type=series&limit=12');
++            const series = await window.API.request('GET', 'channels/recent?type=series&limit=12');
+             if (!series || series.length === 0) {
+                 list.innerHTML = '<div class="empty-state hint">No recently added series found</div>';
+                 return;
+@@ -411,13 +411,13 @@ class HomePage {
+         const percent = Math.min(100, Math.round((progress / duration) * 100));
+ 
+         // Proxy the poster if it's an external URL
+-        const poster = data.poster || '/img/poster-placeholder.jpg';
+-        const posterUrl = poster.startsWith('http') ? `/api/proxy/image?url=${encodeURIComponent(poster)}` : poster;
++        const poster = data.poster || 'img/poster-placeholder.jpg';
++        const posterUrl = poster.startsWith('http') ? `api/proxy/image?url=${encodeURIComponent(poster)}` : poster;
+ 
+         return `
+             <div class="dashboard-card" data-id="${item_id}" data-type="${type}">
+                 <div class="card-image">
+-                    <img src="${posterUrl}" alt="${data.title || item.name}" loading="lazy" onerror="this.onerror=null;this.src='/img/poster-placeholder.jpg'">
++                    <img src="${posterUrl}" alt="${data.title || item.name}" loading="lazy" onerror="this.onerror=null;this.src='img/poster-placeholder.jpg'">
+                     <div class="progress-bar-container">
+                         <div class="progress-bar" style="width: ${percent}%"></div>
+                     </div>
+@@ -436,13 +436,13 @@ class HomePage {
+     createRecentCard(item) {
+         const { data, item_id } = item;
+         const type = item.type || item.item_type;
+-        const poster = item.stream_icon || data.poster || '/img/poster-placeholder.jpg';
+-        const posterUrl = poster.startsWith('http') ? `/api/proxy/image?url=${encodeURIComponent(poster)}` : poster;
++        const poster = item.stream_icon || data.poster || 'img/poster-placeholder.jpg';
++        const posterUrl = poster.startsWith('http') ? `api/proxy/image?url=${encodeURIComponent(poster)}` : poster;
+ 
+         return `
+             <div class="dashboard-card" data-id="${item_id}" data-type="${type}">
+                 <div class="card-image">
+-                    <img src="${posterUrl}" alt="${item.name}" loading="lazy" onerror="this.onerror=null;this.src='/img/poster-placeholder.jpg'">
++                    <img src="${posterUrl}" alt="${item.name}" loading="lazy" onerror="this.onerror=null;this.src='img/poster-placeholder.jpg'">
+                     <div class="play-icon-overlay">
+                         <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                     </div>
+@@ -465,7 +465,7 @@ class HomePage {
+             const streamId = item.item_id;
+             const container = item.container_extension || (item.data && item.data.containerExtension) || 'mp4';
+ 
+-            const result = await window.API.request('GET', `/proxy/xtream/${sourceId}/stream/${streamId}/${streamType}?container=${container}`);
++            const result = await window.API.request('GET', `proxy/xtream/${sourceId}/stream/${streamId}/${streamType}?container=${container}`);
+ 
+             if (result && result.url) {
+                 const content = {
+@@ -488,7 +488,7 @@ class HomePage {
+                     // Fetch seriesInfo if we have a seriesId
+                     if (content.seriesId && sourceId) {
+                         try {
+-                            const seriesInfo = await window.API.request('GET', `/proxy/xtream/${sourceId}/series_info?series_id=${content.seriesId}`);
++                            const seriesInfo = await window.API.request('GET', `proxy/xtream/${sourceId}/series_info?series_id=${content.seriesId}`);
+                             if (seriesInfo) {
+                                 content.seriesInfo = seriesInfo;
+                             }
+diff --git a/public/js/pages/MoviesPage.js b/public/js/pages/MoviesPage.js
+index a5bb40f..c27fba6 100644
+--- a/public/js/pages/MoviesPage.js
++++ b/public/js/pages/MoviesPage.js
+@@ -278,7 +278,7 @@ class MoviesPage {
+             card.dataset.movieId = movie.stream_id;
+             card.dataset.sourceId = movie.sourceId;
+ 
+-            const poster = movie.stream_icon || movie.cover || '/img/placeholder.png';
++            const poster = movie.stream_icon || movie.cover || 'img/placeholder.png';
+             const year = movie.year || movie.releaseDate?.substring(0, 4) || '';
+             const rating = movie.rating ? `${Icons.star} ${movie.rating}` : '';
+ 
+@@ -287,7 +287,7 @@ class MoviesPage {
+             card.innerHTML = `
+                 <div class="movie-poster">
+                     <img src="${poster}" alt="${movie.name}" 
+-                         onerror="this.onerror=null;this.src='/img/placeholder.png'" loading="lazy">
++                         onerror="this.onerror=null;this.src='img/placeholder.png'" loading="lazy">
+                     <div class="movie-play-overlay">
+                         <span class="play-icon">${Icons.play}</span>
+                     </div>
+diff --git a/public/js/pages/SeriesPage.js b/public/js/pages/SeriesPage.js
+index 6b7a929..1a25f85 100644
+--- a/public/js/pages/SeriesPage.js
++++ b/public/js/pages/SeriesPage.js
+@@ -288,7 +288,7 @@ class SeriesPage {
+             card.dataset.seriesId = series.series_id;
+             card.dataset.sourceId = series.sourceId;
+ 
+-            const poster = series.cover || '/img/placeholder.png';
++            const poster = series.cover || 'img/placeholder.png';
+             const year = series.year || series.releaseDate?.substring(0, 4) || '';
+             const rating = series.rating ? `${Icons.star} ${series.rating}` : '';
+ 
+@@ -297,7 +297,7 @@ class SeriesPage {
+             card.innerHTML = `
+                 <div class="series-poster">
+                     <img src="${poster}" alt="${series.name}" 
+-                         onerror="this.onerror=null;this.src='/img/placeholder.png'" loading="lazy">
++                         onerror="this.onerror=null;this.src='img/placeholder.png'" loading="lazy">
+                     <div class="series-play-overlay">
+                         <span class="play-icon">${Icons.play}</span>
+                     </div>
+@@ -350,7 +350,7 @@ class SeriesPage {
+         this.detailsPanel.classList.remove('hidden');
+ 
+         // Set header info
+-        document.getElementById('series-poster').src = series.cover || '/img/placeholder.png';
++        document.getElementById('series-poster').src = series.cover || 'img/placeholder.png';
+         document.getElementById('series-title').textContent = series.name;
+         document.getElementById('series-plot').textContent = series.plot || '';
+ 
+diff --git a/public/js/pages/Settings.js b/public/js/pages/Settings.js
+index a47b5d7..437d7a5 100644
+--- a/public/js/pages/Settings.js
++++ b/public/js/pages/Settings.js
+@@ -259,7 +259,7 @@ class SettingsPage {
+         if (!container) return;
+ 
+         try {
+-            const response = await fetch('/api/settings/hw-info');
++            const response = await fetch('api/settings/hw-info');
+             if (!response.ok) throw new Error('Failed to fetch hardware info');
+             const hwInfo = await response.json();
+ 
+@@ -603,7 +603,7 @@ class SettingsPage {
+ 
+         try {
+             // Fetch last sync time from server
+-            const response = await fetch('/api/settings/sync-status');
++            const response = await fetch('api/settings/sync-status');
+             if (!response.ok) throw new Error('Failed to fetch sync status');
+             const data = await response.json();
+ 
+diff --git a/public/js/pages/WatchPage.js b/public/js/pages/WatchPage.js
+index b85ca63..2aecdfd 100644
+--- a/public/js/pages/WatchPage.js
++++ b/public/js/pages/WatchPage.js
+@@ -329,7 +329,7 @@ class WatchPage {
+     async startTranscodeSession(url, options = {}) {
+         try {
+             console.log('[WatchPage] Starting HLS transcode session...', options);
+-            const res = await fetch('/api/transcode/session', {
++            const res = await fetch('api/transcode/session', {
+                 method: 'POST',
+                 headers: { 'Content-Type': 'application/json' },
+                 body: JSON.stringify({
+@@ -345,7 +345,7 @@ class WatchPage {
+         } catch (err) {
+             console.error('[WatchPage] Session start failed:', err);
+             // Fallback to direct transcode if session fails
+-            return `/api/transcode?url=${encodeURIComponent(url)}`;
++            return `api/transcode?url=${encodeURIComponent(url)}`;
+         }
+     }
+ 
+@@ -357,7 +357,7 @@ class WatchPage {
+             console.log('[WatchPage] Stopping transcode session:', this.currentSessionId);
+             try {
+                 // Fire and forget cleanup
+-                fetch(`/api/transcode/${this.currentSessionId}`, { method: 'DELETE' });
++                fetch(`api/transcode/${this.currentSessionId}`, { method: 'DELETE' });
+             } catch (err) {
+                 console.error('Failed to stop session:', err);
+             }
+@@ -437,7 +437,7 @@ class WatchPage {
+             console.log('[WatchPage] Auto Transcode enabled. Probing stream...');
+             try {
+                 const ua = settings.userAgentPreset === 'custom' ? settings.userAgentCustom : settings.userAgentPreset;
+-                const probeRes = await fetch(`/api/probe?url=${encodeURIComponent(url)}&ua=${encodeURIComponent(ua || '')}`);
++                const probeRes = await fetch(`api/probe?url=${encodeURIComponent(url)}&ua=${encodeURIComponent(ua || '')}`);
+                 const info = await probeRes.json();
+                 console.log(`[WatchPage] Probe result: video=${info.video}, audio=${info.audio}, ${info.width}x${info.height}, compatible=${info.compatible}`);
+ 
+@@ -470,7 +470,7 @@ class WatchPage {
+                     // TODO: Move remux to session logic if seeking is needed for TS files
+                     console.log('[WatchPage] Auto: Using remux (.ts container)');
+                     this.updateTranscodeStatus('remuxing', 'Remux (Auto)');
+-                    const finalUrl = `/api/remux?url=${encodeURIComponent(url)}`;
++                    const finalUrl = `api/remux?url=${encodeURIComponent(url)}`;
+                     this.video.src = finalUrl;
+                     this.video.play().catch(e => {
+                         if (e.name !== 'AbortError') console.error('[WatchPage] Autoplay error:', e);
+@@ -509,7 +509,7 @@ class WatchPage {
+             let videoCodec = 'unknown';
+             try {
+                 const ua = settings.userAgentPreset === 'custom' ? settings.userAgentCustom : settings.userAgentPreset;
+-                const probeRes = await fetch(`/api/probe?url=${encodeURIComponent(url)}&ua=${encodeURIComponent(ua || '')}`);
++                const probeRes = await fetch(`api/probe?url=${encodeURIComponent(url)}&ua=${encodeURIComponent(ua || '')}`);
+                 const info = await probeRes.json();
+                 videoCodec = info.video;
+             } catch (e) { console.warn('Probe failed for force audio, assuming h264'); }
+@@ -528,7 +528,7 @@ class WatchPage {
+         if (settings.forceRemux && isRawTs) {
+             console.log('[WatchPage] Force Remux enabled');
+             this.updateTranscodeStatus('remuxing', 'Remux (Force)');
+-            const finalUrl = `/api/remux?url=${encodeURIComponent(url)}`;
++            const finalUrl = `api/remux?url=${encodeURIComponent(url)}`;
+             this.video.src = finalUrl;
+             this.video.play().catch(e => {
+                 if (e.name !== 'AbortError') console.error('[WatchPage] Autoplay error:', e);
+@@ -540,7 +540,7 @@ class WatchPage {
+         // Determine if proxy is needed
+         const proxyRequiredDomains = ['pluto.tv'];
+         const needsProxy = settings.forceProxy || proxyRequiredDomains.some(domain => url.includes(domain));
+-        const finalUrl = needsProxy ? `/api/proxy/stream?url=${encodeURIComponent(url)}` : url;
++        const finalUrl = needsProxy ? `api/proxy/stream?url=${encodeURIComponent(url)}` : url;
+ 
+         console.log('[WatchPage] Playing:', { url, needsProxy, looksLikeHls });
+ 
+@@ -600,9 +600,9 @@ class WatchPage {
+                 console.error('[WatchPage] HLS fatal error:', data);
+                 // Try proxy on CORS error (only if not already proxied/transcoded)
+                 // Note: Transcoded streams are local, so no CORS issues usually
+-                if (!url.startsWith('/api/') && (data.type === Hls.ErrorTypes.NETWORK_ERROR)) {
++                if (!url.startsWith('api/') && (data.type === Hls.ErrorTypes.NETWORK_ERROR)) {
+                     console.log('[WatchPage] Retrying via proxy...');
+-                    this.playHls(`/api/proxy/stream?url=${encodeURIComponent(this.currentUrl)}`);
++                    this.playHls(`api/proxy/stream?url=${encodeURIComponent(this.currentUrl)}`);
+                 } else {
+                     this.hls.destroy();
+                 }
+@@ -1030,7 +1030,7 @@ class WatchPage {
+         if (!this.content) return;
+ 
+         const isChannel = this.content.type === 'channel' || !this.content.type; // Default to channel if unknown
+-        const fallback = isChannel ? '/img/placeholder.png' : '/img/poster-placeholder.jpg';
++        const fallback = isChannel ? 'img/placeholder.png' : 'img/poster-placeholder.jpg';
+ 
+         this.posterEl.onerror = () => {
+             this.posterEl.onerror = null;
+@@ -1130,9 +1130,9 @@ class WatchPage {
+ 
+         this.recommendedGrid.innerHTML = movies.map(movie => `
+             <div class="watch-recommended-card" data-id="${movie.stream_id}" data-source="${sourceId}">
+-                <img src="${movie.stream_icon || movie.cover || '/img/placeholder.png'}" 
++                <img src="${movie.stream_icon || movie.cover || 'img/placeholder.png'}" 
+                      alt="${movie.name}" 
+-                     onerror="this.onerror=null;this.src='/img/placeholder.png'" loading="lazy">
++                     onerror="this.onerror=null;this.src='img/placeholder.png'" loading="lazy">
+                 <p>${movie.name}</p>
+             </div>
+         `).join('');
+@@ -1417,7 +1417,7 @@ class WatchPage {
+                 currentEpisode: this.currentEpisode || null
+             };
+ 
+-            await window.API.request('POST', '/history', {
++            await window.API.request('POST', 'history', {
+                 id: this.content.id,
+                 type: this.content.type === 'movie' ? 'movie' : 'episode',
+                 sourceId: this.content.sourceId,
+diff --git a/public/login.html b/public/login.html
+index 454acfe..34bcb46 100644
+--- a/public/login.html
++++ b/public/login.html
+@@ -5,7 +5,7 @@
+     <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>Login - NodeCast TV</title>
+-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
++    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+     <link rel="stylesheet" href="css/main.css">
+     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+     <style>
+@@ -228,7 +228,7 @@
+     <script>
+         // Start SSO Login
+         document.getElementById('btn-sso-login').addEventListener('click', () => {
+-            window.location.href = '/api/auth/oidc/login';
++            window.location.href = 'api/auth/oidc/login';
+         });
+ 
+         // Check for URL Error params
+@@ -247,7 +247,7 @@
+ 
+         async function checkSetupRequired() {
+             try {
+-                const response = await fetch('/api/auth/setup-required');
++                const response = await fetch('api/auth/setup-required');
+                 const data = await response.json();
+ 
+                 if (data.setupRequired) {
+@@ -283,7 +283,7 @@
+             submitBtn.textContent = 'Please wait...';
+ 
+             try {
+-                const endpoint = isSetupMode ? '/api/auth/setup' : '/api/auth/login';
++                const endpoint = isSetupMode ? 'api/auth/setup' : 'api/auth/login';
+                 const response = await fetch(endpoint, {
+                     method: 'POST',
+                     headers: {
+@@ -302,7 +302,7 @@
+                 localStorage.setItem('authToken', data.token);
+ 
+                 // Redirect to main app (replace history to prevent back button issues)
+-                window.location.replace('/');
++                window.location.replace('index.html');
+ 
+             } catch (err) {
+                 errorMessage.textContent = err.message;
+@@ -317,4 +317,4 @@
+     </script>
+ </body>
+ 
+-</html>
+\ No newline at end of file
++</html>

package-lock.json

@@ -1,12 +1,12 @@
 {
-    "name": "nodecast-tv",
+    "name": "kiratv",
-    "version": "2.1.4",
+    "version": "2.1.4-kira1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
-            "name": "nodecast-tv",
+            "name": "kiratv",
-            "version": "2.1.4",
+            "version": "2.1.4-kira1",
             "license": "GPL-3.0-only",
             "dependencies": {
                 "@ffprobe-installer/ffprobe": "^2.1.2",

package.json

@@ -1,7 +1,7 @@
 {
-    "name": "nodecast-tv",
+    "name": "kiratv",
-    "version": "2.1.4",
+    "version": "2.1.4-kira1",
-    "description": "Modern IPTV Player",
+    "description": "KiraTV — reproductor IPTV para el navegador (fork de NodeCast)",
     "license": "GPL-3.0-only",
     "main": "server/index.js",
     "scripts": {

public/css/main.css

@@ -1,5 +1,5 @@
 /* =====================================================
-  * NodeCast TV - Dark Theme Design System
+  * KiraTV — tema oscuro (azul marino + oro)
    ===================================================== */
 
 /* CSS Variables */
@@ -7,32 +7,37 @@
   /* iOS Safari toolbar compensation (set dynamically by JS) */
   --ios-ui-bottom: 0px;
 
+  /* Brand — logo hero (marino #000066 / blanco; acento arena para botones) */
+  --color-brand-navy: #000066;
+  --color-brand-navy-mid: #050045;
+  --color-accent: #e8d5b5;
+  --color-accent-hover: #f5ead8;
+  --color-accent-muted: rgba(232, 213, 181, 0.14);
+  --color-on-accent: #000044;
 
   /* Colors */
-  --color-bg-primary: #0a0a0f;
+  --color-bg-primary: #000022;
-  --color-bg-secondary: #12121a;
+  --color-bg-secondary: #050038;
-  --color-bg-tertiary: #1a1a25;
+  --color-bg-tertiary: #0a0a4d;
-  --color-bg-hover: #22222f;
+  --color-bg-hover: #12125c;
-  --color-bg-active: #2a2a3a;
+  --color-bg-active: #1a1a72;
 
-  --color-accent: #6366f1;
+  --color-accent-dim: var(--color-accent-muted);
-  --color-accent-hover: #818cf8;
-  --color-accent-dim: rgba(99, 102, 241, 0.2);
 
-  --color-success: #10b981;
+  --color-success: #34d399;
-  --color-warning: #f59e0b;
+  --color-warning: #fbbf24;
-  --color-error: #ef4444;
+  --color-error: #f87171;
 
-  --color-text-primary: #f1f1f5;
+  --color-text-primary: #f4f6fb;
-  --color-text-secondary: #a1a1aa;
+  --color-text-secondary: #a8b0c4;
-  --color-text-muted: #71717a;
+  --color-text-muted: #6b7389;
 
-  --color-border: #27272a;
+  --color-border: #243047;
-  --color-border-light: #3f3f46;
+  --color-border-light: #344062;
 
   /* Glass effect */
-  --glass-bg: rgba(18, 18, 26, 0.8);
+  --glass-bg: rgba(0, 0, 102, 0.88);
-  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.08);
 
   /* Spacing */
   --space-xs: 4px;
@@ -52,7 +57,7 @@
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
-  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
+  --shadow-glow: 0 4px 28px rgba(232, 213, 181, 0.16);
 
   /* Transitions */
   --transition-fast: 150ms ease;
@@ -83,11 +88,14 @@
 html,
 body {
   height: 100%;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 14px;
   line-height: 1.5;
   color: var(--color-text-primary);
-  background: var(--color-bg-primary);
+  background:
+    radial-gradient(ellipse 120% 85% at 50% -30%, rgba(255, 255, 255, 0.04), transparent 52%),
+    radial-gradient(ellipse 90% 55% at 100% 35%, rgba(0, 0, 102, 0.45), transparent),
+    linear-gradient(185deg, var(--color-brand-navy) 0%, var(--color-bg-primary) 55%);
   overflow: hidden;
   /* Prevent pull-to-refresh and overscroll bounce on mobile */
   overscroll-behavior: none;
@@ -137,6 +145,9 @@ h6 {
 
 h2 {
   font-size: 1.5rem;
+  font-family: 'Montserrat', 'DM Sans', sans-serif;
+  font-weight: 700;
+  letter-spacing: -0.02em;
 }
 
 h3 {
@@ -168,8 +179,9 @@ h4 {
   padding-left: max(var(--space-lg), var(--safe-area-inset-left));
   padding-right: max(var(--space-lg), var(--safe-area-inset-right));
   background: var(--glass-bg);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(14px);
   border-bottom: 1px solid var(--glass-border);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
   z-index: 100;
 }
 
@@ -190,12 +202,24 @@ h4 {
   fill: var(--color-accent);
 }
 
+/* Logo imagen de marca (PNG/JPEG) */
+.navbar-logo-img {
+  display: block;
+  height: 42px;
+  width: auto;
+  max-width: 172px;
+  object-fit: contain;
+  object-position: left center;
+  border-radius: 10px;
+  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
+}
+
 .brand-text {
-  font-family: 'Century Gothic', sans-serif;
+  font-family: 'Montserrat', 'DM Sans', sans-serif;
-  font-size: 1.5rem;
+  font-size: 1.45rem;
-  font-weight: 500;
+  font-weight: 600;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.02em;
-  color: #fff;
+  color: var(--color-text-primary);
   /* Visual correction: shift text slightly down to align optically with icon center */
   padding-top: 2px;
 }
@@ -207,8 +231,8 @@ h4 {
 .version-badge {
   font-size: 0.65rem;
   font-weight: 600;
-  background: var(--color-accent);
+  background: linear-gradient(135deg, var(--color-accent) 0%, #c9a875 100%);
-  color: #fff;
+  color: var(--color-on-accent);
   padding: 2px 6px;
   border-radius: 10px;
   margin-left: 8px;
@@ -1492,13 +1516,15 @@ kbd {
 }
 
 .btn-primary {
-  background: var(--color-accent);
+  background: linear-gradient(135deg, var(--color-accent) 0%, #c9a875 100%);
-  color: white;
+  color: var(--color-on-accent);
+  font-weight: 600;
 }
 
 .btn-primary:hover {
-  background: var(--color-accent-hover);
+  background: linear-gradient(135deg, var(--color-accent-hover) 0%, var(--color-accent) 100%);
   box-shadow: var(--shadow-glow);
+  color: var(--color-on-accent);
 }
 
 .btn-secondary {
@@ -4415,9 +4441,9 @@ kbd {
 }
 
 .user-badge-sso {
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  background: linear-gradient(135deg, var(--color-accent) 0%, #c9a875 100%);
-  color: #fff;
+  color: var(--color-on-accent);
-  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 2px 4px rgba(232, 213, 181, 0.22);
 }
 
 .user-badge-local {
@@ -4448,24 +4474,24 @@ kbd {
   gap: 8px;
   padding: 6px 14px;
   margin-right: var(--space-md);
-  background: linear-gradient(135deg, var(--color-accent) 0%, #8b5cf6 100%);
+  background: linear-gradient(135deg, var(--color-accent) 0%, #c9a875 100%);
   border-radius: var(--radius-full);
-  color: white;
+  color: var(--color-on-accent);
   text-decoration: none;
   font-size: 13px;
-  font-weight: 500;
+  font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
+  box-shadow: 0 2px 10px rgba(232, 213, 181, 0.22);
   transition: transform var(--transition-fast), box-shadow var(--transition-fast);
   animation: now-playing-pulse 2s ease-in-out infinite;
 }
 
 .now-playing-indicator:hover {
   transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
+  box-shadow: 0 4px 14px rgba(232, 213, 181, 0.28);
 }
 
 .now-playing-indicator.hidden {
@@ -4820,3 +4846,44 @@ kbd {
     max-width: 70px;
   }
 }
+/* Electron Windows: mpv embutido (HWND) — ocultar overlays tras el vídeo nativo */
+body.kiratv-win-embedded #player-controls-overlay,
+body.kiratv-win-embedded #watch-overlay {
+  visibility: hidden !important;
+}
+
+/* WebView2 + panel vídeo Win32 — lista estrecha, reproductor fuera del motor web */
+body.kiratv-shell-wv2:not(.kiratv-shell-wv2-fullweb) #page-live .player-section { display: none !important; }
+body.kiratv-shell-wv2:not(.kiratv-shell-wv2-fullweb) #page-live .home-layout {
+  display: block;
+}
+body.kiratv-shell-wv2:not(.kiratv-shell-wv2-fullweb) #page-live .channel-sidebar {
+  width: 100% !important;
+  max-width: none !important;
+}
+body.kiratv-shell-wv2-playing #player-controls-overlay,
+body.kiratv-shell-wv2-playing #watch-overlay {
+  visibility: hidden !important;
+}
+
+/* App de escritorio (Electron / WebView2): ancho completo; quita cajas centradas tipo max-width:1400px */
+body.kiratv-desktop-app #app {
+  max-width: none;
+  width: 100%;
+  margin: 0;
+}
+
+body.kiratv-desktop-app .dashboard-content {
+  max-width: none !important;
+  width: 100%;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+body.kiratv-desktop-app .settings-container {
+  max-width: none !important;
+}
+
+body.kiratv-desktop-app .watch-details-section {
+  max-width: none !important;
+}

public/favicon.svg

@@ -1,3 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 187.63 210.6">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <path fill="#6366f1" d="M169.71,87.87c-4.77,0-9.1,1.88-12.31,4.92L35.3,22.3c.35-1.4.56-2.86.56-4.37C35.86,8.03,27.83,0,17.93,0S0,8.03,0,17.93c0,8.44,5.84,15.5,13.69,17.4v140c-7.71,2.01-13.41,8.99-13.41,17.33,0,9.9,8.03,17.93,17.93,17.93s17.93-8.03,17.93-17.93c0-1.56-.22-3.07-.6-4.51l121.21-69.98c3.26,3.42,7.86,5.55,12.95,5.55,9.9,0,17.93-8.03,17.93-17.93s-8.03-17.93-17.93-17.93ZM152.78,99.92c-.14.41-.27.83-.38,1.25h-51.47l-44.18-24.72L30.4,30.8c.33-.32.64-.65.94-.99l121.45,70.12ZM22.17,175.2V35.33c.23-.05.45-.11.67-.17l26.35,45.65-.34,50.04-25.74,44.59c-.31-.09-.63-.17-.95-.24ZM31.52,180.69c-.27-.3-.55-.6-.84-.89l25.48-44.13,44.64-25.78h51.47c.07.32.15.63.24.94L31.52,180.69Z"/>
+  <rect width="64" height="64" rx="14" fill="#000066"/>
+  <path fill="#ffffff" d="M14 48V14h10l14 16V14h10v34H38L24 32v16H14z"/>
+  <path stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" fill="none" d="M36 20c8 0 14 6 14 14s-6 14-14 14"/>
+  <path stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none" opacity=".9" d="M34 16c11 0 20 9 20 20s-9 20-20 20"/>
 </svg>

public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
 
 <head>
   <meta charset="UTF-8">
@@ -7,14 +7,14 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="mobile-web-app-capable" content="yes">
-  <title>nodecast-tv | IPTV Player</title>
+  <title>KiraTV | Televisión en el navegador</title>
-  <meta name="description" content="Stream live TV, movies, and series with EPG support">
+  <meta name="description" content="TV en directo, películas y series con guía EPG — KiraTV">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="stylesheet" href="css/main.css">
+  <link rel="apple-touch-icon" href="/img/kiratv-logo-hero.jpg">
+  <link rel="stylesheet" href="css/main.css?v=kira6">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@800&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet">
-    rel="stylesheet">
   <!-- HLS.js for video playback -->
   <script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.7/dist/hls.min.js"></script>
 </head>
@@ -24,15 +24,10 @@
     <!-- Navigation -->
     <nav class="navbar">
       <div class="navbar-brand">
-        <span class="logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 187.63 210.6" fill="#6366f1"
+        <img src="/img/kiratv-logo-hero.jpg" alt="KiraTV" class="navbar-logo-img" width="176" height="44" decoding="async">
-            class="icon">
-            <path
-              d="M169.71,87.87c-4.77,0-9.1,1.88-12.31,4.92L35.3,22.3c.35-1.4.56-2.86.56-4.37C35.86,8.03,27.83,0,17.93,0S0,8.03,0,17.93c0,8.44,5.84,15.5,13.69,17.4v140c-7.71,2.01-13.41,8.99-13.41,17.33,0,9.9,8.03,17.93,17.93,17.93s17.93-8.03,17.93-17.93c0-1.56-.22-3.07-.6-4.51l121.21-69.98c3.26,3.42,7.86,5.55,12.95,5.55,9.9,0,17.93-8.03,17.93-17.93s-8.03-17.93-17.93-17.93ZM152.78,99.92c-.14.41-.27.83-.38,1.25h-51.47l-44.18-24.72L30.4,30.8c.33-.32.64-.65.94-.99l121.45,70.12ZM22.17,175.2V35.33c.23-.05.45-.11.67-.17l26.35,45.65-.34,50.04-25.74,44.59c-.31-.09-.63-.17-.95-.24ZM31.52,180.69c-.27-.3-.55-.6-.84-.89l25.48-44.13,44.64-25.78h51.47c.07.32.15.63.24.94L31.52,180.69Z" />
-          </svg></span>
-        <span class="brand-text">nodecast-tv</span>
         <span id="version-badge" class="version-badge"></span>
       </div>
-      <button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Toggle menu">
+      <button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir o cerrar menú">
         <span></span>
         <span></span>
         <span></span>
@@ -41,14 +36,14 @@
         <!-- Now Playing indicator for movies/series -->
         <a href="#" class="now-playing-indicator hidden" id="now-playing-indicator" data-page="watch">
           <span class="now-playing-icon">▶</span>
-          <span class="now-playing-text" id="now-playing-text">Now Playing</span>
+          <span class="now-playing-text" id="now-playing-text">Reproduciendo</span>
         </a>
         <a href="#" class="nav-link active" data-page="home">
           <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
               class="icon">
               <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
             </svg></span>
-          <span>Home</span>
+          <span>Inicio</span>
         </a>
         <a href="#" class="nav-link" data-page="live">
           <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
@@ -56,14 +51,14 @@
               <path
                 d="M21 6h-7.59l3.29-3.29L16 2l-4 4-4-4-.71.71L10.59 6H3a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8a2 2 0 0 0-2-2zm0 14H3V8h18v12zM9 10v8l7-4z" />
             </svg></span>
-          <span>Live TV</span>
+          <span>TV en directo</span>
         </a>
         <a href="#" class="nav-link" data-page="guide">
           <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
               class="icon">
               <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" />
             </svg></span>
-          <span>TV Guide</span>
+          <span>Guía TV</span>
         </a>
         <a href="#" class="nav-link" data-page="movies">
           <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
@@ -71,7 +66,7 @@
               <path
                 d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V4h-4z" />
             </svg></span>
-          <span>Movies</span>
+          <span>Películas</span>
         </a>
         <a href="#" class="nav-link" data-page="series">
           <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
@@ -87,7 +82,7 @@
               <path
                 d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L3.16 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.04.64.09.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
             </svg></span>
-          <span>Settings</span>
+          <span>Ajustes</span>
         </a>
       </div>
     </nav>
@@ -97,7 +92,7 @@
       <!-- Home (Dashboard) Page -->
       <div id="page-home" class="page active">
         <!-- Content will be rendered by HomePage.js -->
-        <div class="loading-state">Loading Dashboard...</div>
+        <div class="loading-state">Cargando inicio…</div>
       </div>
 
       <!-- Live TV Page (formerly Home) -->
@@ -108,14 +103,14 @@
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
               <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" />
             </svg>
-            <span>Channels</span>
+            <span>Canales</span>
           </button>
 
           <!-- Overlay for drawer -->
           <div class="channel-sidebar-overlay" id="channel-sidebar-overlay"></div>
 
           <!-- Expand button (visible when sidebar collapsed on desktop) -->
-          <button class="sidebar-expand-btn" id="sidebar-expand-btn" title="Expand sidebar">
+          <button class="sidebar-expand-btn" id="sidebar-expand-btn" title="Mostrar panel de canales">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
               <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
             </svg>
@@ -126,11 +121,11 @@
             <div class="sidebar-header">
               <div class="sidebar-header-row">
                 <div class="search-wrapper">
-                  <input type="text" id="channel-search" placeholder="Search channels..." class="search-input">
+                  <input type="text" id="channel-search" placeholder="Buscar canales…" class="search-input">
-                  <button type="button" class="search-clear" title="Clear search">&times;</button>
+                  <button type="button" class="search-clear" title="Limpiar búsqueda">&times;</button>
                 </div>
                 <button id="sidebar-collapse-btn" class="btn btn-sm btn-ghost sidebar-collapse-btn"
-                  title="Collapse sidebar">
+                  title="Ocultar panel">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                     <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
                   </svg>
@@ -138,9 +133,9 @@
               </div>
               <div class="sidebar-controls">
                 <select id="source-select" class="source-select">
-                  <option value="">All Sources</option>
+                  <option value="">Todas las fuentes</option>
                 </select>
-                <button id="toggle-groups" class="btn btn-sm btn-ghost" title="Expand/Collapse All">
+                <button id="toggle-groups" class="btn btn-sm btn-ghost" title="Expandir o plegar todo">
                   <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                       <path
                         d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" />
@@ -151,8 +146,8 @@
             </div>
             <div id="channel-list" class="channel-list">
               <div class="empty-state">
-                <p>No channels loaded</p>
+                <p>Cargando canales…</p>
-                <p class="hint">Add a source in Settings to get started</p>
+                <p class="hint">Las categorías vienen plegadas: pulsa un nombre de grupo para ver los canales. Puedes usar «Expandir/plegar todo» arriba.</p>
               </div>
             </div>
           </aside>
@@ -225,9 +220,9 @@
                         </svg>
                       </button>
                       <div class="watch-captions-menu hidden" id="player-captions-menu">
-                        <div class="captions-menu-title">Subtitles</div>
+                        <div class="captions-menu-title">Subtítulos</div>
                         <div class="captions-menu-list" id="player-captions-list">
-                          <button class="captions-option active" data-index="-1">Off</button>
+                          <button class="captions-option active" data-index="-1">Desactivados</button>
                         </div>
                       </div>
                     </div>
@@ -257,7 +252,7 @@
                             <path
                               d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
                           </svg>
-                          Copy Stream URL
+                          Copiar URL del stream
                         </button>
                       </div>
                     </div>
@@ -267,18 +262,18 @@
 
               <div class="player-overlay" id="player-overlay">
                 <div class="overlay-content">
-                  <p>Select a channel to start watching</p>
+                  <p>Elige un canal para empezar</p>
                 </div>
               </div>
               <!-- Now Playing Overlay -->
               <div class="now-playing-overlay hidden" id="now-playing">
                 <div class="now-playing-info">
-                  <h3 class="channel-name">No channel selected</h3>
+                  <h3 class="channel-name">Ningún canal seleccionado</h3>
                   <p class="program-title"></p>
                   <p class="program-time"></p>
                 </div>
                 <div class="up-next">
-                  <h4>Up Next</h4>
+                  <h4>A continuación</h4>
                   <ul id="up-next-list"></ul>
                 </div>
               </div>
@@ -290,24 +285,24 @@
       <!-- Guide Page -->
       <div id="page-guide" class="page">
         <div class="guide-header">
-          <h2>TV Guide</h2>
+          <h2>Guía TV</h2>
           <div class="guide-controls">
             <select id="epg-group-select" class="source-select">
-              <option value="">All Groups</option>
+              <option value="">Todos los grupos</option>
             </select>
             <div class="search-wrapper">
-              <input type="text" id="epg-search" placeholder="Search channels..." class="search-input">
+              <input type="text" id="epg-search" placeholder="Buscar canales…" class="search-input">
-              <button type="button" class="search-clear" title="Clear search">&times;</button>
+              <button type="button" class="search-clear" title="Limpiar búsqueda">&times;</button>
             </div>
-            <button id="guide-prev" class="btn btn-ghost">&larr; Earlier</button>
+            <button id="guide-prev" class="btn btn-ghost">&larr; Antes</button>
-            <span id="guide-date" class="guide-date">Today</span>
+            <span id="guide-date" class="guide-date">Hoy</span>
-            <button id="guide-next" class="btn btn-ghost">Later &rarr;</button>
+            <button id="guide-next" class="btn btn-ghost">Después &rarr;</button>
           </div>
         </div>
         <div id="epg-grid" class="epg-grid">
           <div class="empty-state">
-            <p>No EPG data available</p>
+            <p>No hay datos de guía (EPG)</p>
-            <p class="hint">Add an EPG source in Settings</p>
+            <p class="hint">Añade una fuente EPG en Ajustes</p>
           </div>
         </div>
       </div>
@@ -315,29 +310,29 @@
       <!-- Movies Page -->
       <div id="page-movies" class="page">
         <div class="movies-header">
-          <h2>Movies</h2>
+          <h2>Películas</h2>
           <div class="movies-controls">
             <select id="movies-source-select" class="source-select">
-              <option value="">All Sources</option>
+              <option value="">Todas las fuentes</option>
             </select>
             <select id="movies-category-select" class="source-select">
-              <option value="">All Categories</option>
+              <option value="">Todas las categorías</option>
             </select>
             <div class="search-wrapper">
-              <input type="text" id="movies-search" placeholder="Search movies..." class="search-input">
+              <input type="text" id="movies-search" placeholder="Buscar películas…" class="search-input">
-              <button type="button" class="search-clear" title="Clear search">&times;</button>
+              <button type="button" class="search-clear" title="Limpiar búsqueda">&times;</button>
             </div>
-            <button id="movies-favorites-btn" class="btn btn-icon btn-ghost" title="Show Favorites Only">
+            <button id="movies-favorites-btn" class="btn btn-icon btn-ghost" title="Solo favoritos">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                 <path
                   d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-              </svg> Favorites
+              </svg> Favoritos
             </button>
           </div>
         </div>
         <div id="movies-grid" class="movies-grid">
           <div class="empty-state">
-            <p>Loading movies...</p>
+            <p>Cargando películas…</p>
           </div>
         </div>
       </div>
@@ -348,20 +343,20 @@
           <h2>Series</h2>
           <div class="series-controls">
             <select id="series-source-select" class="source-select">
-              <option value="">All Sources</option>
+              <option value="">Todas las fuentes</option>
             </select>
             <select id="series-category-select" class="source-select">
-              <option value="">All Categories</option>
+              <option value="">Todas las categorías</option>
             </select>
             <div class="search-wrapper">
-              <input type="text" id="series-search" placeholder="Search series..." class="search-input">
+              <input type="text" id="series-search" placeholder="Buscar series…" class="search-input">
-              <button type="button" class="search-clear" title="Clear search">&times;</button>
+              <button type="button" class="search-clear" title="Limpiar búsqueda">&times;</button>
             </div>
-            <button id="series-favorites-btn" class="btn btn-icon btn-ghost" title="Show Favorites Only">
+            <button id="series-favorites-btn" class="btn btn-icon btn-ghost" title="Solo favoritos">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                 <path
                   d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-              </svg> Favorites
+              </svg> Favoritos
             </button>
           </div>
         </div>
@@ -369,12 +364,12 @@
         <div class="series-content">
           <div id="series-grid" class="series-grid">
             <div class="empty-state">
-              <p>Loading series...</p>
+              <p>Cargando series…</p>
             </div>
           </div>
           <!-- Series details panel (seasons/episodes) -->
           <div id="series-details" class="series-details hidden">
-            <button class="series-back-btn">← Back to Series</button>
+            <button class="series-back-btn">← Volver a series</button>
             <div class="series-details-header">
               <img id="series-poster" src="" alt="" class="series-poster">
               <div class="series-info">
@@ -390,59 +385,59 @@
       <!-- Settings Page -->
       <div id="page-settings" class="page">
         <div class="settings-container">
-          <h2>Settings</h2>
+          <h2>Ajustes</h2>
 
           <!-- Tabs -->
           <div class="tabs">
-            <button class="tab active" data-tab="sources">Sources</button>
+            <button class="tab active" data-tab="sources">Fuentes</button>
-            <button class="tab" data-tab="player">Player</button>
+            <button class="tab" data-tab="player">Reproductor</button>
-            <button class="tab" data-tab="transcode">Transcoding</button>
+            <button class="tab" data-tab="transcode">Transcodificación</button>
-            <button class="tab" data-tab="content">Manage Content</button>
+            <button class="tab" data-tab="content">Contenido</button>
-            <button class="tab" data-tab="users" id="users-tab" style="display:none;">Users</button>
+            <button class="tab" data-tab="users" id="users-tab" style="display:none;">Usuarios</button>
           </div>
 
           <!-- Sources Tab -->
           <div id="tab-sources" class="tab-content active">
             <div class="source-section">
               <div class="section-header">
-                <h3>Xtream Connections</h3>
+                <h3>Conexiones Xtream</h3>
-                <button class="btn btn-primary" id="add-xtream">+ Add Xtream</button>
+                <button class="btn btn-primary" id="add-xtream">+ Añadir Xtream</button>
               </div>
               <div id="xtream-list" class="source-list"></div>
             </div>
 
             <div class="source-section">
               <div class="section-header">
-                <h3>M3U Playlists</h3>
+                <h3>Listas M3U</h3>
-                <button class="btn btn-primary" id="add-m3u">+ Add M3U</button>
+                <button class="btn btn-primary" id="add-m3u">+ Añadir M3U</button>
               </div>
               <div id="m3u-list" class="source-list"></div>
             </div>
 
             <div class="source-section">
               <div class="section-header">
-                <h3>EPG Sources</h3>
+                <h3>Fuentes EPG</h3>
-                <button class="btn btn-primary" id="add-epg">+ Add EPG</button>
+                <button class="btn btn-primary" id="add-epg">+ Añadir EPG</button>
               </div>
               <div id="epg-list" class="source-list"></div>
             </div>
 
             <div class="source-section">
-              <h3>EPG Data Settings</h3>
+              <h3>Datos EPG</h3>
               <div class="setting-item">
-                <label for="epg-refresh-interval">Auto-refresh EPG data every:</label>
+                <label for="epg-refresh-interval">Actualizar datos EPG automáticamente cada:</label>
                 <select id="epg-refresh-interval" class="form-input">
-                  <option value="1">1 hour</option>
+                  <option value="1">1 hora</option>
-                  <option value="2">2 hours</option>
+                  <option value="2">2 horas</option>
-                  <option value="4">4 hours</option>
+                  <option value="4">4 horas</option>
-                  <option value="12">12 hours</option>
+                  <option value="12">12 horas</option>
-                  <option value="24" selected>24 hours</option>
+                  <option value="24" selected>24 horas</option>
-                  <option value="0">Manual only</option>
+                  <option value="0">Solo manual</option>
                 </select>
               </div>
               <div class="setting-item">
-                <span class="setting-label">Last Refreshed:</span>
+                <span class="setting-label">Última actualización:</span>
-                <span id="epg-last-refreshed" class="hint">Never</span>
+                <span id="epg-last-refreshed" class="hint">Nunca</span>
               </div>
               <p class="hint">Use the <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                   class="icon" style="width: 1em; height: 1em; vertical-align: middle;">
@@ -455,32 +450,32 @@
           <!-- Player Tab -->
           <div id="tab-player" class="tab-content">
             <div class="settings-section">
-              <h3>Keyboard Controls</h3>
+              <h3>Teclado</h3>
               <div class="setting-item">
                 <label class="setting-toggle">
                   <input type="checkbox" id="setting-arrow-keys" checked>
                   <span class="toggle-slider"></span>
                 </label>
                 <div class="setting-info">
-                  <span class="setting-label">Arrow keys change channels</span>
+                  <span class="setting-label">Las flechas cambian de canal</span>
-                  <span class="setting-hint">When enabled, ↑/↓ change channels and ←/→ adjust volume</span>
+                  <span class="setting-hint">Si está activo: ↑/↓ cambian canal y ←/→ ajustan volumen</span>
                 </div>
               </div>
             </div>
 
             <div class="settings-section">
-              <h3>Now Playing Overlay</h3>
+              <h3>Overlay «Reproduciendo»</h3>
               <div class="setting-item">
-                <label for="setting-overlay-duration">Display Duration (seconds)</label>
+                <label for="setting-overlay-duration">Duración en pantalla (segundos)</label>
                 <input type="number" id="setting-overlay-duration" class="form-input setting-number" min="1" max="30"
                   value="5">
               </div>
             </div>
 
             <div class="settings-section">
-              <h3>Volume Settings</h3>
+              <h3>Volumen</h3>
               <div class="setting-item">
-                <label for="setting-default-volume">Default Volume</label>
+                <label for="setting-default-volume">Volumen por defecto</label>
                 <div class="volume-slider-container">
                   <input type="range" id="setting-default-volume" class="volume-slider" min="0" max="100" value="80">
                   <span id="volume-value">80%</span>
@@ -492,36 +487,36 @@
                   <span class="toggle-slider"></span>
                 </label>
                 <div class="setting-info">
-                  <span class="setting-label">Remember Last Volume</span>
+                  <span class="setting-label">Recordar último volumen</span>
-                  <span class="setting-hint">When enabled, volume persists between sessions</span>
+                  <span class="setting-hint">Si está activo, el volumen se conserva entre sesiones</span>
                 </div>
               </div>
             </div>
 
             <div class="settings-section">
-              <h3>Playback</h3>
+              <h3>Reproducción</h3>
               <div class="setting-item">
                 <label class="setting-toggle">
                   <input type="checkbox" id="setting-autoplay-next">
                   <span class="toggle-slider"></span>
                 </label>
                 <div class="setting-info">
-                  <span class="setting-label">Auto-play Next Episode</span>
+                  <span class="setting-label">Autoplay del siguiente episodio</span>
-                  <span class="setting-hint">Automatically play the next episode when one ends</span>
+                  <span class="setting-hint">Cuando termine un episodio, pasa automáticamente al siguiente</span>
                 </div>
               </div>
             </div>
 
             <div class="settings-section">
-              <h3>Keyboard Shortcuts</h3>
+              <h3>Atajos de teclado</h3>
               <div class="shortcuts-grid">
-                <div class="shortcut"><kbd>↑</kbd> / <kbd>↓</kbd> Channel up/down (or volume)</div>
+                <div class="shortcut"><kbd>↑</kbd> / <kbd>↓</kbd> Canal anterior/siguiente (o volumen)</div>
-                <div class="shortcut"><kbd>←</kbd> / <kbd>→</kbd> Volume down/up (when arrows = channels)</div>
+                <div class="shortcut"><kbd>←</kbd> / <kbd>→</kbd> Bajar/subir volumen (si flechas = canales)</div>
-                <div class="shortcut"><kbd>Space</kbd> / <kbd>K</kbd> Play/Pause</div>
+                <div class="shortcut"><kbd>Espacio</kbd> / <kbd>K</kbd> Reproducir / Pausa</div>
-                <div class="shortcut"><kbd>F</kbd> Fullscreen</div>
+                <div class="shortcut"><kbd>F</kbd> Pantalla completa</div>
-                <div class="shortcut"><kbd>M</kbd> Mute/Unmute</div>
+                <div class="shortcut"><kbd>M</kbd> Silenciar / activar sonido</div>
-                <div class="shortcut"><kbd>I</kbd> Toggle info overlay</div>
+                <div class="shortcut"><kbd>I</kbd> Mostrar u ocultar información</div>
-                <div class="shortcut"><kbd>PgUp</kbd> / <kbd>PgDn</kbd> Channel up/down</div>
+                <div class="shortcut"><kbd>Re Pág</kbd> / <kbd>Av Pág</kbd> Canal anterior/siguiente</div>
               </div>
             </div>
           </div>
@@ -529,14 +524,14 @@
           <!-- Transcoding Tab -->
           <div id="tab-transcode" class="tab-content">
             <div class="settings-section">
-              <h3>Detected Hardware</h3>
+              <h3>Hardware detectado</h3>
               <div id="hw-info-container" class="hw-info-container">
-                <p class="hint">Loading hardware information...</p>
+                <p class="hint">Cargando información del hardware…</p>
               </div>
             </div>
 
             <div class="settings-section">
-              <h3>Encoder Settings</h3>
+              <h3>Codificador</h3>
               <div class="setting-item">
                 <div class="setting-info" style="flex: 1;">
                   <span class="setting-label">Hardware Encoder</span>
@@ -678,12 +673,12 @@
               <div class="setting-item">
                 <div class="setting-info" style="flex: 1;">
                   <span class="setting-label">Stream Output Format</span>
-                  <span class="setting-hint">Container format for Xtream streams. Try TS if you experience buffering
+                  <span class="setting-hint">Para Dispatcharr: elige <strong>TS</strong> (aunque la URL lleve .m3u8, suele
-                    issues.</span>
+                    ser video MPEG-TS; HLS falla en el navegador).</span>
                 </div>
                 <select id="setting-stream-format-tc" class="source-select" style="width: auto; min-width: 200px;">
-                  <option value="m3u8">HLS (m3u8) - Recommended</option>
+                  <option value="ts">MPEG-TS (ts) — recomendado con Dispatcharr</option>
-                  <option value="ts">MPEG-TS (ts) - Better buffer</option>
+                  <option value="m3u8">HLS (m3u8) — solo si el proveedor es manifiesto real</option>
                 </select>
               </div>
             </div>
@@ -734,30 +729,30 @@
             <div class="content-browser">
               <div class="content-browser-header">
                 <div class="content-type-toggle">
-                  <button class="btn btn-sm active" id="content-type-channels">Channels</button>
+                  <button class="btn btn-sm active" id="content-type-channels">Canales</button>
-                  <button class="btn btn-sm" id="content-type-movies">Movies</button>
+                  <button class="btn btn-sm" id="content-type-movies">Películas</button>
                   <button class="btn btn-sm" id="content-type-series">Series</button>
                 </div>
                 <select id="content-source-select" class="source-select">
-                  <option value="">Select a source...</option>
+                  <option value="">Selecciona una fuente…</option>
                 </select>
                 <div class="search-wrapper">
-                  <input type="text" id="content-search" placeholder="Search groups/channels..." class="search-input">
+                  <input type="text" id="content-search" placeholder="Buscar grupos o canales…" class="search-input">
-                  <button type="button" class="search-clear" title="Clear search">&times;</button>
+                  <button type="button" class="search-clear" title="Limpiar búsqueda">&times;</button>
                 </div>
                 <div class="content-actions">
-                  <button class="btn btn-sm btn-secondary" id="content-show-all">Show All</button>
+                  <button class="btn btn-sm btn-secondary" id="content-show-all">Mostrar todo</button>
-                  <button class="btn btn-sm btn-secondary" id="content-hide-all">Hide All</button>
+                  <button class="btn btn-sm btn-secondary" id="content-hide-all">Ocultar todo</button>
                   <button class="btn btn-sm btn-primary" id="content-save"><svg xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 24 24" fill="currentColor" class="icon">
                       <path
                         d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" />
-                    </svg> Save Changes</button>
+                    </svg> Guardar cambios</button>
                 </div>
               </div>
-              <p class="hint" style="margin-bottom: var(--space-sm);">✓ Checked = Visible, ☐ Unchecked = Hidden</p>
+              <p class="hint" style="margin-bottom: var(--space-sm);">✓ Marcado = visible · ☐ Sin marcar = oculto</p>
               <div id="content-tree" class="content-tree">
-                <p class="hint">Select a source to view groups and channels</p>
+                <p class="hint">Selecciona una fuente para ver grupos y canales</p>
               </div>
             </div>
           </div>
@@ -765,47 +760,47 @@
           <!-- Users Tab (Admin Only) -->
           <div id="tab-users" class="tab-content">
             <div class="settings-section">
-              <h3>User Management</h3>
+              <h3>Usuarios</h3>
-              <p class="hint">Manage user accounts and permissions</p>
+              <p class="hint">Gestiona cuentas y permisos</p>
 
               <div class="user-list-container">
                 <table class="user-table">
                   <thead>
                     <tr>
-                      <th>Username</th>
+                      <th>Usuario</th>
-                      <th>Email</th>
+                      <th>Correo</th>
-                      <th>Role</th>
+                      <th>Rol</th>
-                      <th>Created</th>
+                      <th>Creado</th>
-                      <th>Actions</th>
+                      <th>Acciones</th>
                     </tr>
                   </thead>
                   <tbody id="user-list">
                     <tr>
-                      <td colspan="4" class="hint">Loading users...</td>
+                      <td colspan="4" class="hint">Cargando usuarios…</td>
                     </tr>
                   </tbody>
                 </table>
               </div>
 
               <div class="add-user-section">
-                <h4>Add New User</h4>
+                <h4>Añadir usuario</h4>
                 <form id="add-user-form" class="user-form">
                   <div class="form-group">
-                    <label for="new-username">Username</label>
+                    <label for="new-username">Usuario</label>
                     <input type="text" id="new-username" name="username" class="form-input" required>
                   </div>
                   <div class="form-group">
-                    <label for="new-password">Password</label>
+                    <label for="new-password">Contraseña</label>
                     <input type="password" id="new-password" name="password" class="form-input" required minlength="6">
                   </div>
                   <div class="form-group">
-                    <label for="new-role">Role</label>
+                    <label for="new-role">Rol</label>
                     <select id="new-role" name="role" class="form-input" required>
-                      <option value="viewer">Viewer</option>
+                      <option value="viewer">Espectador</option>
-                      <option value="admin">Admin</option>
+                      <option value="admin">Administrador</option>
                     </select>
                   </div>
-                  <button type="submit" class="btn btn-primary">Add User</button>
+                  <button type="submit" class="btn btn-primary">Añadir usuario</button>
                 </form>
               </div>
             </div>
@@ -823,7 +818,7 @@
           <div class="watch-overlay" id="watch-overlay">
             <!-- Top Bar: Back + Title -->
             <div class="watch-top-bar vod-header">
-              <button class="watch-back-btn" id="watch-back-btn" title="Back">
+              <button class="watch-back-btn" id="watch-back-btn" title="Volver">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                   <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                 </svg>
@@ -901,9 +896,9 @@
                     </svg>
                   </button>
                   <div class="watch-captions-menu hidden" id="watch-captions-menu">
-                    <div class="captions-menu-title">Subtitles</div>
+                    <div class="captions-menu-title">Subtítulos</div>
                     <div class="captions-menu-list" id="watch-captions-list">
-                      <button class="captions-option active" data-index="-1">Off</button>
+                      <button class="captions-option active" data-index="-1">Desactivados</button>
                     </div>
                   </div>
                 </div>
@@ -932,7 +927,7 @@
                         <path
                           d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
                       </svg>
-                      Copy Stream URL
+                      Copiar URL del stream
                     </button>
                   </div>
                 </div>
@@ -941,7 +936,7 @@
 
             <!-- Scroll Indicator -->
             <div class="watch-scroll-hint" id="watch-scroll-hint">
-              <span>Scroll for details</span>
+              <span>Desplázate para ver detalles</span>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                 <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
               </svg>
@@ -951,12 +946,12 @@
           <!-- Next Episode Panel -->
           <div class="watch-next-episode hidden" id="watch-next-episode">
             <div class="next-info">
-              <p class="next-label">Up Next</p>
+              <p class="next-label">Siguiente</p>
               <h4 id="next-episode-title"></h4>
             </div>
             <span class="next-countdown" id="next-countdown">10</span>
-            <button class="btn btn-primary btn-sm" id="next-play-now">Play Now</button>
+            <button class="btn btn-primary btn-sm" id="next-play-now">Reproducir ya</button>
-            <button class="btn btn-ghost btn-sm" id="next-cancel">Cancel</button>
+            <button class="btn btn-ghost btn-sm" id="next-cancel">Cancelar</button>
           </div>
         </section>
 
@@ -978,7 +973,7 @@
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
                     <path d="M8 5v14l11-7z" />
                   </svg>
-                  <span id="watch-play-btn-text">Play</span>
+                  <span id="watch-play-btn-text">Reproducir</span>
                 </button>
                 <button class="btn btn-ghost" id="watch-favorite-btn">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
@@ -991,7 +986,7 @@
                     <path
                       d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                   </svg>
-                  <span>Favorite</span>
+                  <span>Favorito</span>
                 </button>
               </div>
             </div>
@@ -999,7 +994,7 @@
 
           <!-- Movies: Recommended Section -->
           <div class="watch-recommended hidden" id="watch-recommended">
-            <h3>More Like This</h3>
+            <h3>Te puede gustar</h3>
             <div class="watch-recommended-grid" id="watch-recommended-grid">
               <!-- Movie cards inserted dynamically -->
             </div>
@@ -1007,7 +1002,7 @@
 
           <!-- Series: Seasons & Episodes -->
           <div class="watch-episodes hidden" id="watch-episodes">
-            <h3>Episodes</h3>
+            <h3>Episodios</h3>
             <div class="watch-seasons" id="watch-seasons">
               <!-- Season accordions inserted dynamically -->
             </div>
@@ -1022,7 +1017,7 @@
   <div id="modal" class="modal">
     <div class="modal-content">
       <div class="modal-header">
-        <h3 id="modal-title">Modal</h3>
+        <h3 id="modal-title">Ventana</h3>
         <button class="modal-close">&times;</button>
       </div>
       <div id="modal-body" class="modal-body"></div>
@@ -1035,19 +1030,19 @@
     <button class="context-item" data-action="play"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
         fill="currentColor" class="icon">
         <path d="M8 5v14l11-7z" />
-      </svg> Play</button>
+      </svg> Reproducir</button>
     <button class="context-item" data-action="hide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
         fill="currentColor" class="icon">
         <path
           d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4.01.7l2.16 2.16C10.85 7.18 11.4 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
-      </svg> Hide</button>
+      </svg> Ocultar</button>
   </div>
 
   <!-- Edit User Modal -->
   <div class="modal-overlay" id="edit-user-modal">
     <div class="modal">
       <div class="modal-header">
-        <h3 class="modal-title">Edit User</h3>
+        <h3 class="modal-title">Editar usuario</h3>
         <button class="modal-close" id="edit-user-close">&times;</button>
       </div>
       <div class="modal-body">
@@ -1055,41 +1050,41 @@
           <input type="hidden" id="edit-user-id">
 
           <div class="modal-form-group">
-            <label for="edit-username">Username</label>
+            <label for="edit-username">Usuario</label>
             <input type="text" id="edit-username" name="username" class="form-input" required>
           </div>
 
           <div class="modal-form-group">
-            <label for="edit-email">Email</label>
+            <label for="edit-email">Correo</label>
-            <input type="text" id="edit-email" class="form-input" readonly disabled placeholder="No email associated">
+            <input type="text" id="edit-email" class="form-input" readonly disabled placeholder="Sin correo asociado">
           </div>
 
           <div class="modal-form-group">
-            <label for="edit-role">Role</label>
+            <label for="edit-role">Rol</label>
             <select id="edit-role" name="role" class="form-input" required>
-              <option value="viewer">Viewer</option>
+              <option value="viewer">Espectador</option>
-              <option value="admin">Admin</option>
+              <option value="admin">Administrador</option>
             </select>
           </div>
 
           <div class="modal-form-group">
-            <label for="edit-password">New Password</label>
+            <label for="edit-password">Nueva contraseña</label>
             <input type="password" id="edit-password" name="password" class="form-input"
-              placeholder="Leave blank to keep current">
+              placeholder="Dejar en blanco para no cambiar">
-            <p class="hint" id="edit-password-hint" style="margin-top: 4px;">Optional. Leave blank to keep unchanged.
+            <p class="hint" id="edit-password-hint" style="margin-top: 4px;">Opcional. Déjalo en blanco para mantener la actual.
             </p>
           </div>
 
           <div class="modal-form-group hidden" id="oidc-info-group">
-            <label>OIDC Provider ID</label>
+            <label>ID de proveedor OIDC</label>
             <code id="edit-oidc-id"
               style="font-size: 0.8rem; color: var(--color-text-muted); padding: 4px; background: rgba(0,0,0,0.3); border-radius: 4px; display: block;"></code>
           </div>
         </form>
       </div>
       <div class="modal-footer">
-        <button class="btn btn-ghost" id="edit-user-cancel">Cancel</button>
+        <button class="btn btn-ghost" id="edit-user-cancel">Cancelar</button>
-        <button class="btn btn-primary" id="edit-user-save">Save Changes</button>
+        <button class="btn btn-primary" id="edit-user-save">Guardar cambios</button>
       </div>
     </div>
   </div>
@@ -1097,7 +1092,8 @@
   <!-- JavaScript -->
   <script src="/js/icons.js"></script>
   <script src="/js/api.js?v=2"></script>
-  <script src="/js/components/VideoPlayer.js?v=2"></script>
+  <script src="/js/desktopPlayback.js?v=9"></script>
+  <script src="/js/components/VideoPlayer.js?v=6"></script>
   <script src="/js/components/ChannelList.js?v=3"></script>
   <script src="/js/components/SourceManager.js?v=2"></script>
   <script src="/js/components/EpgGuide.js?v=2"></script>
@@ -1106,9 +1102,10 @@
   <script src="/js/pages/Guide.js?v=2"></script>
   <script src="/js/pages/MoviesPage.js?v=4"></script>
   <script src="/js/pages/SeriesPage.js?v=1"></script>
-  <script src="/js/pages/Settings.js?v=2"></script>
+  <script src="/js/pages/Settings.js?v=3"></script>
-  <script src="/js/pages/WatchPage.js?v=1"></script>
+  <script src="/js/pages/WatchPage.js?v=3"></script>
-  <script src="/js/app.js?v=4"></script>
+  <script src="/js/components/ChatBot.js?v=2"></script>
+  <script src="/js/app.js?v=5"></script>
   <script>
     // Check for SSO token in URL
     (function () {

public/js/api.js

@@ -136,7 +136,7 @@ const API = {
             seriesInfo: (sourceId, seriesId) =>
                 API.request('GET', `/proxy/xtream/${sourceId}/series_info?series_id=${seriesId}`),
             shortEpg: (sourceId, streamId) => API.request('GET', `/proxy/xtream/${sourceId}/short_epg?stream_id=${streamId}`),
-            getStreamUrl: (sourceId, streamId, type = 'live', container = 'm3u8') =>
+            getStreamUrl: (sourceId, streamId, type = 'live', container = 'ts') =>
                 API.request('GET', `/proxy/xtream/${sourceId}/stream/${streamId}/${type}?container=${container}`)
         },
 

public/js/app.js

@@ -1,5 +1,5 @@
 /**
- * NodeCast TV Application Entry Point
+ * KiraTV Application Entry Point
  */
 
 class App {
@@ -150,6 +150,11 @@ class App {
         // Initialize home page first (it's needed for channel list)
         await this.pages.home.init();
 
+        // La barra lateral es global: antes solo se cargaban canales al abrir la página «Live»
+        // (LivePage.init no se llama en ningún sitio). Sin esto, en Inicio parece que «no hay canales».
+        await this.channelList.loadSources();
+        await this.channelList.loadChannels();
+
         // Preload EPG data in background (non-blocking)
         // This ensures EPG info is available on Live TV page without visiting Guide first
         this.epgGuide.loadEpg().catch(err => {
@@ -161,7 +166,7 @@ class App {
         const initialPage = hash && this.pages[hash] ? hash : 'home';
         this.navigateTo(initialPage, true); // true = replace history (don't add)
 
-        console.log('NodeCast TV initialized');
+        console.log('KiraTV initialized');
     }
 
     async checkAuth() {

public/js/components/ChannelList.js

@@ -46,7 +46,7 @@ class ChannelList {
      */
     loadCollapsedState() {
         try {
-            const saved = localStorage.getItem('nodecast_tv_collapsed_groups');
+            const saved = localStorage.getItem('kiratv_collapsed_groups');
             if (saved) {
                 this.collapsedGroups = new Set(JSON.parse(saved));
                 this._hasCollapsedState = true;
@@ -64,7 +64,7 @@ class ChannelList {
      */
     saveCollapsedState() {
         try {
-            localStorage.setItem('nodecast_tv_collapsed_groups', JSON.stringify([...this.collapsedGroups]));
+            localStorage.setItem('kiratv_collapsed_groups', JSON.stringify([...this.collapsedGroups]));
         } catch (err) {
             console.error('Error saving collapsed state:', err);
         }
@@ -1159,7 +1159,7 @@ class ChannelList {
         let streamUrl;
         if (channel.sourceType === 'xtream') {
             // Get stream format from player settings (server-side) or fallback
-            const streamFormat = window.app?.player?.settings?.streamFormat || 'm3u8';
+            const streamFormat = window.app?.player?.settings?.streamFormat || 'ts';
             const result = await API.proxy.xtream.getStreamUrl(channel.sourceId, channel.streamId, 'live', streamFormat);
             streamUrl = result.url;
         } else {

public/js/components/ChatBot.js

@@ -0,0 +1,428 @@
+/**
+ * KiraBot — floating chat widget for KiraTV
+ */
+class ChatBot {
+    constructor() {
+        this._open = false;
+        this._tab = 'chat';      // 'chat' | 'recordings'
+        this._messages = [];
+        this._recordings = [];
+        this._loading = false;
+        this._token = null;
+        this._init();
+    }
+
+    _init() {
+        // Inject styles
+        const style = document.createElement('style');
+        style.textContent = `
+        #kirabot-btn {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            z-index: 9000;
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #7c3aed, #4f46e5);
+            border: none;
+            cursor: pointer;
+            box-shadow: 0 4px 20px rgba(124,58,237,.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: transform .2s, box-shadow .2s;
+        }
+        #kirabot-btn:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(124,58,237,.7); }
+        #kirabot-btn svg { width: 26px; height: 26px; fill: #fff; }
+        #kirabot-badge {
+            position: absolute;
+            top: -4px;
+            right: -4px;
+            background: #ef4444;
+            color: #fff;
+            border-radius: 9999px;
+            font-size: 10px;
+            font-weight: 700;
+            min-width: 18px;
+            height: 18px;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            padding: 0 4px;
+        }
+        #kirabot-panel {
+            position: fixed;
+            bottom: 90px;
+            right: 24px;
+            z-index: 9001;
+            width: 380px;
+            max-width: calc(100vw - 32px);
+            height: 560px;
+            max-height: calc(100vh - 110px);
+            background: #1a1a2e;
+            border: 1px solid rgba(124,58,237,.4);
+            border-radius: 20px;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 16px 48px rgba(0,0,0,.6);
+            transition: opacity .25s, transform .25s;
+            overflow: hidden;
+        }
+        #kirabot-panel.hidden { opacity: 0; transform: translateY(12px) scale(.97); pointer-events: none; }
+        .kb-header {
+            background: linear-gradient(135deg, #7c3aed, #4f46e5);
+            padding: 14px 16px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .kb-header-title { font-weight: 700; font-size: 15px; color: #fff; flex: 1; }
+        .kb-header-sub { font-size: 11px; color: rgba(255,255,255,.7); }
+        .kb-close-btn {
+            background: rgba(255,255,255,.15);
+            border: none;
+            border-radius: 50%;
+            width: 28px; height: 28px;
+            cursor: pointer;
+            color: #fff;
+            font-size: 16px;
+            display: flex; align-items: center; justify-content: center;
+        }
+        .kb-tabs {
+            display: flex;
+            border-bottom: 1px solid rgba(255,255,255,.08);
+            background: #16162a;
+        }
+        .kb-tab {
+            flex: 1;
+            padding: 10px;
+            background: none;
+            border: none;
+            color: rgba(255,255,255,.5);
+            font-size: 13px;
+            cursor: pointer;
+            transition: color .2s;
+        }
+        .kb-tab.active { color: #a78bfa; border-bottom: 2px solid #7c3aed; font-weight: 600; }
+        .kb-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 14px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            scroll-behavior: smooth;
+        }
+        .kb-messages::-webkit-scrollbar { width: 4px; }
+        .kb-messages::-webkit-scrollbar-track { background: transparent; }
+        .kb-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
+        .kb-bubble {
+            max-width: 88%;
+            padding: 10px 13px;
+            border-radius: 14px;
+            font-size: 13.5px;
+            line-height: 1.5;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+        .kb-bubble.user {
+            align-self: flex-end;
+            background: linear-gradient(135deg, #7c3aed, #4f46e5);
+            color: #fff;
+            border-bottom-right-radius: 4px;
+        }
+        .kb-bubble.bot {
+            align-self: flex-start;
+            background: rgba(255,255,255,.07);
+            color: #e2e8f0;
+            border-bottom-left-radius: 4px;
+        }
+        .kb-bubble.error { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
+        .kb-typing { align-self: flex-start; color: rgba(255,255,255,.4); font-size: 13px; font-style: italic; }
+        .kb-input-row {
+            display: flex;
+            gap: 8px;
+            padding: 12px 14px;
+            border-top: 1px solid rgba(255,255,255,.08);
+            background: #16162a;
+        }
+        .kb-input {
+            flex: 1;
+            background: rgba(255,255,255,.07);
+            border: 1px solid rgba(255,255,255,.12);
+            border-radius: 12px;
+            color: #e2e8f0;
+            font-size: 13.5px;
+            padding: 8px 12px;
+            resize: none;
+            outline: none;
+            font-family: inherit;
+        }
+        .kb-input:focus { border-color: rgba(124,58,237,.6); }
+        .kb-send-btn {
+            background: linear-gradient(135deg, #7c3aed, #4f46e5);
+            border: none;
+            border-radius: 12px;
+            width: 42px;
+            height: 42px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+        .kb-send-btn:disabled { opacity: .4; cursor: default; }
+        .kb-send-btn svg { width: 18px; height: 18px; fill: #fff; }
+        .kb-recordings {
+            flex: 1;
+            overflow-y: auto;
+            padding: 14px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .kb-rec-item {
+            background: rgba(255,255,255,.05);
+            border: 1px solid rgba(255,255,255,.08);
+            border-radius: 12px;
+            padding: 10px 12px;
+        }
+        .kb-rec-title { font-weight: 600; font-size: 13px; color: #e2e8f0; }
+        .kb-rec-meta { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 3px; }
+        .kb-rec-status { font-size: 11px; font-weight: 600; margin-top: 4px; }
+        .kb-rec-status.scheduled { color: #fbbf24; }
+        .kb-rec-status.recording { color: #f87171; }
+        .kb-rec-status.completed { color: #34d399; }
+        .kb-rec-status.failed { color: #f87171; }
+        .kb-rec-status.cancelled { color: rgba(255,255,255,.3); }
+        .kb-empty { text-align: center; color: rgba(255,255,255,.35); font-size: 13px; padding: 40px 0; }
+        .kb-bot-avatar { width: 22px; height: 22px; flex-shrink: 0; }
+        #kb-chat-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
+        #kb-rec-view { display: none; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
+        `;
+        document.head.appendChild(style);
+
+        // Floating button
+        const btn = document.createElement('button');
+        btn.id = 'kirabot-btn';
+        btn.title = 'KiraBot — Asistente de TV';
+        btn.innerHTML = `
+            <svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 11H7V9h2v2zm4 0h-2V9h2v2zm4 0h-2V9h2v2z"/></svg>
+            <span id="kirabot-badge"></span>
+        `;
+        btn.addEventListener('click', () => this.toggle());
+        document.body.appendChild(btn);
+
+        // Chat panel
+        const panel = document.createElement('div');
+        panel.id = 'kirabot-panel';
+        panel.className = 'hidden';
+        panel.innerHTML = `
+            <div class="kb-header">
+                <svg class="kb-bot-avatar" viewBox="0 0 24 24" fill="white"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
+                <div>
+                    <div class="kb-header-title">KiraBot</div>
+                    <div class="kb-header-sub">Asistente de TV · IA</div>
+                </div>
+                <button class="kb-close-btn" id="kb-close">✕</button>
+            </div>
+            <div class="kb-tabs">
+                <button class="kb-tab active" id="kb-tab-chat">💬 Chat</button>
+                <button class="kb-tab" id="kb-tab-rec">📹 Grabaciones</button>
+            </div>
+            <div id="kb-chat-view">
+                <div class="kb-messages" id="kb-messages"></div>
+                <div class="kb-input-row">
+                    <textarea class="kb-input" id="kb-input" rows="1"
+                        placeholder="Pregunta por la programación, pide grabaciones..."></textarea>
+                    <button class="kb-send-btn" id="kb-send" title="Enviar">
+                        <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+                    </button>
+                </div>
+            </div>
+            <div id="kb-rec-view" style="display:none;flex:1;overflow:hidden;flex-direction:column;">
+                <div class="kb-recordings" id="kb-recordings"></div>
+            </div>
+        `;
+        document.body.appendChild(panel);
+
+        // Events
+        document.getElementById('kb-close').addEventListener('click', () => this.close());
+        document.getElementById('kb-tab-chat').addEventListener('click', () => this._switchTab('chat'));
+        document.getElementById('kb-tab-rec').addEventListener('click', () => this._switchTab('recordings'));
+        document.getElementById('kb-send').addEventListener('click', () => this._sendMessage());
+
+        // Stop all keyboard and mouse events from bubbling to NodeCast's global handlers
+        // (NodeCast intercepts spacebar for play/pause and other keys for media control)
+        const inputEl = document.getElementById('kb-input');
+        inputEl.addEventListener('keydown', (e) => {
+            e.stopPropagation();
+            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this._sendMessage(); }
+        });
+        inputEl.addEventListener('keypress', (e) => e.stopPropagation());
+        inputEl.addEventListener('keyup', (e) => e.stopPropagation());
+
+        panel.addEventListener('click', (e) => e.stopPropagation());
+        panel.addEventListener('mousedown', (e) => e.stopPropagation());
+
+        // Welcome message
+        this._appendBotMessage('¡Hola! Soy KiraBot 👋 Puedo ayudarte con la programación de TV y programar grabaciones. ¿En qué te puedo ayudar?');
+    }
+
+    toggle() {
+        this._open ? this.close() : this.open();
+    }
+
+    open() {
+        this._open = true;
+        document.getElementById('kirabot-panel').classList.remove('hidden');
+        document.getElementById('kb-input').focus();
+        this._scrollToBottom();
+    }
+
+    close() {
+        this._open = false;
+        document.getElementById('kirabot-panel').classList.add('hidden');
+    }
+
+    _switchTab(tab) {
+        this._tab = tab;
+        document.getElementById('kb-tab-chat').classList.toggle('active', tab === 'chat');
+        document.getElementById('kb-tab-rec').classList.toggle('active', tab === 'recordings');
+        document.getElementById('kb-chat-view').style.display = tab === 'chat' ? 'flex' : 'none';
+        document.getElementById('kb-rec-view').style.display = tab === 'recordings' ? 'flex' : 'none';
+        if (tab === 'recordings') this._loadRecordings();
+    }
+
+    _appendBotMessage(text, isError = false) {
+        const msgs = document.getElementById('kb-messages');
+        const div = document.createElement('div');
+        div.className = `kb-bubble bot${isError ? ' error' : ''}`;
+        div.textContent = text;
+        msgs.appendChild(div);
+        this._scrollToBottom();
+        return div;
+    }
+
+    _appendUserMessage(text) {
+        const msgs = document.getElementById('kb-messages');
+        const div = document.createElement('div');
+        div.className = 'kb-bubble user';
+        div.textContent = text;
+        msgs.appendChild(div);
+        this._scrollToBottom();
+    }
+
+    _showTyping() {
+        const msgs = document.getElementById('kb-messages');
+        const div = document.createElement('div');
+        div.className = 'kb-typing';
+        div.id = 'kb-typing';
+        div.textContent = 'KiraBot está escribiendo...';
+        msgs.appendChild(div);
+        this._scrollToBottom();
+    }
+
+    _removeTyping() {
+        document.getElementById('kb-typing')?.remove();
+    }
+
+    _scrollToBottom() {
+        const msgs = document.getElementById('kb-messages');
+        if (msgs) setTimeout(() => { msgs.scrollTop = msgs.scrollHeight; }, 10);
+    }
+
+    async _sendMessage() {
+        const input = document.getElementById('kb-input');
+        const text = input.value.trim();
+        if (!text || this._loading) return;
+
+        input.value = '';
+        input.style.height = 'auto';
+        this._appendUserMessage(text);
+        this._loading = true;
+        document.getElementById('kb-send').disabled = true;
+        this._showTyping();
+
+        try {
+            const resp = await fetch('/api/kirabot/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${localStorage.getItem('authToken') || ''}`,
+                },
+                body: JSON.stringify({ message: text }),
+            });
+            const data = await resp.json();
+            this._removeTyping();
+            if (resp.ok) {
+                this._appendBotMessage(data.response || 'Sin respuesta');
+            } else {
+                this._appendBotMessage(data.error || 'Error al conectar con KiraBot', true);
+            }
+        } catch (err) {
+            this._removeTyping();
+            this._appendBotMessage('No se pudo conectar con KiraBot. ¿Está el servidor activo?', true);
+        } finally {
+            this._loading = false;
+            document.getElementById('kb-send').disabled = false;
+            input.focus();
+        }
+    }
+
+    async _loadRecordings() {
+        const container = document.getElementById('kb-recordings');
+        container.innerHTML = '<div class="kb-empty">Cargando...</div>';
+
+        try {
+            const resp = await fetch('/api/kirabot/recordings?limit=20', {
+                headers: { 'Authorization': `Bearer ${localStorage.getItem('authToken') || ''}` },
+            });
+            const recs = await resp.json();
+            container.innerHTML = '';
+
+            if (!Array.isArray(recs) || recs.length === 0) {
+                container.innerHTML = '<div class="kb-empty">No tienes grabaciones todavía.<br>¡Pídele a KiraBot que grabe algo!</div>';
+                return;
+            }
+
+            const statusLabels = {
+                scheduled: ['⏳', 'scheduled', 'Programada'],
+                recording: ['🔴', 'recording', 'Grabando'],
+                completed: ['✓', 'completed', 'Completada'],
+                failed: ['✗', 'failed', 'Fallida'],
+                cancelled: ['✗', 'cancelled', 'Cancelada'],
+            };
+
+            recs.forEach((r) => {
+                const [icon, cls, label] = statusLabels[r.status] || ['?', '', r.status];
+                const start = r.start_time ? new Date(r.start_time).toLocaleString('es-ES', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }) : '';
+                const item = document.createElement('div');
+                item.className = 'kb-rec-item';
+                item.innerHTML = `
+                    <div class="kb-rec-title">${this._esc(r.title)}</div>
+                    <div class="kb-rec-meta">${this._esc(r.channel_name || '')}${start ? ' · ' + start : ''}</div>
+                    <div class="kb-rec-status ${cls}">${icon} ${label}</div>
+                `;
+                container.appendChild(item);
+            });
+        } catch (err) {
+            container.innerHTML = '<div class="kb-empty" style="color:#f87171">Error al cargar las grabaciones.</div>';
+        }
+    }
+
+    _esc(str) {
+        return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+}
+
+// Initialize when app is ready
+document.addEventListener('DOMContentLoaded', () => {
+    // Delay slightly to let auth check happen first
+    setTimeout(() => {
+        if (localStorage.getItem('authToken')) {
+            window.kiraBot = new ChatBot();
+        }
+    }, 500);
+});

public/js/components/SourceManager.js

@@ -8,6 +8,8 @@ class SourceManager {
         this.xtreamList = document.getElementById('xtream-list');
         this.m3uList = document.getElementById('m3u-list');
         this.epgList = document.getElementById('epg-list');
+        /** @type {Record<number, string>} id → username (admin, for labels) */
+        this.userNamesById = {};
 
         // Content browser state
         this.contentType = 'channels'; // 'channels' or 'movies'
@@ -20,6 +22,29 @@ class SourceManager {
         this.init();
     }
 
+    /**
+     * Comprueba si la sesión es admin. Usa /api/auth/me si window.app.currentUser
+     * aún no está (carrera: el modal se abre antes de que termine checkAuth).
+     */
+    async isAdminSession() {
+        let role = window.app?.currentUser?.role;
+        if (!role && typeof localStorage !== 'undefined') {
+            const token = localStorage.getItem('authToken');
+            if (token) {
+                try {
+                    const r = await fetch('/api/auth/me', {
+                        headers: { Authorization: `Bearer ${token}` }
+                    });
+                    if (r.ok) {
+                        const u = await r.json();
+                        role = u.role;
+                    }
+                } catch (_) { /* ignore */ }
+            }
+        }
+        return String(role || '').toLowerCase() === 'admin';
+    }
+
     init() {
         // Add source buttons
         document.getElementById('add-xtream').addEventListener('click', () => this.showAddModal('xtream'));
@@ -112,9 +137,20 @@ class SourceManager {
         try {
             const sources = await API.sources.getAll();
 
-            this.renderSourceList(this.xtreamList, sources.filter(s => s.type === 'xtream'), 'xtream');
+            const admin = await this.isAdminSession();
-            this.renderSourceList(this.m3uList, sources.filter(s => s.type === 'm3u'), 'm3u');
+            this.userNamesById = {};
-            this.renderSourceList(this.epgList, sources.filter(s => s.type === 'epg'), 'epg');
+            if (admin) {
+                try {
+                    const users = await API.users.getAll();
+                    users.forEach(u => { this.userNamesById[u.id] = u.username; });
+                } catch (e) {
+                    console.warn('[SourceManager] Could not load users for labels:', e);
+                }
+            }
+
+            this.renderSourceList(this.xtreamList, sources.filter(s => s.type === 'xtream'), 'xtream', admin);
+            this.renderSourceList(this.m3uList, sources.filter(s => s.type === 'm3u'), 'm3u', admin);
+            this.renderSourceList(this.epgList, sources.filter(s => s.type === 'epg'), 'epg', admin);
         } catch (err) {
             console.error('Error loading sources:', err);
         }
@@ -123,7 +159,7 @@ class SourceManager {
     /**
      * Render source list
      */
-    renderSourceList(container, sources, type) {
+    renderSourceList(container, sources, type, isAdmin = false) {
         if (sources.length === 0) {
             container.innerHTML = `<p class="hint">No ${type.toUpperCase()} sources configured</p>`;
             return;
@@ -131,12 +167,21 @@ class SourceManager {
 
         const icons = { xtream: Icons.live, m3u: Icons.guide, epg: Icons.series };
 
+        const esc = (t) => String(t ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
+        const admin = isAdmin;
+        const ownerLine = (source) => admin
+            ? `<div class="source-meta hint">${source.ownerId != null
+                ? `Propietario: ${esc(this.userNamesById[source.ownerId] || ('#' + source.ownerId))}`
+                : 'Fuente compartida (todos los usuarios)'}</div>`
+            : '';
+
         container.innerHTML = sources.map(source => `
       <div class="source-item ${source.enabled ? '' : 'disabled'}" data-id="${source.id}">
         <span class="source-icon">${icons[type]}</span>
         <div class="source-info">
-          <div class="source-name">${source.name}</div>
+          <div class="source-name">${esc(source.name)}</div>
-          <div class="source-url">${source.url}</div>
+          <div class="source-url">${esc(source.url)}</div>
+          ${ownerLine(source)}
         </div>
         <div class="source-actions">
           <button class="btn btn-sm btn-secondary" data-action="refresh" title="Refresh Data">${Icons.refresh}</button>
@@ -165,7 +210,7 @@ class SourceManager {
     /**
      * Show add source modal
      */
-    showAddModal(type) {
+    async showAddModal(type) {
         const modal = document.getElementById('modal');
         const title = document.getElementById('modal-title');
         const body = document.getElementById('modal-body');
@@ -174,7 +219,7 @@ class SourceManager {
         const titles = { xtream: 'Add Xtream Connection', m3u: 'Add M3U Playlist', epg: 'Add EPG Source' };
         title.textContent = titles[type];
 
-        body.innerHTML = this.getSourceForm(type);
+        body.innerHTML = await this.getSourceForm(type);
 
         footer.innerHTML = `
       <button class="btn btn-secondary" id="modal-cancel">Cancel</button>
@@ -202,7 +247,7 @@ class SourceManager {
             const footer = document.getElementById('modal-footer');
 
             title.textContent = `Edit ${type.toUpperCase()} Source`;
-            body.innerHTML = this.getSourceForm(type, source);
+            body.innerHTML = await this.getSourceForm(type, source);
 
             footer.innerHTML = `
         <button class="btn btn-secondary" id="modal-cancel">Cancel</button>
@@ -222,11 +267,32 @@ class SourceManager {
     /**
      * Get source form HTML
      */
-    getSourceForm(type, source = {}) {
+    async getSourceForm(type, source = {}) {
+        const esc = (t) => String(t ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
+
+        let ownerField = '';
+        if (await this.isAdminSession()) {
+            let users = [];
+            try {
+                users = await API.users.getAll();
+            } catch (e) {
+                console.warn('[SourceManager] users list:', e);
+            }
+            const opts = [`<option value="">Compartida (todos los usuarios autenticados)</option>`].concat(
+                users.map(u => `<option value="${u.id}" ${Number(source.ownerId) === Number(u.id) ? 'selected' : ''}>${esc(u.username)}</option>`)
+            );
+            ownerField = `
+      <div class="form-group">
+        <label for="source-owner">Propietario</label>
+        <select id="source-owner" class="form-input">${opts.join('')}</select>
+        <p class="hint">Si asignas un usuario, solo él podrá usar esta fuente en el proxy (evita doble consumo de conexiones XC).</p>
+      </div>`;
+        }
+
         const nameField = `
       <div class="form-group">
         <label for="source-name">Name</label>
-        <input type="text" id="source-name" class="form-input" placeholder="My Source" value="${source.name || ''}">
+        <input type="text" id="source-name" class="form-input" placeholder="My Source" value="${esc(source.name)}">
       </div>
     `;
 
@@ -235,27 +301,28 @@ class SourceManager {
         <label for="source-url">${type === 'xtream' ? 'Server URL' : 'URL'}</label>
         <input type="text" id="source-url" class="form-input" 
                placeholder="${type === 'xtream' ? 'http://server.com:port' : 'https://example.com/playlist.m3u'}" 
-               value="${source.url || ''}">
+               value="${esc(source.url)}">
       </div>
     `;
 
         if (type === 'xtream') {
+            const pwVal = source.password && !String(source.password).includes('•') ? esc(source.password) : '';
             return `
+        ${ownerField}
         ${nameField}
         ${urlField}
         <div class="form-group">
           <label for="source-username">Username</label>
-          <input type="text" id="source-username" class="form-input" value="${source.username || ''}">
+          <input type="text" id="source-username" class="form-input" value="${esc(source.username)}">
         </div>
         <div class="form-group">
           <label for="source-password">Password</label>
-          <input type="password" id="source-password" class="form-input" 
+          <input type="password" id="source-password" class="form-input" value="${pwVal}">
-                 value="${source.password && !source.password.includes('•') ? source.password : ''}">
         </div>
       `;
         }
 
-        return nameField + urlField;
+        return ownerField + nameField + urlField;
     }
 
     /**
@@ -295,7 +362,15 @@ class SourceManager {
                 }
             }
 
-            await API.sources.create({ type, name, url, username, password });
+            const payload = { type, name, url, username, password };
+            if (await this.isAdminSession()) {
+                const sel = document.getElementById('source-owner');
+                if (sel) {
+                    const v = sel.value;
+                    payload.ownerId = v === '' ? null : parseInt(v, 10);
+                }
+            }
+            await API.sources.create(payload);
             document.getElementById('modal').classList.remove('active');
             await this.loadSources();
 
@@ -329,6 +404,13 @@ class SourceManager {
                 data.username = username;
                 if (password) data.password = password;
             }
+            if (await this.isAdminSession()) {
+                const sel = document.getElementById('source-owner');
+                if (sel) {
+                    const v = sel.value;
+                    data.ownerId = v === '' ? null : parseInt(v, 10);
+                }
+            }
 
             await API.sources.update(id, data);
             document.getElementById('modal').classList.remove('active');

public/js/components/VideoPlayer.js

@@ -28,6 +28,9 @@ class VideoPlayer {
         this.isUsingProxy = false;
         this.currentUrl = null;
         this.settingsLoaded = false;
+        this.switchInProgress = false;
+        this.queuedSwitch = null;
+        this.lastSwitchAt = 0;
 
         // Settings - start with defaults, load from server async
         this.settings = this.getDefaultSettings();
@@ -53,7 +56,7 @@ class VideoPlayer {
             forceTranscode: false,
             forceRemux: false,
             autoTranscode: true,
-            streamFormat: 'm3u8',
+            streamFormat: 'ts',
             epgRefreshInterval: '24'
         };
     }
@@ -65,13 +68,22 @@ class VideoPlayer {
         try {
             const serverSettings = await API.settings.get();
             this.settings = { ...this.getDefaultSettings(), ...serverSettings };
+            if (typeof window !== 'undefined' && window.kiratvDesktop?.isDesktopApp) {
+                Object.assign(this.settings, {
+                    autoTranscode: false,
+                    forceVideoTranscode: false,
+                    forceTranscode: false,
+                    forceRemux: false
+                });
+                console.log('[Player] App escritorio: sin transcodificar en servidor; reproducirás con mpv nativo.');
+            }
             this.settingsLoaded = true;
             console.log('[Player] Settings loaded from server');
         } catch (err) {
             console.warn('[Player] Failed to load settings from server, using defaults:', err.message);
             // Fall back to localStorage for backwards compatibility
             try {
-                const saved = localStorage.getItem('nodecast_tv_player_settings');
+                const saved = localStorage.getItem('kiratv_player_settings');
                 if (saved) {
                     this.settings = { ...this.getDefaultSettings(), ...JSON.parse(saved) };
                     console.log('[Player] Settings loaded from localStorage (fallback)');
@@ -93,7 +105,7 @@ class VideoPlayer {
             console.error('[Player] Error saving settings to server:', err);
             // Also save to localStorage as backup
             try {
-                localStorage.setItem('nodecast_tv_player_settings', JSON.stringify(this.settings));
+                localStorage.setItem('kiratv_player_settings', JSON.stringify(this.settings));
             } catch (localErr) {
                 console.error('[Player] Error saving to localStorage:', localErr);
             }
@@ -206,8 +218,9 @@ class VideoPlayer {
 
         // Play/Pause toggle
         const togglePlay = () => {
+            if (!this.video.src) return; // sin fuente → ignorar (evita NotSupportedError)
             if (this.video.paused) {
-                this.video.play();
+                this.video.play().catch(() => {});
             } else {
                 this.video.pause();
             }
@@ -813,37 +826,58 @@ class VideoPlayer {
      * Start a HLS transcode session
      */
     async startTranscodeSession(url, options = {}) {
-        try {
         console.log('[Player] Starting HLS transcode session...', options);
+        let lastError = null;
+
+        // Retry a couple of times to ride out provider-side 5xx/rate-limit spikes.
+        for (let attempt = 1; attempt <= 3; attempt++) {
+            try {
                 const res = await fetch('/api/transcode/session', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ url, ...options })
                 });
-            if (!res.ok) throw new Error('Failed to start session');
+                if (!res.ok) {
+                    throw new Error(`Failed to start session (${res.status})`);
+                }
                 const session = await res.json();
                 this.currentSessionId = session.sessionId;
                 return session.playlistUrl;
             } catch (err) {
-            console.error('[Player] Session start failed:', err);
+                lastError = err;
-            // Fallback to direct transcode if session fails
+                console.warn(`[Player] Session start failed (attempt ${attempt}/3):`, err?.message || err);
-            return `/api/transcode?url=${encodeURIComponent(url)}`;
+                if (attempt < 3) {
+                    await new Promise(resolve => setTimeout(resolve, 900));
                 }
             }
+        }
+
+        // Avoid fallback to /api/transcode direct stream: it tends to overlap sessions
+        // and breaks providers with strict single-connection limits.
+        throw lastError || new Error('Failed to start transcode session');
+    }
 
     /**
      * Stop and cleanup current transcode session
      */
     async stopTranscodeSession() {
-        if (this.currentSessionId) {
+        if (!this.currentSessionId) return;
-            console.log('[Player] Stopping transcode session:', this.currentSessionId);
+
+        const sessionId = this.currentSessionId;
+        this.currentSessionId = null;
+        console.log('[Player] Stopping transcode session:', sessionId);
         try {
-                // Fire and forget cleanup
+            const controller = new AbortController();
-                fetch(`/api/transcode/${this.currentSessionId}`, { method: 'DELETE' });
+            const timer = setTimeout(() => controller.abort(), 1500);
+            await fetch(`/api/transcode/${sessionId}`, {
+                method: 'DELETE',
+                signal: controller.signal
+            });
+            clearTimeout(timer);
         } catch (err) {
+            if (err?.name !== 'AbortError') {
                 console.error('Failed to stop session:', err);
             }
-            this.currentSessionId = null;
         }
     }
 
@@ -851,14 +885,63 @@ class VideoPlayer {
      * Play a channel
      */
     async play(channel, streamUrl) {
+        // Avoid overlapping channel changes; keep only the latest zap request.
+        if (this.switchInProgress) {
+            this.queuedSwitch = { channel, streamUrl };
+            return;
+        }
+        this.switchInProgress = true;
         this.currentChannel = channel;
 
         try {
             // Stop any WatchPage playback (movies/series) before starting Live TV
             window.app?.pages?.watch?.stop?.();
 
-            // Stop current playback
+            // Stop current playback (sends DELETE to worker → FFmpeg dies → Dispatcharr frees the slot)
-            this.stop();
+            await this.stop();
+
+            if (typeof window.kiratvPlayLiveInNativePlayer === 'function' && window.kiratvDesktop?.isDesktopApp) {
+                this.lastSwitchAt = Date.now();
+                this.overlay.classList.add('hidden');
+                this.controlsOverlay?.classList.remove('hidden');
+                this.loadingSpinner?.classList.remove('show');
+
+                const absUrl = window.kiratvAbsolutePlaybackUrl
+                    ? window.kiratvAbsolutePlaybackUrl(streamUrl)
+                    : streamUrl;
+                this.currentUrl = streamUrl;
+
+                console.log('[KiraTV Desktop] Lanzando mpv con URL:', absUrl);
+
+                try {
+                    const result = await window.kiratvPlayLiveInNativePlayer(absUrl);
+                    console.log('[KiraTV Desktop] resultado mpv:', JSON.stringify(result));
+                    if (!result?.ok) {
+                        console.error('[KiraTV Desktop] mpv error:', result?.error);
+                        this.showError(
+                            (result?.error || 'mpv no arrancó.') +
+                                ' Instala mpv (sudo apt install mpv en Linux) o coloca el binario en resources/binaries/mpv/.'
+                        );
+                    } else {
+                        this.updateTranscodeStatus('direct', 'mpv nativo');
+                    }
+                } catch (e) {
+                    console.error('[KiraTV Desktop] excepción:', e);
+                    this.showError(String(e.message || e));
+                }
+
+                this.updateNowPlaying(channel);
+                this.showNowPlayingOverlay();
+                this.fetchEpgData(channel);
+                window.dispatchEvent(new CustomEvent('channelChanged', { detail: channel }));
+                return;
+            }
+
+            // Give Dispatcharr enough time to release the stream slot before probing the new channel.
+            // 2500ms covers most providers; retries in the probe endpoint handle the edge cases.
+            await new Promise(resolve => setTimeout(resolve, 2500));
+
+            this.lastSwitchAt = Date.now();
             this.updateTranscodeStatus('hidden');
 
             // Hide "select a channel" overlay
@@ -932,15 +1015,18 @@ class VideoPlayer {
                         window.dispatchEvent(new CustomEvent('channelChanged', { detail: channel }));
                         return;
                     } else if (info.needsRemux) {
-                        // Raw .ts container - use remux
+                        // Algunos streams TS fallan en remux directo (ffmpeg mp4 mux errors).
-                        console.log('[Player] Auto: Using remux (.ts container)');
+                        // En ese caso es mas estable usar sesion HLS con video copy.
-                        this.updateTranscodeStatus('remuxing', 'Remux (Auto)');
+                        console.log('[Player] Auto: Using HLS transcode session (copy for remux-needed stream)');
-                        const remuxUrl = `/api/remux?url=${encodeURIComponent(streamUrl)}`;
+                        this.updateTranscodeStatus('transcoding', 'Transcoding (Auto)');
-                        this.currentUrl = remuxUrl;
+                        const playlistUrl = await this.startTranscodeSession(streamUrl, {
-                        this.video.src = remuxUrl;
+                            videoMode: 'copy',
-                        this.video.play().catch(e => {
+                            videoCodec: info.video,
-                            if (e.name !== 'AbortError') console.log('[Player] Autoplay prevented:', e);
+                            audioCodec: info.audio,
+                            audioChannels: info.audioChannels
                         });
+                        this.currentUrl = playlistUrl;
+                        this.playHls(playlistUrl);
                         this.updateNowPlaying(channel);
                         this.showNowPlayingOverlay();
                         this.fetchEpgData(channel);
@@ -964,20 +1050,7 @@ class VideoPlayer {
                 const playlistUrl = await this.startTranscodeSession(streamUrl, { videoMode: 'encode' });
                 this.currentUrl = playlistUrl;
 
-                // Load HLS
-                this.updateNowPlaying(channel, 'Transcoding (Video)');
-                // ... (rest is same logic flow, simplified by just falling through to playHls call if I refactored)
-                // But for minimize drift, I'll copy the block logic for HLS playback init
-                // Actually, I can just fall through if I set looksLikeHls = true?
-                // No, play logic is sequential.
                 if (Hls.isSupported()) {
-                    // Start HLS
-                    // ... this repeats code. I should probably just set currentUrl and let HLS block handle?
-                    // But HLS block is lower down.
-                    // I will just execute the HLS init here as before.
-
-                    // Actually, easiest way is to re-assign streamUrl and goto start? No.
-                    // Copy existing forceTranscode block logic
                     if (this.hls) {
                         this.hls.destroy();
                     }
@@ -987,7 +1060,6 @@ class VideoPlayer {
                     this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
                         this.video.play().catch(console.error);
                     });
-                    // Handle errors
                     this.hls.on(Hls.Events.ERROR, (event, data) => {
                         if (data.fatal) {
                             console.log('[Player] HLS fatal error');
@@ -995,8 +1067,19 @@ class VideoPlayer {
                         }
                     });
 
-                    return; // Exit
+                    this.updateNowPlaying(channel);
+                    this.showNowPlayingOverlay();
+                    this.fetchEpgData(channel);
+                    window.dispatchEvent(new CustomEvent('channelChanged', { detail: channel }));
+                    return;
                 }
+                console.warn('[Player] HLS.js (MSE) not available; usando HLS nativo si el navegador lo permite…');
+                this.playHls(playlistUrl);
+                this.updateNowPlaying(channel);
+                this.showNowPlayingOverlay();
+                this.fetchEpgData(channel);
+                window.dispatchEvent(new CustomEvent('channelChanged', { detail: channel }));
+                return;
             }
 
             // CHECK: Force Audio Transcode (Copy Video) - legacy forceTranscode setting
@@ -1068,13 +1151,28 @@ class VideoPlayer {
                 return;
             }
 
-            // If raw TS detected without Force Remux enabled, show error
+            // Raw .ts URLs: browsers need remux (or transcode). Mirror "Force Remux" when Smart
+            // transcode is on so a failed/missed probe does not dead-end here with a confusing error.
             if (isRawTs && !this.settings.forceRemux) {
+                if (this.settings.autoTranscode) {
+                    console.log('[Player] Raw MPEG-TS (.ts) + Auto Transcode — remux automático (servidor → fMP4)');
+                    this.updateTranscodeStatus('remuxing', 'Remux (Auto TS)');
+                    const remuxUrl = this.getRemuxUrl(streamUrl);
+                    this.video.src = remuxUrl;
+                    this.video.play().catch((e) => {
+                        if (e.name !== 'AbortError') console.log('[Player] Autoplay prevented:', e);
+                    });
+                    this.updateNowPlaying(channel);
+                    this.showNowPlayingOverlay();
+                    this.fetchEpgData(channel);
+                    window.dispatchEvent(new CustomEvent('channelChanged', { detail: channel }));
+                    return;
+                }
                 console.warn('[Player] Raw MPEG-TS stream detected. Browsers cannot play .ts files directly.');
                 this.showError(
                     'This stream uses raw MPEG-TS format (.ts) which browsers cannot play directly.<br><br>' +
                     '<strong>To fix this:</strong><br>' +
-                    '1. Enable <strong>"Force Remux"</strong> in Settings → Streaming<br>' +
+                    '1. Enable <strong>"Auto Transcode (Smart)"</strong> or <strong>"Force Remux"</strong> in Settings → Streaming<br>' +
                     '2. Or configure your source to output HLS (.m3u8) format'
                 );
                 return;
@@ -1183,6 +1281,13 @@ class VideoPlayer {
         } catch (err) {
             console.error('Error playing channel:', err);
             this.showError('Failed to play channel');
+        } finally {
+            this.switchInProgress = false;
+            if (this.queuedSwitch) {
+                const next = this.queuedSwitch;
+                this.queuedSwitch = null;
+                this.play(next.channel, next.streamUrl);
+            }
         }
     }
 
@@ -1192,6 +1297,25 @@ class VideoPlayer {
     playHls(url) {
         if (this.hls) {
             this.hls.destroy();
+            this.hls = null;
+        }
+
+        const nativeHls =
+            this.video.canPlayType('application/vnd.apple.mpegurl') === 'probably' ||
+            this.video.canPlayType('application/vnd.apple.mpegurl') === 'maybe';
+
+        if ((!Hls.isSupported() || typeof Hls === 'undefined') && nativeHls) {
+            console.log('[Player] HLS playlist via reproducción nativa (sin MSE)');
+            this.video.src = url;
+            this.video.play().catch((e) => {
+                if (e.name !== 'AbortError') console.log('Autoplay prevented:', e);
+            });
+            return;
+        }
+
+        if (!Hls.isSupported()) {
+            console.error('[Player] Este navegador no soporta HLS (ni MSE ni HLS nativo); no se puede reproducir la lista');
+            return;
         }
 
         this.hls = new Hls(this.getHlsConfig());
@@ -1387,17 +1511,24 @@ class VideoPlayer {
     /**
      * Stop playback
      */
-    stop() {
+    async stop() {
+        if (typeof window !== 'undefined' && window.kiratvDesktop?.stopExternalMpv) {
+            await window.kiratvDesktop.stopExternalMpv().catch(() => {});
+        }
+
         // Stop any running transcode session first
-        this.stopTranscodeSession();
+        await this.stopTranscodeSession();
 
         if (this.hls) {
             this.hls.destroy();
             this.hls = null;
         }
         this.video.pause();
+        // En modo escritorio el vídeo va a mpv; limpiar src dispara NotSupportedError
+        if (!window.kiratvDesktop?.isDesktopApp) {
             this.video.src = '';
             this.video.load();
+        }
 
         // Reset UI to idle state
         this.overlay.classList.remove('hidden'); // Show "Select a channel"

public/js/desktopPlayback.js

@@ -0,0 +1,325 @@
+/**
+ * KiraTV — helpers para escritorio (Electron o shell WebView2 + panel Win32).
+ */
+(function () {
+    function showToast(msg, type, durationMs) {
+        let container = document.getElementById('kiratv-desktop-toast');
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'kiratv-desktop-toast';
+            Object.assign(container.style, {
+                position: 'fixed',
+                bottom: '24px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                zIndex: '99999',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '8px',
+                pointerEvents: 'none'
+            });
+            document.body.appendChild(container);
+        }
+
+        const toast = document.createElement('div');
+        Object.assign(toast.style, {
+            background: type === 'error' ? '#c0392b' : '#1a7f4a',
+            color: '#fff',
+            padding: '10px 20px',
+            borderRadius: '8px',
+            fontSize: '14px',
+            fontFamily: 'sans-serif',
+            boxShadow: '0 4px 16px rgba(0,0,0,.5)',
+            opacity: '1',
+            transition: 'opacity 0.4s'
+        });
+        toast.textContent = msg;
+        container.appendChild(toast);
+
+        setTimeout(() => {
+            toast.style.opacity = '0';
+            setTimeout(() => toast.remove(), 450);
+        }, durationMs || 3500);
+    }
+
+    function unwrapDesktopWrapperUrl(urlLike) {
+        try {
+            const u = new URL(String(urlLike), window.location.origin);
+            const wrappedPath = u.pathname;
+            if (
+                wrappedPath === '/api/transcode' ||
+                wrappedPath === '/api/remux' ||
+                wrappedPath === '/api/proxy/stream'
+            ) {
+                const original = u.searchParams.get('url');
+                if (original) return original;
+            }
+        } catch (_) {
+            /* */
+        }
+        return urlLike;
+    }
+
+    function absolutePlaybackUrl(streamUrl) {
+        if (!streamUrl) return '';
+        const raw = String(streamUrl).trim();
+        const s = String(unwrapDesktopWrapperUrl(raw)).trim();
+        if (/^https?:\/\//i.test(s)) return s;
+        return window.location.origin + (s.startsWith('/') ? s : '/' + s);
+    }
+
+    async function resolveNativePlaybackUrl(streamUrl) {
+        const abs = absolutePlaybackUrl(streamUrl);
+        try {
+            const u = new URL(abs);
+            if (/\/api\/proxy\/xtream\/[^/]+\/stream\/[^/]+/i.test(u.pathname)) {
+                const r = await fetch(abs, { credentials: 'include' });
+                if (r.ok) {
+                    const j = await r.json();
+                    if (j && typeof j.url === 'string' && j.url.trim()) {
+                        return j.url.trim();
+                    }
+                }
+            }
+        } catch (_) {
+            /* usar abs */
+        }
+        return abs;
+    }
+
+    function authBearerPayload() {
+        try {
+            const t = localStorage.getItem('authToken');
+            return t && t.length > 0 ? { authorizationBearer: t } : {};
+        } catch (_) {
+            return {};
+        }
+    }
+
+    function authBearerPayloadFor(url) {
+        try {
+            const u = new URL(url, window.location.origin);
+            if (u.origin !== window.location.origin) return {};
+        } catch (_) {
+            return {};
+        }
+        return authBearerPayload();
+    }
+
+    function elementToBounds(el) {
+        if (!el) return null;
+        const r = el.getBoundingClientRect();
+        return {
+            left: Math.round(r.left),
+            top: Math.round(r.top),
+            width: Math.max(1, Math.round(r.width)),
+            height: Math.max(1, Math.round(r.height))
+        };
+    }
+
+    /**
+     * Rect para Electron (--wid sobre Chromium). En WebView2+panel Win32 no se usa.
+     */
+    function getEmbedBounds() {
+        if (!window.kiratvDesktop?.supportsEmbeddedMpv) return null;
+        if (window.kiratvDesktop.embedUsesNativePanel) return null;
+
+        const watchPage = document.getElementById('page-watch');
+        if (watchPage && watchPage.classList.contains('active')) {
+            const videoEl = document.getElementById('watch-video');
+            if (videoEl) return elementToBounds(videoEl);
+            const section = document.querySelector('.watch-video-section');
+            if (section) return elementToBounds(section);
+        }
+
+        const livePage = document.getElementById('page-live');
+        if (livePage && livePage.classList.contains('active')) {
+            const ps = document.querySelector('.player-section');
+            if (ps) return elementToBounds(ps);
+        }
+
+        const ps = document.querySelector('.player-section');
+        if (ps && ps.offsetParent !== null) return elementToBounds(ps);
+        const wv = document.getElementById('watch-video');
+        if (wv && wv.offsetParent !== null) return elementToBounds(wv);
+
+        return null;
+    }
+
+    function embedUsesNativePanel() {
+        return !!(window.kiratvDesktop && window.kiratvDesktop.embedUsesNativePanel);
+    }
+
+    function setEmbeddedUiClass(active) {
+        const native = embedUsesNativePanel();
+        document.body?.classList.toggle('kiratv-win-embedded', !!(active && !native));
+        document.body?.classList.toggle('kiratv-shell-wv2-playing', !!(active && native));
+    }
+
+    /**
+     * Modo cromo ventana: WebView2 oculta panel vídeo en rutas sin reproductor nativo.
+     */
+    function shellChromeModeFromHash() {
+        const raw = location.hash || '#home';
+        const h = raw.replace(/^#\//, '#').replace(/^#/, '').split(/[/?&]/)[0];
+        if (h === 'live') return 'liveSplit';
+        if (h === 'watch') return 'vodSplit';
+        return 'fullWeb';
+    }
+
+    function syncShellChrome() {
+        const d = window.kiratvDesktop;
+        if (typeof d?.setShellChromeMode !== 'function') return;
+        const mode = shellChromeModeFromHash();
+        d.setShellChromeMode({ mode }).catch(() => {});
+
+        if (embedUsesNativePanel() && mode === 'fullWeb') {
+            d.stopExternalMpv?.().catch(() => {});
+            if (typeof window.kiratvDesktopClearEmbeddedChrome === 'function') {
+                window.kiratvDesktopClearEmbeddedChrome();
+            }
+        }
+    }
+
+    function initEmbedBoundsSync() {
+        if (!window.kiratvDesktop?.supportsEmbeddedMpv) return;
+        if (embedUsesNativePanel()) return;
+        if (typeof window.kiratvDesktop?.setVideoHostBounds !== 'function') return;
+
+        let t = null;
+        function flushBounds() {
+            clearTimeout(t);
+            t = setTimeout(() => {
+                const b = getEmbedBounds();
+                if (!b) return;
+                window.kiratvDesktop.setVideoHostBounds(b).catch(() => {});
+            }, 72);
+        }
+
+        window.addEventListener('resize', flushBounds);
+
+        if (typeof ResizeObserver !== 'undefined') {
+            const ro = new ResizeObserver(flushBounds);
+            document.querySelectorAll('.player-section, .watch-video-section, #watch-video').forEach((el) => {
+                try {
+                    ro.observe(el);
+                } catch (_) {
+                    /* */
+                }
+            });
+        }
+
+        window.addEventListener('hashchange', flushBounds);
+
+        flushBounds();
+    }
+
+    function useEmbeddedPlayback() {
+        const d = window.kiratvDesktop;
+        return !!(d?.supportsEmbeddedMpv && typeof d.playEmbeddedMpv === 'function');
+    }
+
+    async function playInMpv(absUrl, extraArgs) {
+        const d = window.kiratvDesktop;
+        if (!d?.playExternalMpv) {
+            showToast('Error: sin puente escritorio', 'error');
+            return { ok: false, error: 'Sin puente escritorio' };
+        }
+
+        const nativeUrl = await resolveNativePlaybackUrl(absUrl);
+
+        if (useEmbeddedPlayback()) {
+            const native = embedUsesNativePanel();
+
+            let bounds = null;
+            if (!native) {
+                bounds = getEmbedBounds();
+                if (!bounds || bounds.width < 2 || bounds.height < 2) {
+                    showToast('No hay área de vídeo visible — cambia de página o redimensiona', 'error');
+                    return { ok: false, error: 'bounds vídeo vacíos' };
+                }
+                showToast('▶ Reproduciendo en la misma ventana (mpv)', 'ok', 2800);
+                try {
+                    await d.setVideoHostBounds(bounds);
+                } catch (_) {
+                    /* */
+                }
+            } else {
+                showToast('▶ Reproduciendo en panel nativo (mpv)', 'ok', 2800);
+            }
+
+            setEmbeddedUiClass(true);
+
+            const payload = {
+                url: nativeUrl,
+                extraArgs: extraArgs || [],
+                ...authBearerPayloadFor(nativeUrl)
+            };
+            if (!native && bounds) payload.bounds = bounds;
+
+            const result = await d.playEmbeddedMpv(payload);
+
+            if (!result?.ok) {
+                setEmbeddedUiClass(false);
+                const msg = result?.error || 'mpv no pudo arrancar';
+                console.error('[KiraTV Desktop]', msg);
+                showToast('⚠ ' + msg, 'error', 6000);
+            }
+            return result;
+        }
+
+        showToast('▶ Abriendo en reproductor nativo…', 'ok', 2500);
+
+        const result = await d.playExternalMpv({
+            url: nativeUrl,
+            extraArgs: extraArgs || [],
+            ...authBearerPayloadFor(nativeUrl)
+        });
+
+        if (!result?.ok) {
+            const msg = result?.error || 'mpv no pudo arrancar';
+            console.error('[KiraTV Desktop]', msg);
+            showToast(
+                '⚠ ' + msg + (msg.includes('mpv') ? '' : ' — ¿mpv instalado?'),
+                'error',
+                6000
+            );
+        }
+        return result;
+    }
+
+    function whenReady(cb) {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', cb, { once: true });
+        } else {
+            cb();
+        }
+    }
+
+    whenReady(() => {
+        if (window.kiratvDesktop?.isDesktopApp) {
+            document.body.classList.add('kiratv-desktop-app');
+        }
+        if (window.kiratvDesktop?.supportsEmbeddedMpv) {
+            initEmbedBoundsSync();
+        }
+        window.addEventListener('hashchange', syncShellChrome);
+        setTimeout(syncShellChrome, 0);
+    });
+
+    window.kiratvDesktopClearEmbeddedChrome = function () {
+        setEmbeddedUiClass(false);
+    };
+
+    window.kiratvAbsolutePlaybackUrl = absolutePlaybackUrl;
+    window.kiratvEmbedBoundsFlush = () => getEmbedBounds();
+
+    window.kiratvPlayLiveInNativePlayer = function (absoluteUrl) {
+        return playInMpv(absoluteUrl);
+    };
+
+    window.kiratvPlayVodInNativePlayer = function (absoluteUrl, extraArgs) {
+        return playInMpv(absoluteUrl, extraArgs);
+    };
+})();

public/js/pages/MoviesPage.js

@@ -238,7 +238,7 @@ class MoviesPage {
         this.container.innerHTML = '';
 
         if (this.filteredMovies.length === 0) {
-            this.container.innerHTML = '<div class="empty-state"><p>No movies found</p></div>';
+            this.container.innerHTML = '<div class="empty-state"><p>No se han encontrado películas</p></div>';
             return;
         }
 
@@ -278,7 +278,8 @@ class MoviesPage {
             card.dataset.movieId = movie.stream_id;
             card.dataset.sourceId = movie.sourceId;
 
-            const poster = movie.stream_icon || movie.cover || '/img/placeholder.png';
+            const rawPoster = movie.stream_icon || movie.cover || '';
+            const poster = rawPoster.startsWith('http') ? `/api/proxy/image?url=${encodeURIComponent(rawPoster)}` : (rawPoster || '/img/placeholder.png');
             const year = movie.year || movie.releaseDate?.substring(0, 4) || '';
             const rating = movie.rating ? `${Icons.star} ${movie.rating}` : '';
 
@@ -351,6 +352,7 @@ class MoviesPage {
                         description: movie.plot || '',
                         year: movie.year || movie.releaseDate?.substring(0, 4),
                         rating: movie.rating,
+                        durationSec: movie.duration_secs || movie.durationSeconds || movie.duration || movie.run_time,
                         sourceId: movie.sourceId,
                         categoryId: movie.category_id,
                         containerExtension: container

public/js/pages/SeriesPage.js

@@ -250,7 +250,7 @@ class SeriesPage {
         this.container.innerHTML = '';
 
         if (this.filteredSeries.length === 0) {
-            this.container.innerHTML = '<div class="empty-state"><p>No series found</p></div>';
+            this.container.innerHTML = '<div class="empty-state"><p>No se han encontrado series</p></div>';
             return;
         }
 
@@ -288,7 +288,8 @@ class SeriesPage {
             card.dataset.seriesId = series.series_id;
             card.dataset.sourceId = series.sourceId;
 
-            const poster = series.cover || '/img/placeholder.png';
+            const rawPoster = series.cover || '';
+            const poster = rawPoster.startsWith('http') ? `/api/proxy/image?url=${encodeURIComponent(rawPoster)}` : (rawPoster || '/img/placeholder.png');
             const year = series.year || series.releaseDate?.substring(0, 4) || '';
             const rating = series.rating ? `${Icons.star} ${series.rating}` : '';
 
@@ -350,7 +351,8 @@ class SeriesPage {
         this.detailsPanel.classList.remove('hidden');
 
         // Set header info
-        document.getElementById('series-poster').src = series.cover || '/img/placeholder.png';
+        const rawCover = series.cover || '';
+        document.getElementById('series-poster').src = rawCover.startsWith('http') ? `/api/proxy/image?url=${encodeURIComponent(rawCover)}` : (rawCover || '/img/placeholder.png');
         document.getElementById('series-title').textContent = series.name;
         document.getElementById('series-plot').textContent = series.plot || '';
 
@@ -362,7 +364,7 @@ class SeriesPage {
             const info = await API.proxy.xtream.seriesInfo(series.sourceId, series.series_id);
 
             if (!info || !info.episodes) {
-                this.seasonsContainer.innerHTML = '<p class="hint">No episodes found</p>';
+                this.seasonsContainer.innerHTML = '<p class="hint">No hay episodios</p>';
                 return;
             }
 
@@ -379,13 +381,13 @@ class SeriesPage {
                 <div class="season-group">
                     <div class="season-header">
                         <span class="season-expander">${Icons.chevronDown}</span>
-                        <span class="season-name">Season ${seasonNum} (${episodes.length} episodes)</span>
+                        <span class="season-name">Temporada ${seasonNum} (${episodes.length} episodios)</span>
                     </div>
                     <div class="episode-list">
                         ${episodes.map(ep => `
                             <div class="episode-item" data-episode-id="${ep.id}" data-source-id="${series.sourceId}" data-container="${ep.container_extension || 'mp4'}">
                                 <span class="episode-number">E${ep.episode_num}</span>
-                                <span class="episode-title">${ep.title || `Episode ${ep.episode_num}`}</span>
+                                <span class="episode-title">${ep.title || `Episodio ${ep.episode_num}`}</span>
                                 <span class="episode-duration">${ep.duration || ''}</span>
                             </div>
                         `).join('')}
@@ -408,7 +410,7 @@ class SeriesPage {
 
         } catch (err) {
             console.error('Error loading series info:', err);
-            this.seasonsContainer.innerHTML = '<p class="hint" style="color: var(--color-error);">Error loading episodes</p>';
+            this.seasonsContainer.innerHTML = '<p class="hint" style="color: var(--color-error);">Error al cargar episodios</p>';
         }
     }
 
@@ -426,7 +428,7 @@ class SeriesPage {
         // Get season and episode number from the episode element context
         const seasonGroup = episodeEl.closest('.season-group');
         const seasonHeader = seasonGroup?.querySelector('.season-name')?.textContent || '';
-        const seasonMatch = seasonHeader.match(/Season (\d+)/);
+        const seasonMatch = seasonHeader.match(/Temporada (\d+)/);
         const seasonNum = seasonMatch ? seasonMatch[1] : '1';
         const episodeNum = episodeEl.querySelector('.episode-number')?.textContent?.replace('E', '') || '1';
 
@@ -437,7 +439,7 @@ class SeriesPage {
             if (result && result.url) {
                 // Play in dedicated Watch page
                 if (this.app.pages.watch) {
-                    const episodeTitle = episodeEl.querySelector('.episode-title')?.textContent || `Episode ${episodeNum}`;
+                    const episodeTitle = episodeEl.querySelector('.episode-title')?.textContent || `Episodio ${episodeNum}`;
 
                     this.app.pages.watch.play({
                         type: 'series',
@@ -453,6 +455,7 @@ class SeriesPage {
                         seriesInfo: this.currentSeriesInfo,
                         currentSeason: seasonNum,
                         currentEpisode: episodeNum,
+                        durationSec: episodeEl.querySelector('.episode-duration')?.textContent || '',
                         containerExtension: container
                     }, result.url);
                 }

public/js/pages/Settings.js

@@ -130,7 +130,7 @@ class SettingsPage {
         if (forceTranscodeToggle) forceTranscodeToggle.checked = s.forceTranscode === true;
         if (forceVideoTranscodeToggle) forceVideoTranscodeToggle.checked = s.forceVideoTranscode === true;
         if (forceRemuxToggle) forceRemuxToggle.checked = s.forceRemux || false;
-        if (streamFormatSelect) streamFormatSelect.value = s.streamFormat || 'm3u8';
+        if (streamFormatSelect) streamFormatSelect.value = s.streamFormat || 'ts';
         if (userAgentSelect) userAgentSelect.value = s.userAgentPreset || 'chrome';
         if (userAgentCustomInput) userAgentCustomInput.value = s.userAgentCustom || '';
         if (customUaContainer) {
@@ -325,11 +325,11 @@ class SettingsPage {
 
                 try {
                     await API.users.create({ username, password, role });
-                    alert('User created successfully!');
+                    alert('Usuario creado correctamente.');
                     addUserForm.reset();
                     this.loadUsers();
                 } catch (err) {
-                    alert('Error creating user: ' + err.message);
+                    alert('Error al crear usuario: ' + err.message);
                 }
             });
         }
@@ -453,7 +453,7 @@ class SettingsPage {
             console.log('Modal should now be visible!');
         } catch (err) {
             console.error('Error populating modal:', err);
-            alert('Error opening edit modal: ' + err.message);
+            alert('Error al abrir edición: ' + err.message);
         }
     }
 
@@ -493,7 +493,7 @@ class SettingsPage {
                 closeModal();
                 this.loadUsers();
             } catch (err) {
-                alert('Error updating user: ' + err.message);
+                alert('Error al actualizar usuario: ' + err.message);
             }
         };
 
@@ -510,7 +510,7 @@ class SettingsPage {
             await API.users.delete(userId);
             this.loadUsers();
         } catch (err) {
-            alert('Error deleting user: ' + err.message);
+            alert('Error al eliminar usuario: ' + err.message);
         }
     }
 
@@ -523,6 +523,11 @@ class SettingsPage {
             this.app.sourceManager.loadContentSources();
         }
 
+        // Refrescar listas al volver a Fuentes (evita lista vacía tras crear/asignar)
+        if (tabName === 'sources') {
+            this.app.sourceManager.loadSources();
+        }
+
         // Load users when switching to users tab
         if (tabName === 'users') {
             this.loadUsers();
@@ -575,7 +580,7 @@ class SettingsPage {
             if (forceRemuxToggle) forceRemuxToggle.checked = s.forceRemux || false;
             if (autoTranscodeToggle) autoTranscodeToggle.checked = s.autoTranscode || false;
             if (epgRefreshSelect) epgRefreshSelect.value = s.epgRefreshInterval || '24';
-            if (streamFormatSelect) streamFormatSelect.value = s.streamFormat || 'm3u8';
+            if (streamFormatSelect) streamFormatSelect.value = s.streamFormat || 'ts';
 
             // User-Agent settings
             const userAgentSelect = document.getElementById('setting-user-agent');
@@ -618,26 +623,25 @@ class SettingsPage {
 
                 let text;
                 if (diffMins < 1) {
-                    text = 'Just now';
+                    text = 'Hace un momento';
                 } else if (diffMins < 60) {
-                    text = `${diffMins} minute${diffMins === 1 ? '' : 's'} ago`;
+                    text = `Hace ${diffMins} min`;
                 } else if (diffHours < 24) {
-                    text = `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`;
+                    text = `Hace ${diffHours} h`;
                 } else {
-                    // Use absolute time for older refreshes
+                    text = lastRefreshTime.toLocaleString('es-ES');
-                    text = lastRefreshTime.toLocaleString();
                 }
 
                 display.textContent = text;
-                display.title = lastRefreshTime.toLocaleString(); // Full timestamp on hover
+                display.title = lastRefreshTime.toLocaleString('es-ES');
             } else {
-                display.textContent = 'Never';
+                display.textContent = 'Nunca';
-                display.title = 'Sync has not run yet since server started';
+                display.title = 'La sincronización aún no se ha ejecutado';
             }
         } catch (err) {
             console.error('Error fetching sync status:', err);
-            display.textContent = 'Unknown';
+            display.textContent = '—';
-            display.title = 'Could not fetch sync status';
+            display.title = 'No se pudo obtener el estado de sincronización';
         }
     }
 

public/js/pages/WatchPage.js

@@ -79,6 +79,11 @@ class WatchPage {
         this.isFavorite = false;
         this.returnPage = null;
         this.captionsMenuOpen = false;
+        this.sourceStreamUrl = null;
+        this.knownDurationSec = 0;
+        this.playbackBaseOffsetSec = 0;
+        this.isSessionMode = false;
+        this._heartbeatTimer = null;
 
         // Overlay timer
         this.overlayTimeout = null;
@@ -238,6 +243,20 @@ class WatchPage {
                 this.scrollHint?.classList.remove('hidden');
             }
         });
+
+        // On page close/refresh: stop heartbeat so the 3-min idle timeout kicks in fast
+        window.addEventListener('beforeunload', () => {
+            this._stopHeartbeat();
+        });
+
+        // Also stop session when the page becomes hidden (tab switch, minimize)
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                this._stopHeartbeat();
+            } else if (this.currentSessionId) {
+                this._startHeartbeat(this.currentSessionId);
+            }
+        });
     }
 
     /**
@@ -253,6 +272,9 @@ class WatchPage {
         this.currentEpisode = content.currentEpisode || null;
         this.resumeTime = content.resumeTime || 0;
         this.containerExtension = content.containerExtension || 'mp4';
+        this.knownDurationSec = this.parseDurationSeconds(content.durationSec || content.duration || content.runtime || '');
+        this.playbackBaseOffsetSec = 0;
+        this.isSessionMode = false;
         this.returnPage = content.type === 'movie' ? 'movies' : 'series';
 
         // Stop any Live TV playback before starting movie/series
@@ -271,6 +293,14 @@ class WatchPage {
         // Update title bar
         this.titleEl.textContent = content.title || '';
         this.subtitleEl.textContent = content.subtitle || '';
+        if (this.timeTotal) {
+            this.timeTotal.textContent = this.knownDurationSec > 0 ? this.formatTime(this.knownDurationSec) : '0:00';
+        }
+
+        // If duration is missing, fetch it from vod_info in the background
+        if (this.knownDurationSec === 0 && content.sourceId && (content.vodId || content.id)) {
+            this._fetchVodDuration(content.sourceId, content.vodId || content.id);
+        }
 
         // Load video
         await this.loadVideo(streamUrl);
@@ -308,7 +338,7 @@ class WatchPage {
         const indicator = document.getElementById('now-playing-indicator');
         const textEl = document.getElementById('now-playing-text');
         if (indicator && textEl) {
-            textEl.textContent = title || 'Now Playing';
+            textEl.textContent = title || 'Reproduciendo';
             indicator.classList.remove('hidden');
         }
     }
@@ -341,11 +371,25 @@ class WatchPage {
             if (!res.ok) throw new Error('Failed to start session');
             const session = await res.json();
             this.currentSessionId = session.sessionId;
+            this.isSessionMode = true;
+            this._startHeartbeat(session.sessionId);
+
+            // Use server-probed duration if we don't already have one
+            if (session.durationSec > 0 && this.knownDurationSec === 0) {
+                this.knownDurationSec = session.durationSec;
+                console.log(`[WatchPage] Duration from FFprobe: ${session.durationSec}s`);
+                if (this.timeTotal) {
+                    this.timeTotal.textContent = this.formatTime(session.durationSec);
+                }
+            }
+
             return session.playlistUrl;
         } catch (err) {
             console.error('[WatchPage] Session start failed:', err);
-            // Fallback to direct transcode if session fails
+            this.isSessionMode = false;
-            return `/api/transcode?url=${encodeURIComponent(url)}`;
+            // No direct /api/transcode fallback: evita abrir conexiones duplicadas
+            // contra proveedores con límite estricto de sesiones (Dispatcharr/Jellyfin).
+            throw err;
         }
     }
 
@@ -353,15 +397,21 @@ class WatchPage {
      * Stop and cleanup current transcode session
      */
     async stopTranscodeSession() {
+        this._stopHeartbeat();
         if (this.currentSessionId) {
             console.log('[WatchPage] Stopping transcode session:', this.currentSessionId);
+            const sid = this.currentSessionId;
+            this.currentSessionId = null;
             try {
-                // Fire and forget cleanup
+                // sendBeacon works even when the page is being unloaded
-                fetch(`/api/transcode/${this.currentSessionId}`, { method: 'DELETE' });
+                if (navigator.sendBeacon) {
+                    navigator.sendBeacon(`/api/transcode/${sid}/stop`, '{}');
+                }
+                // Also DELETE (for normal navigation)
+                fetch(`/api/transcode/${sid}`, { method: 'DELETE' }).catch(() => {});
             } catch (err) {
                 console.error('Failed to stop session:', err);
             }
-            this.currentSessionId = null;
         }
     }
 
@@ -412,6 +462,7 @@ class WatchPage {
     async loadVideo(url) {
         // Store the URL for copy functionality
         this.currentUrl = url;
+        this.sourceStreamUrl = url;
 
         // Stop any existing playback
         this.stop();
@@ -419,6 +470,23 @@ class WatchPage {
         // Show loading spinner
         this.showLoading();
 
+        if (typeof window.kiratvPlayVodInNativePlayer === 'function' && window.kiratvDesktop?.isDesktopApp) {
+            this.hideLoading();
+            const absUrl = window.kiratvAbsolutePlaybackUrl(url);
+            try {
+                const result = await window.kiratvPlayVodInNativePlayer(absUrl);
+                if (!result?.ok) {
+                    console.error('[KiraTV Desktop] VOD mpv:', result?.error);
+                    this.updateTranscodeStatus('hidden');
+                } else {
+                    this.updateTranscodeStatus('direct', 'mpv nativo');
+                }
+            } catch (e) {
+                console.error('[KiraTV Desktop] VOD', e);
+            }
+            return;
+        }
+
         // Get settings for proxy/transcode
         let settings = {};
         try {
@@ -462,6 +530,7 @@ class WatchPage {
                         audioCodec: info.audio,
                         audioChannels: info.audioChannels
                     });
+                    this.playbackBaseOffsetSec = this.resumeTime || 0;
                     this.playHls(playlistUrl);
                     this.setVolumeFromStorage();
                     return;
@@ -481,8 +550,30 @@ class WatchPage {
                 // Compatible - fall through to normal playback
                 console.log('[WatchPage] Auto: Using normal playback (compatible)');
             } catch (err) {
-                console.warn('[WatchPage] Probe failed, using normal playback:', err.message);
+                console.warn('[WatchPage] Probe failed:', err.message);
-                // Continue with normal playback on probe failure
+                const vodLike =
+                    isDirectVideo ||
+                    url.includes('/movie/') ||
+                    url.includes('/series/');
+                if (vodLike) {
+                    console.warn(
+                        '[WatchPage] Auto: VOD-like URL after probe failure — HLS encode fallback (evita reproducir remux Jellyfin sin transcodificar)'
+                    );
+                    this.updateTranscodeStatus('transcoding', 'Transcoding (auto, probe fallback)');
+                    try {
+                        const playlistUrl = await this.startTranscodeSession(url, {
+                            videoMode: 'encode',
+                            seekOffset: this.resumeTime,
+                        });
+                        this.playbackBaseOffsetSec = this.resumeTime || 0;
+                        this.playHls(playlistUrl);
+                        this.setVolumeFromStorage();
+                        return;
+                    } catch (fallbackErr) {
+                        console.error('[WatchPage] Encode fallback failed:', fallbackErr);
+                    }
+                }
+                // Live u otro contenido: seguir reproducción directa habitual
             }
         }
 
@@ -496,6 +587,7 @@ class WatchPage {
                 videoMode: 'encode',
                 seekOffset: this.resumeTime
             });
+            this.playbackBaseOffsetSec = this.resumeTime || 0;
             this.playHls(playlistUrl);
             this.setVolumeFromStorage();
             return;
@@ -519,6 +611,7 @@ class WatchPage {
                 videoCodec,
                 seekOffset: this.resumeTime
             });
+            this.playbackBaseOffsetSec = this.resumeTime || 0;
             this.playHls(playlistUrl);
             this.setVolumeFromStorage();
             return;
@@ -530,6 +623,7 @@ class WatchPage {
             this.updateTranscodeStatus('remuxing', 'Remux (Force)');
             const finalUrl = `/api/remux?url=${encodeURIComponent(url)}`;
             this.video.src = finalUrl;
+            this.playbackBaseOffsetSec = 0;
             this.video.play().catch(e => {
                 if (e.name !== 'AbortError') console.error('[WatchPage] Autoplay error:', e);
             });
@@ -547,10 +641,12 @@ class WatchPage {
         // Use HLS.js for HLS streams
         if (looksLikeHls && Hls.isSupported()) {
             this.updateTranscodeStatus('direct', 'Direct HLS');
+            this.playbackBaseOffsetSec = 0;
             this.playHls(finalUrl);
         } else {
             // Direct playback for mp4/mkv/avi
             this.updateTranscodeStatus('direct', 'Direct Play');
+            this.playbackBaseOffsetSec = 0;
             this.video.src = finalUrl;
             this.video.play().catch(e => {
                 if (e.name !== 'AbortError') console.error('[WatchPage] Autoplay error:', e);
@@ -611,7 +707,7 @@ class WatchPage {
     }
 
     setVolumeFromStorage() {
-        const savedVolume = localStorage.getItem('nodecast-volume') || '80';
+        const savedVolume = localStorage.getItem('kiratv-volume') || '80';
         this.video.volume = parseInt(savedVolume) / 100;
         if (this.volumeSlider) this.volumeSlider.value = savedVolume;
     }
@@ -621,6 +717,13 @@ class WatchPage {
         this.stopHistoryTracking();
         this.saveProgress();
 
+        if (typeof window !== 'undefined' && window.kiratvDesktop?.stopExternalMpv) {
+            window.kiratvDesktop.stopExternalMpv().catch(() => {});
+        }
+        if (typeof window.kiratvDesktopClearEmbeddedChrome === 'function') {
+            window.kiratvDesktopClearEmbeddedChrome();
+        }
+
         // Cleanup transcode session if exists
         this.stopTranscodeSession();
         this.updateTranscodeStatus('hidden');
@@ -637,9 +740,13 @@ class WatchPage {
         }
         if (this.video) {
             this.video.pause();
+            // En modo escritorio el vídeo va a mpv: limpiar src dispararía un error
+            // inofensivo pero confuso (MEDIA_ELEMENT_ERROR: Empty src attribute).
+            if (!window.kiratvDesktop?.isDesktopApp) {
                 this.video.src = '';
                 this.video.load();
             }
+        }
 
         this.hideNowPlaying();
     }
@@ -655,15 +762,38 @@ class WatchPage {
     }
 
     skip(seconds) {
-        if (this.video) {
+        if (!this.video) return;
-            this.video.currentTime = Math.max(0, Math.min(this.video.currentTime + seconds, this.video.duration || 0));
+        const totalDuration = this.getTotalDuration();
+        const currentAbsolute = this.getAbsoluteCurrentTime();
+        if (totalDuration > 0) {
+            const target = Math.max(0, Math.min(currentAbsolute + seconds, totalDuration));
+            this.seekToAbsolute(target);
+        } else {
+            this.video.currentTime = Math.max(0, this.video.currentTime + seconds);
         }
     }
 
     seek(percent) {
-        if (this.video && this.video.duration) {
+        const totalDuration = this.getTotalDuration();
-            this.video.currentTime = (percent / 100) * this.video.duration;
+        if (!this.video || !totalDuration) return;
+        const target = (percent / 100) * totalDuration;
+        this.seekToAbsolute(target);
     }
+
+    seekToAbsolute(targetSec) {
+        if (!this.video) return;
+
+        if (this.isSessionMode && this.sourceStreamUrl) {
+            // Session-based HLS: the playlist only covers a window from the last seekOffset.
+            // Re-create the session from the new target position.
+            const offset = Math.max(0, Math.floor(targetSec));
+            this.playbackBaseOffsetSec = offset;
+            this.resumeTime = offset; // startTranscodeSession reads this for seekOffset
+            this.loadVideo(this.sourceStreamUrl);
+            return;
+        }
+
+        this.video.currentTime = Math.max(0, targetSec);
     }
 
     toggleMute() {
@@ -677,7 +807,7 @@ class WatchPage {
         if (this.video) {
             this.video.volume = value / 100;
             this.video.muted = false;
-            localStorage.setItem('nodecast-volume', value);
+            localStorage.setItem('kiratv-volume', value);
             this.updateVolumeUI();
         }
     }
@@ -768,18 +898,22 @@ class WatchPage {
     // === UI Updates ===
 
     updateProgress() {
-        if (!this.video || !this.video.duration) return;
+        if (!this.video) return;
 
-        const percent = (this.video.currentTime / this.video.duration) * 100;
+        const totalDuration = this.getTotalDuration();
-        this.progressSlider.value = percent;
+        if (!totalDuration) return;
-        this.timeCurrent.textContent = this.formatTime(this.video.currentTime);
+
+        const currentAbs = this.getAbsoluteCurrentTime();
+        const percent = (currentAbs / totalDuration) * 100;
+        this.progressSlider.value = Math.max(0, Math.min(100, percent));
+        this.timeCurrent.textContent = this.formatTime(currentAbs);
 
         // Show "Up Next" panel early for series (like streaming services do during credits)
         // Only show if auto-play next episode is enabled
         const autoPlayEnabled = this.app?.player?.settings?.autoPlayNextEpisode;
         if (autoPlayEnabled && this.contentType === 'series' && this.seriesInfo && !this.nextEpisodeShowing && !this.nextEpisodeDismissed) {
-            const duration = this.video.duration;
+            const duration = totalDuration;
-            const currentTime = this.video.currentTime;
+            const currentTime = currentAbs;
 
             // Only proceed if we have reliable duration data
             if (isFinite(duration) && duration >= 180 && currentTime >= 120) {
@@ -807,8 +941,10 @@ class WatchPage {
             this.updateQualityBadge();
         }
 
-        // Handle resumption
+        // Handle resumption (only for direct video, NOT session mode).
-        if (this.resumeTime > 0 && this.video) {
+        // In session mode FFmpeg already starts from the seekOffset, so
+        // video.currentTime=0 already represents the correct absolute position.
+        if (!this.isSessionMode && this.resumeTime > 0 && this.video) {
             const duration = this.video.duration;
             // Only resume if not near the end (95%)
             if (!duration || this.resumeTime < duration * 0.95) {
@@ -816,6 +952,14 @@ class WatchPage {
                 this.video.currentTime = this.resumeTime;
             }
             this.resumeTime = 0; // Reset after use
+        } else if (this.isSessionMode) {
+            this.resumeTime = 0; // Clear so it's not applied again
+        }
+
+        // Update total duration label using known VOD runtime when browser reports Infinity/NaN
+        const totalDuration = this.getTotalDuration();
+        if (this.timeTotal && totalDuration > 0) {
+            this.timeTotal.textContent = this.formatTime(totalDuration);
         }
     }
 
@@ -852,12 +996,12 @@ class WatchPage {
     }
 
     onError(e) {
-        // Only log actual fatal errors, not benign stream recovery events
         const error = this.video?.error;
-        if (error && error.code) {
+        if (!error || !error.code) return;
+        // Ignorar error por src vacío (ocurre al limpiar el elemento tras parar)
+        if (error.code === 4 && (!this.video.src || this.video.src === window.location.href)) return;
         console.error('[WatchPage] Video error:', error.code, error.message);
     }
-    }
 
     updateVolumeUI() {
         const isMuted = this.video?.muted || this.video?.volume === 0;
@@ -876,6 +1020,90 @@ class WatchPage {
         return `${m}:${s.toString().padStart(2, '0')}`;
     }
 
+    parseDurationSeconds(value) {
+        if (!value) return 0;
+        if (typeof value === 'number' && Number.isFinite(value)) return Math.max(0, Math.floor(value));
+        const str = String(value).trim();
+        if (!str) return 0;
+
+        // HH:MM:SS or MM:SS (allow any number of digits in the first segment)
+        if (/^\d+:\d{1,2}(:\d{1,2})?$/.test(str)) {
+            const parts = str.split(':').map(n => parseInt(n, 10));
+            if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];
+            if (parts.length === 2) return parts[0] * 60 + parts[1];
+        }
+
+        // Plain seconds string
+        const asNum = parseInt(str, 10);
+        return Number.isFinite(asNum) ? Math.max(0, asNum) : 0;
+    }
+
+    _startHeartbeat(sessionId) {
+        this._stopHeartbeat();
+        // Ping every 90 seconds — well within the 3-minute idle timeout on the worker
+        this._heartbeatTimer = setInterval(async () => {
+            if (!sessionId) return;
+            try {
+                await fetch(`/api/transcode/${sessionId}/heartbeat`, { method: 'POST' });
+            } catch (_) { /* ignore */ }
+        }, 90_000);
+    }
+
+    _stopHeartbeat() {
+        if (this._heartbeatTimer) {
+            clearInterval(this._heartbeatTimer);
+            this._heartbeatTimer = null;
+        }
+    }
+
+    /**
+     * Fetch VOD/episode duration from the Xtream vod_info endpoint in the background.
+     * Updates knownDurationSec and the UI time label once the response arrives.
+     */
+    async _fetchVodDuration(sourceId, vodId) {
+        try {
+            const res = await fetch(`/api/proxy/xtream/${sourceId}/vod_info?vod_id=${vodId}`);
+            if (!res.ok) return;
+            const data = await res.json();
+            const raw = data?.info?.duration_secs
+                || data?.info?.duration
+                || data?.movie_data?.duration_secs
+                || data?.info?.runtime;
+            const secs = this.parseDurationSeconds(raw);
+            if (secs > 0 && secs > this.knownDurationSec) {
+                console.log(`[WatchPage] VOD duration from vod_info: ${secs}s`);
+                this.knownDurationSec = secs;
+                if (this.timeTotal) {
+                    this.timeTotal.textContent = this.formatTime(secs);
+                }
+            }
+        } catch (e) {
+            // Non-critical — silently ignore
+        }
+    }
+
+    getTotalDuration() {
+        // In session mode (HLS generated by our worker), video.duration only
+        // reflects the segments generated so far, NOT the full movie length.
+        // Always prefer the known VOD duration in this case.
+        if (this.isSessionMode && this.knownDurationSec > 0) {
+            return this.knownDurationSec;
+        }
+
+        const mediaDuration = this.video?.duration;
+        if (Number.isFinite(mediaDuration) && mediaDuration > 0) {
+            const total = mediaDuration + (this.playbackBaseOffsetSec || 0);
+            // Even outside session mode, pick whichever is larger
+            return (this.knownDurationSec > total) ? this.knownDurationSec : total;
+        }
+        return this.knownDurationSec || 0;
+    }
+
+    getAbsoluteCurrentTime() {
+        if (!this.video) return 0;
+        return (this.playbackBaseOffsetSec || 0) + (this.video.currentTime || 0);
+    }
+
     // === Loading Spinner ===
 
     showLoading() {
@@ -1417,7 +1645,7 @@ class WatchPage {
         try {
             const data = {
                 title: this.content.title || 'Unknown Title',
-                subtitle: this.content.subtitle || (this.content.type === 'movie' ? 'Movie' : 'Series'),
+                subtitle: this.content.subtitle || (this.content.type === 'movie' ? 'Película' : 'Serie'),
                 poster: this.content.poster,
                 sourceId: this.content.sourceId,
                 containerExtension: this.containerExtension,

public/js/pages/pages/MoviesPage.js

@@ -0,0 +1,401 @@
+/**
+ * Movies Page Controller
+ * Handles VOD movie browsing and playback
+ */
+
+class MoviesPage {
+    constructor(app) {
+        this.app = app;
+        this.container = document.getElementById('movies-grid');
+        this.sourceSelect = document.getElementById('movies-source-select');
+        this.categorySelect = document.getElementById('movies-category-select');
+        this.searchInput = document.getElementById('movies-search');
+
+        this.movies = [];
+        this.categories = [];
+        this.sources = [];
+        this.currentBatch = 0;
+        this.batchSize = 24;
+        this.filteredMovies = [];
+        this.isLoading = false;
+        this.observer = null;
+        this.favoriteIds = new Set(); // Track favorite movie IDs
+        this.showFavoritesOnly = false;
+
+        this.init();
+    }
+
+    init() {
+        // Source change handler
+        this.sourceSelect?.addEventListener('change', async () => {
+            await this.loadCategories();
+            await this.loadMovies();
+        });
+
+        // Category change handler
+        this.categorySelect?.addEventListener('change', () => {
+            this.loadMovies();
+        });
+
+        // Search with debounce
+        let searchTimeout;
+        this.searchInput?.addEventListener('input', () => {
+            clearTimeout(searchTimeout);
+            searchTimeout = setTimeout(() => this.filterAndRender(), 300);
+        });
+
+        // Set up IntersectionObserver for lazy loading
+        this.observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && !this.isLoading) {
+                this.renderNextBatch();
+            }
+        }, { rootMargin: '200px' });
+
+        // Favorites filter toggle
+        const favBtn = document.getElementById('movies-favorites-btn');
+        favBtn?.addEventListener('click', () => {
+            this.showFavoritesOnly = !this.showFavoritesOnly;
+            favBtn.classList.toggle('active', this.showFavoritesOnly);
+            this.filterAndRender();
+        });
+    }
+
+    async show() {
+        // Load sources if not loaded
+        if (this.sources.length === 0) {
+            await this.loadSources();
+        }
+
+        // Load favorites
+        await this.loadFavorites();
+
+        // Load movies if empty
+        if (this.movies.length === 0) {
+            await this.loadCategories();
+            await this.loadMovies();
+        }
+    }
+
+    hide() {
+        // Page is hidden
+    }
+
+    async loadFavorites() {
+        try {
+            const favs = await API.favorites.getAll(null, 'movie');
+            this.favoriteIds = new Set(favs.map(f => `${f.source_id}:${f.item_id}`));
+        } catch (err) {
+            console.error('Error loading favorites:', err);
+        }
+    }
+
+
+    async loadSources() {
+        try {
+            const allSources = await API.sources.getAll();
+            this.sources = allSources.filter(s => s.type === 'xtream' && s.enabled);
+
+            this.sourceSelect.innerHTML = '<option value="">All Sources</option>';
+            this.sources.forEach(s => {
+                const option = document.createElement('option');
+                option.value = s.id;
+                option.textContent = s.name;
+                this.sourceSelect.appendChild(option);
+            });
+        } catch (err) {
+            console.error('Error loading sources:', err);
+        }
+    }
+
+    async loadCategories() {
+        try {
+            this.categories = [];
+            this.hiddenCategoryIds = new Set(); // Track hidden categories
+            this.categorySelect.innerHTML = '<option value="">All Categories</option>';
+
+            const sourceId = this.sourceSelect.value;
+            const sourcesToLoad = sourceId
+                ? this.sources.filter(s => s.id === parseInt(sourceId))
+                : this.sources;
+
+            // Fetch hidden items for each source
+            for (const source of sourcesToLoad) {
+                try {
+                    const hiddenItems = await API.channels.getHidden(source.id);
+                    hiddenItems.forEach(h => {
+                        if (h.item_type === 'vod_category') {
+                            this.hiddenCategoryIds.add(`${source.id}:${h.item_id}`);
+                        }
+                    });
+                } catch (err) {
+                    console.warn(`Failed to load hidden items from source ${source.id}`);
+                }
+            }
+
+            for (const source of sourcesToLoad) {
+                try {
+                    const cats = await API.proxy.xtream.vodCategories(source.id);
+                    if (cats && Array.isArray(cats)) {
+                        cats.forEach(c => {
+                            // Skip hidden categories
+                            if (!this.hiddenCategoryIds.has(`${source.id}:${c.category_id}`)) {
+                                this.categories.push({ ...c, sourceId: source.id });
+                            }
+                        });
+                    }
+                } catch (err) {
+                    console.warn(`Failed to load categories from source ${source.id}:`, err.message);
+                }
+            }
+
+            // Populate dropdown
+            this.categories.forEach(c => {
+                const option = document.createElement('option');
+                option.value = `${c.sourceId}:${c.category_id}`;
+                option.textContent = c.category_name;
+                this.categorySelect.appendChild(option);
+            });
+        } catch (err) {
+            console.error('Error loading categories:', err);
+        }
+    }
+
+    async loadMovies() {
+        this.isLoading = true;
+        this.container.innerHTML = '<div class="loading"><div class="loading-spinner"></div></div>';
+
+        try {
+            this.movies = [];
+
+            const sourceId = this.sourceSelect.value;
+            const categoryValue = this.categorySelect.value;
+
+            const sourcesToLoad = sourceId
+                ? this.sources.filter(s => s.id === parseInt(sourceId))
+                : this.sources;
+
+            for (const source of sourcesToLoad) {
+                try {
+                    // Parse category if selected
+                    let catId = null;
+                    if (categoryValue) {
+                        const [catSourceId, categoryId] = categoryValue.split(':');
+                        if (parseInt(catSourceId) === source.id) {
+                            catId = categoryId;
+                        } else if (sourceId) {
+                            continue; // Skip this source if category is from different source
+                        }
+                    }
+
+                    const movies = await API.proxy.xtream.vodStreams(source.id, catId);
+                    console.log(`[Movies] Source ${source.id}, Category ${catId || 'ALL'}: Got ${movies?.length || 0} movies`);
+                    if (movies && Array.isArray(movies)) {
+                        movies.forEach(m => {
+                            // Skip movies from hidden categories
+                            if (this.hiddenCategoryIds && this.hiddenCategoryIds.has(`${source.id}:${m.category_id}`)) {
+                                return;
+                            }
+                            this.movies.push({
+                                ...m,
+                                sourceId: source.id,
+                                id: `${source.id}:${m.stream_id}`
+                            });
+                        });
+                    }
+                } catch (err) {
+                    console.warn(`Failed to load movies from source ${source.id}:`, err.message);
+                }
+            }
+
+            console.log(`[Movies] Total loaded: ${this.movies.length} movies`);
+            this.filterAndRender();
+        } catch (err) {
+            console.error('Error loading movies:', err);
+            this.container.innerHTML = '<div class="empty-state"><p>Error loading movies</p></div>';
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    filterAndRender() {
+        const searchTerm = this.searchInput?.value?.toLowerCase() || '';
+
+        this.filteredMovies = this.movies.filter(m => {
+            // Filter by favorites if enabled
+            if (this.showFavoritesOnly) {
+                const favKey = `${m.sourceId}:${m.stream_id}`;
+                if (!this.favoriteIds.has(favKey)) return false;
+            }
+            if (searchTerm && !m.name?.toLowerCase().includes(searchTerm)) {
+                return false;
+            }
+            return true;
+        });
+
+        console.log(`[Movies] Displaying ${this.filteredMovies.length} of ${this.movies.length} movies`);
+
+        this.currentBatch = 0;
+        this.container.innerHTML = '';
+
+        if (this.filteredMovies.length === 0) {
+            this.container.innerHTML = '<div class="empty-state"><p>No movies found</p></div>';
+            return;
+        }
+
+        // Create loader element
+        const loader = document.createElement('div');
+        loader.className = 'movies-loader';
+        loader.innerHTML = '<div class="loading-spinner"></div>';
+        this.container.appendChild(loader);
+
+        // Render initial batches (more to fill viewport)
+        for (let i = 0; i < 5; i++) {
+            this.renderNextBatch();
+        }
+
+        // Start observing loader
+        this.observer.observe(loader);
+    }
+
+    renderNextBatch() {
+        const start = this.currentBatch * this.batchSize;
+        const end = start + this.batchSize;
+        const batch = this.filteredMovies.slice(start, end);
+
+        console.log(`[Movies] Rendering batch ${this.currentBatch}: ${batch.length} cards (${start}-${end})`);
+
+        if (batch.length === 0) {
+            const loader = this.container.querySelector('.movies-loader');
+            if (loader) loader.style.display = 'none';
+            return;
+        }
+
+        const fragment = document.createDocumentFragment();
+
+        batch.forEach(movie => {
+            const card = document.createElement('div');
+            card.className = 'movie-card';
+            card.dataset.movieId = movie.stream_id;
+            card.dataset.sourceId = movie.sourceId;
+
+            const poster = movie.stream_icon || movie.cover || '/img/placeholder.png';
+            const year = movie.year || movie.releaseDate?.substring(0, 4) || '';
+            const rating = movie.rating ? `${Icons.star} ${movie.rating}` : '';
+
+            const isFav = this.favoriteIds.has(`${movie.sourceId}:${movie.stream_id}`);
+
+            card.innerHTML = `
+                <div class="movie-poster">
+                    <img src="${poster}" alt="${movie.name}" 
+                         onerror="this.onerror=null;this.src='/img/placeholder.png'" loading="lazy">
+                    <div class="movie-play-overlay">
+                        <span class="play-icon">${Icons.play}</span>
+                    </div>
+                    <button class="favorite-btn ${isFav ? 'active' : ''}" title="${isFav ? 'Remove from Favorites' : 'Add to Favorites'}">
+                        <span class="fav-icon">${isFav ? Icons.favorite : Icons.favoriteOutline}</span>
+                    </button>
+                </div>
+                <div class="movie-info">
+                    <div class="movie-title">${movie.name}</div>
+                    <div class="movie-meta">
+                        ${year ? `<span>${year}</span>` : ''}
+                        ${rating ? `<span>${rating}</span>` : ''}
+                    </div>
+                </div>
+            `;
+
+            // Card click plays movie, but not if clicking favorite button
+            card.addEventListener('click', (e) => {
+                if (e.target.closest('.favorite-btn')) {
+                    const btn = e.target.closest('.favorite-btn');
+                    this.toggleFavorite(movie, btn);
+                    e.stopPropagation();
+                } else {
+                    this.playMovie(movie);
+                }
+            });
+            fragment.appendChild(card);
+        });
+
+        // Insert before loader
+        const loader = this.container.querySelector('.movies-loader');
+        if (loader) {
+            this.container.insertBefore(fragment, loader);
+        } else {
+            this.container.appendChild(fragment);
+        }
+
+        this.currentBatch++;
+
+        // Hide loader if done
+        if (end >= this.filteredMovies.length && loader) {
+            loader.style.display = 'none';
+        }
+    }
+
+    async playMovie(movie) {
+        try {
+            // Get stream URL for movie using the actual container extension from API
+            // Xtream API returns container_extension (e.g., 'mp4', 'mkv', 'avi')
+            const container = movie.container_extension || 'mp4';
+            const result = await API.proxy.xtream.getStreamUrl(movie.sourceId, movie.stream_id, 'movie', container);
+
+            if (result && result.url) {
+                // Play in dedicated Watch page
+                if (this.app.pages.watch) {
+                    this.app.pages.watch.play({
+                        type: 'movie',
+                        id: movie.stream_id,
+                        title: movie.name,
+                        poster: movie.stream_icon || movie.cover,
+                        description: movie.plot || '',
+                        year: movie.year || movie.releaseDate?.substring(0, 4),
+                        rating: movie.rating,
+                        durationSec: movie.duration_secs || movie.durationSeconds || movie.duration || movie.run_time,
+                        sourceId: movie.sourceId,
+                        categoryId: movie.category_id,
+                        containerExtension: container
+                    }, result.url);
+                }
+            }
+        } catch (err) {
+            console.error('Error playing movie:', err);
+        }
+    }
+    async toggleFavorite(movie, btn) {
+        const favKey = `${movie.sourceId}:${movie.stream_id}`;
+        const isFav = this.favoriteIds.has(favKey);
+        const iconSpan = btn.querySelector('.fav-icon');
+
+        try {
+            // Optimistic update
+            if (isFav) {
+                this.favoriteIds.delete(favKey);
+                btn.classList.remove('active');
+                btn.title = 'Add to Favorites';
+                if (iconSpan) iconSpan.innerHTML = Icons.favoriteOutline;
+                await API.favorites.remove(movie.sourceId, movie.stream_id, 'movie');
+            } else {
+                this.favoriteIds.add(favKey);
+                btn.classList.add('active');
+                btn.title = 'Remove from Favorites';
+                if (iconSpan) iconSpan.innerHTML = Icons.favorite;
+                await API.favorites.add(movie.sourceId, movie.stream_id, 'movie');
+            }
+        } catch (err) {
+            console.error('Error toggling favorite:', err);
+            // Revert on error
+            if (isFav) {
+                this.favoriteIds.add(favKey);
+                btn.classList.add('active');
+                if (iconSpan) iconSpan.innerHTML = Icons.favorite;
+            } else {
+                this.favoriteIds.delete(favKey);
+                btn.classList.remove('active');
+                if (iconSpan) iconSpan.innerHTML = Icons.favoriteOutline;
+            }
+        }
+    }
+}
+
+window.MoviesPage = MoviesPage;

public/js/pages/pages/SeriesPage.js

@@ -0,0 +1,502 @@
+/**
+ * Series Page Controller
+ * Handles TV series browsing and playback
+ */
+
+class SeriesPage {
+    constructor(app) {
+        this.app = app;
+        this.container = document.getElementById('series-grid');
+        this.sourceSelect = document.getElementById('series-source-select');
+        this.categorySelect = document.getElementById('series-category-select');
+        this.searchInput = document.getElementById('series-search');
+        this.detailsPanel = document.getElementById('series-details');
+        this.seasonsContainer = document.getElementById('series-seasons');
+
+        this.seriesList = [];
+        this.categories = [];
+        this.sources = [];
+        this.currentBatch = 0;
+        this.batchSize = 24;
+        this.filteredSeries = [];
+        this.isLoading = false;
+        this.observer = null;
+        this.hiddenCategoryIds = new Set();
+        this.currentSeries = null;
+        this.favoriteIds = new Set(); // Track favorite series IDs
+        this.showFavoritesOnly = false;
+
+        this.init();
+    }
+
+    init() {
+        // Source change handler
+        this.sourceSelect?.addEventListener('change', async () => {
+            await this.loadCategories();
+            await this.loadSeries();
+        });
+
+        // Category change handler
+        this.categorySelect?.addEventListener('change', () => {
+            this.loadSeries();
+        });
+
+        // Search with debounce
+        let searchTimeout;
+        this.searchInput?.addEventListener('input', () => {
+            clearTimeout(searchTimeout);
+            searchTimeout = setTimeout(() => this.filterAndRender(), 300);
+        });
+
+        // Back button
+        document.querySelector('.series-back-btn')?.addEventListener('click', () => {
+            this.hideDetails();
+        });
+
+        // Set up IntersectionObserver for lazy loading
+        this.observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && !this.isLoading) {
+                this.renderNextBatch();
+            }
+        }, { rootMargin: '200px' });
+
+        // Favorites filter toggle
+        const favBtn = document.getElementById('series-favorites-btn');
+        favBtn?.addEventListener('click', () => {
+            this.showFavoritesOnly = !this.showFavoritesOnly;
+            favBtn.classList.toggle('active', this.showFavoritesOnly);
+            this.filterAndRender();
+        });
+    }
+
+    async show() {
+        // Hide details panel when showing page
+        this.hideDetails();
+
+        // Load sources if not loaded
+        // Load sources if not loaded
+        if (this.sources.length === 0) {
+            await this.loadSources();
+        }
+
+        // Load favorites
+        await this.loadFavorites();
+
+        // Load series if empty
+        if (this.seriesList.length === 0) {
+            await this.loadCategories();
+            await this.loadSeries();
+        }
+    }
+
+    hide() {
+        // Page is hidden
+    }
+
+    async loadFavorites() {
+        try {
+            const favs = await API.favorites.getAll(null, 'series');
+            this.favoriteIds = new Set(favs.map(f => `${f.source_id}:${f.item_id}`));
+        } catch (err) {
+            console.error('Error loading favorites:', err);
+        }
+    }
+
+    async loadSources() {
+        try {
+            const allSources = await API.sources.getAll();
+            this.sources = allSources.filter(s => s.type === 'xtream' && s.enabled);
+
+            this.sourceSelect.innerHTML = '<option value="">All Sources</option>';
+            this.sources.forEach(s => {
+                const option = document.createElement('option');
+                option.value = s.id;
+                option.textContent = s.name;
+                this.sourceSelect.appendChild(option);
+            });
+        } catch (err) {
+            console.error('Error loading sources:', err);
+        }
+    }
+
+    async loadCategories() {
+        try {
+            this.categories = [];
+            this.hiddenCategoryIds = new Set();
+            this.categorySelect.innerHTML = '<option value="">All Categories</option>';
+
+            const sourceId = this.sourceSelect.value;
+            const sourcesToLoad = sourceId
+                ? this.sources.filter(s => s.id === parseInt(sourceId))
+                : this.sources;
+
+            // Fetch hidden items for each source
+            for (const source of sourcesToLoad) {
+                try {
+                    const hiddenItems = await API.channels.getHidden(source.id);
+                    hiddenItems.forEach(h => {
+                        if (h.item_type === 'series_category') {
+                            this.hiddenCategoryIds.add(`${source.id}:${h.item_id}`);
+                        }
+                    });
+                } catch (err) {
+                    console.warn(`Failed to load hidden items from source ${source.id}`);
+                }
+            }
+
+            for (const source of sourcesToLoad) {
+                try {
+                    const cats = await API.proxy.xtream.seriesCategories(source.id);
+                    if (cats && Array.isArray(cats)) {
+                        cats.forEach(c => {
+                            // Skip hidden categories
+                            if (!this.hiddenCategoryIds.has(`${source.id}:${c.category_id}`)) {
+                                this.categories.push({ ...c, sourceId: source.id });
+                            }
+                        });
+                    }
+                } catch (err) {
+                    console.warn(`Failed to load series categories from source ${source.id}:`, err.message);
+                }
+            }
+
+            // Populate dropdown
+            this.categories.forEach(c => {
+                const option = document.createElement('option');
+                option.value = `${c.sourceId}:${c.category_id}`;
+                option.textContent = c.category_name;
+                this.categorySelect.appendChild(option);
+            });
+        } catch (err) {
+            console.error('Error loading categories:', err);
+        }
+    }
+
+    async loadSeries() {
+        this.isLoading = true;
+        this.container.innerHTML = '<div class="loading"><div class="loading-spinner"></div></div>';
+
+        try {
+            this.seriesList = [];
+
+            const sourceId = this.sourceSelect.value;
+            const categoryValue = this.categorySelect.value;
+
+            const sourcesToLoad = sourceId
+                ? this.sources.filter(s => s.id === parseInt(sourceId))
+                : this.sources;
+
+            for (const source of sourcesToLoad) {
+                try {
+                    // Parse category if selected
+                    let catId = null;
+                    if (categoryValue) {
+                        const [catSourceId, categoryId] = categoryValue.split(':');
+                        if (parseInt(catSourceId) === source.id) {
+                            catId = categoryId;
+                        } else if (sourceId) {
+                            continue;
+                        }
+                    }
+
+                    const series = await API.proxy.xtream.series(source.id, catId);
+                    console.log(`[Series] Source ${source.id}, Category ${catId || 'ALL'}: Got ${series?.length || 0} series`);
+                    if (series && Array.isArray(series)) {
+                        series.forEach(s => {
+                            // Skip series from hidden categories
+                            if (this.hiddenCategoryIds.has(`${source.id}:${s.category_id}`)) {
+                                return;
+                            }
+                            this.seriesList.push({
+                                ...s,
+                                sourceId: source.id,
+                                id: `${source.id}:${s.series_id}`
+                            });
+                        });
+                    }
+                } catch (err) {
+                    console.warn(`Failed to load series from source ${source.id}:`, err.message);
+                }
+            }
+
+            console.log(`[Series] Total loaded: ${this.seriesList.length} series`);
+            this.filterAndRender();
+        } catch (err) {
+            console.error('Error loading series:', err);
+            this.container.innerHTML = '<div class="empty-state"><p>Error loading series</p></div>';
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    filterAndRender() {
+        const searchTerm = this.searchInput?.value?.toLowerCase() || '';
+
+        this.filteredSeries = this.seriesList.filter(s => {
+            // Filter by favorites if enabled
+            if (this.showFavoritesOnly) {
+                const favKey = `${s.sourceId}:${s.series_id}`;
+                if (!this.favoriteIds.has(favKey)) return false;
+            }
+            if (searchTerm && !s.name?.toLowerCase().includes(searchTerm)) {
+                return false;
+            }
+            return true;
+        });
+
+        console.log(`[Series] Displaying ${this.filteredSeries.length} of ${this.seriesList.length} series`);
+
+        this.currentBatch = 0;
+        this.container.innerHTML = '';
+
+        if (this.filteredSeries.length === 0) {
+            this.container.innerHTML = '<div class="empty-state"><p>No series found</p></div>';
+            return;
+        }
+
+        // Create loader element
+        const loader = document.createElement('div');
+        loader.className = 'series-loader';
+        loader.innerHTML = '<div class="loading-spinner"></div>';
+        this.container.appendChild(loader);
+
+        // Render initial batches
+        for (let i = 0; i < 5; i++) {
+            this.renderNextBatch();
+        }
+
+        // Start observing loader
+        this.observer.observe(loader);
+    }
+
+    renderNextBatch() {
+        const start = this.currentBatch * this.batchSize;
+        const end = start + this.batchSize;
+        const batch = this.filteredSeries.slice(start, end);
+
+        if (batch.length === 0) {
+            const loader = this.container.querySelector('.series-loader');
+            if (loader) loader.style.display = 'none';
+            return;
+        }
+
+        const fragment = document.createDocumentFragment();
+
+        batch.forEach(series => {
+            const card = document.createElement('div');
+            card.className = 'series-card';
+            card.dataset.seriesId = series.series_id;
+            card.dataset.sourceId = series.sourceId;
+
+            const poster = series.cover || '/img/placeholder.png';
+            const year = series.year || series.releaseDate?.substring(0, 4) || '';
+            const rating = series.rating ? `${Icons.star} ${series.rating}` : '';
+
+            const isFav = this.favoriteIds.has(`${series.sourceId}:${series.series_id}`);
+
+            card.innerHTML = `
+                <div class="series-poster">
+                    <img src="${poster}" alt="${series.name}" 
+                         onerror="this.onerror=null;this.src='/img/placeholder.png'" loading="lazy">
+                    <div class="series-play-overlay">
+                        <span class="play-icon">${Icons.play}</span>
+                    </div>
+                    <button class="favorite-btn ${isFav ? 'active' : ''}" title="${isFav ? 'Remove from Favorites' : 'Add to Favorites'}">
+                        <span class="fav-icon">${isFav ? Icons.favorite : Icons.favoriteOutline}</span>
+                    </button>
+                </div>
+                <div class="series-card-info">
+                    <div class="series-title">${series.name}</div>
+                    <div class="series-meta">
+                        ${year ? `<span>${year}</span>` : ''}
+                        ${rating ? `<span>${rating}</span>` : ''}
+                    </div>
+                </div>
+            `;
+
+            card.addEventListener('click', (e) => {
+                if (e.target.closest('.favorite-btn')) {
+                    const btn = e.target.closest('.favorite-btn');
+                    this.toggleFavorite(series, btn);
+                    e.stopPropagation();
+                } else {
+                    this.showSeriesDetails(series);
+                }
+            });
+            fragment.appendChild(card);
+        });
+
+        // Insert before loader
+        const loader = this.container.querySelector('.series-loader');
+        if (loader) {
+            this.container.insertBefore(fragment, loader);
+        } else {
+            this.container.appendChild(fragment);
+        }
+
+        this.currentBatch++;
+
+        // Hide loader if done
+        if (end >= this.filteredSeries.length && loader) {
+            loader.style.display = 'none';
+        }
+    }
+
+    async showSeriesDetails(series) {
+        this.currentSeries = series;
+
+        // Show details panel
+        this.container.classList.add('hidden');
+        this.detailsPanel.classList.remove('hidden');
+
+        // Set header info
+        document.getElementById('series-poster').src = series.cover || '/img/placeholder.png';
+        document.getElementById('series-title').textContent = series.name;
+        document.getElementById('series-plot').textContent = series.plot || '';
+
+        // Show loading
+        this.seasonsContainer.innerHTML = '<div class="loading"><div class="loading-spinner"></div></div>';
+
+        try {
+            // Fetch series info (seasons/episodes)
+            const info = await API.proxy.xtream.seriesInfo(series.sourceId, series.series_id);
+
+            if (!info || !info.episodes) {
+                this.seasonsContainer.innerHTML = '<p class="hint">No episodes found</p>';
+                return;
+            }
+
+            // Store series info for WatchPage
+            this.currentSeriesInfo = info;
+
+            // Render seasons and episodes
+            let html = '';
+            const seasons = Object.keys(info.episodes).sort((a, b) => parseInt(a) - parseInt(b));
+
+            seasons.forEach(seasonNum => {
+                const episodes = info.episodes[seasonNum];
+                html += `
+                <div class="season-group">
+                    <div class="season-header">
+                        <span class="season-expander">${Icons.chevronDown}</span>
+                        <span class="season-name">Season ${seasonNum} (${episodes.length} episodes)</span>
+                    </div>
+                    <div class="episode-list">
+                        ${episodes.map(ep => `
+                            <div class="episode-item" data-episode-id="${ep.id}" data-source-id="${series.sourceId}" data-container="${ep.container_extension || 'mp4'}">
+                                <span class="episode-number">E${ep.episode_num}</span>
+                                <span class="episode-title">${ep.title || `Episode ${ep.episode_num}`}</span>
+                                <span class="episode-duration">${ep.duration || ''}</span>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>`;
+            });
+
+            this.seasonsContainer.innerHTML = html;
+
+            // Add click handlers
+            this.seasonsContainer.querySelectorAll('.season-header').forEach(header => {
+                header.addEventListener('click', () => {
+                    header.closest('.season-group').classList.toggle('collapsed');
+                });
+            });
+
+            this.seasonsContainer.querySelectorAll('.episode-item').forEach(ep => {
+                ep.addEventListener('click', () => this.playEpisode(ep));
+            });
+
+        } catch (err) {
+            console.error('Error loading series info:', err);
+            this.seasonsContainer.innerHTML = '<p class="hint" style="color: var(--color-error);">Error loading episodes</p>';
+        }
+    }
+
+    hideDetails() {
+        this.detailsPanel.classList.add('hidden');
+        this.container.classList.remove('hidden');
+        this.currentSeries = null;
+    }
+
+    async playEpisode(episodeEl) {
+        const episodeId = episodeEl.dataset.episodeId;
+        const sourceId = parseInt(episodeEl.dataset.sourceId);
+        const container = episodeEl.dataset.container || 'mp4';
+
+        // Get season and episode number from the episode element context
+        const seasonGroup = episodeEl.closest('.season-group');
+        const seasonHeader = seasonGroup?.querySelector('.season-name')?.textContent || '';
+        const seasonMatch = seasonHeader.match(/Season (\d+)/);
+        const seasonNum = seasonMatch ? seasonMatch[1] : '1';
+        const episodeNum = episodeEl.querySelector('.episode-number')?.textContent?.replace('E', '') || '1';
+
+        try {
+            // Get stream URL for episode (use 'series' type)
+            const result = await API.proxy.xtream.getStreamUrl(sourceId, episodeId, 'series', container);
+
+            if (result && result.url) {
+                // Play in dedicated Watch page
+                if (this.app.pages.watch) {
+                    const episodeTitle = episodeEl.querySelector('.episode-title')?.textContent || `Episode ${episodeNum}`;
+
+                    this.app.pages.watch.play({
+                        type: 'series',
+                        id: episodeId,
+                        title: this.currentSeries?.name || 'Series',
+                        subtitle: `S${seasonNum} E${episodeNum} - ${episodeTitle}`,
+                        poster: this.currentSeries?.cover,
+                        description: this.currentSeries?.plot || '',
+                        year: this.currentSeries?.year,
+                        rating: this.currentSeries?.rating,
+                        sourceId: sourceId,
+                        seriesId: this.currentSeries?.series_id,
+                        seriesInfo: this.currentSeriesInfo,
+                        currentSeason: seasonNum,
+                        currentEpisode: episodeNum,
+                        durationSec: episodeEl.querySelector('.episode-duration')?.textContent || '',
+                        containerExtension: container
+                    }, result.url);
+                }
+            }
+        } catch (err) {
+            console.error('Error playing episode:', err);
+        }
+    }
+
+    async toggleFavorite(series, btn) {
+        const favKey = `${series.sourceId}:${series.series_id}`;
+        const isFav = this.favoriteIds.has(favKey);
+        const iconSpan = btn.querySelector('.fav-icon');
+
+        try {
+            // Optimistic update
+            if (isFav) {
+                this.favoriteIds.delete(favKey);
+                btn.classList.remove('active');
+                btn.title = 'Add to Favorites';
+                if (iconSpan) iconSpan.innerHTML = Icons.favoriteOutline;
+                await API.favorites.remove(series.sourceId, series.series_id, 'series');
+            } else {
+                this.favoriteIds.add(favKey);
+                btn.classList.add('active');
+                btn.title = 'Remove from Favorites';
+                if (iconSpan) iconSpan.innerHTML = Icons.favorite;
+                await API.favorites.add(series.sourceId, series.series_id, 'series');
+            }
+        } catch (err) {
+            console.error('Error toggling favorite:', err);
+            // Revert on error
+            if (isFav) {
+                this.favoriteIds.add(favKey);
+                btn.classList.add('active');
+                if (iconSpan) iconSpan.innerHTML = Icons.favorite;
+            } else {
+                this.favoriteIds.delete(favKey);
+                btn.classList.remove('active');
+                if (iconSpan) iconSpan.innerHTML = Icons.favoriteOutline;
+            }
+        }
+    }
+}
+
+window.SeriesPage = SeriesPage;

public/login.html

@@ -1,144 +1,165 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - NodeCast TV</title>
+    <title>Iniciar sesión — KiraTV</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="stylesheet" href="css/main.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700&family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet">
     <style>
-        body {
+        :root {
-            margin: 0;
+            --navy: #000066;
-            padding: 0;
+            --navy-mid: #000044;
-            background: var(--color-bg-primary);
+            --gold: #e8d5b5;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            --gold-hover: #f5ead8;
+            --text: #ffffff;
+            --muted: rgba(255, 255, 255, 0.72);
+            --border: rgba(255, 255, 255, 0.12);
         }
 
-        .login-container {
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            min-height: 100vh;
+            font-family: 'DM Sans', system-ui, sans-serif;
+            color: var(--text);
+            background:
+                radial-gradient(ellipse 100% 80% at 50% -30%, rgba(255, 255, 255, 0.06), transparent 50%),
+                radial-gradient(ellipse 70% 50% at 110% 40%, rgba(0, 0, 102, 0.55), transparent),
+                linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 100%);
+        }
+
+        .login-wrap {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             min-height: 100vh;
-            padding: 20px;
+            padding: 24px;
         }
 
-        .login-box {
+        .login-card {
-            background: var(--color-bg-secondary);
-            padding: var(--space-2xl);
-            border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-lg);
             width: 100%;
-            max-width: 420px;
+            max-width: 440px;
-            border: 1px solid var(--color-border);
+            padding: 2.25rem 2rem;
+            border-radius: 18px;
+            background: rgba(0, 0, 70, 0.55);
+            border: 1px solid var(--border);
+            box-shadow:
+                0 24px 48px rgba(0, 0, 0, 0.45),
+                0 0 0 1px rgba(255, 255, 255, 0.03) inset;
+            backdrop-filter: blur(14px);
         }
 
-        .login-logo {
+        .brand-block {
             text-align: center;
-            margin-bottom: var(--space-2xl);
+            margin-bottom: 2rem;
         }
 
-        .login-logo .logo-icon {
+        .login-brand-img {
-            width: 64px;
+            display: block;
-            height: 64px;
+            margin: 0 auto;
-            margin: 0 auto var(--space-md);
+            max-width: min(300px, 100%);
-            color: var(--color-accent);
+            height: auto;
+            max-height: 220px;
+            object-fit: contain;
+            border-radius: 16px;
+            filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.45));
         }
 
-        .login-logo h1 {
+        .brand-tagline {
-            font-family: 'Century Gothic', sans-serif;
+            margin: 0.75rem 0 0;
-            font-size: 28px;
+            font-size: 0.7rem;
-            font-weight: 500;
+            font-weight: 700;
-            color: var(--color-text-primary);
+            letter-spacing: 0.35em;
-            margin: 0;
+            text-transform: uppercase;
+            color: var(--gold);
+            opacity: 0.9;
         }
 
-        .login-logo .brand-accent {
+        #login-subtitle {
-            color: var(--color-accent);
+            margin: 0.5rem 0 0;
-        }
+            font-size: 0.95rem;
-
+            color: var(--muted);
-        .login-logo p {
-            color: var(--color-text-secondary);
-            margin: var(--space-sm) 0 0 0;
-            font-size: 14px;
         }
 
         .form-group {
-            margin-bottom: var(--space-lg);
+            margin-bottom: 1.1rem;
         }
 
         .form-group label {
             display: block;
-            margin-bottom: var(--space-sm);
+            margin-bottom: 0.35rem;
-            color: var(--color-text-primary);
+            font-size: 0.875rem;
-            font-weight: 500;
+            font-weight: 600;
-            font-size: 14px;
+            color: var(--text);
         }
 
         .form-group input {
             width: 100%;
-            padding: 12px 16px;
+            padding: 12px 14px;
-            background: var(--color-bg-tertiary);
+            border-radius: 10px;
-            border: 1px solid var(--color-border);
+            border: 1px solid rgba(255, 255, 255, 0.08);
-            border-radius: var(--radius-md);
+            background: rgba(8, 12, 20, 0.65);
-            color: var(--color-text-primary);
+            color: var(--text);
-            font-size: 15px;
+            font-size: 1rem;
-            font-family: 'Outfit', sans-serif;
+            font-family: inherit;
-            transition: all 0.2s;
+            transition: border-color 0.2s, box-shadow 0.2s;
-            box-sizing: border-box;
         }
 
         .form-group input:focus {
             outline: none;
-            border-color: var(--color-accent);
+            border-color: rgba(232, 213, 181, 0.5);
-            background: var(--color-bg-hover);
+            box-shadow: 0 0 0 3px rgba(232, 213, 181, 0.1);
         }
 
         .form-group input::placeholder {
-            color: var(--color-text-muted);
+            color: rgba(168, 176, 196, 0.55);
         }
 
         .btn-login {
             width: 100%;
+            margin-top: 0.25rem;
             padding: 14px;
-            background: var(--color-accent);
-            color: white;
             border: none;
-            border-radius: var(--radius-md);
+            border-radius: 12px;
-            font-size: 16px;
+            font-size: 1rem;
-            font-weight: 600;
+            font-weight: 700;
-            font-family: 'Outfit', sans-serif;
+            font-family: 'Montserrat', sans-serif;
             cursor: pointer;
-            transition: all 0.2s;
+            background: linear-gradient(135deg, var(--gold) 0%, #a67c1f 100%);
+            color: var(--navy);
+            transition: transform 0.15s, box-shadow 0.2s;
+            box-shadow: 0 4px 20px rgba(232, 213, 181, 0.18);
         }
 
-        .btn-login:hover {
+        .btn-login:hover:not(:disabled) {
-            background: var(--color-accent-hover);
+            background: linear-gradient(135deg, var(--gold-hover) 0%, var(--gold) 100%);
             transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+            box-shadow: 0 8px 28px rgba(232, 213, 181, 0.22);
-        }
-
-        .btn-login:active {
-            transform: translateY(0);
         }
 
         .btn-login:disabled {
-            opacity: 0.5;
+            opacity: 0.55;
             cursor: not-allowed;
             transform: none;
         }
 
         .error-message {
-            background: rgba(239, 68, 68, 0.1);
-            color: var(--color-error);
-            padding: 12px 16px;
-            border-radius: var(--radius-md);
-            margin-bottom: var(--space-lg);
-            border: 1px solid rgba(239, 68, 68, 0.2);
-            font-size: 14px;
             display: none;
+            margin-bottom: 1rem;
+            padding: 12px 14px;
+            border-radius: 10px;
+            font-size: 0.9rem;
+            background: rgba(248, 113, 113, 0.12);
+            border: 1px solid rgba(248, 113, 113, 0.35);
+            color: #fecaca;
         }
 
         .error-message.show {
@@ -146,103 +167,128 @@
         }
 
         .setup-message {
-            background: rgba(99, 102, 241, 0.1);
-            color: var(--color-accent);
-            padding: 12px 16px;
-            border-radius: var(--radius-md);
-            margin-bottom: var(--space-lg);
-            border: 1px solid var(--color-accent-dim);
-            font-size: 14px;
             display: none;
+            margin-bottom: 1rem;
+            padding: 12px 14px;
+            border-radius: 10px;
+            font-size: 0.9rem;
+            background: rgba(232, 213, 181, 0.08);
+            border: 1px solid rgba(232, 213, 181, 0.22);
+            color: var(--gold-hover);
         }
 
         .setup-message.show {
             display: block;
         }
+
+        .sso-divider {
+            text-align: center;
+            margin: 1.35rem 0;
+            position: relative;
+        }
+
+        .sso-divider span {
+            position: relative;
+            z-index: 1;
+            padding: 0 12px;
+            font-size: 0.8rem;
+            color: var(--muted);
+            background: rgba(15, 22, 38, 0.92);
+        }
+
+        .sso-divider::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 50%;
+            height: 1px;
+            background: rgba(255, 255, 255, 0.08);
+            z-index: 0;
+        }
+
+        #btn-sso-login {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            padding: 12px;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            background: transparent;
+            color: var(--text);
+            font-size: 0.95rem;
+            font-family: inherit;
+            cursor: pointer;
+            transition: background 0.2s, border-color 0.2s, color 0.2s;
+        }
+
+        #btn-sso-login:hover {
+            background: rgba(232, 213, 181, 0.06);
+            border-color: rgba(232, 213, 181, 0.35);
+            color: var(--gold-hover);
+        }
     </style>
 </head>
 
 <body>
-    <div class="login-container">
+    <div class="login-wrap">
-        <div class="login-box">
+        <div class="login-card">
-            <div class="login-logo">
+            <div class="brand-block">
-                <svg class="logo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 187.63 210.6"
+                <img src="/img/kiratv-logo-hero.jpg" alt="KiraTV — Plataforma IPTV" width="320" height="320" decoding="async" class="login-brand-img">
-                    fill="currentColor">
+                <p class="brand-tagline">Plataforma IPTV</p>
-                    <path
+                <p id="login-subtitle">Inicia sesión para continuar</p>
-                        d="M169.71,87.87c-4.77,0-9.1,1.88-12.31,4.92L35.3,22.3c.35-1.4.56-2.86.56-4.37C35.86,8.03,27.83,0,17.93,0S0,8.03,0,17.93c0,8.44,5.84,15.5,13.69,17.4v140c-7.71,2.01-13.41,8.99-13.41,17.33,0,9.9,8.03,17.93,17.93,17.93s17.93-8.03,17.93-17.93c0-1.56-.22-3.07-.6-4.51l121.21-69.98c3.26,3.42,7.86,5.55,12.95,5.55,9.9,0,17.93-8.03,17.93-17.93s-8.03-17.93-17.93-17.93ZM152.78,99.92c-.14.41-.27.83-.38,1.25h-51.47l-44.18-24.72L30.4,30.8c.33-.32.64-.65.94-.99l121.45,70.12ZM22.17,175.2V35.33c.23-.05.45-.11.67-.17l26.35,45.65-.34,50.04-25.74,44.59c-.31-.09-.63-.17-.95-.24ZM31.52,180.69c-.27-.3-.55-.6-.84-.89l25.48-44.13,44.64-25.78h51.47c.07.32.15.63.24.94L31.52,180.69Z" />
-                </svg>
-                <h1>nodecast-tv</h1>
-                <p id="login-subtitle">Sign in to continue</p>
             </div>
 
             <div class="error-message" id="error-message"></div>
             <div class="setup-message" id="setup-message">
-                Welcome! Please create your admin account to get started.
+                Bienvenido. Crea tu cuenta de administrador para empezar.
             </div>
 
             <form id="login-form">
                 <div class="form-group">
-                    <label for="username">Username</label>
+                    <label for="username">Usuario</label>
                     <input type="text" id="username" name="username" required autocomplete="username"
-                        placeholder="Enter your username">
+                        placeholder="Tu nombre de usuario">
                 </div>
 
                 <div class="form-group">
-                    <label for="password">Password</label>
+                    <label for="password">Contraseña</label>
                     <input type="password" id="password" name="password" required autocomplete="current-password"
-                        minlength="6" placeholder="Enter your password">
+                        minlength="6" placeholder="Tu contraseña">
                 </div>
 
-                <button type="submit" class="btn-login" id="submit-btn">Sign In</button>
+                <button type="submit" class="btn-login" id="submit-btn">Entrar</button>
             </form>
 
-            <div class="sso-divider" style="text-align: center; margin: 20px 0; position: relative;">
+            <div class="sso-divider">
-                <span
+                <span>o</span>
-                    style="background: var(--color-bg-secondary); padding: 0 10px; color: var(--color-text-secondary); font-size: 14px; position: relative; z-index: 1;">OR</span>
-                <div
-                    style="position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--color-border); z-index: 0;">
-                </div>
             </div>
 
-            <button id="btn-sso-login" class="btn-login"
+            <button type="button" id="btn-sso-login">
-                style="background: transparent; border: 1px solid var(--color-border); color: var(--color-text-primary); display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.2s;">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width:20px;height:20px;">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                    <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" />
-                    style="width: 20px; height: 20px;">
-                    <path
-                        d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" />
                 </svg>
-                Sign in with SSO
+                Entrar con SSO
             </button>
-
-            <style>
-                #btn-sso-login:hover {
-                    background: var(--color-bg-tertiary) !important;
-                    border-color: var(--color-accent) !important;
-                    color: var(--color-accent) !important;
-                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-                }
-            </style>
         </div>
     </div>
 
     <script>
-        // Start SSO Login
         document.getElementById('btn-sso-login').addEventListener('click', () => {
             window.location.href = '/api/auth/oidc/login';
         });
 
-        // Check for URL Error params
         const urlParams = new URLSearchParams(window.location.search);
         const error = urlParams.get('error');
         if (error) {
             const errorMessage = document.getElementById('error-message');
             errorMessage.textContent = error;
             errorMessage.classList.add('show');
-            // Clean URL
             window.history.replaceState({}, document.title, window.location.pathname);
         }
 
-        // Check if setup is required
         let isSetupMode = false;
 
         async function checkSetupRequired() {
@@ -252,11 +298,10 @@
 
                 if (data.setupRequired) {
                     isSetupMode = true;
-                    document.getElementById('login-subtitle').textContent = 'Create Admin Account';
+                    document.getElementById('login-subtitle').textContent = 'Crea la cuenta de administrador';
-                    document.getElementById('submit-btn').textContent = 'Create Account';
+                    document.getElementById('submit-btn').textContent = 'Crear cuenta';
                     document.getElementById('setup-message').classList.add('show');
-                    document.getElementById('password').placeholder = 'Minimum 6 characters';
+                    document.getElementById('password').placeholder = 'Mínimo 6 caracteres';
-                    // Hide SSO in setup mode
                     document.querySelector('.sso-divider').style.display = 'none';
                     document.getElementById('btn-sso-login').style.display = 'none';
                 }
@@ -265,7 +310,6 @@
             }
         }
 
-        // Handle form submission
         document.getElementById('login-form').addEventListener('submit', async (e) => {
             e.preventDefault();
 
@@ -274,45 +318,36 @@
             const submitBtn = document.getElementById('submit-btn');
             const errorMessage = document.getElementById('error-message');
 
-            // Clear previous errors
             errorMessage.classList.remove('show');
             errorMessage.textContent = '';
 
-            // Disable button
             submitBtn.disabled = true;
-            submitBtn.textContent = 'Please wait...';
+            submitBtn.textContent = 'Espera…';
 
             try {
                 const endpoint = isSetupMode ? '/api/auth/setup' : '/api/auth/login';
                 const response = await fetch(endpoint, {
                     method: 'POST',
-                    headers: {
+                    headers: { 'Content-Type': 'application/json' },
-                        'Content-Type': 'application/json'
-                    },
                     body: JSON.stringify({ username, password })
                 });
 
                 const data = await response.json();
 
                 if (!response.ok) {
-                    throw new Error(data.error || 'Authentication failed');
+                    throw new Error(data.error || 'Error de autenticación');
                 }
 
-                // Store token
                 localStorage.setItem('authToken', data.token);
-
-                // Redirect to main app (replace history to prevent back button issues)
                 window.location.replace('/');
-
             } catch (err) {
                 errorMessage.textContent = err.message;
                 errorMessage.classList.add('show');
                 submitBtn.disabled = false;
-                submitBtn.textContent = isSetupMode ? 'Create Account' : 'Sign In';
+                submitBtn.textContent = isSetupMode ? 'Crear cuenta' : 'Entrar';
             }
         });
 
-        // Check setup status on load
         checkSetupRequired();
     </script>
 </body>

server/auth.js

@@ -100,7 +100,7 @@ function configureJwtStrategy(getUserById) {
             }
 
             return done(null, {
-                id: user.id,
+                id: Number(user.id),
                 username: user.username,
                 role: user.role
             });
@@ -230,11 +230,18 @@ function configureOidcStrategy(findUserByOidcId, findUserByEmail, createUser) {
  */
 const requireAuth = passport.authenticate('jwt', { session: false });
 
+/**
+ * True if user has admin role (case-insensitive, tolerates stray whitespace).
+ */
+function isAdminRole(user) {
+    return !!(user && String(user.role || '').trim().toLowerCase() === 'admin');
+}
+
 /**
  * Middleware: Require admin role
  */
 function requireAdmin(req, res, next) {
-    if (!req.user || req.user.role !== 'admin') {
+    if (!isAdminRole(req.user)) {
         return res.status(403).json({ error: 'Forbidden - Admin access required' });
     }
     next();
@@ -264,5 +271,6 @@ module.exports = {
     configureOidcStrategy,
     requireAuth,
     requireAdmin,
-    requireRole
+    requireRole,
+    isAdminRole
 };

server/auth.js.bak.202605021955

@@ -0,0 +1,268 @@
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+const passport = require('passport');
+const { Strategy: JwtStrategy, ExtractJwt } = require('passport-jwt');
+const { Strategy: LocalStrategy } = require('passport-local');
+
+/**
+ * Authentication and Authorization Module
+ * Handles user authentication, session management, and role-based access control
+ * Using Passport.js with JWT tokens
+ */
+
+// JWT Secret - In production, use environment variable
+const JWT_SECRET = process.env.JWT_SECRET || 'nodecast-tv-secret-key-change-in-production';
+const JWT_EXPIRY = '24h';
+
+/**
+ * Hash password using bcrypt
+ */
+async function hashPassword(password) {
+    const salt = await bcrypt.genSalt(10);
+    return bcrypt.hash(password, salt);
+}
+
+/**
+ * Verify password against hash
+ */
+async function verifyPassword(password, hash) {
+    return bcrypt.compare(password, hash);
+}
+
+/**
+ * Generate JWT token
+ */
+function generateToken(user) {
+    return jwt.sign(
+        {
+            id: user.id,
+            username: user.username,
+            role: user.role
+        },
+        JWT_SECRET,
+        { expiresIn: JWT_EXPIRY }
+    );
+}
+
+/**
+ * Verify JWT token
+ */
+function verifyToken(token) {
+    try {
+        return jwt.verify(token, JWT_SECRET);
+    } catch (err) {
+        return null;
+    }
+}
+
+/**
+ * Configure Passport Local Strategy for username/password authentication
+ */
+function configureLocalStrategy(getUserByUsername, verifyUserPassword) {
+    passport.use(new LocalStrategy(
+        async (username, password, done) => {
+            try {
+                const user = await getUserByUsername(username);
+
+                if (!user) {
+                    return done(null, false, { message: 'Invalid credentials' });
+                }
+
+                const isValid = await verifyUserPassword(password, user.passwordHash);
+
+                if (!isValid) {
+                    return done(null, false, { message: 'Invalid credentials' });
+                }
+
+                return done(null, user);
+            } catch (err) {
+                return done(err);
+            }
+        }
+    ));
+}
+
+/**
+ * Configure Passport JWT Strategy for token-based authentication
+ */
+function configureJwtStrategy(getUserById) {
+    const options = {
+        jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+        secretOrKey: JWT_SECRET
+    };
+
+    passport.use(new JwtStrategy(options, async (payload, done) => {
+        try {
+            const user = await getUserById(payload.id);
+
+            if (!user) {
+                return done(null, false);
+            }
+
+            return done(null, {
+                id: user.id,
+                username: user.username,
+                role: user.role
+            });
+        } catch (err) {
+            return done(err, false);
+        }
+    }));
+}
+
+/**
+ * Configure Passport session serialization
+ * Required for OIDC flow which uses sessions
+ */
+function configureSessionSerialization(getUserById) {
+    passport.serializeUser((user, done) => {
+        done(null, user.id);
+    });
+
+    passport.deserializeUser(async (id, done) => {
+        try {
+            const user = await getUserById(id);
+            done(null, user);
+        } catch (err) {
+            done(err, null);
+        }
+    });
+}
+
+/**
+ * Configure Passport OpenID Connect Strategy
+ */
+function configureOidcStrategy(findUserByOidcId, findUserByEmail, createUser) {
+    if (!process.env.OIDC_ISSUER_URL || !process.env.OIDC_CLIENT_ID || !process.env.OIDC_CLIENT_SECRET) {
+        console.warn('OIDC configuration missing - SSO disabled');
+        return;
+    }
+
+    const { Strategy: OpenIDConnectStrategy } = require('passport-openidconnect');
+
+    passport.use(new OpenIDConnectStrategy({
+        issuer: process.env.OIDC_ISSUER_URL || 'https://mock-issuer.com', // Dummy default for mock
+        authorizationURL: process.env.OIDC_AUTH_URL || `${process.env.OIDC_ISSUER_URL}/protocol/openid-connect/auth`,
+        tokenURL: process.env.OIDC_TOKEN_URL || `${process.env.OIDC_ISSUER_URL}/protocol/openid-connect/token`,
+        userInfoURL: process.env.OIDC_USERINFO_URL || `${process.env.OIDC_ISSUER_URL}/protocol/openid-connect/userinfo`,
+        clientID: process.env.OIDC_CLIENT_ID || 'mock-client-id',
+        clientSecret: process.env.OIDC_CLIENT_SECRET || 'mock-secret',
+        callbackURL: process.env.OIDC_CALLBACK_URL || '/api/auth/oidc/callback',
+        scope: ['openid', 'profile', 'email']
+    },
+        async (...args) => {
+            // The done callback is always the last argument
+            const done = args[args.length - 1];
+
+            // Map known arguments
+            // Standard: issuer, sub, profile, accessToken, refreshToken, done
+            // Some versions: issuer, sub, profile, accessToken, refreshToken, params, done
+
+            let issuer, sub, profile;
+
+            if (args.length === 3) {
+                // Scenario: (issuer, profile, done)
+                const arg0 = args[0];
+                const arg1 = args[1];
+
+                if (typeof arg1 === 'object' && arg1.id) {
+                    issuer = arg0;
+                    profile = arg1;
+                    sub = profile.id;
+                } else if (typeof arg0 === 'string' && typeof arg1 === 'string') {
+                    issuer = arg0;
+                    sub = arg1;
+                    profile = { id: sub, displayName: 'Unknown' };
+                }
+            } else if (args.length >= 4) {
+                // Assume standard: iss, sub, profile...
+                issuer = args[0];
+                sub = args[1];
+                profile = args[2];
+            }
+
+            if (!sub && profile && profile.id) sub = profile.id;
+
+            if (!sub) {
+                return done(new Error('Could not identify OIDC Subject (sub) from arguments'));
+            }
+
+            try {
+                // 1. Try to find by OIDC ID (sub)
+                let user = await findUserByOidcId(sub);
+
+                // 2. If not found, try to match by email
+                // Extract email - handle both profile.emails[] (Google) and profile.email (others)
+                const email = profile.emails?.[0]?.value || profile.email || profile._json?.email;
+
+                if (!user && email) {
+                    user = await findUserByEmail(email);
+
+                    // If found by email but no OIDC ID, link them
+                    if (user && !user.oidcId) {
+                        // We don't have a direct update method for specific fields without full user object in this context
+                        // Ideally we'd update the user here. For now, we'll just log in.
+                        // Future: Update user with oidcId
+                    }
+                }
+
+                // 3. If still not found, create new user (JIT Provisioning)
+                if (!user) {
+                    const username = profile.username || profile.displayName || (email ? email.split('@')[0] : `user_${sub.substring(0, 8)}`);
+
+                    user = await createUser({
+                        username: username,
+                        role: 'viewer', // Default role for SSO users
+                        oidcId: sub,
+                        email: email || null
+                    });
+                }
+
+                return done(null, user);
+            } catch (err) {
+                return done(err);
+            }
+        }));
+}
+
+/**
+ * Middleware: Require authentication using Passport JWT
+ */
+const requireAuth = passport.authenticate('jwt', { session: false });
+
+/**
+ * Middleware: Require admin role
+ */
+function requireAdmin(req, res, next) {
+    if (!req.user || req.user.role !== 'admin') {
+        return res.status(403).json({ error: 'Forbidden - Admin access required' });
+    }
+    next();
+}
+
+/**
+ * Middleware: Check for specific role
+ */
+function requireRole(role) {
+    return (req, res, next) => {
+        if (!req.user || req.user.role !== role) {
+            return res.status(403).json({ error: `Forbidden - ${role} access required` });
+        }
+        next();
+    };
+}
+
+module.exports = {
+    passport,
+    hashPassword,
+    verifyPassword,
+    generateToken,
+    verifyToken,
+    configureLocalStrategy,
+    configureJwtStrategy,
+    configureSessionSerialization,
+    configureOidcStrategy,
+    requireAuth,
+    requireAdmin,
+    requireRole
+};

server/db.js

@@ -67,7 +67,8 @@ function getDefaultSettings() {
     forceVideoTranscode: false, // Force Video Transcode
     forceRemux: false,
     autoTranscode: true,
-    streamFormat: 'm3u8',
+    // Dispatcharr (y muchos Xtream) sirven MPEG-TS aunque la extensión sea .m3u8; Hls.js falla. Usar ts.
+    streamFormat: 'ts',
     epgRefreshInterval: '24',
     // User-Agent settings
     userAgentPreset: 'chrome',    // chrome | vlc | tivimate | custom

server/index.js

@@ -27,7 +27,14 @@ app.use(session({
 app.use(passport.initialize());
 app.use(passport.session());
 
-app.use(express.static(path.join(__dirname, '..', 'public')));
+// Serve static files with no-cache for JS/CSS so browser always loads the latest version
+app.use(express.static(path.join(__dirname, '..', 'public'), {
+    setHeaders(res, filePath) {
+        if (filePath.endsWith('.js') || filePath.endsWith('.css')) {
+            res.setHeader('Cache-Control', 'no-cache, must-revalidate');
+        }
+    }
+}));
 
 // FFMPEG Configuration (optional - for transcoding support)
 // Priority: 1. System FFmpeg (better Docker DNS support), 2. ffmpeg-static npm package
@@ -88,6 +95,86 @@ function findFFprobe() {
 app.locals.ffmpegPath = findFFmpeg();
 app.locals.ffprobePath = findFFprobe();
 
+// Dynamic services loader - collects exports from files in ./services
+const fs = require('fs');
+const services = {};
+try {
+    const servicesDir = path.join(__dirname, 'services');
+    const serviceFiles = fs.readdirSync(servicesDir).filter(f => f.endsWith('.js'));
+    for (const file of serviceFiles) {
+        const name = file.replace(/\.js$/, '');
+        try {
+            services[name] = require(path.join(servicesDir, file));
+        } catch (e) {
+            console.warn(`Failed to load service ${file}:`, e.message);
+        }
+    }
+} catch (e) {
+    console.warn('No services directory found or failed to read services:', e.message);
+}
+
+// Freeze services object to prevent plugins from mutating shared state
+Object.freeze(services);
+
+// Plugin loader: loads any .js file inside server/plugins and calls the
+// exported function with (app, services).
+// Supports both function exports and object exports with lifecycle hooks.
+const loadedPlugins = [];
+
+async function loadPlugins() {
+    try {
+        const pluginsDir = path.join(__dirname, 'plugins');
+        if (fs.existsSync(pluginsDir)) {
+            // Sort plugin files alphabetically for deterministic load order
+            const pluginFiles = fs.readdirSync(pluginsDir)
+                .filter(f => f.endsWith('.js'))
+                .sort();
+
+            for (const file of pluginFiles) {
+                const pluginPath = path.join(pluginsDir, file);
+                try {
+                    const plugin = require(pluginPath);
+
+                    // Support both function exports and object exports with lifecycle hooks
+                    if (typeof plugin === 'function') {
+                        // Direct function export (sync or async)
+                        await plugin(app, services);
+                        loadedPlugins.push({ name: file, plugin: null });
+                        console.log(`✓ Loaded plugin: ${file}`);
+                    } else if (plugin && typeof plugin.init === 'function') {
+                        // Object export with init/shutdown lifecycle
+                        await plugin.init(app, services);
+                        loadedPlugins.push({ name: file, plugin });
+                        console.log(`✓ Loaded plugin: ${file} (with lifecycle hooks)`);
+                    } else {
+                        console.warn(`⚠ Plugin ${file} does not export a function or object with init(), skipping.`);
+                    }
+                } catch (err) {
+                    console.error(`✗ Failed to load plugin ${file}:`, err);
+                }
+            }
+        }
+    } catch (err) {
+        console.warn('Plugin loader failed:', err.message);
+    }
+}
+
+// Graceful shutdown handler for plugins with shutdown hooks
+process.on('SIGTERM', async () => {
+    console.log('SIGTERM received, shutting down plugins...');
+    for (const { name, plugin } of loadedPlugins) {
+        if (plugin && typeof plugin.shutdown === 'function') {
+            try {
+                await plugin.shutdown();
+                console.log(`✓ Shutdown plugin: ${name}`);
+            } catch (err) {
+                console.error(`✗ Error shutting down plugin ${name}:`, err);
+            }
+        }
+    }
+    process.exit(0);
+});
+
 // API Routes
 app.use('/api/auth', require('./routes/auth'));
 app.use('/api/sources', require('./routes/sources'));
@@ -100,6 +187,7 @@ app.use('/api/probe', require('./routes/probe'));
 app.use('/api/subtitle', require('./routes/subtitle'));
 app.use('/api/settings', require('./routes/settings'));
 app.use('/api/history', require('./routes/history'));
+app.use('/api/kirabot', require('./routes/kirabot'));
 
 // Version endpoint
 app.get('/api/version', (req, res) => {
@@ -119,7 +207,12 @@ app.use((err, req, res, next) => {
 });
 
 app.listen(PORT, async () => {
-    console.log(`NodeCast TV server running on http://localhost:${PORT}`);
+    console.log(`KiraTV server running on http://localhost:${PORT}`);
+
+    // Load plugins
+    await loadPlugins().catch(err => {
+        console.error('Plugin initialization failed:', err);
+    });
 
     // Trigger background sync with delay to allow server to settle
     setTimeout(async () => {

server/plugins/PLUGINS.md

@@ -0,0 +1,163 @@
+# nodecast-tv Plugin System
+
+This directory allows you to extend the functionality of **nodecast-tv** without modifying the core source code. The server automatically detects and loads any `.js` file placed in this folder at startup.
+
+---
+
+## How It Works
+
+The plugin loader in `server/index.js` scans this directory at startup and loads plugins in **alphabetical order** (sorted by filename). Each plugin file should export either:
+- A function (sync or async) that will be called during initialization
+- An object with `init()` and optionally `shutdown()` methods for lifecycle management
+
+When the server starts, it calls your plugin's initialization code and passes:
+- `app` - The Express application instance
+- `services` - A **frozen** (read-only) object containing all internal services
+
+---
+
+## Plugin Patterns
+
+### Pattern 1: Simple Function Export
+
+The simplest plugin pattern - just export a function:
+
+```javascript
+/**
+ * @param {Object} app - The Express application instance
+ * @param {Object} services - Frozen object containing all internal services
+ */
+module.exports = function(app, services) {
+    // Register routes, middleware, etc.
+    app.get('/api/my-route', (req, res) => {
+        res.json({ message: 'Hello from plugin!' });
+    });
+};
+```
+
+### Pattern 2: Async Function Export
+
+For plugins that need to perform async initialization (database connections, API calls, etc.):
+
+```javascript
+module.exports = async function(app, services) {
+    // Async initialization
+    await someAsyncSetup();
+    
+    // Access services
+    if (services.syncService) {
+        console.log('Sync service available');
+    }
+    
+    // Register routes
+    app.get('/api/my-route', (req, res) => {
+        res.json({ status: 'ready' });
+    });
+};
+```
+
+### Pattern 3: Lifecycle Hooks (Advanced)
+
+For plugins that need cleanup on shutdown:
+
+```javascript
+module.exports = {
+    /**
+     * Called during server startup
+     */
+    init: async (app, services) => {
+        // Setup code
+        this.interval = setInterval(() => {
+            console.log('Background task running...');
+        }, 60000);
+        
+        app.get('/api/status', (req, res) => {
+            res.json({ uptime: process.uptime() });
+        });
+    },
+    
+    /**
+     * Called on SIGTERM (graceful shutdown)
+     */
+    shutdown: async () => {
+        // Cleanup code
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+        console.log('Plugin cleaned up');
+    }
+};
+```
+
+---
+
+## Security & Permissions
+
+> [!WARNING]
+> Plugins run with **full Node.js permissions** and have access to the Express app and all services. Only install plugins from trusted sources.
+
+**Important notes:**
+- The `services` object is **frozen** - you cannot modify or delete services
+- Plugins can still mutate properties of service objects (e.g., `services.cache.set()`)
+- Plugins can register routes, middleware, and access the file system
+- This is appropriate for self-hosted applications where you control what plugins are installed
+
+---
+
+## Available Services
+
+The `services` object contains all modules from `server/services/`:
+
+| Service | Description |
+|---------|-------------|
+| `cache` | Caching utilities |
+| `epgParser` | EPG/XMLTV parsing |
+| `hwDetect` | Hardware acceleration detection |
+| `m3uParser` | M3U playlist parsing |
+| `m3uXtreamAdapter` | Xtream API adapter |
+| `syncService` | Channel/EPG synchronization |
+| `transcodeSession` | Transcoding session management |
+| `xtreamApi` | Xtream API client |
+
+**Example:**
+```javascript
+module.exports = async function(app, services) {
+    // Use the EPG parser service
+    const epgData = await services.epgParser.fetchAndParse('http://example.com/epg.xml');
+    console.log(`Loaded ${epgData.programmes.length} programmes`);
+};
+```
+
+---
+
+## Load Order
+
+Plugins are loaded in **alphabetical order** by filename. If you need specific ordering:
+
+```
+plugins/
+  01-database.js      # Loads first
+  02-api-client.js    # Loads second
+  99-cleanup.js       # Loads last
+```
+
+---
+
+## Testing Your Plugin
+
+1. Place your `.js` file in `server/plugins/`
+2. Restart the NodeCast TV server
+3. Check the console for plugin loading messages:
+   - `✓ Loaded plugin: your-plugin.js` - Success
+   - `⚠ Plugin your-plugin.js does not export...` - Wrong export format
+   - `✗ Failed to load plugin your-plugin.js` - Error during initialization
+
+---
+
+## Example Use Cases
+
+- **Custom scrapers** - Add support for new streaming sources
+- **Notification systems** - Send alerts when new content is available
+- **Analytics** - Track viewing patterns
+- **Custom APIs** - Expose additional endpoints for integrations
+- **Middleware** - Add authentication, logging, or rate limiting

server/plugins/hello.js

@@ -0,0 +1,25 @@
+/**
+ * Example plugin demonstrating async initialization and service access
+ * This plugin registers a test route at /api/hello
+ */
+module.exports = async function (app, services) {
+    console.log("Plugin 'Hello' activated!");
+
+    // Example: Access loaded services
+    if (services.syncService) {
+        console.log("   - syncService is available");
+    }
+
+    // Simulate async initialization (e.g., database connection, API setup)
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Register a test route accessible at http://localhost:3000/api/hello
+    app.get('/api/hello', (req, res) => {
+        res.json({
+            message: "The plugin system is working!",
+            availableServices: Object.keys(services)
+        });
+    });
+
+    console.log("   - Registered route: GET /api/hello");
+};

server/routes/channels.js

@@ -1,6 +1,14 @@
 const express = require('express');
 const router = express.Router();
 const { getDb } = require('../db/sqlite');
+const { sources } = require('../db');
+const { requireAuth } = require('../auth');
+const {
+    getAccessibleSourceIds,
+    assertCanUseSourceById
+} = require('../sourceAccess');
+
+router.use(requireAuth);
 
 // Helper to map API item types to DB types and tables
 function mapItemType(apiType) {
@@ -21,27 +29,44 @@ router.get('/hidden', async (req, res) => {
         const { sourceId } = req.query;
         const db = getDb();
 
-        let hidden = [];
+        let allowedIds = null;
+        if (req.user.role !== 'admin') {
+            allowedIds = await getAccessibleSourceIds(req, sources);
+            if (allowedIds.length === 0) {
+                return res.json([]);
+            }
+        }
+
         const resultFormat = (row, itemType) => ({
             source_id: row.source_id,
             item_type: itemType,
             item_id: itemType.includes('category') || itemType === 'group' ? row.category_id : row.item_id
         });
 
-        // Query Categories
         let catQuery = `SELECT source_id, category_id, type FROM categories WHERE is_hidden = 1`;
         let itemQuery = `SELECT source_id, item_id, type FROM playlist_items WHERE is_hidden = 1`;
+        let catParams = [];
+        let itemParams = [];
 
-        const params = [];
         if (sourceId) {
+            if (!(await assertCanUseSourceById(req, res, sources, sourceId))) return;
+            const sid = parseInt(sourceId, 10);
             catQuery += ` AND source_id = ?`;
             itemQuery += ` AND source_id = ?`;
-            const sid = parseInt(sourceId);
+            catParams.push(sid);
-            params.push(sid);
+            itemParams.push(sid);
+        } else if (allowedIds) {
+            const ph = allowedIds.map(() => '?').join(',');
+            catQuery += ` AND source_id IN (${ph})`;
+            itemQuery += ` AND source_id IN (${ph})`;
+            catParams = [...allowedIds];
+            itemParams = [...allowedIds];
         }
 
-        const hiddenCats = db.prepare(catQuery).all(...params);
+        const hiddenCats = db.prepare(catQuery).all(...catParams);
-        const hiddenItems = db.prepare(itemQuery).all(...params);
+        const hiddenItems = db.prepare(itemQuery).all(...itemParams);
+
+        const hidden = [];
 
         hiddenCats.forEach(row => {
             let apiType;
@@ -75,6 +100,7 @@ router.post('/hide', async (req, res) => {
         const mapping = mapItemType(itemType);
 
         if (!mapping) return res.status(400).json({ error: 'Invalid item type' });
+        if (!(await assertCanUseSourceById(req, res, sources, sourceId))) return;
 
         const db = getDb();
         const idCol = mapping.table === 'categories' ? 'category_id' : 'item_id';
@@ -101,6 +127,7 @@ router.post('/show', async (req, res) => {
         const mapping = mapItemType(itemType);
 
         if (!mapping) return res.status(400).json({ error: 'Invalid item type' });
+        if (!(await assertCanUseSourceById(req, res, sources, sourceId))) return;
 
         const db = getDb();
         const idCol = mapping.table === 'categories' ? 'category_id' : 'item_id';
@@ -127,6 +154,8 @@ router.get('/hidden/check', async (req, res) => {
         const mapping = mapItemType(itemType);
         if (!mapping) return res.json({ hidden: false });
 
+        if (!(await assertCanUseSourceById(req, res, sources, sourceId))) return;
+
         const db = getDb();
         const idCol = mapping.table === 'categories' ? 'category_id' : 'item_id';
 
@@ -148,13 +177,16 @@ router.post('/hide/bulk', async (req, res) => {
         const { items } = req.body;
         if (!Array.isArray(items)) return res.status(400).json({ error: 'items array required' });
 
+        const uniqueIds = [...new Set(items.map(i => i.sourceId))];
+        for (const sid of uniqueIds) {
+            if (!(await assertCanUseSourceById(req, res, sources, sid))) return;
+        }
+
         const db = getDb();
 
-        // Prepare statements once
         const hideCat = db.prepare('UPDATE categories SET is_hidden = 1 WHERE source_id = ? AND type = ? AND category_id = ?');
         const hideItem = db.prepare('UPDATE playlist_items SET is_hidden = 1 WHERE source_id = ? AND type = ? AND item_id = ?');
 
-        // Cascading statements (hide all children of a category)
         const hideCatChildren = db.prepare('UPDATE playlist_items SET is_hidden = 1 WHERE source_id = ? AND type = ? AND category_id = ?');
 
         const runBulk = db.transaction((list) => {
@@ -162,12 +194,9 @@ router.post('/hide/bulk', async (req, res) => {
                 const mapping = mapItemType(item.itemType);
                 if (mapping) {
                     if (mapping.table === 'categories') {
-                        // Hide the category
                         hideCat.run(item.sourceId, mapping.type, item.itemId);
-                        // Cascade to children
                         hideCatChildren.run(item.sourceId, mapping.type, item.itemId);
                     } else {
-                        // Hide individual item
                         hideItem.run(item.sourceId, mapping.type, item.itemId);
                     }
                 }
@@ -191,13 +220,16 @@ router.post('/show/bulk', async (req, res) => {
         const { items } = req.body;
         if (!Array.isArray(items)) return res.status(400).json({ error: 'items array required' });
 
+        const uniqueIds = [...new Set(items.map(i => i.sourceId))];
+        for (const sid of uniqueIds) {
+            if (!(await assertCanUseSourceById(req, res, sources, sid))) return;
+        }
+
         const db = getDb();
 
-        // Prepare statements once
         const showCat = db.prepare('UPDATE categories SET is_hidden = 0 WHERE source_id = ? AND type = ? AND category_id = ?');
         const showItem = db.prepare('UPDATE playlist_items SET is_hidden = 0 WHERE source_id = ? AND type = ? AND item_id = ?');
 
-        // Cascading statements (show all children of a category)
         const showCatChildren = db.prepare('UPDATE playlist_items SET is_hidden = 0 WHERE source_id = ? AND type = ? AND category_id = ?');
 
         const runBulk = db.transaction((list) => {
@@ -205,12 +237,9 @@ router.post('/show/bulk', async (req, res) => {
                 const mapping = mapItemType(item.itemType);
                 if (mapping) {
                     if (mapping.table === 'categories') {
-                        // Show the category
                         showCat.run(item.sourceId, mapping.type, item.itemId);
-                        // Cascade to children
                         showCatChildren.run(item.sourceId, mapping.type, item.itemId);
                     } else {
-                        // Show individual item
                         showItem.run(item.sourceId, mapping.type, item.itemId);
                     }
                 }
@@ -234,14 +263,15 @@ router.post('/show/all', async (req, res) => {
         const { sourceId, contentType } = req.body;
         if (!sourceId) return res.status(400).json({ error: 'sourceId required' });
 
+        if (!(await assertCanUseSourceById(req, res, sources, sourceId))) return;
+
         const db = getDb();
         let catCount = 0;
         let itemCount = 0;
 
-        // Determine which types to update based on contentType
         const types = contentType === 'movies' ? ['movie']
             : contentType === 'series' ? ['series']
-                : ['live']; // default to channels
+                : ['live'];
 
         for (const type of types) {
             const catResult = db.prepare(`UPDATE categories SET is_hidden = 0 WHERE source_id = ? AND type = ?`).run(sourceId, type);
@@ -264,14 +294,15 @@ router.post('/hide/all', async (req, res) => {
         const { sourceId, contentType } = req.body;
         if (!sourceId) return res.status(400).json({ error: 'sourceId required' });
 
+        if (!(await assertCanUseSourceById(req, res, sources, sourceId))) return;
+
         const db = getDb();
         let catCount = 0;
         let itemCount = 0;
 
-        // Determine which types to update based on contentType
         const types = contentType === 'movies' ? ['movie']
             : contentType === 'series' ? ['series']
-                : ['live']; // default to channels
+                : ['live'];
 
         for (const type of types) {
             const catResult = db.prepare(`UPDATE categories SET is_hidden = 1 WHERE source_id = ? AND type = ?`).run(sourceId, type);
@@ -296,6 +327,18 @@ router.get('/recent', async (req, res) => {
             return res.status(400).json({ error: 'Valid type (movie or series) is required' });
         }
 
+        let accessibleFilter = '';
+        const params = [type];
+        if (req.user.role !== 'admin') {
+            const ids = await getAccessibleSourceIds(req, sources);
+            if (ids.length === 0) {
+                return res.json([]);
+            }
+            accessibleFilter = ` AND p.source_id IN (${ids.map(() => '?').join(',')})`;
+            params.push(...ids);
+        }
+        params.push(parseInt(limit, 10));
+
         const db = getDb();
         const recentItems = db.prepare(`
             SELECT * FROM playlist_items p
@@ -308,11 +351,11 @@ router.get('/recent', async (req, res) => {
                     AND c.type = p.type 
                     AND c.is_hidden = 1
               )
+              ${accessibleFilter}
             ORDER BY p.added_at DESC
             LIMIT ?
-        `).all(type, parseInt(limit));
+        `).all(...params);
 
-        // Parse JSON data for each item
         const formatted = recentItems.map(item => ({
             ...item,
             data: JSON.parse(item.data)
@@ -326,4 +369,3 @@ router.get('/recent', async (req, res) => {
 });
 
 module.exports = router;
-

server/routes/kirabot.js

@@ -0,0 +1,149 @@
+/**
+ * KiraBot proxy — forwards /api/kirabot/* to KiraStream backend
+ * authenticating on behalf of the current kiratv user.
+ */
+const express = require('express');
+const router = express.Router();
+const { requireAuth } = require('../auth');
+const { sources } = require('../db');
+const http = require('http');
+
+const KIRASTREAM_BASE = process.env.KIRASTREAM_BASE_URL || 'http://10.10.10.234';
+
+// Token cache: { userId: { token, expires } }
+const _tokenCache = new Map();
+
+async function _getKirastreamToken(user) {
+    const cached = _tokenCache.get(user.id);
+    if (cached && cached.expires > Date.now()) {
+        return cached.token;
+    }
+
+    // Find user's xtream source pointing to kirastream
+    let db;
+    try {
+        db = await require('../db').loadDb();
+    } catch (e) {
+        return null;
+    }
+
+    const src = db.sources.find(
+        (s) => s.ownerId === user.id && s.type === 'xtream' && s.username && s.password
+    );
+    if (!src) return null;
+
+    // POST form to /api/user/auth/token
+    return new Promise((resolve) => {
+        const body = `username=${encodeURIComponent(src.username)}&password=${encodeURIComponent(src.password)}`;
+        const url = new URL(`${KIRASTREAM_BASE}/api/user/auth/token`);
+        const options = {
+            hostname: url.hostname,
+            port: url.port || 80,
+            path: url.pathname,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Content-Length': Buffer.byteLength(body),
+            },
+        };
+        const req = http.request(options, (res) => {
+            let data = '';
+            res.on('data', (chunk) => { data += chunk; });
+            res.on('end', () => {
+                try {
+                    const json = JSON.parse(data);
+                    if (json.access_token) {
+                        _tokenCache.set(user.id, {
+                            token: json.access_token,
+                            expires: Date.now() + 25 * 60 * 1000, // 25 min
+                        });
+                        resolve(json.access_token);
+                    } else {
+                        resolve(null);
+                    }
+                } catch (e) {
+                    resolve(null);
+                }
+            });
+        });
+        req.on('error', () => resolve(null));
+        req.write(body);
+        req.end();
+    });
+}
+
+async function _proxyToKirastream(req, res, path, method, body) {
+    const token = await _getKirastreamToken(req.user);
+    if (!token) {
+        return res.status(401).json({ error: 'No se pudo autenticar con KiraStream' });
+    }
+
+    const url = new URL(`${KIRASTREAM_BASE}/api/user/kirabot${path}`);
+    const bodyStr = body ? JSON.stringify(body) : '';
+    const options = {
+        hostname: url.hostname,
+        port: url.port || 80,
+        path: url.pathname + (url.search || ''),
+        method: method,
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json',
+            'Content-Length': Buffer.byteLength(bodyStr),
+        },
+    };
+
+    return new Promise((resolve) => {
+        const proxyReq = http.request(options, (proxyRes) => {
+            let data = '';
+            proxyRes.on('data', (chunk) => { data += chunk; });
+            proxyRes.on('end', () => {
+                try {
+                    const json = JSON.parse(data);
+                    res.status(proxyRes.statusCode).json(json);
+                } catch (e) {
+                    res.status(proxyRes.statusCode).send(data);
+                }
+                resolve();
+            });
+        });
+        proxyReq.on('error', (err) => {
+            res.status(502).json({ error: 'Error de conexión con KiraStream', detail: err.message });
+            resolve();
+        });
+        if (bodyStr) proxyReq.write(bodyStr);
+        proxyReq.end();
+    });
+}
+
+router.use(requireAuth);
+
+router.post('/chat', async (req, res) => {
+    await _proxyToKirastream(req, res, '/chat', 'POST', req.body);
+});
+
+router.get('/chat/history', async (req, res) => {
+    await _proxyToKirastream(req, res, '/chat/history', 'GET', null);
+});
+
+router.delete('/chat/history', async (req, res) => {
+    await _proxyToKirastream(req, res, '/chat/history', 'DELETE', null);
+});
+
+router.get('/status', async (req, res) => {
+    await _proxyToKirastream(req, res, '/status', 'GET', null);
+});
+
+router.get('/recordings', async (req, res) => {
+    const qs = req.query.limit ? `?limit=${req.query.limit}` : '';
+    await _proxyToKirastream(req, res, `/recordings${qs}`, 'GET', null);
+});
+
+router.post('/recordings', async (req, res) => {
+    await _proxyToKirastream(req, res, '/recordings', 'POST', req.body);
+});
+
+router.delete('/recordings/:id', async (req, res) => {
+    await _proxyToKirastream(req, res, `/recordings/${req.params.id}`, 'DELETE', null);
+});
+
+module.exports = router;

server/routes/probe.js

@@ -170,22 +170,46 @@ router.get('/', async (req, res) => {
 
     console.log(`[Probe] Probing: ${url.substring(0, 80)}... ${ua ? `(UA: ${ua})` : ''}`);
 
+    // Retry probe up to 3 times on 5XX errors (provider slot not released yet)
+    const MAX_PROBE_RETRIES = 3;
+    const PROBE_RETRY_DELAY_MS = 2500;
+    let lastErr = null;
+
+    for (let attempt = 1; attempt <= MAX_PROBE_RETRIES; attempt++) {
         try {
             const probeResult = await probeStream(url, ffprobePath, ua);
             const analysis = analyzeProbeResult(probeResult, url);
 
-        // Cache result
+            // Cache successful result
             probeCache.set(cacheKey, { result: analysis, timestamp: Date.now() });
 
-        console.log(`[Probe] Result: video=${analysis.video}, audio=${analysis.audio}, ` +
+            console.log(`[Probe] Result (attempt ${attempt}): video=${analysis.video}, audio=${analysis.audio}, ` +
                 `container=${analysis.container}, compatible=${analysis.compatible}, ` +
                 `needsRemux=${analysis.needsRemux}, needsTranscode=${analysis.needsTranscode}`);
 
-        res.json(analysis);
+            return res.json(analysis);
         } catch (err) {
-        console.error('[Probe] Failed:', err.message);
+            lastErr = err;
+            const is5xx = /5[0-9]{2}|Server Error/i.test(err.message);
+            if (is5xx && attempt < MAX_PROBE_RETRIES) {
+                console.warn(`[Probe] 5XX from provider (attempt ${attempt}/${MAX_PROBE_RETRIES}), retrying in ${PROBE_RETRY_DELAY_MS}ms...`);
+                await new Promise(r => setTimeout(r, PROBE_RETRY_DELAY_MS));
+                continue;
+            }
+            break;
+        }
+    }
 
-        // On error, assume transcode needed to be safe
+    console.error('[Probe] Failed after retries:', lastErr.message);
+
+    // If there's a stale cached result, use it rather than assuming needsTranscode
+    const stale = probeCache.get(cacheKey);
+    if (stale) {
+        console.warn('[Probe] Using stale cached result as fallback');
+        return res.json({ ...stale.result, stale: true });
+    }
+
+    // Final fallback: assume transcode needed
     res.json({
         video: 'unknown',
         audio: 'unknown',
@@ -193,9 +217,8 @@ router.get('/', async (req, res) => {
         compatible: false,
         needsRemux: false,
         needsTranscode: true,
-            error: err.message
+        error: lastErr.message
     });
-    }
 });
 
 module.exports = router;

server/routes/proxy.js

@@ -12,6 +12,37 @@ const https = require('https');
 const { spawn } = require('child_process');
 const ffmpegPath = require('ffmpeg-static');
 const { Readable } = require('stream');
+const auth = require('../auth');
+const { canUserAccessSource } = require('../sourceAccess');
+
+// Las rutas de proxy (categorías, streams, EPG, imágenes, HLS, etc.) son accedidas
+// directamente por el reproductor y los navegadores sin header Authorization.
+// El control de acceso a fuentes se hace en /api/sources (CRUD).
+// Por eso NO aplicamos requireAuth globalmente aquí.
+
+router.param('sourceId', async (req, res, next, id) => {
+    try {
+        const sid = parseInt(id, 10);
+        if (Number.isNaN(sid)) {
+            return res.status(400).json({ error: 'Invalid source id' });
+        }
+        const source = await sources.getById(sid);
+        if (!source) {
+            return res.status(404).json({ error: 'Source not found' });
+        }
+        if (!canUserAccessSource(req.user, source)) {
+        // Solo bloqueamos si hay usuario autenticado y no tiene acceso
+        // (sin token, req.user es undefined → dejamos pasar, el reproductor no lleva Bearer)
+        if (req.user) {
+            return res.status(403).json({ error: 'No access to this source' });
+        }
+    }
+        req.grantedSource = source;
+        next();
+    } catch (err) {
+        next(err);
+    }
+});
 
 // Default cache max age in hours
 const DEFAULT_MAX_AGE_HOURS = 24;
@@ -83,8 +114,8 @@ function getStreamsFromDb(sourceId, type, categoryId = null, includeHidden = fal
 // Login / Authenticate
 router.get('/xtream/:sourceId', async (req, res) => {
     try {
-        const source = await sources.getById(req.params.sourceId);
+        const source = req.grantedSource;
-        if (!source || source.type !== 'xtream') return res.status(404).send('Source not found');
+        if (source.type !== 'xtream') return res.status(404).send('Source not found');
 
         // Proxy auth check to upstream to ensure credentials are still valid
 
@@ -185,8 +216,7 @@ router.get('/xtream/:sourceId/series', async (req, res) => {
 // Proxy series info request
 router.get('/xtream/:sourceId/series_info', async (req, res) => {
     try {
-        const source = await sources.getById(req.params.sourceId);
+        const source = req.grantedSource;
-        if (!source) return res.status(404).send('Source not found');
 
         const seriesId = req.query.series_id;
         if (!seriesId) return res.status(400).send('series_id required');
@@ -207,8 +237,7 @@ router.get('/xtream/:sourceId/series_info', async (req, res) => {
 // VOD Info
 router.get('/xtream/:sourceId/vod_info', async (req, res) => {
     try {
-        const source = await sources.getById(req.params.sourceId);
+        const source = req.grantedSource;
-        if (!source) return res.status(404).send('Source not found');
 
         const vodId = req.query.vod_id;
         if (!vodId) return res.status(400).send('vod_id required');
@@ -230,14 +259,14 @@ router.get('/xtream/:sourceId/vod_info', async (req, res) => {
 // Returns the direct stream URL for a given stream ID
 router.get('/xtream/:sourceId/stream/:streamId/:type', async (req, res) => {
     try {
-        const source = await sources.getById(req.params.sourceId);
+        const source = req.grantedSource;
-        if (!source || source.type !== 'xtream') {
+        if (source.type !== 'xtream') {
             return res.status(404).json({ error: 'Xtream source not found' });
         }
 
         const streamId = req.params.streamId;
         const type = req.params.type || 'live';
-        const container = req.query.container || 'm3u8';
+        const container = req.query.container || 'ts';
 
         // Construct the Xtream stream URL
         // Format: http://server:port/live/username/password/streamId.container (for live)
@@ -393,8 +422,8 @@ router.delete('/cache/:sourceId', (req, res) => {
 router.get('/xtream/:sourceId/:action', async (req, res) => {
     try {
         const sourceId = req.params.sourceId;
-        const source = await sources.getById(sourceId);
+        const source = req.grantedSource;
-        if (!source || source.type !== 'xtream') {
+        if (source.type !== 'xtream') {
             return res.status(404).json({ error: 'Xtream source not found' });
         }
 
@@ -478,14 +507,14 @@ router.get('/xtream/:sourceId/:action', async (req, res) => {
  */
 router.get('/xtream/:sourceId/stream/:streamId/:type?', async (req, res) => {
     try {
-        const source = await sources.getById(req.params.sourceId);
+        const source = req.grantedSource;
-        if (!source || source.type !== 'xtream') {
+        if (source.type !== 'xtream') {
             return res.status(404).json({ error: 'Xtream source not found' });
         }
 
         const api = xtreamApi.createFromSource(source);
         const { streamId, type = 'live' } = req.params;
-        const { container = 'm3u8' } = req.query;
+        const { container = 'ts' } = req.query;
 
         const url = api.buildStreamUrl(streamId, type, container);
         res.json({ url });
@@ -505,8 +534,8 @@ router.get('/xtream/:sourceId/stream/:streamId/:type?', async (req, res) => {
 router.get('/epg/:sourceId', async (req, res) => {
     try {
         const sourceId = req.params.sourceId;
-        const source = await sources.getById(sourceId);
+        const source = req.grantedSource;
-        if (!source || (source.type !== 'epg' && source.type !== 'xtream')) {
+        if (source.type !== 'epg' && source.type !== 'xtream') {
             return res.status(404).json({ error: 'Valid EPG source not found' });
         }
 
@@ -567,8 +596,8 @@ router.delete('/epg/:sourceId/cache', (req, res) => {
  */
 router.post('/epg/:sourceId/channels', async (req, res) => {
     try {
-        const source = await sources.getById(req.params.sourceId);
+        const source = req.grantedSource;
-        if (!source || source.type !== 'epg') {
+        if (source.type !== 'epg') {
             return res.status(404).json({ error: 'EPG source not found' });
         }
 

server/routes/sources.js

@@ -5,29 +5,85 @@ const { getDb } = require('../db/sqlite');
 const xtreamApi = require('../services/xtreamApi');
 const syncService = require('../services/syncService');
 const m3uParser = require('../services/m3uParser');
+const { requireAuth, requireAdmin, isAdminRole } = require('../auth');
+const { canUserAccessSource, getAccessibleSourceIds } = require('../sourceAccess');
 
-// Get all sources
+router.use(requireAuth);
-router.get('/', async (req, res) => {
+
-    try {
+function sanitizeSourceList(list) {
-        const allSources = await sources.getAll();
+    return list.map((s) => ({
-        // Don't expose passwords in list view
-        const sanitized = allSources.map(s => ({
         ...s,
         password: s.password ? '••••••••' : null
     }));
-        res.json(sanitized);
+}
+
+function parseOwnerId(body) {
+    const raw = body.ownerId;
+    if (raw === undefined || raw === null || raw === '') return null;
+    const n = parseInt(raw, 10);
+    return Number.isNaN(n) ? null : n;
+}
+
+// Estimate by URL (must stay before /:id routes)
+const M3U_LARGE_THRESHOLD = 50000;
+
+router.post('/estimate', async (req, res) => {
+    try {
+        const { url, type } = req.body;
+
+        if (!url) {
+            return res.status(400).json({ error: 'URL is required' });
+        }
+
+        if (type !== 'm3u') {
+            return res.json({ count: 0, needsWarning: false, threshold: M3U_LARGE_THRESHOLD });
+        }
+
+        const count = await m3uParser.countEntries(url);
+
+        res.json({
+            count,
+            needsWarning: count > M3U_LARGE_THRESHOLD,
+            threshold: M3U_LARGE_THRESHOLD
+        });
+    } catch (err) {
+        console.error('Error estimating M3U size:', err);
+        res.status(500).json({ error: 'Failed to estimate playlist size', message: err.message });
+    }
+});
+
+// Global sync — admin only
+router.post('/sync-all', requireAdmin, async (req, res) => {
+    try {
+        syncService.syncAll().catch(console.error);
+        res.json({ success: true, message: 'Global sync started' });
+    } catch (err) {
+        console.error('Error starting global sync:', err);
+        res.status(500).json({ error: 'Failed to start global sync' });
+    }
+});
+
+// Get all sources (filtered by access)
+router.get('/', async (req, res) => {
+    try {
+        const allSources = await sources.getAll();
+        const filtered = allSources.filter((s) => canUserAccessSource(req.user, s));
+        res.json(sanitizeSourceList(filtered));
     } catch (err) {
         console.error('Error getting sources:', err);
         res.status(500).json({ error: 'Failed to get sources' });
     }
 });
 
-// Get sync status for all sources
+// Get sync status (filtered for non-admins)
 router.get('/status', async (req, res) => {
     try {
-        const { getDb } = require('../db/sqlite');
         const db = getDb();
-        const statuses = db.prepare('SELECT * FROM sync_status').all();
+        let statuses = db.prepare('SELECT * FROM sync_status').all();
+        if (req.user.role !== 'admin') {
+            const allowed = new Set(await getAccessibleSourceIds(req, sources));
+            statuses = statuses.filter((row) => allowed.has(row.source_id));
+        }
         res.json(statuses);
     } catch (err) {
         console.error('Error getting sync status:', err);
@@ -39,13 +95,42 @@ router.get('/status', async (req, res) => {
 router.get('/type/:type', async (req, res) => {
     try {
         const typeSources = await sources.getByType(req.params.type);
-        res.json(typeSources);
+        const filtered = typeSources.filter((s) => canUserAccessSource(req.user, s));
+        res.json(sanitizeSourceList(filtered));
     } catch (err) {
         console.error('Error getting sources by type:', err);
         res.status(500).json({ error: 'Failed to get sources' });
     }
 });
 
+// Estimate by source ID (before bare GET /:id — same base path length)
+router.get('/:id/estimate', async (req, res) => {
+    try {
+        const source = await sources.getById(req.params.id);
+        if (!source) {
+            return res.status(404).json({ error: 'Source not found' });
+        }
+        if (!canUserAccessSource(req.user, source)) {
+            return res.status(403).json({ error: 'No access to this source' });
+        }
+
+        if (source.type !== 'm3u') {
+            return res.json({ count: 0, needsWarning: false, threshold: M3U_LARGE_THRESHOLD });
+        }
+
+        const count = await m3uParser.countEntries(source.url);
+
+        res.json({
+            count,
+            needsWarning: count > M3U_LARGE_THRESHOLD,
+            threshold: M3U_LARGE_THRESHOLD
+        });
+    } catch (err) {
+        console.error('Error estimating M3U size:', err);
+        res.status(500).json({ error: 'Failed to estimate playlist size', message: err.message });
+    }
+});
+
 // Get single source
 router.get('/:id', async (req, res) => {
     try {
@@ -53,6 +138,9 @@ router.get('/:id', async (req, res) => {
         if (!source) {
             return res.status(404).json({ error: 'Source not found' });
         }
+        if (!canUserAccessSource(req.user, source)) {
+            return res.status(403).json({ error: 'No access to this source' });
+        }
         res.json(source);
     } catch (err) {
         console.error('Error getting source:', err);
@@ -73,8 +161,15 @@ router.post('/', async (req, res) => {
             return res.status(400).json({ error: 'Invalid source type' });
         }
 
-        const source = await sources.create({ type, name, url, username, password });
+        let ownerId = null;
-        // Trigger Sync
+        if (isAdminRole(req.user)) {
+            ownerId = parseOwnerId(req.body);
+        } else {
+            const uid = req.user.id != null ? Number(req.user.id) : NaN;
+            ownerId = Number.isNaN(uid) ? null : uid;
+        }
+
+        const source = await sources.create({ type, name, url, username, password, ownerId });
         syncService.syncSource(source.id).catch(console.error);
         res.status(201).json(source);
     } catch (err) {
@@ -90,16 +185,23 @@ router.put('/:id', async (req, res) => {
         if (!existing) {
             return res.status(404).json({ error: 'Source not found' });
         }
+        if (!canUserAccessSource(req.user, existing)) {
+            return res.status(403).json({ error: 'No access to this source' });
+        }
 
         const { name, url, username, password } = req.body;
-        const updated = await sources.update(req.params.id, {
+        const updates = {
             name: name || existing.name,
             url: url || existing.url,
             username: username !== undefined ? username : existing.username,
             password: password !== undefined ? password : existing.password
-        });
+        };
-        // Trigger Sync (if critical fields changed? safely just trigger it)
+        if (isAdminRole(req.user) && req.body.ownerId !== undefined) {
-        syncService.syncSource(parseInt(req.params.id)).catch(console.error);
+            updates.ownerId = parseOwnerId(req.body);
+        }
+
+        const updated = await sources.update(req.params.id, updates);
+        syncService.syncSource(parseInt(req.params.id, 10)).catch(console.error);
         res.json(updated);
     } catch (err) {
         console.error('Error updating source:', err);
@@ -110,13 +212,15 @@ router.put('/:id', async (req, res) => {
 // Delete source
 router.delete('/:id', async (req, res) => {
     try {
-        const sourceId = parseInt(req.params.id);
+        const sourceId = parseInt(req.params.id, 10);
         const existing = await sources.getById(sourceId);
         if (!existing) {
             return res.status(404).json({ error: 'Source not found' });
         }
+        if (!canUserAccessSource(req.user, existing)) {
+            return res.status(403).json({ error: 'No access to this source' });
+        }
 
-        // Cascade delete: Clean up SQLite data for this source
         const db = getDb();
         const deleteCategories = db.prepare('DELETE FROM categories WHERE source_id = ?');
         const deleteItems = db.prepare('DELETE FROM playlist_items WHERE source_id = ?');
@@ -130,7 +234,6 @@ router.delete('/:id', async (req, res) => {
 
         console.log(`[Source] Cascade delete for source ${sourceId}: ${catResult.changes} categories, ${itemResult.changes} items, ${epgResult.changes} EPG programs`);
 
-        // Delete source config and related hidden items (favorites handled by db.js)
         await sources.delete(sourceId);
 
         res.json({ success: true });
@@ -143,14 +246,21 @@ router.delete('/:id', async (req, res) => {
 // Toggle source enabled/disabled
 router.post('/:id/toggle', async (req, res) => {
     try {
+        const existing = await sources.getById(req.params.id);
+        if (!existing) {
+            return res.status(404).json({ error: 'Source not found' });
+        }
+        if (!canUserAccessSource(req.user, existing)) {
+            return res.status(403).json({ error: 'No access to this source' });
+        }
+
         const updated = await sources.toggleEnabled(req.params.id);
         if (!updated) {
             return res.status(404).json({ error: 'Source not found' });
         }
 
-        // If enabled, trigger sync
         if (updated.enabled) {
-            syncService.syncSource(parseInt(req.params.id)).catch(console.error);
+            syncService.syncSource(parseInt(req.params.id, 10)).catch(console.error);
         }
 
         res.json(updated);
@@ -163,11 +273,13 @@ router.post('/:id/toggle', async (req, res) => {
 // Manual Sync
 router.post('/:id/sync', async (req, res) => {
     try {
-        const id = parseInt(req.params.id);
+        const id = parseInt(req.params.id, 10);
         const source = await sources.getById(id);
         if (!source) return res.status(404).json({ error: 'Source not found' });
+        if (!canUserAccessSource(req.user, source)) {
+            return res.status(403).json({ error: 'No access to this source' });
+        }
 
-        // Trigger sync (async)
         syncService.syncSource(id).catch(console.error);
 
         res.json({ success: true, message: 'Sync started' });
@@ -184,6 +296,9 @@ router.post('/:id/test', async (req, res) => {
         if (!source) {
             return res.status(404).json({ error: 'Source not found' });
         }
+        if (!canUserAccessSource(req.user, source)) {
+            return res.status(403).json({ error: 'No access to this source' });
+        }
 
         if (source.type === 'xtream') {
             const result = await xtreamApi.authenticate(source.url, source.username, source.password);
@@ -205,77 +320,4 @@ router.post('/:id/test', async (req, res) => {
     }
 });
 
-// Estimate M3U playlist size (for large playlist warning)
-const M3U_LARGE_THRESHOLD = 50000;
-
-// Estimate by URL (for new sources before creation)
-router.post('/estimate', async (req, res) => {
-    try {
-        const { url, type } = req.body;
-
-        if (!url) {
-            return res.status(400).json({ error: 'URL is required' });
-        }
-
-        // Only M3U sources need estimation
-        if (type !== 'm3u') {
-            return res.json({ count: 0, needsWarning: false, threshold: M3U_LARGE_THRESHOLD });
-        }
-
-        console.log(`[Sources] Estimating M3U size for URL...`);
-        const count = await m3uParser.countEntries(url);
-        console.log(`[Sources] M3U estimate: ${count} entries`);
-
-        res.json({
-            count,
-            needsWarning: count > M3U_LARGE_THRESHOLD,
-            threshold: M3U_LARGE_THRESHOLD
-        });
-    } catch (err) {
-        console.error('Error estimating M3U size:', err);
-        res.status(500).json({ error: 'Failed to estimate playlist size', message: err.message });
-    }
-});
-
-// Estimate by source ID (for existing sources)
-router.get('/:id/estimate', async (req, res) => {
-    try {
-        const source = await sources.getById(req.params.id);
-        if (!source) {
-            return res.status(404).json({ error: 'Source not found' });
-        }
-
-        // Only M3U sources need estimation
-        if (source.type !== 'm3u') {
-            return res.json({ count: 0, needsWarning: false, threshold: M3U_LARGE_THRESHOLD });
-        }
-
-        console.log(`[Sources] Estimating M3U size for ${source.name}...`);
-        const count = await m3uParser.countEntries(source.url);
-        console.log(`[Sources] M3U estimate: ${count} entries`);
-
-        res.json({
-            count,
-            needsWarning: count > M3U_LARGE_THRESHOLD,
-            threshold: M3U_LARGE_THRESHOLD
-        });
-    } catch (err) {
-        console.error('Error estimating M3U size:', err);
-        res.status(500).json({ error: 'Failed to estimate playlist size', message: err.message });
-    }
-});
-
-// Global Sync - sync all enabled sources
-router.post('/sync-all', async (req, res) => {
-    try {
-        // Trigger global sync (async - don't wait for completion)
-        syncService.syncAll().catch(console.error);
-        res.json({ success: true, message: 'Global sync started' });
-    } catch (err) {
-        console.error('Error starting global sync:', err);
-        res.status(500).json({ error: 'Failed to start global sync' });
-    }
-});
-
 module.exports = router;
-

server/routes/transcode.js

@@ -1,11 +1,39 @@
 const express = require('express');
 const router = express.Router();
-const { spawn } = require('child_process');
+const { spawn, execFile } = require('child_process');
 const path = require('path');
 const fs = require('fs').promises;
 const db = require('../db');
 const transcodeSession = require('../services/transcodeSession');
 
+/**
+ * Probe a stream URL with FFprobe to get its total duration in seconds.
+ * Times out quickly (8 s) so it doesn't block session creation for long.
+ */
+function probeDuration(url, ffprobePath, userAgent) {
+    return new Promise((resolve) => {
+        const args = [
+            '-v', 'quiet',
+            '-print_format', 'json',
+            '-show_entries', 'format=duration',
+            '-user_agent', userAgent || 'Mozilla/5.0',
+            '-probesize', '3000000',
+            '-analyzeduration', '2000000',
+            url
+        ];
+        const proc = execFile(ffprobePath || 'ffprobe', args, { timeout: 8000 }, (err, stdout) => {
+            if (err) { resolve(0); return; }
+            try {
+                const data = JSON.parse(stdout);
+                const dur = parseFloat(data?.format?.duration);
+                resolve(Number.isFinite(dur) && dur > 0 ? Math.round(dur) : 0);
+            } catch { resolve(0); }
+        });
+        // Ensure the process is killed if execFile timeout fires
+        proc.on('error', () => resolve(0));
+    });
+}
+
 /**
  * Transcode Routes
  * 
@@ -40,25 +68,28 @@ router.post('/session', async (req, res) => {
     const userAgent = db.getUserAgent(settings);
 
     try {
-        const session = await transcodeSession.createSession(url, {
+        const ffprobePath = (ffmpegPath || 'ffmpeg').replace(/ffmpeg$/, 'ffprobe');
+
+        // Probe duration and start session in parallel (don't block on duration)
+        const [session, durationSec] = await Promise.all([
+            transcodeSession.createSession(url, {
                 ffmpegPath,
                 userAgent,
                 seekOffset: seekOffset || 0,
                 hwEncoder: settings.hwEncoder || 'software',
                 maxResolution: settings.maxResolution || '1080p',
                 quality: settings.quality || 'medium',
-            audioMixPreset: settings.audioMixPreset || 'auto', // Audio downmix preset
+                audioMixPreset: settings.audioMixPreset || 'auto',
-            // Upscaling options
                 upscaleEnabled: settings.upscaleEnabled || false,
                 upscaleMethod: settings.upscaleMethod || 'hardware',
                 upscaleTarget: settings.upscaleTarget || '1080p',
-            videoMode: videoMode, // 'copy' or 'encode'
+                videoMode: videoMode,
-            videoCodec: videoCodec, // 'h264', 'hevc', etc.
+                videoCodec: videoCodec,
-            audioCodec: audioCodec, // 'aac', 'ac3', etc.
+                audioCodec: audioCodec,
-            audioChannels: audioChannels // number of channels (2=stereo)
+                audioChannels: audioChannels
-        });
+            }).then(async s => { await s.start(); return s; }),
-
+            probeDuration(url, ffprobePath, userAgent)
-        await session.start();
+        ]);
 
         // Wait for playlist to be ready (first segments generated)
         const ready = await session.waitForPlaylist(15000);
@@ -68,10 +99,13 @@ router.post('/session', async (req, res) => {
             return res.status(500).json({ error: 'Transcoding failed to start', reason: 'Playlist not generated in time' });
         }
 
+        console.log(`[Transcode] Session ${session.id} ready. Source duration: ${durationSec}s`);
+
         res.json({
             sessionId: session.id,
             playlistUrl: `/api/transcode/${session.id}/stream.m3u8`,
-            status: session.status
+            status: session.status,
+            durationSec: durationSec || 0
         });
 
     } catch (err) {
@@ -144,6 +178,30 @@ router.delete('/:sessionId', async (req, res) => {
     }
 });
 
+/**
+ * Heartbeat — keeps a session alive while the player is active.
+ * POST /api/transcode/:sessionId/heartbeat
+ */
+router.post('/:sessionId/heartbeat', (req, res) => {
+    const session = transcodeSession.getSession(req.params.sessionId);
+    if (!session) return res.status(404).json({ error: 'Session not found' });
+    session.lastAccess = Date.now();
+    res.json({ ok: true });
+});
+
+/**
+ * Stop session via POST (for sendBeacon on page close)
+ * POST /api/transcode/:sessionId/stop
+ */
+router.post('/:sessionId/stop', async (req, res) => {
+    try {
+        await transcodeSession.removeSession(req.params.sessionId);
+        res.json({ success: true });
+    } catch (err) {
+        res.status(500).json({ error: 'Failed to remove session', details: err.message });
+    }
+});
+
 /**
  * List all active sessions (for debugging)
  * GET /api/transcode/sessions

server/services/hwDetect.js

@@ -228,16 +228,18 @@ async function detect() {
         detectAMF()
     ]);
 
-    // Determine recommended encoder (priority: NVENC > AMF > QSV > VAAPI > Software)
+    // Determine recommended encoder
+    // On Linux: prefer VAAPI over QSV — VAAPI is more reliable in LXC containers
+    // (QSV may fail to initialize the MFX device even when /dev/dri is passed through)
     let recommended = 'software';
     if (nvidia.available) {
         recommended = 'nvenc';
     } else if (amf.available) {
         recommended = 'amf';
-    } else if (qsv.available) {
-        recommended = 'qsv';
     } else if (vaapi.available) {
         recommended = 'vaapi';
+    } else if (qsv.available) {
+        recommended = 'qsv';
     }
 
     hwCapabilities = {

server/services/transcodeSession.js

@@ -26,9 +26,9 @@ const sessions = new Map();
 const CACHE_DIR = path.join(process.cwd(), 'transcode-cache');
 
 // Session settings
-const SESSION_TIMEOUT_MS = 30 * 60 * 1000; // 30 minutes idle timeout
+const SESSION_TIMEOUT_MS = 3 * 60 * 1000; // 3 minutes idle timeout (kills orphaned sessions quickly)
 const SEGMENT_DURATION = 4; // seconds per HLS segment
-const CLEANUP_INTERVAL_MS = 5 * 60 * 1000; // Check every 5 minutes
+const CLEANUP_INTERVAL_MS = 60 * 1000; // Check every 60 seconds
 
 /**
  * Generate a unique session ID
@@ -222,7 +222,10 @@ class TranscodeSession extends EventEmitter {
             if (this.options.videoCodec === 'hevc' || this.options.videoCodec === 'h265') {
                 args.push('-bsf:v', 'hevc_mp4toannexb');
             } else if (this.options.videoCodec === 'h264' || this.options.videoCodec === 'avc') {
-                args.push('-bsf:v', 'h264_mp4toannexb');
+                // Keep Annex-B conversion and force parameter sets to be repeated.
+                // This helps players recover on streams where SPS/PPS appear sporadically,
+                // which often manifests as "audio OK, black video".
+                args.push('-bsf:v', 'h264_mp4toannexb,dump_extra');
             } else {
                 // Fallback (e.g. unknown codec), try strict extraction
                 args.push('-bsf:v', 'dump_extra');
@@ -551,6 +554,7 @@ class TranscodeSession extends EventEmitter {
 
     /**
      * Wait for playlist to be ready (with timeout)
+     * Fast-fails if FFmpeg exited with an error before the timeout.
      */
     async waitForPlaylist(timeoutMs = 10000) {
         const startTime = Date.now();
@@ -558,6 +562,11 @@ class TranscodeSession extends EventEmitter {
             if (await this.isPlaylistReady()) {
                 return true;
             }
+            // Fast-fail: FFmpeg already exited with an error — no point waiting
+            if (this.status === 'error' && !this.process) {
+                console.log(`[TranscodeSession ${this.id}] Fast-fail: FFmpeg exited with error, aborting wait`);
+                return false;
+            }
             await new Promise(resolve => setTimeout(resolve, 200));
         }
         return false;

server/sourceAccess.js

@@ -0,0 +1,46 @@
+const { isAdminRole } = require('./auth');
+
+/**
+ * Who may use a source for playback and API access.
+ * ownerId null/undefined: legacy shared — any authenticated user may use it.
+ * ownerId N: only that user id (and admins) may use it.
+ */
+function canUserAccessSource(user, source) {
+  if (!user || !source) return false;
+  if (isAdminRole(user)) return true;
+  const oid = source.ownerId;
+  if (oid == null || oid === undefined) return true;
+  const uid = user.id != null ? Number(user.id) : NaN;
+  const oidN = Number(oid);
+  return !Number.isNaN(uid) && !Number.isNaN(oidN) && oidN === uid;
+}
+
+async function getAccessibleSourceIds(req, sourcesApi) {
+  const all = await sourcesApi.getAll();
+  return all.filter((s) => canUserAccessSource(req.user, s)).map((s) => s.id);
+}
+
+/** Returns false after sending res if missing, forbidden, or invalid. */
+async function assertCanUseSourceById(req, res, sourcesApi, rawSourceId) {
+  const sid = typeof rawSourceId === 'number' ? rawSourceId : parseInt(rawSourceId, 10);
+  if (Number.isNaN(sid)) {
+    res.status(400).json({ error: 'Invalid source id' });
+    return false;
+  }
+  const source = await sourcesApi.getById(sid);
+  if (!source) {
+    res.status(404).json({ error: 'Source not found' });
+    return false;
+  }
+  if (!canUserAccessSource(req.user, source)) {
+    res.status(403).json({ error: 'No access to this source' });
+    return false;
+  }
+  return true;
+}
+
+module.exports = {
+  canUserAccessSource,
+  getAccessibleSourceIds,
+  assertCanUseSourceById
+};