Upload static/vtv_init.js

static/vtv_init.js

@@ -1,4 +1,4 @@
-// ===== VNEWS VTV Player v4 - ALWAYS proxy stream URLs + fix CSS =====
+// ===== VNEWS VTV Player v5 - uses yt_live.js CSS + EPG =====
 (function() {
   if (window._vtvInitLoaded) return;
   window._vtvInitLoaded = true;
@@ -15,26 +15,85 @@
   var _hlsInst = null;
   var _currentCh = null;
 
-  // ===== Inject minimal CSS (fix conflicts with yt_live.js styles) =====
+  // ===== Minimal fix CSS (does NOT override yt_live.js classes) =====
   (function injectCSS() {
     if (document.getElementById('vtv-init-css')) return;
     var style = document.createElement('style');
     style.id = 'vtv-init-css';
     style.textContent = 
-      '#vtv-player-section{display:block !important;position:relative;margin:6px 4px;background:#111;border:1px solid #06c;border-radius:10px;overflow:hidden}' +
-      '#vtv-player-section .vtwrap-inner{width:100%}' +
-      '#vtv-player-section .vtv-tab{cursor:pointer !important}' +
-      '#vtv-player-section video{width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;object-fit:contain;position:absolute;inset:0}';
+      '#vtv-player-section{display:block !important;}' +
+      '#vtv-player-section .vtv-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;min-height:180px}' +
+      '#vtv-player-section .vtv-frame video{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:contain}' +
+      '#vtv-player-section .vtv-epg-toggle{margin-left:auto}' +
+      '.vtv-tab{cursor:pointer !important}' +
+      '.vtv-tab.on{opacity:1 !important}' +
+      '.vtv-tab.off{opacity:.35 !important}' +
+      '.vtv-load{display:flex;align-items:center;justify-content:center;height:180px;color:#0cc;font-size:12px;flex-direction:column;gap:8px}' +
+      '.vtv-err{display:flex;align-items:center;justify-content:center;min-height:180px;color:#888;font-size:12px;text-align:center;padding:20px;flex-direction:column;gap:8px}' +
+      '.vtv-err button{background:#06c;border:none;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer}' +
+      '.vtv-err button:hover{background:#08e}' +
+      '.vtv-live-tag{font-size:10px;font-weight:800;color:#0cf;animation:vtvp 1.3s infinite;margin-left:6px}' +
+      // EPG styles (complementing yt_live.js which already has .vtv-epg* styles)
+      '';
     document.head.appendChild(style);
   })();
 
   function proxyUrl(url) {
-    // Always proxy all stream URLs to avoid CORS
+    if (!url) return url;
     if (url.indexOf(location.origin) === 0) return url;
     if (url.indexOf('/api/proxy/') === 0) return url;
     return '/api/proxy/m3u8/vtv?url=' + encodeURIComponent(url);
   }
 
+  // ===== EPG =====
+  var _epgData = null;
+
+  function loadEPG(chId) {
+    var epgEl = document.getElementById('vtv-epg-body');
+    if (!epgEl) return;
+    epgEl.innerHTML = '<div class="vtv-epg-loading"><div class="vtv-epg-sp"></div>Đang tải lịch...</div>';
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', '/api/vtv/epg/' + chId, true);
+    xhr.timeout = 10000;
+    xhr.onload = function() {
+      try {
+        var data = JSON.parse(xhr.responseText);
+        _epgData = data.programs || [];
+        renderEPG(epgEl);
+      } catch(e) {
+        epgEl.innerHTML = '<div class="vtv-epg-empty">Không có lịch phát sóng</div>';
+      }
+    };
+    xhr.onerror = function() {
+      epgEl.innerHTML = '<div class="vtv-epg-empty">Không tải được lịch phát sóng</div>';
+    };
+    xhr.ontimeout = function() {
+      epgEl.innerHTML = '<div class="vtv-epg-empty">Hết thời gian tải</div>';
+    };
+    xhr.send();
+  }
+
+  function renderEPG(epgEl) {
+    if (!_epgData || !_epgData.length) {
+      epgEl.innerHTML = '<div class="vtv-epg-empty">Không có lịch phát sóng</div>';
+      return;
+    }
+    var html = '';
+    for (var i = 0; i < _epgData.length; i++) {
+      var p = _epgData[i];
+      var cls = 'vtv-epg-item' + (p.now ? ' now' : '');
+      var extra = '';
+      if (p.now && p.end_time) {
+        extra = ' &ndash; ' + p.end_time;
+      }
+      html += '<div class="' + cls + '">' +
+        '<span class="t">' + p.time + extra + '</span>' +
+        ' <span class="n">' + p.title + '</span>' +
+        '</div>';
+    }
+    epgEl.innerHTML = html;
+  }
+
   window._vtvSwitch = function(chId) {
     if (_hlsInst) { try { _hlsInst.destroy(); } catch(e){} _hlsInst = null; }
     _currentCh = chId;
@@ -44,9 +103,23 @@
       tabs[i].className = 'vtv-tab' + (tabs[i].getAttribute('data-ch') === chId ? ' on' : ' off');
     }
 
+    // Update EPG header channel name
+    var epgTitle = document.getElementById('vtv-epg-ch-name');
+    if (epgTitle) {
+      for (var j = 0; j < CHANNELS.length; j++) {
+        if (CHANNELS[j].id === chId) {
+          epgTitle.textContent = CHANNELS[j].name + ' - Lịch phát sóng';
+          break;
+        }
+      }
+    }
+
     var frame = document.getElementById('vtv-frame');
     if (!frame) return;
-    frame.innerHTML = '<div class="vtv-load" style="display:flex;align-items:center;justify-content:center;min-height:180px;color:#0cf;font-size:12px;flex-direction:column;gap:8px"><div style="width:24px;height:24px;border:2px solid #333;border-top-color:#0cf;border-radius:50%;animation:vtvspin .8s linear infinite"></div><span>Đang tải ' + chId.toUpperCase() + '...</span></div>';
+    frame.innerHTML = '<div class="vtv-load"><div class="vtv-spinner"></div><span>Đang tải ' + chId.toUpperCase() + '...</span></div>';
+
+    // Load EPG
+    loadEPG(chId);
 
     var xhr = new XMLHttpRequest();
     xhr.open('GET', '/api/vtv/stream/' + chId, true);
@@ -56,17 +129,17 @@
         var data = JSON.parse(xhr.responseText);
         var url = data.stream_url;
         if (!url) {
-          frame.innerHTML = '<div class="vtv-err" style="display:flex;align-items:center;justify-content:center;min-height:180px;color:#888;font-size:12px;text-align:center;padding:20px;flex-direction:column;gap:8px"><span style="color:#e74c3c;font-size:24px">⚠️</span><span>Kênh đang tạm ngắt</span><button onclick="_vtvSwitch(\''+chId+'\')" style="background:#06c;border:0;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer">🔄 Thử lại</button></div>';
+          frame.innerHTML = '<div class="vtv-err"><span style="color:#e74c3c;font-size:24px">⚠️</span><span>Kênh đang tạm ngắt</span><button onclick="_vtvSwitch(\''+chId+'\')">🔄 Thử lại</button></div>';
           return;
         }
         url = proxyUrl(url);
-        playStream(url, frame);
+        playStream(url, frame, chId);
       } catch(e) {
-        frame.innerHTML = '<div class="vtv-err" style="display:flex;align-items:center;justify-content:center;min-height:180px;color:#888;padding:20px;flex-direction:column;gap:8px"><span style="color:#e74c3c">⚠️ Lỗi dữ liệu</span><button onclick="_vtvSwitch(\''+chId+'\')" style="background:#06c;border:0;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer">Thử lại</button></div>';
+        frame.innerHTML = '<div class="vtv-err"><span style="color:#e74c3c">⚠️ Lỗi dữ liệu</span><button onclick="_vtvSwitch(\''+chId+'\')">Thử lại</button></div>';
       }
     };
     xhr.onerror = xhr.ontimeout = function() {
-      frame.innerHTML = '<div class="vtv-err" style="display:flex;align-items:center;justify-content:center;min-height:180px;color:#888;padding:20px;flex-direction:column;gap:8px"><span style="color:#e74c3c">⚠️ Mất kết nối</span><button onclick="_vtvSwitch(\''+chId+'\')" style="background:#06c;border:0;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer">Thử lại</button></div>';
+      frame.innerHTML = '<div class="vtv-err"><span style="color:#e74c3c">⚠️ Mất kết nối</span><button onclick="_vtvSwitch(\''+chId+'\')">Thử lại</button></div>';
     };
     xhr.send();
   };
