TV player JS - fresh

static/tv_player.js

@@ -0,0 +1,348 @@
+// === VNEWS — VTV1-VTV10 + VTVPrime LIVE CHANNELS + EPG ===
+// Uses backend /api/vtv/streams for stream URLs
+// Default channel: VTV6 | No double-load | EPG schedule
+
+(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'},
+  ];
+
+  // ===== EPG — Lịch phát sóng mẫu cho từng kênh =====
+  const EPG = {
+    vtv1: [
+      {t:'06:00',n:'Nhật ký ngày mai'},{t:'07:00',n:'Thời sự sáng'},{t:'09:00',n:'Thời sự'},
+      {t:'12:00',n:'Thời sự trưa'},{t:'15:00',n:'Thời sự chiều'},{t:'19:00',n:'Thời sự tối'},
+      {t:'21:00',n:'Thời sự đêm'},{t:'23:00',n:'Nhật ký ngày mai'},
+    ],
+    vtv2: [
+      {t:'06:00',n:'Khoa học & Công nghệ'},{t:'08:00',n:'Thế giới tự nhiên'},{t:'10:00',n:'Khoa học 360'},
+      {t:'12:00',n:'Đi tìm giải pháp'},{t:'14:00',n:'Sức khỏe & Cuộc sống'},{t:'16:00',n:'Khoa học cho mọi nhà'},
+      {t:'18:00',n:'Thế giới động vật'},{t:'20:00',n:'Khoa học & Tương lai'},{t:'22:00',n:'Tài liệu khoa học'},
+    ],
+    vtv3: [
+      {t:'06:00',n:'Sáng vui'},{t:'08:00',n:'Phim truyện'},{t:'10:00',n:'Gameshow'},
+      {t:'12:00',n:'Âm nhạc'},{t:'14:00',n:'Phim truyện'},{t:'16:00',n:'Giải trí chiều'},
+      {t:'18:00',n:'Tạp kỹ thuật số'},{t:'20:00',n:'Phim truyện đặc biệt'},{t:'22:00',n:'Đêm giải trí'},
+    ],
+    vtv4: [
+      {t:'06:00',n:'News'},{t:'08:00',n:'World News'},{t:'10:00',n:'Culture'},
+      {t:'12:00',n:'Midday News'},{t:'14:00',n:'Documentary'},{t:'16:00',n:'Sports'},
+      {t:'18:00',n:'Evening News'},{t:'20:00',n:'World Today'},{t:'22:00',n:'Nightline'},
+    ],
+    vtv5: [
+      {t:'06:00',n:'Thời sự miền Nam'},{t:'08:00',n:'Chương trình thiếu nhi'},{t:'10:00',n:'Phim truyện'},
+      {t:'12:00',n:'Thời sự trưa'},{t:'14:00',n:'Giải trí'},{t:'16:00',n:'Thể thao miền Nam'},
+      {t:'18:00',n:'Thời sự chiều'},{t:'20:00',n:'Phim truyện'},{t:'22:00',n:'Thời sự tối'},
+    ],
+    vtv6: [
+      {t:'06:00',n:'Khởi động ngày mới'},{t:'08:00',n:'Thanh niên & Sáng tạo'},{t:'10:00',n:'Thế giới trẻ'},
+      {t:'12:00',n:'Nhịp sống trẻ'},{t:'14:00',n:'Thể thao tuổi trẻ'},{t:'16:00',n:'Giải trí thanh niên'},
+      {t:'18:00',n:'Thời sự trẻ'},{t:'20:00',n:'Đêm nhạc'},{t:'22:00',n:'Thanh niên & Đêm'},
+    ],
+    vtv7: [
+      {t:'06:00',n:'Giáo dục sáng'},{t:'08:00',n:'Học mọi lúc'},{t:'10:00',n:'Kỹ năng sống'},
+      {t:'12:00',n:'Giáo dục trưa'},{t:'14:00',n:'Học trực tuyến'},{t:'16:00',n:'Thiếu nhi'},
+      {t:'18:00',n:'Giáo dục chiều'},{t:'20:00',n:'Tài liệu giáo dục'},{t:'22:00',n:'Học suốt đời'},
+    ],
+    vtv8: [
+      {t:'06:00',n:'Thời sự miền Trung'},{t:'08:00',n:'Văn hóa miền Trung'},{t:'10:00',n:'Phim truyện'},
+      {t:'12:00',n:'Thời sự trưa'},{t:'14:00',n:'Giải trí'},{t:'16:00',n:'Thể thao miền Trung'},
+      {t:'18:00',n:'Thời sự chiều'},{t:'20:00',n:'Phim truyện'},{t:'22:00',n:'Thời sự tối'},
+    ],
+    vtv9: [
+      {t:'06:00',n:'Thời sự miền Bắc'},{t:'08:00',n:'Văn hóa miền Bắc'},{t:'10:00',n:'Phim truyện'},
+      {t:'12:00',n:'Thời sự trưa'},{t:'14:00',n:'Giải trí'},{t:'16:00',n:'Thể thao miền Bắc'},
+      {t:'18:00',n:'Thời sự chiều'},{t:'20:00',n:'Phim truyện'},{t:'22:00',n:'Thời sự tối'},
+    ],
+    vtv10: [
+      {t:'06:00',n:'Thời sự Tây Nam Bộ'},{t:'08:00',n:'Văn hóa đồng bằng'},{t:'10:00',n:'Phim truyện'},
+      {t:'12:00',n:'Thời sự trưa'},{t:'14:00',n:'Giải trí'},{t:'16:00',n:'Thể thao Tây Nam Bộ'},
+      {t:'18:00',n:'Thời sự chiều'},{t:'20:00',n:'Phim truyện'},{t:'22:00',n:'Thời sự tối'},
+    ],
+    vtvprime: [
+      {t:'06:00',n:'Prime Morning'},{t:'08:00',n:'Prime Cinema'},{t:'10:00',n:'Prime Sports'},
+      {t:'12:00',n:'Prime News'},{t:'14:00',n:'Prime Drama'},{t:'16:00',n:'Prime Entertainment'},
+      {t:'18:00',n:'Prime Evening'},{t:'20:00',n:'Prime Night'},{t:'22:00',n:'Prime Late'},
+    ],
+  };
+
+  // ALL external streams need proxy — VTVGo/fptplay CDNs don't send CORS headers
+  const STREAMS = {};
+  let _currentCh = null;
+  let _hls = null;
+  let _loading = false;
+  let _epgVisible = false;
+
+  const s = document.createElement('style');
+  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-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-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}
+  .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}
+  `;
+  document.head.appendChild(s);
+
+  function getCurrentHour(){
+    return new Date().getHours();
+  }
+
+  function buildEPGHTML(chId){
+    const epg = EPG[chId] || [];
+    if(!epg.length) return '';
+    const curH = getCurrentHour();
+    let items = '';
+    epg.forEach(item => {
+      const itemH = parseInt(item.t.split(':')[0], 10);
+      const isNow = itemH <= curH && (itemH + 2) > curH;
+      items += `<div class="vtv-epg-item${isNow?' now':''}"><div class="epg-t">${item.t}</div><div class="epg-n">${item.n}</div></div>`;
+    });
+    return `<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" onclick="window._vtvToggleEPG()">Ẩn/Hiện</button></div>' +
+      '<div class="vtv-epg-list" id="vtv-epg-list">' + items + '</div></div>';
+  }
+
+  window._vtvToggleEPG = function(){
+    const list = document.getElementById('vtv-epg-list');
+    if(list) list.style.display = list.style.display === 'none' ? 'flex' : 'none';
+  };
+
+  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 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){
+            // Always proxy through backend to avoid CORS issues
+            const url = '/api/proxy/m3u8/vtv?url=' + encodeURIComponent(info.stream_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;
+  }
+
+  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 danh sách 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>';
+    return w;
+  }
+
+  // ===== PIN BLOCK — called only once via loadHome wrapper =====
+  function pinBlock(){
+    const h = document.getElementById('view-home');
+    if(!h || document.getElementById('vtv-block')) return;
+    h.insertBefore(buildBlock(), h.firstChild);
+    loadAllStreams().then(() => {
+      // Default to VTV6 if available, otherwise first available channel
+      const tryOrder = ['vtv6','vtv1','vtv2','vtv3','vtv4','vtv5','vtv7','vtv8','vtv9','vtv10'];
+      for(const chId of tryOrder){
+        if(STREAMS[chId] && STREAMS[chId].length > 0){
+          setTimeout(() => window._vtvPlay(chId), 300);
+          return;
+        }
+      }
+    });
+  }
+
+  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 === 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.';
+      }
+      return;
+    }
+    // Update EPG
+    const epgEl = document.getElementById('vtv-epg');
+    if(epgEl) epgEl.remove();
+    const frame = document.querySelector('.vtv-frame');
+    if(frame){
+      const epgDiv = document.createElement('div');
+      epgDiv.innerHTML = buildEPGHTML(chId);
+      frame.appendChild(epgDiv.firstElementChild);
+    }
+    _tryPlay(video, urls, 0, ch.name, loadEl, errEl, errMsg);
+  };
+
+  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.';
+      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');
+          }
+        }
+      });
+      _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) => {
+        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);
+          }
+        }
+      });
+    } 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 = 'Trình duyệt không hỗ trợ HLS';
+    }
+  }
+
+  // ===== ONLY wrap loadHome — no DOMContentLoaded listener to avoid double-load =====
+  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;
+  }
+})();