Upload static/vtv_init.js

static/vtv_init.js

@@ -1,4 +1,4 @@
-// ===== VNEWS VTV Player v11 — SV2 iframe + HLS.js native player toggle =====
+// ===== VNEWS VTV Player v11 + FPT Play — SV2 iframe + HLS.js native player toggle + Stream Selector =====
 (function() {
   if (window._vtvInitLoaded) return;
   window._vtvInitLoaded = true;
@@ -10,6 +10,21 @@
     {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'},
+    {id:'fpt-the-thao',name:'FPT',badge:'Thể Thao'},
+  ];
+
+  var FPT_PLAY_IFRAMES = {
+    "fpt-the-thao": "https://www.fptplay.net/xem-online/kenh-the-thao",
+    "fpt-the-thao-2": "https://hd1.xemtv.net/kenh-fptplay-truc-tuyen-the-thao.html",
+  };
+
+  var FPT_PLAY_M3U8 = "https://live.fptplay53.net/epzhd1/htvcthethao_vhls.smil/chunklist.m3u8";
+
+  var FPT_PLAY_STREAMS = [
+    {label:"🌐 Web FPT Play", url:"https://www.fptplay.net/xem-online/kenh-the-thao", type:"iframe", allow:"autoplay; encrypted-media; fullscreen"},
+    {label:"📡 HLS Proxy", url:"/api/proxy/m3u8?url=https://live.fptplay53.net/epzhd1/htvcthethao_vhls.smil/chunklist.m3u8", type:"m3u8"},
+    {label:"🔗 HLS Direct", url:FPT_PLAY_M3U8, type:"m3u8"},
+    {label:"📺 HD1.xemtv.net", url:"https://hd1.xemtv.net/kenh-fptplay-truc-tuyen-the-thao.html", type:"iframe", allow:"autoplay; encrypted-media; fullscreen"},
   ];
 
   var _currentCh = null;
@@ -17,8 +32,9 @@
   var _epgData = [];
   var _timeTimer = null;
   var _serverDate = '';
-  var _nativeMode = false; // false=iframe, true=HLSjs
+  var _nativeMode = false;
   var _hls = null;
+  var _fptPlayMode = null;
 
   // ===== CSS =====
   (function injectCSS() {
@@ -38,6 +54,8 @@
       '#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;font-weight:500;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s ease}',
       '#vtv-player-section .vtv-pro-tab:hover{background:rgba(0,102,204,.1);border-color:rgba(0,102,204,.3);color:#e8eaed}',
       '#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.fpt{background:rgba(255,100,0,.04);border-color:rgba(255,120,0,.08);color:#ffa866}',
+      '#vtv-player-section .vtv-pro-tab.fpt.on{background:rgba(255,100,0,.2);border-color:#ff6400;color:#fff}',
       '#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;border-top:1px solid rgba(255,255,255,.04)}',
       '#vtv-player-section .vtv-pro-frame iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:none;background:#000}',
@@ -56,6 +74,9 @@
       '#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;transition:all .15s;display:flex;align-items:center;gap:3px;white-space:nowrap}',
       '#vtv-player-section .vtv-pro-switch:hover{background:rgba(0,150,255,.2)}',
       '#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-stream-select{font-size:9px;padding:3px 8px;background:rgba(255,100,0,.08);border:1px solid rgba(255,100,0,.2);color:#ffa866;border-radius:6px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:3px;white-space:nowrap}',
+      '#vtv-player-section .vtv-pro-stream-select:hover{background:rgba(255,100,0,.2)}',
+      '#vtv-player-section .vtv-pro-stream-select.active{background:rgba(255,100,0,.15);border-color:#ff6400;color:#fff}',
       '#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;letter-spacing:.5px;text-transform:uppercase}',
@@ -109,6 +130,7 @@
 
   // ===== EPG =====
   function loadEPG(chId) {
+    if (chId.indexOf('fpt') >= 0) return;
     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;flex-shrink:0"></div>Đang tải lịch...</div>';
@@ -161,7 +183,7 @@
 
   function startEpgRefresh() {
     if (_epgTimer) clearInterval(_epgTimer);
-    _epgTimer = setInterval(function() { if (_currentCh) loadEPG(_currentCh); }, 60000);
+    _epgTimer = setInterval(function() { if (_currentCh && _currentCh.indexOf('fpt') < 0) loadEPG(_currentCh); }, 60000);
   }
 
   function updateClock() {
@@ -181,104 +203,72 @@
   }
 
   // ===== Play native HLS via proxy =====
-  function playNativeHLS(chId, m3u8ProxyUrl) {
+  function playNativeHLS(m3u8Url) {
     destroyHLS();
     var frame = document.getElementById('vtv-pro-frame');
     if (!frame) return;
     frame.innerHTML = '<video id="vtv-native-video" controls autoplay playsinline webkit-playsinline style="position:absolute;inset:0;width:100%;height:100%;background:#000"></video>';
-
     var video = document.getElementById('vtv-native-video');
     if (!video) return;
-
-    // Try HLS.js if available (injected via index_v2.html)
     if (typeof Hls !== 'undefined' && Hls.isSupported()) {
       _hls = new Hls({ enableWorker: false });
-      _hls.loadSource(m3u8ProxyUrl);
+      _hls.loadSource(m3u8Url);
       _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) {
-          // Fallback: direct video src
           destroyHLS();
-          video.src = m3u8ProxyUrl;
+          video.src = m3u8Url;
           video.play().catch(function(){});
         }
       });
     } else {
-      // Native HLS fallback (Safari/iOS)
-      video.src = m3u8ProxyUrl;
+      video.src = m3u8Url;
     }
   }
 
-  // ===== Toggle iframe / native HLS =====
-  window._vtvToggleNative = function(btn) {
-    if (!_currentCh) return;
-    _nativeMode = !_nativeMode;
-    btn.classList.toggle('active', _nativeMode);
-    btn.innerHTML = _nativeMode ? '📡 HLS' : '🔌 JWPlayer';
-
+  // ===== Load iframe into frame =====
+  function loadIframe(iframeUrl) {
+    destroyHLS();
     var frame = document.getElementById('vtv-pro-frame');
     if (!frame) return;
-
-    // Re-fetch stream data then switch
-    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();
-  };
+    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);
+  }
 
   // ===== Switch channel =====
   window._vtvProSwitch = function(chId) {
     _currentCh = chId;
     _nativeMode = false;
+    _fptPlayMode = null;
 
     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' : '');
+    for (var i = 0; i < tabs.length; i++) {
+      var t = tabs[i];
+      var isFpt = t.getAttribute('data-fpt') === 'true';
+      var isActive = (t.getAttribute('data-ch') === chId);
+      t.className = 'vtv-pro-tab' + (isActive ? ' on' : '') + (isFpt ? ' fpt' : '') + (isFpt && isActive ? ' on' : '');
+    }
 
-    // Reset toggle button
     var toggleBtn = document.getElementById('vtv-pro-toggle-btn');
-    if (toggleBtn) { toggleBtn.classList.remove('active'); toggleBtn.innerHTML = '🔌 JWPlayer'; }
+    if (toggleBtn && chId.indexOf('fpt') >= 0) {
+      toggleBtn.style.display = 'none';
+    } else if (toggleBtn) {
+      toggleBtn.style.display = '';
+      toggleBtn.classList.remove('active');
+      toggleBtn.innerHTML = '🔌 JWPlayer';
+    }
 
     updateClock();
     if (_timeTimer) clearInterval(_timeTimer);
     _timeTimer = setInterval(updateClock, 60000);
-
     destroyHLS();
 
     var frame = document.getElementById('vtv-pro-frame');
@@ -288,31 +278,110 @@
     loadEPG(chId);
     startEpgRefresh();
 
+    if (chId.indexOf('fpt') >= 0) {
+      loadFPTPlayUI(chId);
+    } else {
+      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;
+          }
+          loadIframe(iframeUrl);
+        } catch(e) {
+          frame.innerHTML = '<div class="vtv-pro-err"><div class="icon">⚠️</div><div class="msg">Lỗi tải dữ liệu</div><button onclick="_vtvProSwitch(\''+chId+'\')">Thử lại</button></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();
+    }
+  };
+
+  // ===== Load FPT Play UI =====
+  function loadFPTPlayUI(chId) {
+    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 tải ' + FPT_PLAY_STREAMS[0].label + '...</span></div>';
+
+    var streamSelectDiv = document.getElementById('vtv-pro-stream-select-div');
+    if (streamSelectDiv) {
+      var h = '<div style="display:flex;gap:4px;flex-wrap:wrap">';
+      for (var i = 0; i < FPT_PLAY_STREAMS.length; i++) {
+        h += '<button class="vtv-pro-switch fpt-stream-btn" onclick="_fptPlayLoadStream(' + i + ')" style="font-size:9px;padding:3px 8px;background:rgba(255,100,0,.06);border:1px solid rgba(255,100,0,.15);color:#ffa866;border-radius:6px;cursor:pointer;transition:all .15s" data-idx="' + i + '">' + FPT_PLAY_STREAMS[i].label + '</button>';
+      }
+      h += '</div>';
+      streamSelectDiv.innerHTML = h;
+    }
+
+    _fptPlayLoadStream(0);
+  }
+
+  // ===== Load specific FPT Play stream =====
+  window._fptPlayLoadStream = function(idx) {
+    if (idx < 0 || idx >= FPT_PLAY_STREAMS.length) return;
+    var stream = FPT_PLAY_STREAMS[idx];
+    _fptPlayMode = stream.type;
+
+    document.querySelectorAll('.fpt-stream-btn').forEach(function(btn, i) {
+      btn.style.background = (i === idx) ? 'rgba(255,100,0,.2)' : '';
+      btn.style.color = (i === idx) ? '#fff' : '#ffa866';
+    });
+
+    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 tải: ' + stream.label + '</span></div>';
+
+    if (stream.type === 'iframe') {
+      setTimeout(function() { loadIframe(stream.url); }, 500);
+    } else if (stream.type === 'm3u8') {
+      destroyHLS();
+      playNativeHLS(stream.url);
+    }
+  };
+
+  // ===== Toggle iframe / native HLS (VTV only) =====
+  window._vtvToggleNative = function(btn) {
+    if (!_currentCh || _currentCh.indexOf('fpt') >= 0) 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/' + chId, true);
+    xhr.open('GET', '/api/vtv/stream/' + _currentCh, 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;
+        if (_nativeMode) {
+          var m3u8Url = data.m3u8_proxy_url || data.proxy_url_hls || data.stream_url;
+          if (m3u8Url) {
+            playNativeHLS(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();
+            loadIframe(iframeUrl);
+          }
         }
-        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 class="msg">Lỗi tải dữ liệu</div><button onclick="_vtvProSwitch(\''+chId+'\')">Thử lại</button></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>';
+      } 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();
   };
 
@@ -321,7 +390,8 @@
     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+'\')">' +
+      var isFpt = ch.id.indexOf('fpt') >= 0;
+      tabs += '<span class="vtv-pro-tab' + (isFpt ? ' fpt' : '') + '" data-ch="'+ch.id+'" onclick="_vtvProSwitch(\''+ch.id+'\')" ' + (isFpt ? 'data-fpt="true"' : '') + '>' +
         ch.name + '<span class="b">'+ch.badge+'</span></span>';
     }
     return '<div id="vtv-player-section">' +
@@ -336,8 +406,10 @@
       '</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-stream-select" id="vtv-pro-stream-select" style="display:none" onclick="toggleStreamList()">📡 Stream ▼</span>' +
       '<span class="vtv-pro-switch" id="vtv-pro-toggle-btn" onclick="_vtvToggleNative(this)">🔌 JWPlayer</span>' +
       '</div>' +
+      '<div class="vtv-pro-stream-list" id="vtv-pro-stream-select-div" style="display:none;padding:4px 12px 6px"></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>' +
@@ -345,6 +417,8 @@
       '</div>';
   }
 
+  function toggleStreamList() {}
+
   function inject() {
     var homeEl = document.getElementById('view-home');
     if (!homeEl || document.getElementById('vtv-player-section')) return;
@@ -367,4 +441,4 @@
       else if (!document.getElementById('vtv-player-section')) setTimeout(waitAndInject, 1000);
     })();
   }
-})();
+})();