@@ -74,14 +147,13 @@
   function playStream(url, frame) {
     var video = document.createElement('video');
     video.id = 'vtv-video';
-    video.style.cssText = 'width:100% !important;height:100% !important;position:absolute;inset:0;object-fit:contain';
+    video.style.cssText = 'width:100%;height:100%;object-fit:contain';
     video.setAttribute('controls', '');
     video.setAttribute('autoplay', '');
     video.setAttribute('playsinline', '');
     frame.innerHTML = '';
     frame.appendChild(video);
 
-    // Try HLS.js first
     if (typeof Hls !== 'undefined' && Hls.isSupported()) {
       var hls = new Hls({ debug: false });
       hls.loadSource(url);
@@ -92,14 +164,14 @@
       hls.on(Hls.Events.ERROR, function(ev, data) {
         if (data.fatal) {
           hls.destroy();
-          frame.innerHTML = '<div class="vtv-err" style="display:flex;align-items:center;justify-content:center;min-height:180px;color:#888;padding:20px;flex-direction:column;gap:8px"><span style="color:#e74c3c">⚠️ Lỗi phát</span><button onclick="_vtvSwitch(\''+_currentCh+'\')" style="background:#06c;border:0;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer">🔄 Thử lại sau 3s</button></div>';
+          frame.innerHTML = '<div class="vtv-err"><span style="color:#e74c3c">⚠️ Lỗi phát</span><button onclick="_vtvSwitch(\''+_currentCh+'\')">🔄 Thử lại</button></div>';
         }
       });
       _hlsInst = hls;
     } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
       video.src = url;
     } else {
-      frame.innerHTML = '<div class="vtv-err" style="display:flex;align-items:center;justify-content:center;min-height:180px;color:#888;padding:20px;flex-direction:column;gap:8px"><span>⚠️ Trình duyệt không hỗ trợ HLS</span></div>';
+      frame.innerHTML = '<div class="vtv-err"><span>⚠️ Trình duyệt không hỗ trợ HLS</span></div>';
     }
   }
 
