Upload static/yt_live.js

static/yt_live.js

@@ -1,20 +1,17 @@
-// === VNEWS — VTV1-VTV10 LIVE CHANNELS pinned to TOP of home page ===
-// Fetches VTV streams from iptv-org/vn.m3u playlist dynamically
+// === 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(){
-  // iptv-org Vietnam playlist URL
-  const VN_M3U_URL = 'https://raw.githubusercontent.com/iptv-org/iptv/master/streams/vn.m3u';
-  // Fallback: Love4vn VTV playlist
-  const LOVE4VN_VTV_URL = 'https://raw.githubusercontent.com/Love4vn/Test/main/VTV.m3u';
-  // Fallback: Ykcitus Vietnam playlist
-  const YKCITUS_VN_URL = 'https://raw.githubusercontent.com/Ykcitus/IPTV/master/vietnam.m3u';
+  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'
+  };
 
-  const CHANNEL_ORDER = ['VTV1', 'VTV2', 'VTV3', 'VTV4', 'VTV5', 'VTV6', 'VTV7', 'VTV8', 'VTV9', 'VTV10'];
   let _vtvChannels = [];
-  let _currentChannelIndex = 0;
   let _hlsInstance = null;
-  let _playlistLoaded = false;
+  let _currentChannelIdx = 0;
 
   // Inject styles once.
   if(!document.getElementById('vtv-channels-css')){
@@ -23,162 +20,101 @@
     .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}
+    .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}
+    .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}
-    .vtv-loading{display:flex;align-items:center;justify-content:center;height:100%;color:#00ccff;font-size:12px;min-height:200px}
+    .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);
   }
 
-  // Parse M3U playlist for VTV channels
-  function parseM3U(m3uText){
-    const channels = {};
-    const lines = m3uText.split('\n');
-    let currentChannel = null;
-    
-    for(let i = 0; i < lines.length; i++){
-      const line = lines[i].trim();
-      if(line.startsWith('#EXTINF:')){
-        const nameMatch = line.match(/,[^,]*$/);
-        const tvgIdMatch = line.match(/tvg-id="([^"]+)"/);
-        const tvgNameMatch = line.match(/tvg-name="([^"]+)"/);
-        const logoMatch = line.match(/tvg-logo="([^"]+)"/);
-        
-        let name = '';
-        if(nameMatch) name = nameMatch[0].substring(1).trim();
-        if(tvgNameMatch) name = tvgNameMatch[1];
-        if(tvgIdMatch) name = tvgIdMatch[1].replace('.vn', '');
-        
-        currentChannel = {
-          name: name,
-          logo: logoMatch ? logoMatch[1] : '',
-          url: ''
-        };
-      } else if(line && !line.startsWith('#') && currentChannel){
-        currentChannel.url = line.trim();
-        const normName = currentChannel.name.toUpperCase().replace(/\s+/g, '');
-        if(CHANNEL_ORDER.some(c => normName.includes(c))){
-          for(const ch of CHANNEL_ORDER){
-            if(normName.includes(ch)){
-              if(!channels[ch] || !channels[ch].url){
-                channels[ch] = currentChannel;
-              }
-              break;
-            }
-          }
-        }
-        currentChannel = null;
-      }
-    }
-    return channels;
-  }
-
-  // Fetch and merge playlists
-  async function loadPlaylists(){
-    const allChannels = {};
-    const urls = [VN_M3U_URL, LOVE4VN_VTV_URL, YKCITUS_VN_URL];
-    
-    for(const url of urls){
-      try{
-        const response = await fetch(url);
-        if(response.ok){
-          const text = await response.text();
-          const parsed = parseM3U(text);
-          for(const [key, ch] of Object.entries(parsed)){
-            if(ch.url && (!allChannels[key] || !allChannels[key].url)){
-              allChannels[key] = ch;
-            }
-          }
-        }
-      }catch(e){
-        console.warn('Failed to load playlist:', url, e);
-      }
-    }
-    
-    // Build ordered array
-    _vtvChannels = CHANNEL_ORDER.map(name => {
-      const ch = allChannels[name];
-      return ch ? {...ch, displayName: name} : null;
-    }).filter(ch => ch && ch.url);
-    
-    _playlistLoaded = true;
-    return _vtvChannels.length > 0;
-  }
+  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) => 
-      `<button class="vtv-channel-tab${i===0?' active':''}" data-idx="${i}" onclick="window._switchVTVChannel(${i})">${name}</button>`
-    ).join('');
-    
+
+    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>'
-        +'<span class="vtv-channel-info" id="vtv-channel-info"></span>'
-      +'</div>'
-      +'<div class="vtv-channel-tabs" id="vtv-channel-tabs">'
-        + tabsHtml
       +'</div>'
+      +'<div class="vtv-channel-tabs" id="vtv-channel-tabs">' + tabsHtml + '</div>'
       +'<div class="vtv-channels-frame">'
-        +'<div class="vtv-loading" id="vtv-loading">Đang tải danh sách kênh...</div>'
+        +'<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 này</div>'
+        +'<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;
+    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');
-    
-    if(!_playlistLoaded){
-      const ok = await loadPlaylists();
-      if(!ok){
-        loadingEl.textContent = 'Không tải được danh sách kênh. Thử lại sau...';
-        setTimeout(initChannels, 30000);
-        return;
-      }
-      // Update tabs - disable channels without streams
-      if(tabsEl){
-        const foundNames = _vtvChannels.map(c => c.displayName);
-        tabsEl.querySelectorAll('.vtv-channel-tab').forEach((tab) => {
-          const idx = parseInt(tab.dataset.idx);
-          const chName = CHANNEL_ORDER[idx];
-          if(!foundNames.includes(chName)){
-            tab.disabled = true;
-            tab.title = chName + ': Không có luồng';
-          }
-        });
-      }
+
+    // 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';
-    playChannel(0);
+
+    // 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 switchVTVChannel(index){
+  function switchVTV(index){
     if(index >= _vtvChannels.length) return;
     const tabs = document.querySelectorAll('.vtv-channel-tab');
     tabs.forEach((tab, i) => {
@@ -188,33 +124,38 @@
   }
 
   // Expose globally
-  window._switchVTVChannel = switchVTVChannel;
+  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');
-    const infoEl = document.getElementById('vtv-channel-info');
-    
-    if(!video || !ch.url) return;
-    
-    _currentChannelIndex = index;
-    if(infoEl) infoEl.textContent = ch.displayName;
-    
+
+    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.textContent = 'Đang kết nối ' + ch.displayName + '...';
-    
+    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,
@@ -246,7 +187,8 @@
               _hlsInstance = null;
               loadingEl.style.display = 'none';
               errorEl.style.display = 'flex';
-              errorEl.textContent = ch.displayName + ': Lỗi phát video';
+              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;
           }
         }
@@ -261,12 +203,14 @@
       video.addEventListener('error', () => {
         loadingEl.style.display = 'none';
         errorEl.style.display = 'flex';
-        errorEl.textContent = ch.displayName + ': Không phát được';
+        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.textContent = 'Trình duyệt không hỗ trợ HLS';
+      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';
     }
   }
 
@@ -291,4 +235,4 @@
   }
   if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',()=>setTimeout(pinChannelsBlock,300));
   else setTimeout(pinChannelsBlock,300);
-})();
+})();