Upload static/vtv_init.js

static/vtv_init.js

@@ -0,0 +1,255 @@
+// ===== VNEWS VTV Player v11 — SV2 iframe + HLS.js native player toggle =====
+(function() {
+  if (window._vtvInitLoaded) return;
+  window._vtvInitLoaded = true;
+
+  var CHANNELS = [
+    {id:'vtv1',name:'VTV1',badge:'Tin tức'},{id:'vtv2',name:'VTV2',badge:'Khoa học'},
+    {id:'vtv3',name:'VTV3',badge:'Giải trí'},{id:'vtv4',name:'VTV4',badge:'Quốc Tế'},
+    {id:'vtv5',name:'VTV5',badge:'Miền Nam'},{id:'vtv6',name:'VTV6',badge:'Thanh Niên'},
+    {id:'vtv7',name:'VTV7',badge:'Giáo Dục'},{id:'vtv8',name:'VTV8',badge:'Miền Trung'},
+    {id:'vtv9',name:'VTV9',badge:'Miền Bắc'},{id:'vtv10',name:'VTV10',badge:'Cần Thơ'},
+    {id:'vtvprime',name:'VTVPrime',badge:'Prime'},
+  ];
+
+  var _currentCh = null;
+  var _epgTimer = null;
+  var _epgData = [];
+  var _timeTimer = null;
+  var _serverDate = '';
+  var _nativeMode = false;
+  var _hls = null;
+
+  (function injectCSS() {
+    if (document.getElementById('vtv-pro-css')) return;
+    var s = document.createElement('style');
+    s.id = 'vtv-pro-css';
+    s.textContent = [
+      '#vtv-player-section{display:block!important;margin:8px 0 10px;background:linear-gradient(180deg,#0a0e17,#111622);border:1px solid rgba(0,150,255,.15);border-radius:14px;overflow:hidden}',
+      '#vtv-player-section .vtv-pro-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(90deg,#0a1628,rgba(0,102,204,.08))}',
+      '#vtv-player-section .vtv-pro-logo{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#0066cc,#00ccff);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:800;flex-shrink:0}',
+      '#vtv-player-section .vtv-pro-title{font-size:13px;font-weight:700;color:#e8eaed}',
+      '#vtv-player-section .vtv-pro-live{font-size:9px;font-weight:700;color:#00cc88;background:rgba(0,204,136,.12);padding:2px 8px;border-radius:10px;display:flex;align-items:center;gap:4px;margin-left:auto}',
+      '#vtv-player-section .vtv-pro-live-dot{width:5px;height:5px;border-radius:50%;background:#00cc88;animation:vtv-pro-pulse 1.2s infinite}',
+      '@keyframes vtv-pro-pulse{0%,100%{opacity:1}50%{opacity:.3}}',
+      '#vtv-player-section .vtv-pro-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:6px 10px 8px;overflow-x:auto;scrollbar-width:none}',
+      '#vtv-player-section .vtv-pro-tab{padding:5px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;color:#9aa0a6;font-size:10px;cursor:pointer;white-space:nowrap;flex-shrink:0}',
+      '#vtv-player-section .vtv-pro-tab.on{background:rgba(0,102,204,.2);border-color:#0066cc;color:#fff;font-weight:600}',
+      '#vtv-player-section .vtv-pro-tab .b{font-size:7px;opacity:.5;display:block;margin-top:1px}',
+      '#vtv-player-section .vtv-pro-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;min-height:200px}',
+      '#vtv-player-section .vtv-pro-frame iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:none;background:#000}',
+      '#vtv-player-section .vtv-pro-frame video{position:absolute;inset:0;width:100%;height:100%;background:#000}',
+      '#vtv-player-section .vtv-pro-load{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;gap:12px;color:#9aa0a6}',
+      '#vtv-player-section .vtv-pro-spinner{width:28px;height:28px;border:2px solid rgba(255,255,255,.06);border-top-color:#0066cc;border-radius:50%;animation:vtv-pro-spin .7s linear infinite}',
+      '@keyframes vtv-pro-spin{to{transform:rotate(360deg)}}',
+      '#vtv-player-section .vtv-pro-err{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;gap:10px;color:#9aa0a6;text-align:center;padding:20px}',
+      '#vtv-player-section .vtv-pro-err .icon{font-size:28px;opacity:.5}',
+      '#vtv-player-section .vtv-pro-err button{background:rgba(0,102,204,.15);border:1px solid rgba(0,102,204,.3);color:#8ab4f8;padding:7px 16px;border-radius:8px;font-size:11px;cursor:pointer}',
+      '#vtv-player-section .vtv-pro-controls{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(0,0,0,.3)}',
+      '#vtv-player-section .vtv-pro-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#9aa0a6;font-size:10px;padding:4px 10px;border-radius:6px;cursor:pointer}',
+      '#vtv-player-section .vtv-pro-switch{font-size:9px;padding:3px 8px;background:rgba(0,150,255,.08);border:1px solid rgba(0,150,255,.2);color:#8ab4f8;border-radius:6px;cursor:pointer;white-space:nowrap}',
+      '#vtv-player-section .vtv-pro-switch.active{background:rgba(0,204,136,.12);border-color:rgba(0,204,136,.3);color:#00cc88}',
+      '#vtv-player-section .vtv-pro-epg{border-top:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.15)}',
+      '#vtv-player-section .vtv-pro-epg-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px}',
+      '#vtv-player-section .vtv-pro-epg-title{font-size:10px;font-weight:600;color:#9aa0a6;text-transform:uppercase}',
+      '#vtv-player-section .vtv-pro-epg-time{font-size:9px;color:#5f6368}',
+      '#vtv-player-section .vtv-pro-epg-list{padding:2px 8px 10px;display:flex;flex-direction:column;gap:2px;max-height:200px;overflow-y:auto}',
+      '#vtv-player-section .vtv-pro-epg-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;border-left:2px solid transparent;font-size:11px}',
+      '#vtv-player-section .vtv-pro-epg-row.now{border-left-color:#00cc88;background:rgba(0,204,136,.06)}',
+      '#vtv-player-section .vtv-pro-epg-row.passed{opacity:.35}',
+      '#vtv-player-section .vtv-pro-epg-row .t{font-size:10px;color:#5f6368;min-width:38px}',
+      '#vtv-player-section .vtv-pro-epg-row.now .t{color:#00cc88;font-weight:600}',
+      '#vtv-player-section .vtv-pro-epg-row .n{color:#e8eaed}',
+      '#vtv-player-section .vtv-pro-epg-row.now .n{color:#fff;font-weight:500}',
+      '#vtv-player-section .vtv-pro-epg-empty{color:#5f6368;font-size:11px;padding:12px 14px;text-align:center}',
+    ].join('');
+    document.head.appendChild(s);
+  })();
+
+  function getVNTime() {
+    var now = new Date();
+    try {
+      var opts = { timeZone: 'Asia/Ho_Chi_Minh', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, year: 'numeric', month: '2-digit', day: '2-digit' };
+      var parts = new Intl.DateTimeFormat('en-CA', opts).formatToParts(now);
+      var hh=0,mm=0,ss=0,yy=2026,mo=1,dd=1;
+      for (var i = 0; i < parts.length; i++) {
+        var p = parts[i];
+        if (p.type === 'hour') hh = parseInt(p.value);
+        else if (p.type === 'minute') mm = parseInt(p.value);
+        else if (p.type === 'second') ss = parseInt(p.value);
+        else if (p.type === 'year') yy = parseInt(p.value);
+        else if (p.type === 'month') mo = parseInt(p.value);
+        else if (p.type === 'day') dd = parseInt(p.value);
+      }
+      return new Date(yy, mo - 1, dd, hh, mm, ss);
+    } catch(e) {
+      var utc = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
+      return new Date(utc.getTime() + 7 * 3600000);
+    }
+  }
+
+  function formatTime(d) { return (d.getHours()<10?'0':'')+d.getHours()+':'+(d.getMinutes()<10?'0':'')+d.getMinutes(); }
+
+  function loadEPG(chId) {
+    var epgEl = document.getElementById('vtv-pro-epg-body');
+    if (!epgEl) return;
+    epgEl.innerHTML = '<div class="vtv-pro-epg-load"><div class="vtv-pro-spinner" style="width:12px;height:12px;border-width:1.5px"></div>Đang tải lịch...</div>';
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', '/api/vtv/epg/' + chId, true);
+    xhr.timeout = 15000;
+    xhr.onload = function() {
+      try {
+        var data = JSON.parse(xhr.responseText);
+        _serverDate = data.date || '';
+        _epgData = data.programs || [];
+        renderEPG();
+      } catch(e) { epgEl.innerHTML = '<div class="vtv-pro-epg-empty">Không có lịch phát sóng</div>'; }
+    };
+    xhr.onerror = xhr.ontimeout = function() { epgEl.innerHTML = '<div class="vtv-pro-epg-empty">Không tải được lịch</div>'; };
+    xhr.send();
+  }
+
+  function renderEPG() {
+    var epgEl = document.getElementById('vtv-pro-epg-body');
+    if (!epgEl || !_epgData || !_epgData.length) {
+      if (epgEl) epgEl.innerHTML = '<div class="vtv-pro-epg-empty">Chưa có lịch phát sóng</div>';
+      return;
+    }
+    var vnNow = getVNTime();
+    var nowStr = formatTime(vnNow);
+    _epgData.sort(function(a,b) { return a.time.localeCompare(b.time); });
+    for (var i = 0; i < _epgData.length; i++) {
+      _epgData[i].now = false;
+      var p = _epgData[i], nxt = _epgData[i + 1];
+      if (p.time <= nowStr && (!nxt || nxt.time > nowStr)) { p.now = true; p.end_time = nxt ? nxt.time : ''; }
+    }
+    var html = '';
+    for (var i = 0; i < _epgData.length; i++) {
+      var p = _epgData[i];
+      var cls = 'vtv-pro-epg-row' + (p.now ? ' now' : '') + (p.time < nowStr ? ' passed' : '');
+      var xt = p.end_time ? ' → ' + p.end_time : (i < _epgData.length - 1 ? ' → ' + _epgData[i+1].time : '');
+      html += '<div class="' + cls + '"><span class="t">' + p.time + xt + '</span><span class="n">' + p.title + '</span></div>';
+    }
+    epgEl.innerHTML = html;
+    var nowEl = epgEl.querySelector('.now');
+    if (nowEl) nowEl.scrollIntoView({ block: 'center', behavior: 'smooth' });
+  }
+
+  function destroyHLS() { if (_hls) { try { _hls.destroy(); } catch(e){} _hls = null; } }
+
+  function playNativeHLS(chId, m3u8ProxyUrl) {
+    destroyHLS();
+    var frame = document.getElementById('vtv-pro-frame');
+    if (!frame) return;
+    frame.innerHTML = '<video id="vtv-native-video" controls autoplay playsinline style="position:absolute;inset:0;width:100%;height:100%;background:#000"></video>';
+    var video = document.getElementById('vtv-native-video');
+    if (!video) return;
+    if (typeof Hls !== 'undefined' && Hls.isSupported()) {
+      _hls = new Hls({ enableWorker: false });
+      _hls.loadSource(m3u8ProxyUrl);
+      _hls.attachMedia(video);
+      _hls.on(Hls.Events.MANIFEST_PARSED, function() { video.play().catch(function(){}); });
+      _hls.on(Hls.Events.ERROR, function(evt, data) {
+        if (data.fatal) { destroyHLS(); video.src = m3u8ProxyUrl; video.play().catch(function(){}); }
+      });
+    } else { video.src = m3u8ProxyUrl; }
+  }
+
+  window._vtvToggleNative = function(btn) {
+    if (!_currentCh) return;
+    _nativeMode = !_nativeMode;
+    btn.classList.toggle('active', _nativeMode);
+    btn.innerHTML = _nativeMode ? '📡 HLS' : '🔌 JWPlayer';
+    var frame = document.getElementById('vtv-pro-frame');
+    if (!frame) return;
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', '/api/vtv/stream/' + _currentCh, true);
+    xhr.timeout = 15000;
+    xhr.onload = function() {
+      try {
+        var data = JSON.parse(xhr.responseText);
+        if (_nativeMode) {
+          var m3u8Url = data.m3u8_proxy_url || data.proxy_url_hls || data.stream_url;
+          if (m3u8Url) { playNativeHLS(_currentCh, m3u8Url); }
+          else { frame.innerHTML = '<div class="vtv-pro-err"><div class="icon">📡</div><div class="msg">Kênh không hỗ trợ HLS</div></div>'; _nativeMode = false; btn.classList.remove('active'); btn.innerHTML = '🔌 JWPlayer'; }
+        } else {
+          var iframeUrl = data.iframe_url;
+          if (iframeUrl) {
+            destroyHLS();
+            var iframe = document.createElement('iframe');
+            iframe.src = iframeUrl; iframe.setAttribute('allowfullscreen', 'true'); iframe.setAttribute('allow', 'autoplay; encrypted-media; fullscreen');
+            iframe.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:none;background:#000';
+            frame.innerHTML = ''; frame.appendChild(iframe);
+          }
+        }
+      } catch(e) { frame.innerHTML = '<div class="vtv-pro-err"><div class="icon">⚠️</div></div>'; }
+    };
+    xhr.onerror = function() { frame.innerHTML = '<div class="vtv-pro-err"><div class="icon">🔌</div><div class="msg">Lỗi kết nối</div></div>'; };
+    xhr.send();
+  };
+
+  window._vtvProSwitch = function(chId) {
+    _currentCh = chId; _nativeMode = false;
+    var tabs = document.querySelectorAll('#vtv-player-section .vtv-pro-tab');
+    for (var i = 0; i < tabs.length; i++) tabs[i].className = 'vtv-pro-tab' + (tabs[i].getAttribute('data-ch') === chId ? ' on' : '');
+    var toggleBtn = document.getElementById('vtv-pro-toggle-btn');
+    if (toggleBtn) { toggleBtn.classList.remove('active'); toggleBtn.innerHTML = '🔌 JWPlayer'; }
+    var timeEl = document.getElementById('vtv-pro-time');
+    if (timeEl) timeEl.textContent = formatTime(getVNTime()) + ' GMT+7' + (_serverDate ? ' - ' + _serverDate : '');
+    destroyHLS();
+    var frame = document.getElementById('vtv-pro-frame');
+    if (!frame) return;
+    frame.innerHTML = '<div class="vtv-pro-load"><div class="vtv-pro-spinner"></div><span>Đang kết nối ' + chId.toUpperCase() + '...</span></div>';
+    loadEPG(chId);
+    if (_epgTimer) clearInterval(_epgTimer);
+    _epgTimer = setInterval(function() { if (_currentCh) loadEPG(_currentCh); }, 60000);
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', '/api/vtv/stream/' + chId, true);
+    xhr.timeout = 15000;
+    xhr.onload = function() {
+      try {
+        var data = JSON.parse(xhr.responseText);
+        var iframeUrl = data.iframe_url;
+        if (!iframeUrl) { frame.innerHTML = '<div class="vtv-pro-err"><div class="icon">📡</div><div class="msg">Kênh không khả dụng</div><button onclick="_vtvProSwitch(\''+chId+'\')">Thử lại</button></div>'; return; }
+        var iframe = document.createElement('iframe');
+        iframe.src = iframeUrl; iframe.setAttribute('allowfullscreen', 'true'); iframe.setAttribute('allow', 'autoplay; encrypted-media; fullscreen');
+        iframe.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:none;background:#000';
+        frame.innerHTML = ''; frame.appendChild(iframe);
+      } catch(e) { frame.innerHTML = '<div class="vtv-pro-err"><div class="icon">⚠️</div></div>'; }
+    };
+    xhr.onerror = xhr.ontimeout = function() { frame.innerHTML = '<div class="vtv-pro-err"><div class="icon">🔌</div><div class="msg">Mất kết nối máy chủ</div><button onclick="_vtvProSwitch(\''+chId+'\')">Thử lại</button></div>'; };
+    xhr.send();
+  };
+
+  function buildHTML() {
+    var tabs = '';
+    for (var i = 0; i < CHANNELS.length; i++) {
+      var ch = CHANNELS[i];
+      tabs += '<span class="vtv-pro-tab" data-ch="'+ch.id+'" onclick="_vtvProSwitch(\''+ch.id+'\')">' + ch.name + '<span class="b">'+ch.badge+'</span></span>';
+    }
+    return '<div id="vtv-player-section"><div class="vtv-pro-head"><div class="vtv-pro-logo">V</div><span class="vtv-pro-title">VTV Player</span><span class="vtv-pro-live"><span class="vtv-pro-live-dot"></span>TRỰC TIẾP</span></div><div class="vtv-pro-tabs">'+tabs+'</div><div class="vtv-pro-frame" id="vtv-pro-frame"><div class="vtv-pro-load"><div class="vtv-pro-spinner"></div><span>Chọn kênh để xem trực tiếp</span></div></div><div class="vtv-pro-controls"><span id="vtv-pro-time" class="vtv-pro-btn" style="background:none;border:none;font-size:10px;color:#5f6368;margin-right:auto"></span><span class="vtv-pro-switch" id="vtv-pro-toggle-btn" onclick="_vtvToggleNative(this)">🔌 JWPlayer</span></div><div class="vtv-pro-epg"><div class="vtv-pro-epg-hdr"><span class="vtv-pro-epg-title">Lịch phát sóng — nguồn VTV.vn</span></div><div class="vtv-pro-epg-list" id="vtv-pro-epg-body"><div class="vtv-pro-epg-empty">Chọn kênh để xem lịch phát sóng</div></div></div></div>';
+  }
+
+  function inject() {
+    var homeEl = document.getElementById('view-home');
+    if (!homeEl || document.getElementById('vtv-player-section')) return;
+    var featured = document.getElementById('home-featured-area') || homeEl.querySelector('.featured-match, .fm-section, .slider-wrap');
+    if (featured && featured.parentNode) featured.insertAdjacentHTML('afterend', buildHTML());
+    else if (homeEl.firstChild) homeEl.insertAdjacentHTML('afterbegin', buildHTML());
+    setTimeout(function() { if (window._vtvProSwitch) window._vtvProSwitch('vtv6'); }, 500);
+  }
+
+  var orig = window.loadHome;
+  if (typeof orig === 'function') {
+    window.loadHome = function() {
+      var r = orig.apply(this, arguments);
+      if (r && typeof r.then === 'function') return r.then(function(v) { setTimeout(inject, 2000); return v; });
+      else { setTimeout(inject, 2000); return r; }
+    };
+  } else {
+    (function waitAndInject() {
+      if (document.getElementById('view-home') && !document.getElementById('vtv-player-section')) inject();
+      else if (!document.getElementById('vtv-player-section')) setTimeout(waitAndInject, 1000);
+    })();
+  }
+})();