Upload static/yt_live.js

static/yt_live.js

@@ -1,31 +1,27 @@
 // === VNEWS — VTV1-VTV10 + VTVPrime LIVE CHANNELS ===
-// Uses backend /api/vtv/streams for stream URLs
-// VTV1-VTV5,VTV7-VTV9: VTVGo failover | VTV6,VTV10: xemtv.net scraping
 // Default channel: VTV6
-// Features: PiP button, floating mini-player when reading articles
+// Features: PiP button, floating mini-player when reading articles/videos
 
 (function(){
   if(window._ytLiveLoaded) return;
   window._ytLiveLoaded = true;
 
   const CHANNELS = [
-    {id:'vtv1',     name:'VTV1',         badge:'Tin tức'},
-    {id:'vtv2',     name:'VTV2',         badge:'Khoa học'},
-    {id:'vtv3',     name:'VTV3',         badge:'Giải trí'},
-    {id:'vtv4',     name:'VTV4',         badge:'Quốc tế'},
-    {id:'vtv5',     name:'VTV5',         badge:'Miền Nam'},
-    {id:'vtv6',     name:'VTV6',         badge:'Thanh niên'},
-    {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:'VTV10'},
-    {id:'vtvprime', name:'VTVPrime',     badge:'Prime'},
+    {id:'vtv1',     name:'VTV1', badge:'Tin tức'},
+    {id:'vtv2',     name:'VTV2', badge:'Khoa học'},
+    {id:'vtv3',     name:'VTV3', badge:'Giải trí'},
+    {id:'vtv4',     name:'VTV4', badge:'Quốc tế'},
+    {id:'vtv5',     name:'VTV5', badge:'Miền Nam'},
+    {id:'vtv6',     name:'VTV6', badge:'Thanh niên'},
+    {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:'VTV Cần Thơ'},
+    {id:'vtvprime', name:'VTVPrime', badge:'Prime'},
   ];
-
-  // Default channel is VTV6
   const DEFAULT_CHANNEL = 'vtv6';
-
   const NEEDS_PROXY = /fptplay\.net/;
+
   const STREAMS = {};
   let _currentCh = null;
   let _hls = null;
@@ -33,11 +29,11 @@
   let _blockInserted = false;
   let _streamsLoaded = false;
   let _pipActive = false;
-  let _miniPlayerActive = false;
+  let _miniActive = false;
 
-  // ===== CSS =====
-  const s = document.createElement('style');
-  s.textContent = `
+  // ===== STYLES =====
+  const style = document.createElement('style');
+  style.textContent = `
   .vtv-wrap{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}
@@ -56,47 +52,46 @@
   .vtv-load{display:flex;align-items:center;justify-content:center;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)}}
