Fix VTV: load 1 lần + EPG UI + HLS stability

static/yt_live.js

@@ -1,10 +1,12 @@
-// === VNEWS — VTV1-VTV10 + VTVPrime LIVE CHANNELS ===
+// === VNEWS — VTV1-VTV10 + VTVPrime LIVE CHANNELS + EPG ===
 // Uses backend /api/vtv/streams for stream URLs
-// VTV1-VTV5,VTV7-VTV9: VTVGo failover | VTV6,VTV10: xemtv.net scraping
+// Uses backend /api/vtv/epg/{channel_id} for EPG schedule
+// FIX: Load only once, no double-load
 
 (function(){
-  if(window._ytLiveLoaded) return;
-  window._ytLiveLoaded = true;
+  // Strict single-load guard
+  if(window._vtvLoaded) return;
+  window._vtvLoaded = true;
 
   const CHANNELS = [
     {id:'vtv1',     name:'VTV1',         badge:'Tin tức'},
@@ -20,14 +22,15 @@
     {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 _epgVisible = true;
+  let _epgData = {};
 
+  // Inject CSS once
   const s = document.createElement('style');
   s.textContent = `
   .vtv-wrap{margin:6px 4px;background:#111;border:1px solid #0066cc;border-radius:10px;overflow:hidden}
@@ -48,9 +51,56 @@
   .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{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;cursor:default}
+  .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);
 
+  function buildEPGHTML(chId){
+    const schedule = _epgData[chId] || [];
+    if(!schedule.length){
+      return '<div class="vtv-epg"><div class="vtv-epg-title">📋 Lịch phát sóng: Đang tải...</div></div>';
+    }
+    let items = '';
+    schedule.forEach(item => {
+      const cls = item.is_now ? ' now' : '';
+      items += `<div class="vtv-epg-item${cls}"><span class="epg-t">${item.time}</span> <span class="epg-n">${item.name}</span></div>`;
+    });
+    return `<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" onclick="window._vtvToggleEPG()">Ẩn/Hiện</button></div>' +
+      '<div class="vtv-epg-list" id="vtv-epg-list">' + items + '</div></div>';
+  }
+
+  window._vtvToggleEPG = function(){
+    _epgVisible = !_epgVisible;
+    const list = document.getElementById('vtv-epg-list');
+    if(list) list.style.display = _epgVisible ? 'flex' : 'none';
+  };
+
+  async function loadEPG(chId){
+    try {
+      const r = await fetch(`/api/vtv/epg/${chId}`, {signal: AbortSignal.timeout(5000)});
+      if(r.ok){
+        const data = await r.json();
+        _epgData[chId] = data.schedule || [];
+      }
+    } catch(e) {
+      console.warn('EPG fetch failed:', e);
+      _epgData[chId] = [];
+    }
+  }
+
   async function loadAllStreams(){
     if(_loading) return;
     _loading = true;
@@ -65,7 +115,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);
             }
@@ -79,7 +128,6 @@
       console.warn('VTV API error:', e);
     }
 
-    // Update UI tabs
     CHANNELS.forEach(ch => {
       const tab = document.getElementById('vtvt-'+ch.id);
       if(tab){
@@ -114,6 +162,7 @@
     return w;
   }
 
+  // ===== PIN BLOCK — called only once =====
   function pinBlock(){
     const h = document.getElementById('view-home');
     if(!h || document.getElementById('vtv-block')) return;
@@ -132,7 +181,7 @@
     if(_currentCh) window._vtvPlay(_currentCh);
   };
 
-  window._vtvPlay = function(chId){
+  window._vtvPlay = async function(chId){
     const ch = CHANNELS.find(c => c.id === chId);
     if(!ch) return;
     _currentCh = chId;
@@ -159,6 +208,18 @@
       }
       return;
     }
+
+    // Load EPG for this channel
+    await loadEPG(chId);
+    const epgEl = document.getElementById('vtv-epg');
+    if(epgEl) epgEl.remove();
+    const frame = document.querySelector('.vtv-frame');
+    if(frame){
+      const epgDiv = document.createElement('div');
+      epgDiv.innerHTML = buildEPGHTML(chId);
+      frame.appendChild(epgDiv.firstElementChild);
+    }
+
     _tryPlay(video, urls, 0, ch.name, loadEl, errEl, errMsg);
   };
 
@@ -175,10 +236,14 @@
     if(typeof Hls !== 'undefined' && Hls.isSupported()){
       const hls = new Hls({
         enableWorker: true,
-        lowLatencyMode: true,
+        lowLatencyMode: false,
         startLevel: -1,
         capLevelToPlayerSize: true,
-        maxBufferLength: 20,
+        maxBufferLength: 60,
+        backBufferLength: 30,
+        maxBufferHole: 0.5,
+        nudgeOffset: 0.1,
+        fragLoadingMaxRetry: 6,
         xhrSetup: function(xhr, url){
           if(url.includes('fptplay')){
             xhr.setRequestHeader('Referer', 'https://fptplay.vn/');
@@ -232,6 +297,7 @@
     }
   }
 
+  // ===== ONLY wrap loadHome — NO DOMContentLoaded listener =====
   const orig = window.loadHome;
   if(orig && !orig.__vtvWrapped){
     window.loadHome = async function(){
@@ -241,6 +307,4 @@
     };
     window.loadHome.__vtvWrapped = true;
   }
-  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => setTimeout(pinBlock, 500));
-  else setTimeout(pinBlock, 500);
-})();
+})();