VNEWS

Running

App Files Files Community

bep40 commited on Jun 6

Commit

367fa5d

verified ·

1 Parent(s): 79e6720

Upload static/yt_live.js

Browse files

Files changed (1) hide show

static/yt_live.js +157 -203

static/yt_live.js CHANGED Viewed

@@ -1,238 +1,192 @@
-// === VNEWS — VTV1-VTV10+ LIVE CHANNELS pinned to TOP of home page ===
-// Fetches stream URLs from backend API (vtv_scraper.py which scrapes xemtv.net)
-// Uses HLS.js (already loaded in index_v2.html) for playback
 (function(){
-  const CHANNEL_ORDER = ['VTV1','VTV2','VTV3','VTV4','VTV5','VTV6','VTV7','VTV8','VTV9','VTV10'];
-  const DISPLAY_NAMES = {
-    'VTV1':'VTV1', 'VTV2':'VTV2', 'VTV3':'VTV3', 'VTV4':'VTV4', 'VTV5':'VTV5',
-    'VTV6':'VTV Cần Thơ', 'VTV7':'VTV7', 'VTV8':'VTV8', 'VTV9':'VTV9', 'VTV10':'VTV10'
   };
-  let _vtvChannels = [];
-  let _hlsInstance = null;
-  let _currentChannelIdx = 0;
-  // Inject styles once.
-  if(!document.getElementById('vtv-channels-css')){
-    const s=document.createElement('style');s.id='vtv-channels-css';
-    s.textContent=`
-    .vtv-channels-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)}
-    .vtv-channels-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(90deg,#003366,#1a1a1a);flex-wrap:wrap}
-    .vtv-channels-title{font-size:13px;font-weight:800;color:#00ccff;letter-spacing:.5px}
-    .vtv-channel-tabs{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none;margin-top:4px;padding-bottom:4px}
-    .vtv-channel-tabs::-webkit-scrollbar{display:none}
-    .vtv-channel-tab{padding:4px 10px;background:#1a2a3a;border:1px solid #2a3a4a;border-radius:12px;color:#8ab4d8;font-size:10px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s}
-    .vtv-channel-tab:hover{background:#0b4a7a;color:#fff}
-    .vtv-channel-tab.active{background:#0066cc;border-color:#0066cc;color:#fff;font-weight:700}
-    .vtv-channel-tab:disabled{opacity:.35;cursor:not-allowed}
-    .vtv-live-badge{font-size:10px;font-weight:800;color:#00ccff;animation:vtv-live-pulse 1.3s infinite;margin-left:4px}
-    @keyframes vtv-live-pulse{0%,100%{opacity:1}50%{opacity:.3}}
-    .vtv-channels-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;min-height:200px}
-    .vtv-channels-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
-    .vtv-channels-error{display:flex;align-items:center;justify-content:center;height:100%;color:#888;font-size:12px;text-align:center;padding:20px;min-height:200px;flex-direction:column;gap:8px}
-    .vtv-channels-error a{color:#00ccff;text-decoration:none;font-size:11px}
-    .vtv-loading{display:flex;align-items:center;justify-content:center;height:100%;color:#00ccff;font-size:12px;min-height:200px;flex-direction:column;gap:8px}
-    .vtv-spinner{width:24px;height:24px;border:3px solid #1a3a5a;border-top-color:#00ccff;border-radius:50%;animation:vtv-spin .8s linear infinite}
-    @keyframes vtv-spin{to{transform:rotate(360deg)}}
-    .vtv-channel-info{font-size:11px;color:#aaa;min-width:80px;text-align:right}
-    `;
-    document.head.appendChild(s);
   }
-  function esc(s){return String(s||'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]))}
-  function buildChannelsBlock(){
-    const wrap=document.createElement('div');
-    wrap.className='vtv-channels-wrap';
-    wrap.id='vtv-channels-block';
-    const tabsHtml = CHANNEL_ORDER.map((name, i) => {
-      const dn = DISPLAY_NAMES[name] || name;
-      return `<button class="vtv-channel-tab${i===0?' active':''}" data-name="${name}" data-idx="${i}" onclick="window._switchVTV(${i})">${dn}</button>`;
-    }).join('');
-    wrap.innerHTML=
-      '<div class="vtv-channels-head">'
-        +'<span class="vtv-channels-title">📺 Kênh VTV Trực Tuyến</span>'
-        +'<span class="vtv-live-badge">● LIVE</span>'
-      +'</div>'
-      +'<div class="vtv-channel-tabs" id="vtv-channel-tabs">' + tabsHtml + '</div>'
-      +'<div class="vtv-channels-frame">'
-        +'<div class="vtv-loading" id="vtv-loading"><div class="vtv-spinner"></div>Đang tải danh sách kênh...</div>'
-        +'<video id="vtv-player" playsinline muted controls preload="auto" style="display:none"></video>'
-        +'<div class="vtv-channels-error" id="vtv-error" style="display:none">Không thể phát kênh</div>'
-      +'</div>';
-    return wrap;
   }
-  function pinChannelsBlock(){
-    const home=document.getElementById('view-home');
-    if(!home) return;
-    if(document.getElementById('vtv-channels-block')) return;
-    home.insertBefore(buildChannelsBlock(), home.firstChild);
-    initChannels();
-  }
-  async function initChannels(){
-    const loadingEl = document.getElementById('vtv-loading');
-    const video = document.getElementById('vtv-player');
-    const errorEl = document.getElementById('vtv-error');
-    const tabsEl = document.getElementById('vtv-channel-tabs');
-    // Fetch channel streams from backend
-    try{
-      const r = await fetch('/api/vtv/channels');
-      const data = await r.json();
-      _vtvChannels = data.channels || [];
-    }catch(e){
-      console.warn('Failed to fetch VTV channels:', e);
-      _vtvChannels = [];
-    }
-    loadingEl.style.display = 'none';
-    // Disable tabs for channels without streams
-    if(tabsEl){
-      const foundNames = _vtvChannels.map(c => c.name);
-      tabsEl.querySelectorAll('.vtv-channel-tab').forEach(tab => {
-        const name = tab.dataset.name;
-        if(!foundNames.includes(name)){
-          tab.disabled = true;
-          tab.title = DISPLAY_NAMES[name] + ': Chưa có luồng';
-        }
-      });
-    }
-    // Play first available channel
-    if(_vtvChannels.length > 0){
-      playChannel(0);
-    } else {
-      errorEl.style.display = 'flex';
-      errorEl.innerHTML = 'Chưa có kênh nào khả dụng.<br><a href="https://hd.xemtv.net/kenh-vtv3-truc-tuyen-hot.html" target="_blank">Xem tại xemtv.net →</a>';
-      video.style.display = 'none';
     }
-  }
-  function switchVTV(index){
-    if(index >= _vtvChannels.length) return;
-    const tabs = document.querySelectorAll('.vtv-channel-tab');
-    tabs.forEach((tab, i) => {
-      tab.classList.toggle('active', parseInt(tab.dataset.idx) === index);
-    });
-    playChannel(index);
-  }
-  // Expose globally
-  window._switchVTV = switchVTV;
-  function playChannel(index){
-    if(index >= _vtvChannels.length) return;
-    const ch = _vtvChannels[index];
-    const video = document.getElementById('vtv-player');
-    const errorEl = document.getElementById('vtv-error');
-    const loadingEl = document.getElementById('vtv-loading');
-    if(!video || !ch.url) {
-      if(errorEl){
-        errorEl.style.display = 'flex';
-        errorEl.innerHTML = `${esc(ch.displayName || ch.name)}: Chưa có luồng.<br><a href="${esc(ch.fallback_url || 'https://hd.xemtv.net/')}" target="_blank">Xem tại xemtv.net →</a>`;
       }
-      video.style.display = 'none';
       return;
     }
-    _currentChannelIdx = index;
-    // Clean up previous HLS instance
-    if(_hlsInstance){
-      _hlsInstance.destroy();
-      _hlsInstance = null;
     }
-    video.style.display = 'none';
-    errorEl.style.display = 'none';
-    loadingEl.style.display = 'flex';
-    loadingEl.innerHTML = `<div class="vtv-spinner"></div>Đang kết nối ${esc(ch.displayName || ch.name)}...`;
-    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(ch.url);
       hls.attachMedia(video);
-      hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        video.play().catch(() => {});
-        loadingEl.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;
-              loadingEl.style.display = 'none';
-              errorEl.style.display = 'flex';
-              errorEl.innerHTML = `${esc(ch.displayName || ch.name)}: Lỗi phát video.<br><a href="${esc(ch.fallback_url || 'https://hd.xemtv.net/')}" target="_blank">Xem tại xemtv.net →</a>`;
-              video.style.display = 'none';
-              break;
-          }
         }
       });
     } else if(video.canPlayType('application/vnd.apple.mpegurl')){
-      video.src = ch.url;
-      video.addEventListener('loadedmetadata', () => {
-        video.play().catch(() => {});
-        loadingEl.style.display = 'none';
-        video.style.display = 'block';
-      }, {once: true});
-      video.addEventListener('error', () => {
-        loadingEl.style.display = 'none';
-        errorEl.style.display = 'flex';
-        errorEl.innerHTML = `${esc(ch.displayName || ch.name)}: Không phát được.<br><a href="${esc(ch.fallback_url || 'https://hd.xemtv.net/')}" target="_blank">Xem tại xemtv.net →</a>`;
-        video.style.display = 'none';
-      }, {once: true});
     } else {
-      loadingEl.style.display = 'none';
-      errorEl.style.display = 'flex';
-      errorEl.innerHTML = 'Trình duyệt không hỗ trợ HLS.<br><a href="https://hd.xemtv.net/" target="_blank">Xem tại xemtv.net →</a>';
-      video.style.display = 'none';
     }
   }
