Add YouTube Live block pinned to top of home page

static/yt_live.js

@@ -0,0 +1,73 @@
+// === VNEWS — YouTube Live pinned to TOP of home page ===
+// Embeds a live YouTube stream as the very first block of #view-home.
+// 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';
+
+  // Inject styles once.
+  if(!document.getElementById('yt-live-css')){
+    const s=document.createElement('style');s.id='yt-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}
+    `;
+    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.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>'
+      +'<div class="yt-live-frame">'
+        +'<iframe src="'+src+'" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></iframe>'
+      +'</div>';
+    return wrap;
+  }
+
+  function pinLive(){
+    const home=document.getElementById('view-home');
+    if(!home)return;
+    // Already present? do nothing (avoid reloading the stream).
+    if(document.getElementById('yt-live-block'))return;
+    home.insertBefore(buildLive(), home.firstChild);
+  }
+
+  // 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;
+    const orig=window.loadHome;
+    const wrapped=async function(){
+      const r=await orig.apply(this,arguments);
+      try{pinLive();}catch(e){}
+      return r;
+    };
+    wrapped.__ytLiveWrapped=true;
+    window.loadHome=wrapped;
+    return true;
+  }
+
+  // loadHome may already be defined (app_v2.js loaded before us). Install now; retry if not yet ready.
+  if(!install()){
+    let tries=0;
+    const t=setInterval(()=>{ if(install()||++tries>40)clearInterval(t); },100);
+  }
+  // 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);
+})();