Fix: VTV sticky only on manual pin button, no auto-sticky

static/yt_live.js

@@ -1,7 +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
+// Fixed: VTV stays at top ONLY when user clicks pin button
 
 (function(){
   if(window._ytLiveLoaded) return;
@@ -31,27 +31,11 @@
   let _streamsLoaded = false;
   let _pipActive = false;
   let _miniActive = false;
-  let _vtvSticky = false;
+  let _vtvPinned = false; // only true when user clicks pin
 
   // ===== STYLES =====
   const style = document.createElement('style');
   style.textContent = `
-  /* ===== 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}
@@ -92,6 +76,25 @@
   .vtv-epg-loading{color:#00ccff;font-size:9px;padding:4px;display:flex;align-items:center;gap:6px}
   .vtv-epg-sp{width:10px;height:10px;border:1px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite}
 
+  /* ===== PIN / STICKY MODE ===== */
+  .vtv-pin-btn{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;display:flex;align-items:center;gap:3px}
+  .vtv-pin-btn:hover{background:#0b4a7a;color:#fff}
+  .vtv-pin-btn.pinned{background:#0066cc;border-color:#00ccff;color:#fff}
+
+  .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-wrap.vtv-sticky .vtv-pin-btn{top:4px;right:6px}
+
   /* ===== MINI PLAYER ===== */
   .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,.4);display:none;transition:transform .3s ease}
   .vtv-mini.show{display:block}
@@ -111,66 +114,34 @@
   `;
   document.head.appendChild(style);
 
-  // ===== STICKY SCROLL DETECTION =====
-  function enableStickyVTV(){
+  // ===== PIN BUTTON =====
+  function setupPinButton(){
     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;
+    if(document.getElementById('vtv-pin-btn')) return;
+
+    const btn = document.createElement('button');
+    btn.id = 'vtv-pin-btn';
+    btn.className = 'vtv-pin-btn';
+    btn.innerHTML = '📌 Ghim';
+    btn.title = 'Ghim VTV cố định trên đầu trang';
+    btn.onclick = function(e){
+      e.stopPropagation();
+      _vtvPinned = !_vtvPinned;
+      if(_vtvPinned){
         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;
+        btn.classList.add('pinned');
+        btn.innerHTML = '📌 Đã ghim';
+      } else {
         block.classList.remove('vtv-sticky');
-        const btn = document.getElementById('vtv-sticky-btn');
-        if(btn){btn.textContent='📌';btn.style.color='#8ab4d8';btn.style.borderColor='#2a3a4a';}
+        btn.classList.remove('pinned');
+        btn.innerHTML = '📌 Ghim';
       }
-      lastScrollY = scrollY;
-    }, {passive: true});
+    };
+    header.style.position = 'relative';
+    header.appendChild(btn);
   }
 
   // ===== MINI PLAYER =====
@@ -378,8 +349,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);
+    // Setup pin button after block is in DOM
+    setTimeout(()=>setupPinButton(), 500);
     if(!_streamsLoaded){
       loadAllStreams().then(()=>{
         setTimeout(()=>window._vtvPlay(DEFAULT_CHANNEL), 300);