Upload static/yt_live.js

static/yt_live.js

@@ -1,40 +1,48 @@
-// === VNEWS — YouTube Live pinned to TOP of home page ===
-// Embeds a live YouTube stream as the very first block of #view-home.
+// === VNEWS — VTV3 World Cup 2026 LIVE pinned to TOP of home page ===
+// Replaces YouTube iframe with direct HLS stream from VTVGo using hls.js
 // Loaded AFTER app_v2.js so it can wrap the global loadHome().
+
 (function(){
-  const LIVE_ID = 'r9NDoNv2a-Y';                 // youtube.com/live/r9NDoNv2a-Y
-  const LIVE_TITLE = 'Trực tiếp';
+  // Common VTV3 HLS stream URLs (VTVGo package API patterns)
+  const VTV3_STREAMS = [
+    'https://package.vtvgo.vn/stream/vtv3.m3u8',
+    'https://package.vtvgo.vn/channel/vtv3.m3u8',
+    'https://vtvgo.vn/stream/vtv3.m3u8',
+    'https://cdn.vtvgo.vn/vtv3/playlist.m3u8',
+  ];
+
+  const LIVE_TITLE = 'VTV3 World Cup 2026 - Trực tiếp';
 
   // Inject styles once.
-  if(!document.getElementById('yt-live-css')){
-    const s=document.createElement('style');s.id='yt-live-css';
+  if(!document.getElementById('vtv3-live-css')){
+    const s=document.createElement('style');s.id='vtv3-live-css';
     s.textContent=`
-    .yt-live-wrap{margin:6px 4px;background:#111;border:1px solid #3a0d0d;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(231,76,60,.25)}
-    .yt-live-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(90deg,#2a0808,#1a1a1a)}
-    .yt-live-dot{width:9px;height:9px;border-radius:50%;background:#e74c3c;box-shadow:0 0 6px #e74c3c;animation:yt-live-pulse 1.3s infinite}
-    @keyframes yt-live-pulse{0%,100%{opacity:1}50%{opacity:.3}}
-    .yt-live-badge{font-size:11px;font-weight:800;color:#e74c3c;letter-spacing:.5px}
-    .yt-live-title{font-size:12px;color:#eee;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-    .yt-live-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
-    .yt-live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
+    .vtv3-live-wrap{margin:6px 4px;background:#111;border:1px solid #0066cc;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,102,204,.3)}
+    .vtv3-live-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(90deg,#003366,#1a1a1a)}
+    .vtv3-live-dot{width:9px;height:9px;border-radius:50%;background:#00ccff;box-shadow:0 0 6px #00ccff;animation:vtv3-live-pulse 1.3s infinite}
+    @keyframes vtv3-live-pulse{0%,100%{opacity:1}50%{opacity:.3}}
+    .vtv3-live-badge{font-size:11px;font-weight:800;color:#00ccff;letter-spacing:.5px}
+    .vtv3-live-title{font-size:12px;color:#eee;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .vtv3-live-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
+    .vtv3-live-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
+    .vtv3-live-error{display:flex;align-items:center;justify-content:center;height:100%;color:#888;font-size:12px;text-align:center;padding:20px}
     `;
     document.head.appendChild(s);
   }
 
   function buildLive(){
     const wrap=document.createElement('div');
-    wrap.className='yt-live-wrap';
-    wrap.id='yt-live-block';
-    const src='https://www.youtube.com/embed/'+LIVE_ID
-      +'?autoplay=1&mute=1&playsinline=1&rel=0&modestbranding=1';
+    wrap.className='vtv3-live-wrap';
+    wrap.id='vtv3-live-block';
     wrap.innerHTML=
-      '<div class="yt-live-head">'
-        +'<span class="yt-live-dot"></span>'
-        +'<span class="yt-live-badge">● LIVE</span>'
-        +'<span class="yt-live-title">'+LIVE_TITLE+'</span>'
+      '<div class="vtv3-live-head">'
+        +'<span class="vtv3-live-dot"></span>'
+        +'<span class="vtv3-live-badge">● LIVE</span>'
+        +'<span class="vtv3-live-title">'+LIVE_TITLE+'</span>'
       +'</div>'
-      +'<div class="yt-live-frame">'
-        +'<iframe src="'+src+'" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe>'
+      +'<div class="vtv3-live-frame">'
+        +'<video id="vtv3-player" playsinline muted controls preload="auto"></video>'
+        +'<div class="vtv3-live-error" id="vtv3-error" style="display:none">Đang kết nối VTV3...</div>'
       +'</div>';
     return wrap;
   }
@@ -43,21 +51,114 @@
     const home=document.getElementById('view-home');
     if(!home)return;
     // Already present? do nothing (avoid reloading the stream).
-    if(document.getElementById('yt-live-block'))return;
+    if(document.getElementById('vtv3-live-block'))return;
     home.insertBefore(buildLive(), home.firstChild);
+    initPlayer();
+  }
+
+  let _hlsInstance = null;
+  let _currentStreamIndex = 0;
+  let _retryTimeout = null;
+
+  function initPlayer(){
+    const video = document.getElementById('vtv3-player');
+    const errorEl = document.getElementById('vtv3-error');
+    if(!video) return;
+
+    // Clean up previous HLS instance
+    if(_hlsInstance){
+      _hlsInstance.destroy();
+      _hlsInstance = null;
+    }
+    if(_retryTimeout){
+      clearTimeout(_retryTimeout);
+      _retryTimeout = null;
+    }
+
+    // Try streams in order
+    function tryStream(index){
+      if(index >= VTV3_STREAMS.length){
+        errorEl.textContent = 'Không thể tải luồng VTV3. Vui lòng thử lại sau.';
+        errorEl.style.display = 'flex';
+        video.style.display = 'none';
+        // Retry all streams after 30 seconds
+        _retryTimeout = setTimeout(() => {
+          _currentStreamIndex = 0;
+          tryStream(0);
+        }, 30000);
+        return;
+      }
+
+      const src = VTV3_STREAMS[index];
+      _currentStreamIndex = index;
+      errorEl.textContent = `Đang kết nối VTV3 (luồng ${index + 1}/${VTV3_STREAMS.length})...`;
+      errorEl.style.display = 'flex';
+      video.style.display = 'none';
+
+      if(typeof Hls !== 'undefined' && Hls.isSupported()){
+        const hls = new Hls({
+          enableWorker: true,
+          lowLatencyMode: true,
+          startLevel: -1,
+          capLevelToPlayerSize: true,
+          maxBufferLength: 30,
+          maxMaxBufferLength: 60,
+        });
+        _hlsInstance = hls;
+        hls.loadSource(src);
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          video.play().catch(() => {});
+          errorEl.style.display = 'none';
+          video.style.display = 'block';
+        });
+        hls.on(Hls.Events.ERROR, (event, data) => {
+          if(data.fatal){
+            switch(data.type){
+              case Hls.ErrorTypes.NETWORK_ERROR:
+                hls.startLoad();
+                break;
+              case Hls.ErrorTypes.MEDIA_ERROR:
+                hls.recoverMediaError();
+                break;
+              default:
+                hls.destroy();
+                _hlsInstance = null;
+                tryStream(index + 1);
+                break;
+            }
+          }
+        });
+      } else if(video.canPlayType('application/vnd.apple.mpegurl')){
+        // Native HLS support (Safari)
+        video.src = src;
+        video.addEventListener('loadedmetadata', () => {
+          video.play().catch(() => {});
+          errorEl.style.display = 'none';
+          video.style.display = 'block';
+        }, {once: true});
+        video.addEventListener('error', () => {
+          tryStream(index + 1);
+        }, {once: true});
+      } else {
+        tryStream(index + 1);
+      }
+    }
+
+    tryStream(0);
   }
 
   // Wrap the existing global loadHome so the live block is (re)pinned after each render.
   function install(){
     if(typeof window.loadHome!=='function'){return false;}
-    if(window.loadHome.__ytLiveWrapped)return true;
+    if(window.loadHome.__vtv3LiveWrapped)return true;
     const orig=window.loadHome;
     const wrapped=async function(){
       const r=await orig.apply(this,arguments);
       try{pinLive();}catch(e){}
       return r;
     };
-    wrapped.__ytLiveWrapped=true;
+    wrapped.__vtv3LiveWrapped=true;
     window.loadHome=wrapped;
     return true;
   }
@@ -70,4 +171,4 @@
   // In case the homepage was already rendered before this script ran, pin immediately too.
   if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',()=>setTimeout(pinLive,300));
   else setTimeout(pinLive,300);
-})();
+})();