Add: VTV sticky/fixed mode when scrolling + compact toggle

static/yt_live.js

@@ -1,6 +1,7 @@
 // === VNEWS — VTV1-VTV10 + VTVPrime LIVE CHANNELS ===
 // Default channel: VTV6
 // Features: PiP button, floating mini-player when reading articles/videos
+// Fixed sticky: VTV stays visible at top when scrolling down
 
 (function(){
   if(window._ytLiveLoaded) return;
@@ -30,11 +31,28 @@
   let _streamsLoaded = false;
   let _pipActive = false;
   let _miniActive = false;
+  let _vtvSticky = 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 STICKY / FIXED MODE ===== */
+  .vtv-wrap.vtv-sticky{position:sticky;top:0;z-index:48;transition:all .25s ease;box-shadow:0 4px 24px rgba(0,102,204,.35)}
+  .vtv-wrap.vtv-sticky .vtv-epg{display:none}
+  .vtv-wrap.vtv-sticky .vtv-controls{display:none}
+  .vtv-wrap.vtv-sticky .vtv-tabs{padding:3px 8px}
+  .vtv-wrap.vtv-sticky .vtv-tab{padding:3px 7px;font-size:8px}
+  .vtv-wrap.vtv-sticky .vtv-frame{max-height:140px;min-height:100px}
+  .vtv-wrap.vtv-sticky .vtv-frame video{max-height:140px}
+  .vtv-wrap.vtv-sticky .vtv-load{height:100px}
+  .vtv-wrap.vtv-sticky .vtv-err{height:100px}
+  .vtv-wrap.vtv-sticky .vtv-head{padding:5px 10px}
+  .vtv-wrap.vtv-sticky .vtv-title{font-size:11px}
+  .vtv-wrap.vtv-sticky .vtv-badge{font-size:8px}
+  .vtv-sticky-toggle{position:absolute;top:6px;right:8px;z-index:5;background:rgba(0,0,0,.5);border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:2px 6px;border-radius:4px;cursor:pointer;font-weight:700}
+  .vtv-sticky-toggle:hover{background:#0b4a7a;color:#fff}
+  .vtv-wrap.vtv-sticky .vtv-sticky-toggle{top:4px;right:6px}
+  .vtv-wrap{position:relative;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}
@@ -93,6 +111,68 @@
   `;
   document.head.appendChild(style);
 
+  // ===== STICKY SCROLL DETECTION =====
+  function enableStickyVTV(){
+    const block = document.getElementById('vtv-block');
+    if(!block) return;
+    const header = block.querySelector('.vtv-head');
+    if(!header) return;
+
+    // Add sticky toggle button to header
+    if(!document.getElementById('vtv-sticky-btn')){
+      const btn = document.createElement('button');
+      btn.id = 'vtv-sticky-btn';
+      btn.className = 'vtv-sticky-toggle';
+      btn.textContent = '📌';
+      btn.title = 'Giữ VTV cố định khi cuộn';
+      btn.onclick = function(e){
+        e.stopPropagation();
+        _vtvSticky = !_vtvSticky;
+        if(_vtvSticky){
+          block.classList.add('vtv-sticky');
+          btn.textContent = '📌';
+          btn.style.color = '#00ccff';
+          btn.style.borderColor = '#00ccff';
+        } else {
+          block.classList.remove('vtv-sticky');
+          btn.textContent = '📌';
+          btn.style.color = '#8ab4d8';
+          btn.style.borderColor = '#2a3a4a';
+        }
+      };
+      header.style.position = 'relative';
+      header.appendChild(btn);
+    }
+
+    // Auto-sticky: when VTV block scrolls out of view, make it sticky
+    let lastScrollY = 0;
+    let autoStickyOn = false;
+
+    window.addEventListener('scroll', function(){
+      const scrollY = window.scrollY || window.pageYOffset;
+      const blockRect = block.getBoundingClientRect();
+      const blockBottom = blockRect.bottom;
+
+      // If user manually toggled sticky, respect that
+      if(_vtvSticky) return;
+
+      // Auto-detect: if block bottom is above viewport top (scrolled past)
+      if(blockBottom < 0 && !autoStickyOn){
+        autoStickyOn = true;
+        block.classList.add('vtv-sticky');
+        const btn = document.getElementById('vtv-sticky-btn');
+        if(btn){btn.textContent='📌';btn.style.color='#00ccff';btn.style.borderColor='#00ccff';}
+      } else if(blockRect.top >= 0 && autoStickyOn && scrollY < lastScrollY){
+        // Scrolled back up to VTV — release sticky
+        autoStickyOn = false;
+        block.classList.remove('vtv-sticky');
+        const btn = document.getElementById('vtv-sticky-btn');
+        if(btn){btn.textContent='📌';btn.style.color='#8ab4d8';btn.style.borderColor='#2a3a4a';}
+      }
+      lastScrollY = scrollY;
+    }, {passive: true});
+  }
+
   // ===== MINI PLAYER =====
   function createMiniPlayer(){
     if(document.getElementById('vtv-mini')) return;
@@ -133,7 +213,6 @@
   }
 
   function expandFromMini(){
-    // Close mini player and go home — user wants to see full player
     closeMiniPlayer();
     if(typeof switchCat === 'function') switchCat('home');
   }
@@ -299,6 +378,8 @@
     if(!h||document.getElementById('vtv-block')) return;
     h.insertBefore(buildBlock(), h.firstChild);
     _blockInserted = true;
+    // Enable sticky behavior after block is inserted
+    setTimeout(()=>enableStickyVTV(), 500);
     if(!_streamsLoaded){
       loadAllStreams().then(()=>{
         setTimeout(()=>window._vtvPlay(DEFAULT_CHANNEL), 300);
@@ -374,7 +455,6 @@
   }
 
   // ===== NAVIGATION HOOKS =====
-  // Close mini player when returning to home
   const _origShowView = window.showView;
   window.showView = function(id){
     if(id==='view-home' && _miniActive){
@@ -385,7 +465,6 @@
     return _origShowView.apply(this, arguments);
   };
 
-  // Override readArticle — activate mini when leaving home
   const _origReadArticle = window.readArticle;
   if(_origReadArticle){
     window.readArticle = function(url){
@@ -394,12 +473,10 @@
     };
   }
 
-  // Override switchCat — close mini when going to home, activate when leaving
   const _origSwitchCat = window.switchCat;
   if(_origSwitchCat){
     window.switchCat = function(id){
       if(id==='home'){
-        // Returning to home — close mini player
         if(_miniActive) closeMiniPlayer();
       } else if(_currentCh && STREAMS[_currentCh] && STREAMS[_currentCh].length>0 && !_miniActive){
         activateMiniPlayer();