Fix VTV: prevent double-load + add EPG support

static/yt_live.js

@@ -20,13 +20,13 @@
     {id:'vtvprime', name:'VTVPrime',     badge:'Prime'},
   ];
 
-  // fptplay URLs that need proxying (can't play directly due to hotlink protection)
   const NEEDS_PROXY = /fptplay\.net/;
-
   const STREAMS = {};
   let _currentCh = null;
   let _hls = null;
   let _loading = false;
+  let _blockInserted = false;
+  let _streamsLoaded = false;
 
   const s = document.createElement('style');
   s.textContent = `
@@ -48,6 +48,18 @@
   .vtv-load{display:flex;align-items:center;justify-content:center;height:180px;color:#00ccff;font-size:12px;flex-direction:column;gap:8px}
   .vtv-spinner{width:24px;height:24px;border:2px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite}
   @keyframes vtvspin{to{transform:rotate(360deg)}}
+  .vtv-epg{margin:0;padding:6px 10px;background:#0a1628;border-top:1px solid #1a2a3a}
+  .vtv-epg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
+  .vtv-epg-title{font-size:10px;font-weight:700;color:#00ccff}
+  .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.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}
   `;
   document.head.appendChild(s);
 
@@ -56,7 +68,6 @@
     _loading = true;
     const loadEl = document.getElementById('vtv-load');
     if(loadEl) loadEl.innerHTML = '<div class="vtv-spinner"></div>Đang tải danh sách kênh...';
-
     try {
       const r = await fetch('/api/vtv/streams', {signal: AbortSignal.timeout(10000)});
       if(r.ok){
@@ -65,7 +76,6 @@
           const info = data[ch.id];
           if(info && info.stream_url){
             let url = info.stream_url;
-            // If it's a fptplay URL, route through our proxy
             if(NEEDS_PROXY.test(url)){
               url = '/api/proxy/m3u8/vtv?url=' + encodeURIComponent(url);
             }
@@ -78,8 +88,6 @@
     } catch(e) {
       console.warn('VTV API error:', e);
     }
-
-    // Update UI tabs
     CHANNELS.forEach(ch => {
       const tab = document.getElementById('vtvt-'+ch.id);
       if(tab){
@@ -93,6 +101,7 @@
       }
     });
     _loading = false;
+    _streamsLoaded = true;
   }
 
   function buildBlock(){
@@ -110,22 +119,73 @@
         '<div class="vtv-load" id="vtv-load"><div class="vtv-spinner"></div>Đang tải danh sách kênh...</div>' +
         '<video id="vtv-player" playsinline muted controls preload="auto" style="display:none"></video>' +
         '<div class="vtv-err" id="vtv-err" style="display:none"><span id="vtv-err-msg">Không thể tải kênh</span><button onclick="window._vtvRetry()">Thử lại</button></div>' +
+      '</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>';
     return w;
   }
 
+  async function loadEpg(chId){
+    const epgList = document.getElementById('vtv-epg-list');
+    if(!epgList) return;
+    try {
+      const r = await fetch('/api/vtv/epg/' + chId, {signal: AbortSignal.timeout(8000)});
+      if(!r.ok) throw new Error('EPG fetch failed');
+      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>';
+        return;
+      }
+      let h = '';
+      programs.forEach(p => {
+        const isNow = p.now ? ' now' : '';
+        h += '<div class="vtv-epg-item' + isNow + '" title="' + (p.title || '') + '">';
+        h += '<span class="epg-t">' + (p.time || '') + '</span> ';
+        h += '<span class="epg-n">' + (p.title || '') + '</span>';
+        h += '</div>';
+      });
+      epgList.innerHTML = h;
+    } catch(e) {
+      if(epgList) epgList.innerHTML = '<span style="color:#666;font-size:9px;padding:4px">Không tải được EPG</span>';
+    }
+  }
+
+  window._vtvToggleEpg = function(){
+    const list = document.getElementById('vtv-epg-list');
+    const btn = document.getElementById('vtv-epg-toggle');
+    if(!list || !btn) return;
+    if(list.style.display === 'none'){
+      list.style.display = 'flex';
+      btn.textContent = 'Ẩn';
+    } else {
+      list.style.display = 'none';
+      btn.textContent = 'Hiện';
+    }
+  };
+
   function pinBlock(){
     const h = document.getElementById('view-home');
-    if(!h || document.getElementById('vtv-block')) return;
-    h.insertBefore(buildBlock(), h.firstChild);
-    loadAllStreams().then(() => {
-      for(const ch of CHANNELS){
-        if(STREAMS[ch.id] && STREAMS[ch.id].length > 0){
-          setTimeout(() => window._vtvPlay(ch.id), 300);
-          break;
+    if(!h) return;
+    if(document.getElementById('vtv-block')){
+      _blockInserted = true;
+      return;
+    }
+    const block = buildBlock();
+    h.insertBefore(block, h.firstChild);
+    _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;
+          }
         }
-      }
-    });
+      });
+    }
   }
 
   window._vtvRetry = function(){
@@ -160,6 +220,7 @@
       return;
     }
     _tryPlay(video, urls, 0, ch.name, loadEl, errEl, errMsg);
+    loadEpg(chId);
   };
 
   function _tryPlay(video, urls, idx, name, loadEl, errEl, errMsg){
@@ -232,15 +293,19 @@
     }
   }
 
+  // FIX: Only wrap loadHome, no DOMContentLoaded path.
+  // This ensures pinBlock runs exactly once after loadHome completes.
   const orig = window.loadHome;
   if(orig && !orig.__vtvWrapped){
     window.loadHome = async function(){
+      // Remove old VTV block before loadHome replaces innerHTML
+      const oldBlock = document.getElementById('vtv-block');
+      if(oldBlock) oldBlock.remove();
+      _blockInserted = false;
       const r = await orig.apply(this, arguments);
       try{ pinBlock(); }catch(e){}
       return r;
     };
     window.loadHome.__vtvWrapped = true;
   }
-  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => setTimeout(pinBlock, 500));
-  else setTimeout(pinBlock, 500);
 })();