Upload static/yt_live.js

static/yt_live.js

@@ -2,6 +2,7 @@
 // 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
 
 (function(){
   if(window._ytLiveLoaded) return;
@@ -31,7 +32,10 @@
   let _loading = false;
   let _blockInserted = false;
   let _streamsLoaded = false;
+  let _pipActive = false;
+  let _miniPlayerActive = false;
 
+  // ===== CSS =====
   const s = document.createElement('style');
   s.textContent = `
   .vtv-wrap{margin:6px 4px;background:#111;border:1px solid #0066cc;border-radius:10px;overflow:hidden}
@@ -68,9 +72,175 @@
   .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}
+
+  /* ===== 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}
+  .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-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-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-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}
   `;
   document.head.appendChild(s);
 
+  // ===== 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-video" playsinline muted preload="auto"></video>
+      </div>
+      <div class="vtv-mini-bar">
+        <div class="vtv-mini-info">
+          <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-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>
+        </div>
+      </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-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');
+    }
+  }
+
+  function closeMiniPlayer(){
+    const mini = document.getElementById('vtv-mini');
+    if(mini){
+      const video = document.getElementById('vtv-mini-video');
+      if(video){
+        video.pause();
+        video.src = '';
+      }
+      mini.remove();
+    }
+    _miniPlayerActive = false;
+  }
+
+  function expandFromMini(){
+    // Go back to home view to show full player
+    if(typeof switchCat === 'function'){
+      switchCat('home');
+    }
+    showMiniPlayer();
+  }
+
+  function activateMiniPlayer(){
+    if(!_currentCh) return;
+    createMiniPlayer();
+    _miniPlayerActive = 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(()=>{});
+      }
+    }
+
+    // Update channel info
+    const ch = CHANNELS.find(c => c.id === _currentCh);
+    if(ch){
+      document.getElementById('vtv-mini-ch').textContent = ch.name;
+    }
+
+    // Update EPG info
+    updateMiniEpg();
+
+    mini.classList.add('show');
+    mini.classList.remove('vtv-mini-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(()=>{});
+  }
+
+  async function toggleMiniPiP(){
+    const miniVideo = document.getElementById('vtv-mini-video');
+    if(!miniVideo) return;
+
+    try{
+      if(document.pictureInPictureElement === miniVideo){
+        await document.exitPictureInPicture();
+        _pipActive = false;
+      } else {
+        await miniVideo.requestPictureInPicture();
+        _pipActive = true;
+      }
+    } 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');
+    }
+  }
+
+  // ===== MAIN PLAYER =====
   async function loadAllStreams(){
     if(_loading) return;
     _loading = true;
@@ -128,8 +298,16 @@
         '<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-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>';
     return w;
@@ -138,32 +316,32 @@
   async function loadEpg(chId){
     const epgList = document.getElementById('vtv-epg-list');
     if(!epgList) return;
-    
-    // Show loading state
+
     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 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;
       }
-      
+
       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>';
       });
       epgList.innerHTML = h;
-      
+
       // Scroll to current program
       const nowItem = epgList.querySelector('.vtv-epg-item.now');
       if(nowItem){
@@ -174,7 +352,7 @@
       if(epgList) epgList.innerHTML = '<div class="vtv-epg-empty">Không tải được lịch phát sóng</div>';
     }
   }
-  
+
   function escAttr(s){
     return String(s || '').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
   }
@@ -192,6 +370,27 @@
     }
   };
 
+  window._vtvTogglePiP = async function(){
+    const video = document.getElementById('vtv-player');
+    const btn = document.getElementById('vtv-pip-btn');
+    if(!video) return;
+
+    try{
+      if(document.pictureInPictureElement === video){
+        await document.exitPictureInPicture();
+        _pipActive = false;
+        if(btn) btn.classList.remove('active');
+      } else {
+        await video.requestPictureInPicture();
+        _pipActive = true;
+        if(btn) btn.classList.add('active');
+      }
+    } 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');
+    }
+  };
+
   function pinBlock(){
     const h = document.getElementById('view-home');
     if(!h) return;
@@ -204,7 +403,6 @@
     _blockInserted = true;
     if(!_streamsLoaded){
       loadAllStreams().then(() => {
-        // Auto-play VTV6 as default channel
         setTimeout(() => window._vtvPlay(DEFAULT_CHANNEL), 300);
       });
     }
@@ -243,6 +441,12 @@
     }
     _tryPlay(video, urls, 0, ch.name, loadEl, errEl, errMsg);
     loadEpg(chId);
+
+    // Update mini player if active
+    if(_miniPlayerActive){
+      document.getElementById('vtv-mini-ch').textContent = ch.name;
+      updateMiniEpg();
+    }
   };
 
   function _tryPlay(video, urls, idx, name, loadEl, errEl, errMsg){
@@ -315,11 +519,50 @@
     }
   }
 
+  // ===== KEEP PLAYER WHEN NAVIGATING =====
+  // Override showView to activate 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();
+      }
+    }
+    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 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);
+    };
+  }
+
   // Wrap loadHome to inject VTV block
   const orig = window.loadHome;
   if(orig && !orig.__vtvWrapped){
     window.loadHome = async function(){
-      // Remove old VTV block before loadHome replaces innerHTML
       const oldBlock = document.getElementById('vtv-block');
       if(oldBlock) oldBlock.remove();
       _blockInserted = false;