Upload static/yt_live.js with huggingface_hub

static/yt_live.js

@@ -0,0 +1,419 @@
+// === VNEWS — VTV1-VTV10 + VTVPrime LIVE CHANNELS ===
+// Default channel: VTV6
+// 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:'VTV Cần Thơ'},
+    {id:'vtvprime', name:'VTVPrime', badge:'Prime'},
+  ];
+  const DEFAULT_CHANNEL = 'vtv6';
+  const NEEDS_PROXY = /fptplay\.net/;
+
+  const STREAMS = {};
+  let _currentCh = null;
+  let _hls = null;
+  let _loading = false;
+  let _blockInserted = false;
+  let _streamsLoaded = false;
+  let _pipActive = false;
+  let _miniActive = false;
+
+  // ===== 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}
+  .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;gap:3px;padding:6px 8px;overflow-x:auto;scrollbar-width:none;background:#0d1a2a}
+  .vtv-tabs::-webkit-scrollbar{display:none}
+  .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;pointer-events:none}
+  .vtv-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;min-height:180px}
+  .vtv-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
+  .vtv-err{display:flex;align-items:center;justify-content:center;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;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}
+  .vtv-epg-item:hover{background:#2a4a6a}
+  .vtv-epg-item.now{background:#0066cc;color:#fff;font-weight:700}
+  .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-sp{width:10px;height:10px;border:1px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite}
+
+  /* ===== 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.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: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: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.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(style);
+
+  // ===== MINI PLAYER =====
+  function createMiniPlayer(){
+    if(document.getElementById('vtv-mini')) return;
+    const mini = document.createElement('div');
+    mini.className = 'vtv-mini';
+    mini.id = 'vtv-mini';
+    mini.innerHTML = `
+      <div class="vtv-mini-frame"><video id="vtv-mini-vid" playsinline muted preload="auto"></video></div>
+      <div class="vtv-mini-bar">
+        <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">📺</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 x" id="vtv-mini-close" title="Đóng">✕</button>
+        </div>
+      </div>
+      <div class="vtv-mini-peek" id="vtv-mini-peek">📺 Xem</div>`;
+    document.body.appendChild(mini);
+    document.getElementById('vtv-mini-pip').onclick = toggleMiniPiP;
+    document.getElementById('vtv-mini-expand').onclick = expandFromMini;
+    document.getElementById('vtv-mini-hide').onclick = ()=>{ mini.classList.add('hidden'); };
+    document.getElementById('vtv-mini-close').onclick = closeMiniPlayer;
+    document.getElementById('vtv-mini-peek').onclick = ()=>{ mini.classList.remove('hidden'); };
+  }
+
+  function closeMiniPlayer(){
+    const mini = document.getElementById('vtv-mini');
+    if(mini){
+      const v = document.getElementById('vtv-mini-vid');
+      if(v){ v.pause(); v.src = ''; }
+      mini.remove();
+    }
+    _miniActive = false;
+  }
+
+  function expandFromMini(){
+    if(typeof switchCat === 'function') switchCat('home');
+    const mini = document.getElementById('vtv-mini');
+    if(mini) mini.classList.remove('hidden');
+  }
+
+  function activateMiniPlayer(){
+    if(!_currentCh) return;
+    createMiniPlayer();
+    _miniActive = true;
+    const mini = document.getElementById('vtv-mini');
+    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(()=>{});
+    }
+
+    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('hidden');
+  }
+
+  function updateMiniEpg(){
+    if(!_currentCh) return;
+    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 v = document.getElementById('vtv-mini-vid');
+    if(!v) return;
+    try{
+      if(document.pictureInPictureElement === v){
+        await document.exitPictureInPicture();
+      } else {
+        await v.requestPictureInPicture();
+      }
+    } catch(e){ alert('Không hỗ trợ PiP'); }
+  }
+
+  // ===== MAIN PLAYER =====
+  async function loadAllStreams(){
+    if(_loading) return;
+    _loading = true;
+    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=>{
+          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);
+            STREAMS[ch.id] = [url];
+          } else {
+            STREAMS[ch.id] = [];
+          }
+        });
+      }
+    } 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+' ✕'; }
+      }
+    });
+    _loading = false;
+    _streamsLoaded = true;
+  }
+
+  function buildBlock(){
+    const w = document.createElement('div');
+    w.className = 'vtv-wrap';
+    w.id = 'vtv-block';
+    let tabs = '';
+    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-frame">' +
+        '<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' +
+        '</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</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 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 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 = '';
+      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>';
+      });
+      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>';
+    }
+  }
+
+  window._vtvToggleEpg = function(){
+    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 v = document.getElementById('vtv-player');
+    const btn = document.getElementById('vtv-pip-btn');
+    if(!v) return;
+    try{
+      if(document.pictureInPictureElement === v){
+        await document.exitPictureInPicture();
+        _pipActive = false;
+        if(btn) btn.classList.remove('on');
+      } else {
+        await v.requestPictureInPicture();
+        _pipActive = true;
+        if(btn) btn.classList.add('on');
+      }
+    } catch(e){ alert('Không hỗ trợ PiP'); }
+  };
+
+  function pinBlock(){
+    const h = document.getElementById('view-home');
+    if(!h||document.getElementById('vtv-block')) return;
+    h.insertBefore(buildBlock(), h.firstChild);
+    _blockInserted = true;
+    if(!_streamsLoaded){
+      loadAllStreams().then(()=>{
+        setTimeout(()=>window._vtvPlay(DEFAULT_CHANNEL), 300);
+      });
+    }
+  }
+
+  window._vtvRetry = function(){ if(_currentCh) window._vtvPlay(_currentCh); };
+
+  window._vtvPlay = function(chId){
+    const ch = CHANNELS.find(c=>c.id===chId);
+    if(!ch) return;
+    _currentCh = chId;
+    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){
+      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);
+    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 lỗi.';
+      return;
+    }
+    const src = urls[idx];
+    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 rec = 0;
+      hls.on(Hls.Events.ERROR,(ev,data)=>{
+        if(data.fatal){
+          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});
+    } else {
+      loadEl.style.display='none'; errEl.style.display='flex'; errMsg.textContent='Không hỗ trợ HLS';
+    }
+  }
+
+  // ===== KEEP PLAYER ALIVE WHEN NAVIGATING =====
+  // Override showView to show mini player when leaving home
+  const _origShowView = window.showView;
+  window.showView = function(id){
+    if(id!=='view-home' && _currentCh && STREAMS[_currentCh] && STREAMS[_currentCh].length>0 && !_miniActive){
+      activateMiniPlayer();
+    }
+    return _origShowView.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
+  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);
+    };
+  }
+
+  // Override loadHome to inject VTV block
+  const _origLoadHome = window.loadHome;
+  if(_origLoadHome && !_origLoadHome.__vtvWrapped){
+    window.loadHome = async function(){
+      const old = document.getElementById('vtv-block');
+      if(old) old.remove();
+      _blockInserted = false;
+      const r = await _origLoadHome.apply(this, arguments);
+      try{ pinBlock(); }catch(e){}
+      return r;
+    };
+    window.loadHome.__vtvWrapped = true;
+  }
+})();