@@ -109,14 +181,24 @@
       tabs += '<span class="vtv-tab off" data-ch="'+CHANNELS[i].id+'" onclick="_vtvSwitch(\''+CHANNELS[i].id+'\')">'+CHANNELS[i].name+'</span>';
     }
     return '<div class="vtv-wrap" id="vtv-player-section">' +
-      '<div class="vtv-head" style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(90deg,#036,#1a1a1a)">' +
-      '<span class="vtv-title" style="font-size:13px;font-weight:800;color:#0cf">📺 VTV Player</span>' +
-      '<span class="vtv-badge" style="font-size:10px;font-weight:800;color:#0cf;animation:vtvp 1.3s infinite">● LIVE</span></div>' +
-      '<div class="vtv-tabs" style="display:flex;flex-wrap:wrap;gap:3px;padding:6px 8px;overflow-x:auto;background:#0d1a2a">'+tabs+'</div>' +
-      '<div class="vtv-frame" id="vtv-frame" style="position:relative;width:100%;aspect-ratio:16/9;background:#000;min-height:180px">' +
-      '<div class="vtv-load" style="display:flex;align-items:center;justify-content:center;min-height:180px;color:#0cf;font-size:12px;flex-direction:column;gap:8px">' +
-      '<div style="width:24px;height:24px;border:2px solid #333;border-top-color:#0cf;border-radius:50%;animation:vtvspin .8s linear infinite"></div>' +
-      '<span>📺 Chọn kênh để xem</span></div></div></div>';
+      '<div class="vtv-head">' +
+      '<span class="vtv-title">📺 VTV Player</span>' +
+      '<span class="vtv-badge">● LIVE</span>' +
+      '</div>' +
+      '<div class="vtv-tabs">'+tabs+'</div>' +
+      '<div class="vtv-frame" id="vtv-frame">' +
+      '<div class="vtv-load"><div class="vtv-spinner"></div><span>📺 Chọn kênh để xem</span></div>' +
+      '</div>' +
+      // EPG section
+      '<div class="vtv-epg" id="vtv-epg-section">' +
+      '<div class="vtv-epg-header">' +
+      '<span class="vtv-epg-title" id="vtv-epg-ch-name">Lịch phát sóng</span>' +
+      '</div>' +
+      '<div class="vtv-epg-list" id="vtv-epg-body">' +
+      '<div class="vtv-epg-empty">Chọn kênh để xem lịch phát sóng</div>' +
+      '</div>' +
+      '</div>' +
+      '</div>';
   }
 
   function inject() {