v11: Add toggle button JWPlayer ↔ HLS.js native player (via /api/proxy/m3u8)

static/vtv_init.js

@@ -1,4 +1,4 @@
-// ===== VNEWS VTV Player v10 — SV2 iframe trực tiếp =====
+// ===== VNEWS VTV Player v11 — SV2 iframe + HLS.js native player toggle =====
 (function() {
   if (window._vtvInitLoaded) return;
   window._vtvInitLoaded = true;
@@ -17,6 +17,8 @@
   var _epgData = [];
   var _timeTimer = null;
   var _serverDate = '';
+  var _nativeMode = false; // false=iframe, true=HLSjs
+  var _hls = null;
 
   // ===== CSS =====
   (function injectCSS() {
@@ -39,6 +41,7 @@
       '#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}',
+      '#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;font-size:12px}',
       '#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)}}',
@@ -50,6 +53,9 @@
       '#vtv-player-section .vtv-pro-controls{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(0,0,0,.3);border-top:1px solid rgba(255,255,255,.04)}',
       '#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;transition:all .15s;display:flex;align-items:center;gap:4px}',
       '#vtv-player-section .vtv-pro-btn:hover{background:rgba(0,102,204,.12);color:#e8eaed}',
+      '#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-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}',
@@ -166,18 +172,115 @@
     }
   }
 
-  // ===== Switch channel — SV2 iframe trực tiếp =====
+  // ===== Destroy HLS player =====
+  function destroyHLS() {
+    if (_hls) {
+      try { _hls.destroy(); } catch(e) {}
+      _hls = null;
+    }
+  }
+
+  // ===== Play native HLS via proxy =====
+  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 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.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.play().catch(function(){});
+        }
+      });
+    } else {
+      // Native HLS fallback (Safari/iOS)
+      video.src = m3u8ProxyUrl;
+    }
+  }
+
+  // ===== Toggle iframe / native HLS =====
+  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;
+
+    // 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();
+  };
+
+  // ===== Switch channel =====
   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' : '');
 
+    // Reset toggle button
+    var toggleBtn = document.getElementById('vtv-pro-toggle-btn');
+    if (toggleBtn) { toggleBtn.classList.remove('active'); toggleBtn.innerHTML = '🔌 JWPlayer'; }
+
     updateClock();
     if (_timeTimer) clearInterval(_timeTimer);
     _timeTimer = setInterval(updateClock, 60000);
 
+    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>';
@@ -191,7 +294,6 @@
     xhr.onload = function() {
       try {
         var data = JSON.parse(xhr.responseText);
-        // Dùng iframe_url trực tiếp từ SV2 — player thật, mobile/desktop đều được
         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>';
@@ -234,6 +336,7 @@
       '</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>' +