-  // Wrap loadHome to pin channels block after each render
-  function install(){
-    if(typeof window.loadHome!=='function'){return false;}
-    if(window.loadHome.__vtvChannelsWrapped)return true;
-    const orig=window.loadHome;
-    const wrapped=async function(){
-      const r=await orig.apply(this,arguments);
-      try{pinChannelsBlock();}catch(e){}
       return r;
     };
-    wrapped.__vtvChannelsWrapped=true;
-    window.loadHome=wrapped;
-    return true;
-  }
-  if(!install()){
-    let tries=0;
-    const t=setInterval(()=>{ if(install()||++tries>40)clearInterval(t); },100);
   }
-  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',()=>setTimeout(pinChannelsBlock,300));
-  else setTimeout(pinChannelsBlock,300);
 })();

+// === VNEWS — VTV1-VTV10 LIVE CHANNELS ===
+// Scrapes m3u8 streams from hd.xemtv.net + fallback CDN
+// VTV6 = VTV Can Tho
 (function(){
+  const CHANNELS = [
+    {id:'vtv1',  name:'VTV1',        url:'https://hd.xemtv.net/kenh-vtv1-truc-tuyen-hot.html',         icon:'🔴'},
+    {id:'vtv2',  name:'VTV2',        url:'https://hd.xemtv.net/kenh-vtv2-truc-tuyen-hot.html',         icon:'🟠'},
+    {id:'vtv3',  name:'VTV3',        url:'https://hd.xemtv.net/kenh-vtv3-truc-tuyen-hot.html',         icon:'🟡'},
+    {id:'vtv4',  name:'VTV4',        url:'https://hd.xemtv.net/kenh-vtv4-truc-tuyen-hot.html',         icon:'🟢'},
+    {id:'vtv5',  name:'VTV5',        url:'https://hd.xemtv.net/kenh-vtv5-truc-tuyen-hot.html',         icon:'🔵'},
+    {id:'vtvct', name:'VTV Cần Thơ', url:'https://hd.xemtv.net/kenh-vtv-can-tho-truc-tuyen-hot.html',  icon:'🟣'},
+    {id:'vtv7',  name:'VTV7',        url:'https://hd.xemtv.net/kenh-vtv7-truc-tuyen-hot.html',         icon:'⚪'},
+    {id:'vtv8',  name:'VTV8',        url:'https://hd.xemtv.net/kenh-vtv8-truc-tuyen-hot.html',         icon:'🟤'},
+    {id:'vtv9',  name:'VTV9',        url:'https://hd.xemtv.net/kenh-vtv9-truc-tuyen-hot.html',         icon:'🔴'},
+    {id:'vtv10', name:'VTV10',       url:'https://hd.xemtv.net/kenh-vtv10-truc-tuyen-hot.html',        icon:'🟠'},
+  ];
+  // HoichainTV CDN fallbacks (working VTV streams)
+  const CDN_FALLBACKS = {
+    vtv1: 'https://vips-livecdn.hoichanhtv.com/vtv1/index.m3u8',
+    vtv2: 'https://vips-livecdn.hoichanhtv.com/vtv2/index.m3u8',
+    vtv3: 'https://vips-livecdn.hoichanhtv.com/vtv3/index.m3u8',
+    vtv4: 'https://vips-livecdn.hoichanhtv.com/vtv4/index.m3u8',
+    vtv5: 'https://vips-livecdn.hoichanhtv.com/vtv5/index.m3u8',
+    vtvct:'https://vips-livecdn.hoichanhtv.com/vtv6/index.m3u8',
+    vtv7: 'https://vips-livecdn.hoichanhtv.com/vtv7/index.m3u8',
+    vtv8: 'https://vips-livecdn.hoichanhtv.com/vtv8/index.m3u8',
+    vtv9: 'https://vips-livecdn.hoichanhtv.com/vtv9/index.m3u8',
+    vtv10:'https://vips-livecdn.hoichanhtv.com/vtv10/index.m3u8',
   };
+  let _vtvStreams = {};
+  let _currentCh = null;
+  let _hls = null;
+  if(document.getElementById('vtv-css')) return;
+  const s=document.createElement('style'); s.id='vtv-css';
+  s.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-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}
+  .vtv-load{display:flex;align-items:center;justify-content:center;height:180px;color:#00ccff;font-size:12px}
+  `;
+  document.head.appendChild(s);
+  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" id="vtvt-${ch.id}" onclick="window._vtvPlay('${ch.id}')">${ch.icon} ${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">Đ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">Không thể tải kênh</div>'+
+      '</div>';
+    return w;
   }
+  function pinBlock(){
+    const h=document.getElementById('view-home');
+    if(!h||document.getElementById('vtv-block')) return;
+    h.insertBefore(buildBlock(), h.firstChild);
+    setTimeout(()=>window._vtvPlay('vtv3'), 800);
   }
+  window._vtvPlay = async function(chId){
+    const ch = CHANNELS.find(c=>c.id===chId);
+    if(!ch) return;
+    _currentCh = ch;
+    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');
+    video.style.display='none'; errEl.style.display='none'; loadEl.style.display='flex';
+    loadEl.textContent='Đang kết nối '+ch.name+'...';
+    if(_hls){_hls.destroy(); _hls=null;}
+    // Check cache (5 min)
+    if(_vtvStreams[chId] && Date.now()-_vtvStreams[chId]._ts<300000){
+      _playStream(video, _vtvStreams[chId].url, ch.name, loadEl, errEl);
+      return;
     }
+    // Step 1: Try scraping from xemtv.net
+    try{
+      const html = await _fetchPage(ch.url);
+      const m3u8 = _extractM3u8(html);
+      if(m3u8){
+        _vtvStreams[chId] = {url:m3u8, _ts:Date.now()};
+        _playStream(video, m3u8, ch.name, loadEl, errEl);
+        return;
       }
+    }catch(e){}
+    // Step 2: Try CDN fallback
+    if(CDN_FALLBACKS[chId]){
+      _vtvStreams[chId] = {url:CDN_FALLBACKS[chId], _ts:Date.now()};
+      _playStream(video, CDN_FALLBACKS[chId], ch.name, loadEl, errEl);
       return;
     }
+    // Step 3: Error
+    loadEl.style.display='none';
+    errEl.style.display='flex';
+    errEl.textContent=ch.name+': Không có luồng. Thử lại sau.';
+  };
+  async function _fetchPage(url){
+    // Use our proxy endpoint
+    try{
+      const r = await fetch('/api/proxy/page?url='+encodeURIComponent(url));
+      if(r.ok) return await r.text();
+    }catch(e){}
+    return '';
+  }
+  function _extractM3u8(html){
+    if(!html) return null;
+    const patterns = [
+      /(https?:\/\/[^"'<>\s]+\.m3u8[^"'<>\s]*)/gi,
+      /file\s*[:=]\s*["']([^"']*\.m3u8[^"']*)/gi,
+      /source\s*[:=]\s*["']([^"']*\.m3u8[^"']*)/gi,
+      /src\s*[:=]\s*["']([^"']*\.m3u8[^"']*)/gi,
+      /url\s*[:=]\s*["']([^"']*\.m3u8[^"']*)/gi,
+      /hls\.loadSource\(["']([^"']*\.m3u8[^"']*)/gi,
+    ];
+    for(const pat of patterns){
+      const m = pat.exec(html);
+      if(m) return m[1].trim();
     }
+    return null;
+  }
+  function _playStream(video, src, name, loadEl, errEl){
+    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';
       });
+      hls.on(Hls.Events.ERROR, (ev, data)=>{
         if(data.fatal){
+          if(data.type===Hls.ErrorTypes.NETWORK_ERROR){ hls.startLoad(); }
+          else if(data.type===Hls.ErrorTypes.MEDIA_ERROR){ hls.recoverMediaError(); }
+          else { hls.destroy(); _hls=null; loadEl.style.display='none'; errEl.style.display='flex'; errEl.textContent=name+': Luồng bị gián đoạn'; }
         }
       });
     } 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',()=>{ loadEl.style.display='none'; errEl.style.display='flex'; errEl.textContent=name+': Không phát được'; },{once:true});
     } else {
+      loadEl.style.display='none'; errEl.style.display='flex'; errEl.textContent='Trình duyệt không hỗ trợ HLS';
     }
   }
+  // Wrap loadHome
+  const orig = window.loadHome;
+  if(orig && !orig.__vtvWrapped){
+    window.loadHome = async function(){
+      const r = await orig.apply(this, arguments);
+      try{ pinBlock(); }catch(e){}
       return r;
     };
+    window.loadHome.__vtvWrapped = true;
   }
+  if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',()=>setTimeout(pinBlock,500));
+  else setTimeout(pinBlock,500);
 })();