Upload static/yt_live.js

static/yt_live.js

@@ -1,6 +1,7 @@
 // === VNEWS — VTV1-VTV10 + VTVPrime LIVE CHANNELS ===
 // Uses backend /api/vtv/streams for stream URLs
 // VTV1-VTV5,VTV7-VTV9: VTVGo failover | VTV6,VTV10: xemtv.net scraping
+// Default channel: VTV6
 
 (function(){
   if(window._ytLiveLoaded) return;
@@ -20,6 +21,9 @@
     {id:'vtvprime', name:'VTVPrime',     badge:'Prime'},
   ];
 
+  // Default channel is VTV6
+  const DEFAULT_CHANNEL = 'vtv6';
+
   const NEEDS_PROXY = /fptplay\.net/;
   const STREAMS = {};
   let _currentCh = null;
@@ -54,12 +58,16 @@
   .vtv-epg-toggle{background:none;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:2px 8px;border-radius:6px;cursor:pointer}
   .vtv-epg-list{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
   .vtv-epg-list::-webkit-scrollbar{display:none}
-  .vtv-epg-item{flex:0 0 auto;padding:3px 6px;background:#1a2a3a;border-radius:4px;font-size:8px;color:#8ab4d8;white-space:nowrap}
+  .vtv-epg-item{flex:0 0 auto;padding:3px 6px;background:#1a2a3a;border-radius:4px;font-size:8px;color:#8ab4d8;white-space:nowrap;cursor:pointer;transition:all .2s}
+  .vtv-epg-item:hover{background:#2a4a6a}
   .vtv-epg-item.now{background:#0066cc;color:#fff;font-weight:700}
   .vtv-epg-item .epg-t{font-size:7px;color:#6a8aaa}
   .vtv-epg-item.now .epg-t{color:#aaccee}
   .vtv-epg-item .epg-n{color:#ccc;font-size:8px}
   .vtv-epg-item.now .epg-n{color:#fff}
+  .vtv-epg-empty{color:#666;font-size:9px;padding:4px}
+  .vtv-epg-loading{color:#00ccff;font-size:9px;padding:4px;display:flex;align-items:center;gap:6px}
+  .vtv-epg-spinner{width:10px;height:10px;border:1px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite}
   `;
   document.head.appendChild(s);
 
@@ -122,7 +130,7 @@
       '</div>' +
       '<div class="vtv-epg" id="vtv-epg">' +
         '<div class="vtv-epg-header"><span class="vtv-epg-title">📋 Lịch phát sóng</span><button class="vtv-epg-toggle" id="vtv-epg-toggle" onclick="window._vtvToggleEpg()">Ẩn</button></div>' +
-        '<div class="vtv-epg-list" id="vtv-epg-list"><span style="color:#666;font-size:9px;padding:4px">Đang tải EPG...</span></div>' +
+        '<div class="vtv-epg-list" id="vtv-epg-list"><div class="vtv-epg-loading"><div class="vtv-epg-spinner"></div>Đang tải EPG...</div></div>' +
       '</div>';
     return w;
   }
@@ -130,28 +138,46 @@
   async function loadEpg(chId){
     const epgList = document.getElementById('vtv-epg-list');
     if(!epgList) return;
+    
+    // Show loading state
+    epgList.innerHTML = '<div class="vtv-epg-loading"><div class="vtv-epg-spinner"></div>Đang tải lịch phát sóng...</div>';
+    
     try {
-      const r = await fetch('/api/vtv/epg/' + chId, {signal: AbortSignal.timeout(8000)});
-      if(!r.ok) throw new Error('EPG fetch failed');
+      const r = await fetch('/api/vtv/epg/' + chId, {signal: AbortSignal.timeout(10000)});
+      if(!r.ok) throw new Error('EPG fetch failed: ' + r.status);
       const data = await r.json();
       const programs = data.programs || [];
+      
       if(programs.length === 0){
-        epgList.innerHTML = '<span style="color:#666;font-size:9px;padding:4px">Chưa có lịch phát sóng</span>';
+        epgList.innerHTML = '<div class="vtv-epg-empty">Chưa có lịch phát sóng cho kênh này</div>';
         return;
       }
+      
       let h = '';
       programs.forEach(p => {
         const isNow = p.now ? ' now' : '';
-        h += '<div class="vtv-epg-item' + isNow + '" title="' + (p.title || '') + '">';
+        const desc = p.description ? ' title="' + escAttr(p.description) + '"' : '';
+        h += '<div class="vtv-epg-item' + isNow + '"' + desc + '>';
         h += '<span class="epg-t">' + (p.time || '') + '</span> ';
         h += '<span class="epg-n">' + (p.title || '') + '</span>';
         h += '</div>';
       });
       epgList.innerHTML = h;
+      
+      // Scroll to current program
+      const nowItem = epgList.querySelector('.vtv-epg-item.now');
+      if(nowItem){
+        nowItem.scrollIntoView({behavior: 'smooth', inline: 'center', block: 'nearest'});
+      }
     } catch(e) {
-      if(epgList) epgList.innerHTML = '<span style="color:#666;font-size:9px;padding:4px">Không tải được EPG</span>';
+      console.warn('EPG load error:', e);
+      if(epgList) epgList.innerHTML = '<div class="vtv-epg-empty">Không tải được lịch phát sóng</div>';
     }
   }
+  
+  function escAttr(s){
+    return String(s || '').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  }
 
   window._vtvToggleEpg = function(){
     const list = document.getElementById('vtv-epg-list');
@@ -178,12 +204,8 @@
     _blockInserted = true;
     if(!_streamsLoaded){
       loadAllStreams().then(() => {
-        for(const ch of CHANNELS){
-          if(STREAMS[ch.id] && STREAMS[ch.id].length > 0){
-            setTimeout(() => window._vtvPlay(ch.id), 300);
-            break;
-          }
-        }
+        // Auto-play VTV6 as default channel
+        setTimeout(() => window._vtvPlay(DEFAULT_CHANNEL), 300);
       });
     }
   }
@@ -293,8 +315,7 @@
     }
   }
 
-  // FIX: Only wrap loadHome, no DOMContentLoaded path.
-  // This ensures pinBlock runs exactly once after loadHome completes.
+  // Wrap loadHome to inject VTV block
   const orig = window.loadHome;
   if(orig && !orig.__vtvWrapped){
     window.loadHome = async function(){
@@ -308,4 +329,4 @@
     };
     window.loadHome.__vtvWrapped = true;
   }
-})();
+})();