+  .vtv-controls{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#0d1a2a;border-top:1px solid #1a2a3a}
+  .vtv-pip-btn{background:#1a2a3a;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:3px 8px;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px}
+  .vtv-pip-btn:hover{background:#0b4a7a;color:#fff}
+  .vtv-pip-btn.on{background:#0066cc;border-color:#00ccff;color:#fff}
+  .vtv-pip-btn svg{width:12px;height:12px;fill:currentColor}
   .vtv-epg{margin:0;padding:6px 10px;background:#0a1628;border-top:1px solid #1a2a3a}
   .vtv-epg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
   .vtv-epg-title{font-size:10px;font-weight:700;color:#00ccff}
   .vtv-epg-toggle{background:none;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:2px 8px;border-radius:6px;cursor:pointer}
   .vtv-epg-list{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
   .vtv-epg-list::-webkit-scrollbar{display:none}
-  .vtv-epg-item{flex:0 0 auto;padding:3px 6px;background:#1a2a3a;border-radius:4px;font-size:8px;color:#8ab4d8;white-space:nowrap;cursor:pointer;transition:all .2s}
+  .vtv-epg-item{flex:0 0 auto;padding:3px 6px;background:#1a2a3a;border-radius:4px;font-size:8px;color:#8ab4d8;white-space:nowrap;cursor:pointer}
   .vtv-epg-item:hover{background:#2a4a6a}
   .vtv-epg-item.now{background:#0066cc;color:#fff;font-weight:700}
-  .vtv-epg-item .epg-t{font-size:7px;color:#6a8aaa}
-  .vtv-epg-item.now .epg-t{color:#aaccee}
-  .vtv-epg-item .epg-n{color:#ccc;font-size:8px}
-  .vtv-epg-item.now .epg-n{color:#fff}
+  .vtv-epg-item .t{font-size:7px;color:#6a8aaa}
+  .vtv-epg-item.now .t{color:#aaccee}
+  .vtv-epg-item .n{color:#ccc;font-size:8px}
+  .vtv-epg-item.now .n{color:#fff}
   .vtv-epg-empty{color:#666;font-size:9px;padding:4px}
   .vtv-epg-loading{color:#00ccff;font-size:9px;padding:4px;display:flex;align-items:center;gap:6px}
-  .vtv-epg-spinner{width:10px;height:10px;border:1px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite}
-  .vtv-controls{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#0d1a2a;border-top:1px solid #1a2a3a}
-  .vtv-pip-btn{background:#1a2a3a;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:3px 8px;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px}
-  .vtv-pip-btn:hover{background:#0b4a7a;color:#fff}
-  .vtv-pip-btn.active{background:#0066cc;border-color:#00ccff;color:#fff}
-  .vtv-pip-btn svg{width:12px;height:12px;fill:currentColor}
+  .vtv-epg-sp{width:10px;height:10px;border:1px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite}
 
-  /* ===== MINI PLAYER (floating when reading articles) ===== */
-  .vtv-mini{position:fixed;top:0;left:0;right:0;z-index:99990;background:#000;border-bottom:2px solid #0066cc;box-shadow:0 4px 20px rgba(0,102,204,.3);display:none;transition:transform .3s ease}
+  /* ===== MINI PLAYER ===== */
+  .vtv-mini{position:fixed;top:0;left:0;right:0;z-index:99990;background:#000;border-bottom:2px solid #0066cc;box-shadow:0 4px 20px rgba(0,102,204,.4);display:none;transition:transform .3s ease}
   .vtv-mini.show{display:block}
-  .vtv-mini.vtv-mini-hidden{transform:translateY(-85%)}
-  .vtv-mini-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;max-height:200px}
+  .vtv-mini.hidden{transform:translateY(-88%)}
+  .vtv-mini-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;max-height:180px}
   .vtv-mini-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
-  .vtv-mini-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:linear-gradient(90deg,#003366,#1a1a1a)}
-  .vtv-mini-info{display:flex;align-items:center;gap:6px}
+  .vtv-mini-bar{display:flex;align-items:center;justify-content:space-between;padding:3px 8px;background:linear-gradient(90deg,#003366,#1a1a1a)}
   .vtv-mini-ch{font-size:10px;font-weight:700;color:#00ccff}
-  .vtv-mini-epg{font-size:9px;color:#8ab4d8;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  .vtv-mini-btns{display:flex;gap:4px}
-  .vtv-mini-btn{background:#1a2a3a;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:3px 6px;border-radius:4px;cursor:pointer}
+  .vtv-mini-epg{font-size:9px;color:#8ab4d8;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:8px}
+  .vtv-mini-btns{display:flex;gap:3px}
+  .vtv-mini-btn{background:#1a2a3a;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:2px 6px;border-radius:4px;cursor:pointer}
   .vtv-mini-btn:hover{background:#0b4a7a;color:#fff}
-  .vtv-mini-btn.close{background:#660000;border-color:#990000;color:#ff6666}
-  .vtv-mini-btn.close:hover{background:#990000;color:#fff}
-  .vtv-mini-peek{position:absolute;bottom:-20px;right:10px;background:#0066cc;color:#fff;font-size:9px;padding:2px 8px;border-radius:0 0 6px 6px;cursor:pointer;display:none}
-  .vtv-mini.vtv-mini-hidden .vtv-mini-peek{display:block}
+  .vtv-mini-btn.x{background:#600;border-color:#900;color:#f66}
+  .vtv-mini-btn.x:hover{background:#900;color:#fff}
+  .vtv-mini-peek{position:absolute;bottom:-18px;right:10px;background:#0066cc;color:#fff;font-size:9px;padding:2px 8px;border-radius:0 0 6px 6px;cursor:pointer;display:none}
+  .vtv-mini.hidden .vtv-mini-peek{display:block}
   `;
-  document.head.appendChild(s);
+  document.head.appendChild(style);
 
   // ===== MINI PLAYER =====
   function createMiniPlayer(){
@@ -105,177 +100,119 @@
     mini.className = 'vtv-mini';
     mini.id = 'vtv-mini';
     mini.innerHTML = `
-      <div class="vtv-mini-frame">
-        <video id="vtv-mini-video" playsinline muted preload="auto"></video>
-      </div>
+      <div class="vtv-mini-frame"><video id="vtv-mini-vid" playsinline muted preload="auto"></video></div>
       <div class="vtv-mini-bar">
-        <div class="vtv-mini-info">
+        <div style="display:flex;align-items:center;flex:1;min-width:0">
           <span class="vtv-mini-ch" id="vtv-mini-ch">VTV</span>
           <span class="vtv-mini-epg" id="vtv-mini-epg"></span>
         </div>
         <div class="vtv-mini-btns">
-          <button class="vtv-mini-btn" id="vtv-mini-pip" title="PiP">📺 PiP</button>
+          <button class="vtv-mini-btn" id="vtv-mini-pip" title="PiP">📺</button>
           <button class="vtv-mini-btn" id="vtv-mini-expand" title="Mở rộng">⬆️</button>
           <button class="vtv-mini-btn" id="vtv-mini-hide" title="Thu nhỏ">⬇️</button>
-          <button class="vtv-mini-btn close" id="vtv-mini-close" title="Đóng">✕</button>
+          <button class="vtv-mini-btn x" id="vtv-mini-close" title="Đóng">✕</button>
         </div>
       </div>
-      <div class="vtv-mini-peek" id="vtv-mini-peek">📺 Xem</div>
-    `;
+      <div class="vtv-mini-peek" id="vtv-mini-peek">📺 Xem</div>`;
     document.body.appendChild(mini);
-
-    // Event listeners
     document.getElementById('vtv-mini-pip').onclick = toggleMiniPiP;
     document.getElementById('vtv-mini-expand').onclick = expandFromMini;
-    document.getElementById('vtv-mini-hide').onclick = hideMiniPlayer;
+    document.getElementById('vtv-mini-hide').onclick = ()=>{ mini.classList.add('hidden'); };
     document.getElementById('vtv-mini-close').onclick = closeMiniPlayer;
-    document.getElementById('vtv-mini-peek').onclick = showMiniPlayer;
-    document.getElementById('vtv-mini').onclick = function(e){
-      if(e.target === this || e.target.classList.contains('vtv-mini-frame')){
-        expandFromMini();
-      }
-    };
-  }
-
-  function showMiniPlayer(){
-    const mini = document.getElementById('vtv-mini');
-    if(mini){
-      mini.classList.remove('vtv-mini-hidden');
-      mini.classList.add('show');
-    }
-  }
-
-  function hideMiniPlayer(){
-    const mini = document.getElementById('vtv-mini');
-    if(mini){
-      mini.classList.add('vtv-mini-hidden');
-    }
+    document.getElementById('vtv-mini-peek').onclick = ()=>{ mini.classList.remove('hidden'); };
   }
 
   function closeMiniPlayer(){
     const mini = document.getElementById('vtv-mini');
     if(mini){
-      const video = document.getElementById('vtv-mini-video');
-      if(video){
-        video.pause();
-        video.src = '';
-      }
+      const v = document.getElementById('vtv-mini-vid');
+      if(v){ v.pause(); v.src = ''; }
       mini.remove();
     }
-    _miniPlayerActive = false;
+    _miniActive = false;
   }
 
   function expandFromMini(){
-    // Go back to home view to show full player
-    if(typeof switchCat === 'function'){
-      switchCat('home');
-    }
-    showMiniPlayer();
+    if(typeof switchCat === 'function') switchCat('home');
+    const mini = document.getElementById('vtv-mini');
+    if(mini) mini.classList.remove('hidden');
   }
 
   function activateMiniPlayer(){
     if(!_currentCh) return;
     createMiniPlayer();
-    _miniPlayerActive = true;
-
+    _miniActive = true;
     const mini = document.getElementById('vtv-mini');
-    const miniVideo = document.getElementById('vtv-mini-video');
-    const mainVideo = document.getElementById('vtv-player');
-
-    // Copy video source from main player
-    if(mainVideo && mainVideo.src){
-      miniVideo.src = mainVideo.src;
-      miniVideo.play().catch(()=>{});
-    } else if(mainVideo && mainVideo.querySelector('source')){
-      const source = mainVideo.querySelector('source');
-      if(source && source.src){
-        miniVideo.src = source.src;
-        miniVideo.play().catch(()=>{});
-      }
+    const miniVid = document.getElementById('vtv-mini-vid');
+    const mainVid = document.getElementById('vtv-player');
+
+    // Copy source from main player
+    if(_hls){
+      // HLS: load same source into mini
+      const hls = new Hls({enableWorker:true,lowLatencyMode:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:10});
+      hls.loadSource(STREAMS[_currentCh][0]);
+      hls.attachMedia(miniVid);
+      miniVid.play().catch(()=>{});
+    } else if(mainVid.src){
+      miniVid.src = mainVid.src;
+      miniVid.play().catch(()=>{});
     }
 
-    // Update channel info
-    const ch = CHANNELS.find(c => c.id === _currentCh);
-    if(ch){
-      document.getElementById('vtv-mini-ch').textContent = ch.name;
-    }
-
-    // Update EPG info
+    const ch = CHANNELS.find(c=>c.id===_currentCh);
+    if(ch) document.getElementById('vtv-mini-ch').textContent = ch.name;
     updateMiniEpg();
-
     mini.classList.add('show');
-    mini.classList.remove('vtv-mini-hidden');
+    mini.classList.remove('hidden');
   }
 
   function updateMiniEpg(){
     if(!_currentCh) return;
-    fetch('/api/vtv/epg/' + _currentCh)
-      .then(r => r.json())
-      .then(data => {
-        const programs = data.programs || [];
-        const nowProg = programs.find(p => p.now);
-        if(nowProg){
-          document.getElementById('vtv-mini-epg').textContent = nowProg.time + ' - ' + nowProg.title;
-        } else if(programs.length > 0){
-          document.getElementById('vtv-mini-epg').textContent = programs[0].time + ' - ' + programs[0].title;
-        }
-      }).catch(()=>{});
+    fetch('/api/vtv/epg/'+_currentCh).then(r=>r.json()).then(d=>{
+      const progs = d.programs||[];
+      const now = progs.find(p=>p.now);
+      document.getElementById('vtv-mini-epg').textContent = now ? now.time+' '+now.title : (progs[0] ? progs[0].time+' '+progs[0].title : '');
+    }).catch(()=>{});
   }
 
   async function toggleMiniPiP(){
-    const miniVideo = document.getElementById('vtv-mini-video');
-    if(!miniVideo) return;
-
+    const v = document.getElementById('vtv-mini-vid');
+    if(!v) return;
     try{
-      if(document.pictureInPictureElement === miniVideo){
+      if(document.pictureInPictureElement === v){
         await document.exitPictureInPicture();
-        _pipActive = false;
       } else {
-        await miniVideo.requestPictureInPicture();
-        _pipActive = true;
+        await v.requestPictureInPicture();
       }
-    } catch(e){
-      console.warn('PiP error:', e);
-      alert('Trình duyệt không hỗ trợ PiP hoặc video chưa sẵn sàng');
-    }
+    } catch(e){ alert('Không hỗ trợ PiP'); }
   }
 
   // ===== MAIN PLAYER =====
   async function loadAllStreams(){
     if(_loading) return;
     _loading = true;
-    const loadEl = document.getElementById('vtv-load');
-    if(loadEl) loadEl.innerHTML = '<div class="vtv-spinner"></div>Đang tải danh sách kênh...';
-    try {
+    const el = document.getElementById('vtv-load');
+    if(el) el.innerHTML = '<div class="vtv-spinner"></div>Đang tải kênh...';
+    try{
       const r = await fetch('/api/vtv/streams', {signal: AbortSignal.timeout(10000)});
       if(r.ok){
         const data = await r.json();
-        CHANNELS.forEach(ch => {
+        CHANNELS.forEach(ch=>{
           const info = data[ch.id];
           if(info && info.stream_url){
             let url = info.stream_url;
-            if(NEEDS_PROXY.test(url)){
-              url = '/api/proxy/m3u8/vtv?url=' + encodeURIComponent(url);
-            }
+            if(NEEDS_PROXY.test(url)) url = '/api/proxy/m3u8/vtv?url='+encodeURIComponent(url);
             STREAMS[ch.id] = [url];
           } else {
             STREAMS[ch.id] = [];
           }
         });
       }
-    } catch(e) {
-      console.warn('VTV API error:', e);
-    }
-    CHANNELS.forEach(ch => {
+    } catch(e){ console.warn('VTV API error:', e); }
+    CHANNELS.forEach(ch=>{
       const tab = document.getElementById('vtvt-'+ch.id);
       if(tab){
-        if(STREAMS[ch.id] && STREAMS[ch.id].length > 0){
-          tab.classList.remove('off');
-          tab.textContent = ch.name;
-        } else {
-          tab.style.opacity = '0.35';
-          tab.textContent = ch.name + ' ✕';
-        }
+        if(STREAMS[ch.id]&&STREAMS[ch.id].length>0){ tab.classList.remove('off'); tab.textContent=ch.name; }
+        else { tab.style.opacity='0.35'; tab.textContent=ch.name+' ✕'; }
       }
     });
     _loading = false;
@@ -287,286 +224,193 @@
     w.className = 'vtv-wrap';
     w.id = 'vtv-block';
     let tabs = '';
-    CHANNELS.forEach(ch => {
+    CHANNELS.forEach(ch=>{
       tabs += '<button class="vtv-tab off" id="vtvt-'+ch.id+'" onclick="window._vtvPlay(\''+ch.id+'\')">'+ch.name+'</button>';
     });
     w.innerHTML =
       '<div class="vtv-head"><span class="vtv-title">📺 VTV Trực Tuyến</span><span class="vtv-badge">● LIVE</span></div>' +
-      '<div class="vtv-tabs">' + tabs + '</div>' +
+      '<div class="vtv-tabs">'+tabs+'</div>' +
       '<div class="vtv-frame">' +
-        '<div class="vtv-load" id="vtv-load"><div class="vtv-spinner"></div>Đang tải danh sách kênh...</div>' +
+        '<div class="vtv-load" id="vtv-load"><div class="vtv-spinner"></div>Đang tải kênh...</div>' +
         '<video id="vtv-player" playsinline muted controls preload="auto" style="display:none"></video>' +
         '<div class="vtv-err" id="vtv-err" style="display:none"><span id="vtv-err-msg">Không thể tải kênh</span><button onclick="window._vtvRetry()">Thử lại</button></div>' +
       '</div>' +
       '<div class="vtv-controls">' +
         '<button class="vtv-pip-btn" id="vtv-pip-btn" onclick="window._vtvTogglePiP()">' +
-          '<svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="12" y="10" width="8" height="6" rx="1" fill="currentColor"/></svg>' +
-          'PiP' +
+          '<svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="12" y="10" width="8" height="6" rx="1" fill="currentColor"/></svg>PiP' +
         '</button>' +
         '<span style="flex:1"></span>' +
         '<span style="font-size:9px;color:#666" id="vtv-status"></span>' +
       '</div>' +
       '<div class="vtv-epg" id="vtv-epg">' +
-        '<div class="vtv-epg-header"><span class="vtv-epg-title">📋 Lịch phát sóng (vtv.vn)</span><button class="vtv-epg-toggle" id="vtv-epg-toggle" onclick="window._vtvToggleEpg()">Ẩn</button></div>' +
-        '<div class="vtv-epg-list" id="vtv-epg-list"><div class="vtv-epg-loading"><div class="vtv-epg-spinner"></div>Đang tải EPG...</div></div>' +
+        '<div class="vtv-epg-header"><span class="vtv-epg-title">📋 Lịch phát sóng</span><button class="vtv-epg-toggle" id="vtv-epg-toggle" onclick="window._vtvToggleEpg()">Ẩn</button></div>' +
+        '<div class="vtv-epg-list" id="vtv-epg-list"><div class="vtv-epg-loading"><div class="vtv-epg-sp"></div>Đang tải...</div></div>' +
       '</div>';
     return w;
   }
 
   async function loadEpg(chId){
-    const epgList = document.getElementById('vtv-epg-list');
-    if(!epgList) return;
-
-    epgList.innerHTML = '<div class="vtv-epg-loading"><div class="vtv-epg-spinner"></div>Đang tải lịch phát sóng...</div>';
-
-    try {
-      const r = await fetch('/api/vtv/epg/' + chId, {signal: AbortSignal.timeout(10000)});
-      if(!r.ok) throw new Error('EPG fetch failed: ' + r.status);
+    const el = document.getElementById('vtv-epg-list');
+    if(!el) return;
+    el.innerHTML = '<div class="vtv-epg-loading"><div class="vtv-epg-sp"></div>Đang tải lịch...</div>';
+    try{
+      const r = await fetch('/api/vtv/epg/'+chId, {signal: AbortSignal.timeout(10000)});
+      if(!r.ok) throw new Error('fail');
       const data = await r.json();
-      const programs = data.programs || [];
-
-      if(programs.length === 0){
-        epgList.innerHTML = '<div class="vtv-epg-empty">Chưa có lịch phát sóng cho kênh này</div>';
-        return;
-      }
-
+      const progs = data.programs||[];
+      if(!progs.length){ el.innerHTML='<div class="vtv-epg-empty">Chưa có lịch phát sóng</div>'; return; }
       let h = '';
-      programs.forEach(p => {
-        const isNow = p.now ? ' now' : '';
-        const desc = p.description ? ' title="' + escAttr(p.description) + '"' : '';
-        h += '<div class="vtv-epg-item' + isNow + '"' + desc + '>';
-        h += '<span class="epg-t">' + (p.time || '') + '</span> ';
-        if(p.end_time) h += '<span class="epg-t">-' + p.end_time + '</span> ';
-        h += '<span class="epg-n">' + (p.title || '') + '</span>';
-        h += '</div>';
+      progs.forEach(p=>{
+        const nw = p.now ? ' now' : '';
+        h += '<div class="vtv-epg-item'+nw+'"><span class="t">'+(p.time||'')+(p.end_time?'-'+p.end_time:'')+'</span> <span class="n">'+(p.title||'')+'</span></div>';
       });
-      epgList.innerHTML = h;
-
-      // Scroll to current program
-      const nowItem = epgList.querySelector('.vtv-epg-item.now');
-      if(nowItem){
-        nowItem.scrollIntoView({behavior: 'smooth', inline: 'center', block: 'nearest'});
-      }
-    } catch(e) {
-      console.warn('EPG load error:', e);
-      if(epgList) epgList.innerHTML = '<div class="vtv-epg-empty">Không tải được lịch phát sóng</div>';
+      el.innerHTML = h;
+      const nowItem = el.querySelector('.vtv-epg-item.now');
+      if(nowItem) nowItem.scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'});
+    } catch(e){
+      el.innerHTML = '<div class="vtv-epg-empty">Không tải được lịch</div>';
     }
   }
 
-  function escAttr(s){
-    return String(s || '').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-  }
-
   window._vtvToggleEpg = function(){
-    const list = document.getElementById('vtv-epg-list');
-    const btn = document.getElementById('vtv-epg-toggle');
-    if(!list || !btn) return;
-    if(list.style.display === 'none'){
-      list.style.display = 'flex';
-      btn.textContent = 'Ẩn';
-    } else {
-      list.style.display = 'none';
-      btn.textContent = 'Hiện';
-    }
+    const l = document.getElementById('vtv-epg-list'), b = document.getElementById('vtv-epg-toggle');
+    if(!l||!b) return;
+    if(l.style.display==='none'){ l.style.display='flex'; b.textContent='Ẩn'; }
+    else { l.style.display='none'; b.textContent='Hiện'; }
   };
 
   window._vtvTogglePiP = async function(){
-    const video = document.getElementById('vtv-player');
+    const v = document.getElementById('vtv-player');
     const btn = document.getElementById('vtv-pip-btn');
-    if(!video) return;
-
+    if(!v) return;
     try{
-      if(document.pictureInPictureElement === video){
+      if(document.pictureInPictureElement === v){
         await document.exitPictureInPicture();
         _pipActive = false;
-        if(btn) btn.classList.remove('active');
+        if(btn) btn.classList.remove('on');
       } else {
-        await video.requestPictureInPicture();
+        await v.requestPictureInPicture();
         _pipActive = true;
-        if(btn) btn.classList.add('active');
+        if(btn) btn.classList.add('on');
       }
-    } catch(e){
-      console.warn('PiP error:', e);
-      alert('Trình duyệt không hỗ trợ PiP hoặc video chưa sẵn sàng');
-    }
+    } catch(e){ alert('Không hỗ trợ PiP'); }
   };
 
   function pinBlock(){
     const h = document.getElementById('view-home');
-    if(!h) return;
-    if(document.getElementById('vtv-block')){
-      _blockInserted = true;
-      return;
-    }
-    const block = buildBlock();
-    h.insertBefore(block, h.firstChild);
+    if(!h||document.getElementById('vtv-block')) return;
+    h.insertBefore(buildBlock(), h.firstChild);
     _blockInserted = true;
     if(!_streamsLoaded){
-      loadAllStreams().then(() => {
-        setTimeout(() => window._vtvPlay(DEFAULT_CHANNEL), 300);
+      loadAllStreams().then(()=>{
+        setTimeout(()=>window._vtvPlay(DEFAULT_CHANNEL), 300);
       });
     }
   }
 
-  window._vtvRetry = function(){
-    if(_currentCh) window._vtvPlay(_currentCh);
-  };
+  window._vtvRetry = function(){ if(_currentCh) window._vtvPlay(_currentCh); };
 
   window._vtvPlay = function(chId){
-    const ch = CHANNELS.find(c => c.id === chId);
+    const ch = CHANNELS.find(c=>c.id===chId);
     if(!ch) return;
     _currentCh = chId;
-    document.querySelectorAll('.vtv-tab').forEach(t => t.classList.remove('on'));
+    document.querySelectorAll('.vtv-tab').forEach(t=>t.classList.remove('on'));
     const tab = document.getElementById('vtvt-'+chId);
     if(tab) tab.classList.add('on');
     const video = document.getElementById('vtv-player');
     const errEl = document.getElementById('vtv-err');
     const loadEl = document.getElementById('vtv-load');
     const errMsg = document.getElementById('vtv-err-msg');
-    video.style.display = 'none';
-    errEl.style.display = 'none';
-    loadEl.style.display = 'flex';
-    loadEl.innerHTML = '<div class="vtv-spinner"></div>Đang kết nối ' + ch.name + '...';
-    if(_hls){ _hls.destroy(); _hls = null; }
-    const urls = STREAMS[chId] || [];
-    if(urls.length === 0){
-      loadEl.style.display = 'none';
-      errEl.style.display = 'flex';
-      if(chId === 'vtvprime'){
-        errMsg.textContent = 'VTVPrime: Kênh trả phí, không có luồng miễn phí.';
-      } else {
-        errMsg.textContent = ch.name + ': Không tìm thấy luồng. Thử lại sau.';
-      }
+    video.style.display='none';
+    errEl.style.display='none';
+    loadEl.style.display='flex';
+    loadEl.innerHTML = '<div class="vtv-spinner"></div>Đang kết nối '+ch.name+'...';
+    if(_hls){_hls.destroy(); _hls=null;}
+    const urls = STREAMS[chId]||[];
+    if(!urls.length){
+      loadEl.style.display='none'; errEl.style.display='flex';
+      errMsg.textContent = chId==='vtvprime' ? 'VTVPrime: Kênh trả phí.' : ch.name+': Không có luồng.';
       return;
     }
     _tryPlay(video, urls, 0, ch.name, loadEl, errEl, errMsg);
     loadEpg(chId);
-
-    // Update mini player if active
-    if(_miniPlayerActive){
+    if(_miniActive){
       document.getElementById('vtv-mini-ch').textContent = ch.name;
       updateMiniEpg();
     }
   };
 
   function _tryPlay(video, urls, idx, name, loadEl, errEl, errMsg){
-    if(idx >= urls.length){
-      loadEl.style.display = 'none';
-      errEl.style.display = 'flex';
-      errMsg.textContent = name + ': Tất cả nguồn đều lỗi. Thử lại sau.';
+    if(idx>=urls.length){
+      loadEl.style.display='none'; errEl.style.display='flex';
+      errMsg.textContent = name+': Tất cả nguồn lỗi.';
       return;
     }
     const src = urls[idx];
-    const sourceLabel = ' (' + (idx+1) + '/' + urls.length + ')';
-    loadEl.innerHTML = '<div class="vtv-spinner"></div>Đang kết nối ' + name + sourceLabel + '...';
-    if(typeof Hls !== 'undefined' && Hls.isSupported()){
-      const hls = new Hls({
-        enableWorker: true,
-        lowLatencyMode: true,
-        startLevel: -1,
-        capLevelToPlayerSize: true,
-        maxBufferLength: 20,
-        xhrSetup: function(xhr, url){
-          if(url.includes('fptplay')){
-            xhr.setRequestHeader('Referer', 'https://fptplay.vn/');
-            xhr.setRequestHeader('Origin', 'https://fptplay.vn');
-          }
-        }
-      });
+    loadEl.innerHTML = '<div class="vtv-spinner"></div>Kết nối '+name+' ('+(idx+1)+'/'+urls.length+')...';
+    if(typeof Hls!=='undefined'&&Hls.isSupported()){
+      const hls = new Hls({enableWorker:true,lowLatencyMode:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:20});
       _hls = hls;
       hls.loadSource(src);
       hls.attachMedia(video);
-      hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        video.play().catch(() => {});
-        loadEl.style.display = 'none';
-        video.style.display = 'block';
-      });
-      let recoverAttempts = 0;
-      hls.on(Hls.Events.ERROR, (ev, data) => {
+      hls.on(Hls.Events.MANIFEST_PARSED,()=>{ video.play().catch(()=>{}); loadEl.style.display='none'; video.style.display='block'; });
+      let rec = 0;
+      hls.on(Hls.Events.ERROR,(ev,data)=>{
         if(data.fatal){
-          if(data.type === Hls.ErrorTypes.NETWORK_ERROR){
-            recoverAttempts++;
-            if(recoverAttempts <= 3){
-              setTimeout(() => hls.startLoad(), 2000);
-            } else {
-              hls.destroy();
-              _hls = null;
-              _tryPlay(video, urls, idx + 1, name, loadEl, errEl, errMsg);
-            }
-          } else if(data.type === Hls.ErrorTypes.MEDIA_ERROR){
-            try { hls.recoverMediaError(); } catch(e) {}
-          } else {
-            hls.destroy();
-            _hls = null;
-            _tryPlay(video, urls, idx + 1, name, loadEl, errEl, errMsg);
-          }
+          if(data.type===Hls.ErrorTypes.NETWORK_ERROR){
+            rec++;
+            if(rec<=3) setTimeout(()=>hls.startLoad(), 2000);
+            else { hls.destroy(); _hls=null; _tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg); }
+          } else if(data.type===Hls.ErrorTypes.MEDIA_ERROR){
+            try{hls.recoverMediaError();}catch(e){}
+          } else { hls.destroy(); _hls=null; _tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg); }
         }
       });
     } else if(video.canPlayType('application/vnd.apple.mpegurl')){
       video.src = src;
-      video.addEventListener('loadedmetadata', () => {
-        video.play().catch(() => {});
-        loadEl.style.display = 'none';
-        video.style.display = 'block';
-      }, {once: true});
-      video.addEventListener('error', () => {
-        _tryPlay(video, urls, idx + 1, name, loadEl, errEl, errMsg);
-      }, {once: true});
+      video.addEventListener('loadedmetadata',()=>{ video.play().catch(()=>{}); loadEl.style.display='none'; video.style.display='block'; },{once:true});
+      video.addEventListener('error',()=>{_tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg);},{once:true});
     } else {
-      loadEl.style.display = 'none';
-      errEl.style.display = 'flex';
-      errMsg.textContent = 'Trình duyệt không hỗ trợ HLS';
+      loadEl.style.display='none'; errEl.style.display='flex'; errMsg.textContent='Không hỗ trợ HLS';
     }
   }
 
-  // ===== KEEP PLAYER WHEN NAVIGATING =====
-  // Override showView to activate mini player when leaving home
-  const origShowView = window.showView;
+  // ===== KEEP PLAYER ALIVE WHEN NAVIGATING =====
+  // Override showView to show mini player when leaving home
+  const _origShowView = window.showView;
   window.showView = function(id){
-    // If leaving home/article view and VTV is playing, show mini player
-    if(id !== 'view-home' && _currentCh && STREAMS[_currentCh] && STREAMS[_currentCh].length > 0){
-      if(!_miniPlayerActive){
-        activateMiniPlayer();
-      }
+    if(id!=='view-home' && _currentCh && STREAMS[_currentCh] && STREAMS[_currentCh].length>0 && !_miniActive){
+      activateMiniPlayer();
     }
-    return origShowView.apply(this, arguments);
+    return _origShowView.apply(this, arguments);
   };
 
-  // Override readArticle to keep player
-  const origReadArticle = window.readArticle;
-  if(origReadArticle){
-    window.readArticle = async function(url){
-      // Activate mini player before navigating
-      if(_currentCh && STREAMS[_currentCh] && STREAMS[_currentCh].length > 0){
-        if(!_miniPlayerActive){
-          activateMiniPlayer();
-        }
-      }
-      return origReadArticle.apply(this, arguments);
+  // Override readArticle
+  const _origReadArticle = window.readArticle;
+  if(_origReadArticle){
+    window.readArticle = function(url){
+      if(_currentCh && STREAMS[_currentCh] && STREAMS[_currentCh].length>0 && !_miniActive) activateMiniPlayer();
+      return _origReadArticle.apply(this, arguments);
     };
   }
 
-  // Override switchCat to keep player
-  const origSwitchCat = window.switchCat;
-  if(origSwitchCat){
-    window.switchCat = async function(id){
-      if(id !== 'view-home' && _currentCh && STREAMS[_currentCh] && STREAMS[_currentCh].length > 0){
-        if(!_miniPlayerActive){
-          activateMiniPlayer();
-        }
-      }
-      return origSwitchCat.apply(this, arguments);
+  // Override switchCat
+  const _origSwitchCat = window.switchCat;
+  if(_origSwitchCat){
+    window.switchCat = function(id){
+      if(id!=='view-home' && _currentCh && STREAMS[_currentCh] && STREAMS[_currentCh].length>0 && !_miniActive) activateMiniPlayer();
+      return _origSwitchCat.apply(this, arguments);
     };
   }
 
-  // Wrap loadHome to inject VTV block
-  const orig = window.loadHome;
-  if(orig && !orig.__vtvWrapped){
+  // Override loadHome to inject VTV block
+  const _origLoadHome = window.loadHome;
+  if(_origLoadHome && !_origLoadHome.__vtvWrapped){
     window.loadHome = async function(){
-      const oldBlock = document.getElementById('vtv-block');
-      if(oldBlock) oldBlock.remove();
+      const old = document.getElementById('vtv-block');
+      if(old) old.remove();
       _blockInserted = false;
-      const r = await orig.apply(this, arguments);
+      const r = await _origLoadHome.apply(this, arguments);
       try{ pinBlock(); }catch(e){}
       return r;
     };