Fix vtv_init.js: add self-contained CSS, fix HLS loading, better error handling

static/vtv_init.js

@@ -1,5 +1,4 @@
-// ===== VNEWS VTV Player v2 (self-contained) =====
-// Builds VTV player UI, fetches streams from backend API
+// ===== VNEWS VTV Player v3 (self-contained with CSS + backend stream fetch) =====
 (function() {
   if (window._vtvInitLoaded) return;
   window._vtvInitLoaded = true;
@@ -16,92 +15,143 @@
   var _hlsInst = null;
   var _currentCh = null;
 
-  function buildTabs() {
-    var h = '';
-    CHANNELS.forEach(function(ch) {
-      h += '<div class="vtv-tab off" data-ch="'+ch.id+'" onclick="_vtvSwitch(\''+ch.id+'\')">'+ch.name+'</div>';
-    });
-    return h;
-  }
-
-  var HTML = '<div class="vtv-wrap" id="vtv-player-section">'
-    + '<div class="vtv-head"><span class="vtv-title">📺 VTV Player</span><span class="vtv-badge">● LIVE</span></div>'
-    + '<div class="vtv-tabs" id="vtv-tabs">'+buildTabs()+'</div>'
-    + '<div class="vtv-frame" id="vtv-frame"><div class="vtv-load" id="vtv-loading"><div class="vtv-spinner"></div><span>Chọn kênh để xem</span></div>'
-    + '<video id="vtv-video" style="display:none;width:100%;height:100%;object-fit:contain" controls autoplay playsinline></video></div>'
-    +'</div>';
+  // ===== Inject CSS (standalone, doesn't need yt_live.js) =====
+  (function injectCSS() {
+    var css = '.vtv-wrap{position:relative;margin:6px 4px;background:#111;border:1px solid #0066cc;border-radius:10px;overflow:hidden}' +
+      '.vtv-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(90deg,#003366,#1a1a1a)}' +
+      '.vtv-title{font-size:13px;font-weight:800;color:#00ccff}' +
+      '.vtv-badge{font-size:10px;font-weight:800;color:#00ccff;animation:vtvp 1.3s infinite}' +
+      '@keyframes vtvp{0%,100%{opacity:1}50%{opacity:.3}}' +
+      '.vtv-tabs{display:flex;flex-wrap:wrap;gap:3px;padding:6px 8px;overflow-x:auto;background:#0d1a2a}' +
+      '.vtv-tab{padding:4px 8px;background:#1a2a3a;border:1px solid #2a3a4a;border-radius:10px;color:#8ab4d8;font-size:9px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s}' +
+      '.vtv-tab:hover{background:#0b4a7a;color:#fff}' +
+      '.vtv-tab.on{background:#0066cc;border-color:#00ccff;color:#fff;font-weight:700}' +
+      '.vtv-tab.off{opacity:.35}' +
+      '.vtv-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;min-height:180px}' +
+      '.vtv-frame video{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:contain;max-width:100% !important;max-height:100% !important}' +
+      '.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:#0066cc;border:none;color:#fff;padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer}' +
+      '.vtv-load{display:flex;align-items:center;justify-content:center;min-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)}}';
+    var s = document.createElement('style');
+    s.textContent = css;
+    document.head.appendChild(s);
+  })();
 
   window._vtvSwitch = function(chId) {
     if (_hlsInst) { _hlsInst.destroy(); _hlsInst = null; }
     _currentCh = chId;
 
-    // Update tabs
-    document.querySelectorAll('#vtv-tabs .vtv-tab').forEach(function(t) {
-      t.classList.toggle('on', t.getAttribute('data-ch') === chId);
-      t.classList.toggle('off', t.getAttribute('data-ch') !== chId);
-    });
+    var tabs = document.querySelectorAll('#vtv-tabs .vtv-tab');
+    for (var i = 0; i < tabs.length; i++) {
+      tabs[i].classList.toggle('on', tabs[i].getAttribute('data-ch') === chId);
+      tabs[i].classList.toggle('off', tabs[i].getAttribute('data-ch') !== chId);
+    }
 
     var loadingEl = document.getElementById('vtv-loading');
     var videoEl = document.getElementById('vtv-video');
-    if (!videoEl) return;
+    if (!videoEl || !loadingEl) return;
 
     loadingEl.style.display = 'flex';
+    loadingEl.innerHTML = '<div class="vtv-spinner"></div><span>Đang tải ' + chId.toUpperCase() + '...</span>';
     videoEl.style.display = 'none';
     videoEl.pause();
     videoEl.removeAttribute('src');
 
     // Fetch stream from backend
-    fetch('/api/vtv/stream/' + chId)
-      .then(function(r) { return r.json(); })
-      .then(function(data) {
+    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 url = data.stream_url;
         if (!url) {
-          loadingEl.innerHTML = '<span style="color:#e74c3c">⚠️ Kênh đang offline</span><br><button onclick="_vtvSwitch(\''+chId+'\')">Thử lại</button>';
+          loadingEl.innerHTML = '<div style="color:#e74c3c;text-align:center"><div style="font-size:24px;margin-bottom:8px">⚠️</div><span style="font-size:13px;font-weight:700">Đang bảo trì</span><br><span style="font-size:11px;color:#999">Kênh ' + chId.toUpperCase() + ' tạm ngắt</span><br><br><button onclick="_vtvSwitch(\''+chId+'\')" style="background:#0066cc;border:0;color:#fff;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:12px">🔄 Thử lại</button></div>';
           return;
         }
-        // Check if need proxy
+        // Proxy if needed
         if (url.indexOf('fptplay') !== -1 || url.indexOf('vtvgo') !== -1 || url.indexOf('mediacdn') !== -1) {
           url = '/api/proxy/m3u8/vtv?url=' + encodeURIComponent(url);
         }
-        if (typeof Hls !== 'undefined' && Hls.isSupported()) {
-          var hls = new Hls();
-          hls.loadSource(url);
-          hls.attachMedia(videoEl);
-          hls.on(Hls.Events.MANIFEST_PARSED, function() {
-            loadingEl.style.display = 'none';
-            videoEl.style.display = 'block';
-            videoEl.play().catch(function(){});
-          });
-          hls.on(Hls.Events.ERROR, function(ev, data) {
-            if (data.fatal) {
-              hls.destroy();
-              loadingEl.innerHTML = '<span style="color:#e74c3c">⚠️ Lỗi phát: '+data.type+'</span><br><button onclick="_vtvSwitch(\''+chId+'\')">Thử lại</button>';
-            }
-          });
-          _hlsInst = hls;
-        } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
-          videoEl.src = url;
-          videoEl.addEventListener('loadedmetadata', function() {
-            loadingEl.style.display = 'none';
-            videoEl.style.display = 'block';
-            videoEl.play().catch(function(){});
-          });
+        playStream(url, videoEl, loadingEl);
+      } catch(e) {
+        loadingEl.innerHTML = '<div style="color:#e74c3c;font-size:12px">Lỗi dữ liệu<br><button onclick="_vtvSwitch(\''+chId+'\')" style="background:#0066cc;border:0;color:#fff;padding:6px 14px;border-radius:8px;cursor:pointer;margin-top:8px">Thử lại</button></div>';
+      }
+    };
+    xhr.onerror = function() {
+      loadingEl.innerHTML = '<div style="color:#e74c3c;font-size:12px">Không thể kết nối<br><button onclick="_vtvSwitch(\''+chId+'\')" style="background:#0066cc;border:0;color:#fff;padding:6px 14px;border-radius:8px;cursor:pointer;margin-top:8px">Thử lại</button></div>';
+    };
+    xhr.ontimeout = function() {
+      loadingEl.innerHTML = '<div style="color:#e74c3c;font-size:12px">Hết thời gian chờ<br><button onclick="_vtvSwitch(\''+chId+'\')" style="background:#0066cc;border:0;color:#fff;padding:6px 14px;border-radius:8px;cursor:pointer;margin-top:8px">Thử lại</button></div>';
+    };
+    xhr.send();
+  };
+
+  function playStream(url, videoEl, loadingEl) {
+    if (typeof Hls !== 'undefined' && Hls.isSupported()) {
+      var hls = new Hls({ debug: false });
+      hls.loadSource(url);
+      hls.attachMedia(videoEl);
+      hls.on(Hls.Events.MANIFEST_PARSED, function() {
+        loadingEl.style.display = 'none';
+        videoEl.style.display = 'block';
+        videoEl.play().catch(function(e){ console.log('play error', e); });
+      });
+      hls.on(Hls.Events.ERROR, function(ev, data) {
+        console.log('HLS error', data.type, data.details);
+        if (data.fatal) {
+          hls.destroy();
+          loadingEl.innerHTML = '<div style="color:#e74c3c;font-size:12px">⚠️ Lỗi phát (recover...)<br><button onclick="_vtvSwitch(\''+_currentCh+'\')" style="background:#0066cc;border:0;color:#fff;padding:6px 14px;border-radius:8px;cursor:pointer;margin-top:8px">Thử lại</button></div>';
+          // Attempt recover
+          setTimeout(function() { if (_currentCh) window._vtvSwitch(_currentCh); }, 3000);
         }
-      })
-      .catch(function(err) {
-        loadingEl.innerHTML = '<span style="color:#e74c3c">⚠️ Lỗi kết nối</span><br><button onclick="_vtvSwitch(\''+chId+'\')">Thử lại</button>';
       });
-  };
+      _hlsInst = hls;
+    } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
+      videoEl.src = url;
+      videoEl.addEventListener('loadedmetadata', function() {
+        loadingEl.style.display = 'none';
+        videoEl.style.display = 'block';
+        videoEl.play().catch(function(){});
+      });
+      videoEl.addEventListener('error', function() {
+        loadingEl.innerHTML = '<div style="color:#e74c3c;font-size:12px">⚠️ Lỗi native HLS<br><button onclick="_vtvSwitch(\''+_currentCh+'\')" style="background:#0066cc;border:0;color:#fff;padding:6px 14px;border-radius:8px;cursor:pointer;margin-top:8px">Thử lại</button></div>';
+      });
+    } else {
+      loadingEl.innerHTML = '<div style="color:#e74c3c;font-size:12px">⚠️ Trình duyệt không hỗ trợ HLS</div>';
+    }
+  }
+
+  function buildTabs() {
+    var h = '';
+    for (var i = 0; i < CHANNELS.length; i++) {
+      var ch = CHANNELS[i];
+      h += '<div class="vtv-tab off" data-ch="'+ch.id+'" onclick="_vtvSwitch(\''+ch.id+'\')">'+ch.name+'</div>';
+    }
+    return h;
+  }
+
+  var HTML = '<div class="vtv-wrap" id="vtv-player-section">'
+    + '<div class="vtv-head"><span class="vtv-title">📺 VTV Player</span><span class="vtv-badge">● LIVE</span></div>'
+    + '<div class="vtv-tabs" id="vtv-tabs">'+buildTabs()+'</div>'
+    + '<div class="vtv-frame" id="vtv-frame">'
+    + '<div class="vtv-load" id="vtv-loading"><div class="vtv-spinner"></div><span>📺 Chọn kênh để xem</span></div>'
+    + '<video id="vtv-video" style="display:none" controls autoplay playsinline muted></video>'
+    + '</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');
-    if (featured) {
+    if (featured && featured.parentNode) {
       featured.insertAdjacentHTML('afterend', HTML);
-    } else {
+    } else if (homeEl.firstChild) {
       homeEl.insertAdjacentHTML('afterbegin', HTML);
+    } else {
+      homeEl.innerHTML = HTML + homeEl.innerHTML;
     }
   }