Restore bep40/VNEWS to dfb6d11 (#15)

- Restore _run.py from dfb6d11 (6613fbba9f040c20be8cb47140d805954b394e15)
- Restore Dockerfile from dfb6d11 (5b66fbda47ce6b1237cf2508e63fc48b2f54a1d3)
- Restore main.py from dfb6d11 (225c05aeed3a7bd26696d1eff80a99e99ba33d50)
- Restore static/yt_live.js from dfb6d11 (10124b9ddc5822a7b2bfff5b44cfb9ba41cf5610)

Dockerfile

@@ -12,4 +12,4 @@ RUN pip install --no-cache-dir -r requirements.txt || true
 COPY . .
 EXPOSE 7860
 
-CMD ["uvicorn", "_run:app", "--host", "0.0.0.0", "--port", "7860", "--reload"]
+CMD ["uvicorn", "_run:app", "--host", "0.0.0.0", "--port", "7860", "--reload"]

_run.py

@@ -1 +1 @@
-from app_v2_entry import app  # v5-stable inline bongda proxy
+from app_v2_entry import app  # v5-stable inline bongda proxy

main.py

@@ -376,27 +376,10 @@ def api_livescore_featured():
         return None
     return JSONResponse(_cached("ls_featured",_f,ttl=30))
 
-# ===== FIXED: /api/shorts endpoint =====
-# Bug: calling api_shorts_vtvnamo() directly passes Query object as count
-# Fix: call get_vtvnambo_shorts/get_wc_related_shorts directly with explicit int
 @app.get("/api/shorts")
-def api_shorts(channel: str = Query(default=""), count: int = Query(default=50, le=100)):
-    if channel == "vtvnambo":
-        items = get_vtvnambo_shorts(count)
-        if not items:
-            items = [v for v in SHORTS_FALLBACK if v.get("channel") == "vtvnambo"]
-        nql = [v for v in items if v.get("id") == "nqlLH6chLRo"]
-        rest = [v for v in items if v.get("id") != "nqlLH6chLRo"]
-        items = nql + rest
-        return JSONResponse(items)
-    if channel == "wc":
-        items = get_wc_related_shorts(count)
-        if not items:
-            items = [v for v in SHORTS_FALLBACK if v.get("channel") == "vtvnambo"]
-        nql = [v for v in items if v.get("id") == "nqlLH6chLRo"]
-        rest = [v for v in items if v.get("id") != "nqlLH6chLRo"]
-        items = nql + rest
-        return JSONResponse(items)
+def api_shorts(channel: str = Query(default="")):
+    if channel == "vtvnambo": return api_shorts_vtvnamo()
+    if channel == "wc": return api_shorts_wc()
     return JSONResponse(_cached("yt_shorts_v3",scrape_shorts,ttl=_cache_ttl_yt))
 
 @app.get("/api/short-stats")

static/yt_live.js

@@ -1,6 +1,6 @@
-// === VNEWS — VTV LIVE + Inline Recorder v8 ===
-// Features: PiP, mini-player, DVR replay, buffer-based recorder, Short AI upload
-// FIX v8: DVR slider stable (uses total buffer, not ahead), recorder bar uses _recBarMax, seek-then-record
+// === VNEWS — VTV LIVE + Inline Recorder v7 ===
+// Features: PiP, mini-player, INLINE RECORDER with ratio crop + AI title + Short AI upload
+// FIX v7: uploadToWall robust JSON parse, processRatio timeout fallback, no premature revoke
 
 (function(){
   if(window._ytLiveLoaded) return;
@@ -27,15 +27,6 @@
     ratio: 'original', _dragMarker: null, _recTimer: null,
   };
 
-  // ===== DVR / LIVE REPLAY STATE =====
-  const _dvr = {
-    enabled: true,
-    maxBufferSec: 600,
-    seekOffset: 0,
-    isSeeked: false,
-    totalBufferSec: 0,  // total buffered range (stable, doesn't change with seek)
-  };
-
   // ===== STYLES =====
   const style = document.createElement('style');
   style.textContent = `
@@ -102,7 +93,6 @@
   .vtv-inline-rec{display:none;padding:8px 10px;background:#0a0a1a;border-top:1px solid #1a1a3a}
   .vtv-inline-rec.show{display:block}
   .vtv-inline-rec .rec-bar{position:relative;height:32px;background:#000;border-radius:4px;overflow:hidden;cursor:pointer;border:1px solid #2a2a4a;margin-bottom:6px;user-select:none}
-  .vtv-inline-rec .rec-buffer-range{border-right:2px solid #2ecc71;pointer-events:none}
   .vtv-inline-rec .rec-bar .rec-progress{position:absolute;top:0;bottom:0;background:rgba(155,89,182,.3);left:0;width:0%;pointer-events:none}
   .vtv-inline-rec .rec-bar .rec-marker{position:absolute;top:0;bottom:0;width:4px;z-index:2;border-radius:2px}
   .vtv-inline-rec .rec-bar .rec-marker.s{background:#2ecc71}
@@ -153,8 +143,6 @@
   .vtv-mini-btn.x:hover{background:#900;color:#fff}
   .vtv-mini-peek{position:absolute;bottom:-18px;right:10px;background:#0066cc;color:#fff;font-size:9px;padding:2px 8px;border-radius:0 0 6px 6px;cursor:pointer;display:none}
   .vtv-mini.hidden .vtv-mini-peek{display:block}
-  #vtv-dvr-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#5cb87a;cursor:pointer}
-  #vtv-dvr-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#5cb87a;cursor:pointer;border:none}
   `;
   document.head.appendChild(style);
 
@@ -183,7 +171,7 @@
     if (el) el.style.display = 'none';
   }
 
-  // ===== UPLOAD TO WALL (Short AI) — v8 =====
+  // ===== UPLOAD TO WALL (Short AI) — v7: robust JSON parse =====
   function uploadToWall(blob, title, source) {
     const formData = new FormData();
     formData.append('video', blob, `vtv-${_currentCh}-${Date.now()}.webm`);
@@ -193,6 +181,7 @@
     return fetch('/api/wall', { method: 'POST', body: formData })
       .then(r => {
         console.log('[VTV Upload] HTTP status:', r.status, r.statusText);
+        // Read as text first, then parse JSON manually for robustness
         return r.text().then(text => {
           console.log('[VTV Upload] Response text:', text.substring(0, 200));
           let data;
@@ -207,37 +196,30 @@
         hideProc();
         console.log('[VTV Upload] Parsed data:', data);
         if (data && data.ok === true) {
-          recStatus('✅ Đã tạo Short AI! Chuyển đến trang chủ...', 'ok');
+          recStatus('✅ Đã tạo Short AI! Xem trong mục Tường AI.', 'ok');
+          // CRITICAL FIX: Update _wallPosts and refresh slider immediately
           if (data.post) {
             if (typeof _wallPosts !== 'undefined') {
               _wallPosts.unshift(data.post);
+              console.log('[VTV Upload] Added post to _wallPosts, total:', _wallPosts.length);
             }
-            if (typeof switchCat === 'function') {
-              switchCat('home');
-            }
-            setTimeout(() => {
-              if (typeof refreshShortAISlider === 'function') {
-                refreshShortAISlider();
-              }
+            // Refresh Short AI slider on home view
+            if (typeof refreshShortAISlider === 'function') {
               setTimeout(() => {
-                const s = document.getElementById('short-ai-section');
-                if (s) {
-                  s.scrollIntoView({behavior:'smooth', block:'start'});
-                  s.style.transition = 'box-shadow 0.5s';
-                  s.style.boxShadow = '0 0 20px rgba(155,89,182,0.8)';
-                  setTimeout(() => s.style.boxShadow = '', 2000);
-                } else {
-                  if (typeof loadHome === 'function') {
-                    loadHome().then(() => {
-                      setTimeout(() => {
-                        const s2 = document.getElementById('short-ai-section');
-                        if (s2) s2.scrollIntoView({behavior:'smooth', block:'start'});
-                      }, 300);
-                    });
-                  }
-                }
+                refreshShortAISlider();
+                console.log('[VTV Upload] refreshShortAISlider called');
               }, 300);
-            }, 200);
+            }
+            // Switch to home so user can see the new slide
+            if (typeof switchCat === 'function') {
+              setTimeout(() => {
+                switchCat('home');
+                setTimeout(() => {
+                  const s = document.getElementById('short-ai-section');
+                  if (s) s.scrollIntoView({behavior:'smooth', block:'start'});
+                }, 500);
+              }, 800);
+            }
           }
           return data;
         } else {
@@ -291,7 +273,7 @@
     recBtn.id = 'vtv-rec-btn';
     recBtn.className = 'vtv-rec-btn';
     recBtn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record';
-    recBtn.title = 'Record video ngắn từ LIVE';
+    recBtn.title = 'Record video ngắn từ LIVE (max 60s)';
     recBtn.onclick = toggleRecPanel;
     controls.appendChild(recBtn);
 
@@ -305,7 +287,6 @@
         <span id="vtv-rec-time-end">01:00</span>
       </div>
       <div class="rec-bar" id="vtv-rec-bar">
-        <div class="rec-buffer-range" id="vtv-rec-buffer-range" style="position:absolute;top:0;bottom:0;background:rgba(46,204,113,0.15);left:0;width:0%"></div>
         <div class="rec-progress" id="vtv-rec-progress"></div>
         <div class="rec-marker s" id="vtv-rec-mk-start" style="display:none"></div>
         <div class="rec-marker e" id="vtv-rec-mk-end" style="display:none"></div>
@@ -316,7 +297,7 @@
         <button class="rec-go" id="vtv-rec-go" onclick="window._vtvRecGo()" disabled>⏺ Record!</button>
         <button class="rec-reset" onclick="window._vtvRecReset()">↺ Reset</button>
       </div>
-      <div class="rec-hint" id="vtv-rec-hint">Xem lại LIVE → chọn điểm đầu → kết thúc → Record</div>
+      <div class="rec-hint" id="vtv-rec-hint">Chọn điểm bắt đầu → kết thúc (tối đa 60s)</div>
       <div class="rec-status" id="vtv-rec-status">Sẵn sàng</div>
     `;
     controls.parentNode.insertBefore(inlineRec, controls.nextSibling);
@@ -365,41 +346,12 @@
   document.addEventListener('mouseup', function(){ _rec._dragMarker = null; });
   document.addEventListener('touchend', function(){ _rec._dragMarker = null; });
 
-  // ===== RECORDER BAR SCALE (dynamic from buffer) =====
-  let _recBarMax = 120; // default 2 min
-
-  function updateRecBarScale() {
-    const video = document.getElementById('vtv-player');
-    if (!video) return;
-    if (video.buffered && video.buffered.length > 0) {
-      const bufEnd = video.buffered.end(video.buffered.length - 1);
-      const bufStart = video.buffered.start(0);
-      _recBarMax = Math.max(60, Math.ceil(bufEnd - bufStart));
-    }
-    const bufRange = document.getElementById('vtv-rec-buffer-range');
-    if (bufRange && video.buffered && video.buffered.length > 0) {
-      const bufStart = video.buffered.start(0);
-      const bufEnd = video.buffered.end(video.buffered.length - 1);
-      bufRange.style.left = (bufStart / _recBarMax * 100) + '%';
-      bufRange.style.width = ((bufEnd - bufStart) / _recBarMax * 100) + '%';
-    }
-  }
-
-  function updateRecBar() {
-    const s = _rec.startTime || 0, e = _rec.endTime || Math.min(60, _recBarMax);
-    const dur = e - s;
-    document.getElementById('vtv-rec-progress').style.left = (s/_recBarMax*100) + '%';
-    document.getElementById('vtv-rec-progress').style.width = (dur/_recBarMax*100) + '%';
-    document.getElementById('vtv-rec-time-dur').textContent = 'Duration: ' + Math.round(dur) + 's';
-  }
-
-  // Drag marker — uses _recBarMax
   function dragMarker(clientX) {
     const bar = document.getElementById('vtv-rec-bar');
     if (!bar) return;
     const rect = bar.getBoundingClientRect();
     const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-    const time = pct * _recBarMax;
+    const time = pct * 60;
     if (_rec._dragMarker === 'start') {
       if (_rec.endTime !== null && time >= _rec.endTime - 1) return;
       _rec.startTime = time;
@@ -416,14 +368,13 @@
     updateRecBar();
   }
 
-  // Click on bar — uses _recBarMax
   function handleRecBarClick(e) {
     const video = document.getElementById('vtv-player');
     if (!video || !video.src) { recStatus('⚠️ Chưa có stream!'); return; }
     const bar = document.getElementById('vtv-rec-bar');
     const rect = bar.getBoundingClientRect();
     const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const time = pct * _recBarMax;
+    const time = pct * 60;
     if (_rec.startTime === null) {
       _rec.startTime = time;
       const mk = document.getElementById('vtv-rec-mk-start');
@@ -434,7 +385,7 @@
     } else if (_rec.endTime === null) {
       if (time <= _rec.startTime) { recStatus('⚠️ Điểm cuối phải sau điểm đầu!', 'err'); return; }
       const dur = time - _rec.startTime;
-      if (dur > _recBarMax) { recStatus('⚠️ Tối đa ' + _recBarMax + 's!', 'err'); return; }
+      if (dur > 60) { recStatus('⚠️ Tối đa 60s!', 'err'); return; }
       _rec.endTime = time;
       const mk = document.getElementById('vtv-rec-mk-end');
       mk.style.display = 'block'; mk.style.left = (pct * 100) + '%';
@@ -445,33 +396,39 @@
     }
   }
 
+  function updateRecBar() {
+    const s = _rec.startTime || 0, e = _rec.endTime || 60;
+    const dur = e - s;
+    document.getElementById('vtv-rec-progress').style.left = (s/60*100) + '%';
+    document.getElementById('vtv-rec-progress').style.width = (dur/60*100) + '%';
+    document.getElementById('vtv-rec-time-dur').textContent = 'Duration: ' + Math.round(dur) + 's';
+  }
+
   // ===== RECORDER CONTROLS =====
   window._vtvRecSetStart = function() {
     const video = document.getElementById('vtv-player');
     if (!video || !video.src) { recStatus('⚠️ Chưa có stream!', 'err'); return; }
-    updateRecBarScale();
     _rec.startTime = video.currentTime || 0;
-    const pct = (_rec.startTime / _recBarMax) * 100;
+    const pct = _rec.startTime / 60 * 100;
     const mk = document.getElementById('vtv-rec-mk-start');
-    mk.style.display = 'block'; mk.style.left = Math.min(100, Math.max(0, pct)) + '%';
+    mk.style.display = 'block'; mk.style.left = pct + '%';
     document.getElementById('vtv-rec-time-start').textContent = fmtSec(_rec.startTime);
     document.getElementById('vtv-rec-set-end').disabled = false;
-    recStatus('Điểm đầu: ' + fmtSec(_rec.startTime) + ' (buffer: ' + _recBarMax + 's)', '');
+    recStatus('Điểm đầu: ' + fmtSec(_rec.startTime), '');
   };
 
   window._vtvRecSetEnd = function() {
     if (_rec.startTime === null) { recStatus('⚠️ Chọn điểm đầu trước!', 'err'); return; }
     const video = document.getElementById('vtv-player');
     if (!video) return;
-    updateRecBarScale();
     const cur = video.currentTime || 0;
     if (cur <= _rec.startTime) { recStatus('⚠️ Điểm cuối phải sau điểm đầu!', 'err'); return; }
     const dur = cur - _rec.startTime;
-    if (dur > _recBarMax) { recStatus('⚠️ Tối đa ' + _recBarMax + 's!', 'err'); return; }
+    if (dur > 60) { recStatus('⚠️ Tối đa 60s!', 'err'); return; }
     _rec.endTime = cur;
-    const pct = (cur / _recBarMax) * 100;
+    const pct = cur / 60 * 100;
     const mk = document.getElementById('vtv-rec-mk-end');
-    mk.style.display = 'block'; mk.style.left = Math.min(100, Math.max(0, pct)) + '%';
+    mk.style.display = 'block'; mk.style.left = pct + '%';
     document.getElementById('vtv-rec-time-end').textContent = fmtSec(cur);
     updateRecBar();
     recStatus('✅ ' + Math.round(dur) + 's. Nhấn Record!', 'ok');
@@ -486,7 +443,7 @@
     document.getElementById('vtv-rec-mk-end').style.display = 'none';
     document.getElementById('vtv-rec-progress').style.width = '0%';
     document.getElementById('vtv-rec-time-start').textContent = '00:00';
-    document.getElementById('vtv-rec-time-end').textContent = fmtSec(Math.min(60, _recBarMax));
+    document.getElementById('vtv-rec-time-end').textContent = '01:00';
     document.getElementById('vtv-rec-time-dur').textContent = 'Duration: 0s';
     document.getElementById('vtv-rec-set-start').disabled = false;
     document.getElementById('vtv-rec-set-end').disabled = true;
@@ -503,11 +460,7 @@
     document.querySelectorAll('#vtv-rec-panel .rec-ratio-row button').forEach(b => b.classList.toggle('active', b.dataset.ratio === ratio));
   };
 
-  // Update buffer range indicator every 2s
-  updateRecBarScale();
-  setInterval(updateRecBarScale, 2000);
-
-  // ===== RECORD — DVR-based: seek to start, play, captureStream =====
+  // ===== RECORD — captureStream with audio (unmute during record) =====
   window._vtvRecGo = function() {
     if (_rec.startTime === null || _rec.endTime === null) return;
     if (_rec.isRecording) {
@@ -522,28 +475,14 @@
     const video = document.getElementById('vtv-player');
     if (!video) { recStatus('⚠️ Không tìm thấy video!', 'err'); return; }
 
-    // Check if buffered range covers the requested segment
-    let canSeek = false;
-    if (video.buffered && video.buffered.length > 0) {
-      for (let i = 0; i < video.buffered.length; i++) {
-        if (video.buffered.start(i) <= _rec.startTime && video.buffered.end(i) >= _rec.endTime) {
-          canSeek = true;
-          break;
-        }
-      }
-    }
-    if (!canSeek) {
-      recStatus('⚠️ Buffer chưa đủ! Xem lại ít nhất ' + Math.round(_rec.endTime) + 's trước khi record.', 'err');
-      return;
-    }
-
     _rec.chunks = [];
     _rec.isRecording = true;
 
+    // CRITICAL: Unmute video so captureStream includes audio tracks
     const wasMuted = video.muted;
     video.muted = false;
     const wasVolume = video.volume;
-    video.volume = 0.5;
+    video.volume = 0.3;
 
     let stream;
     try {
@@ -585,7 +524,6 @@
       document.getElementById('vtv-rec-preview-wrap').style.display = 'block';
       const sizeMB = (_rec.blob.size/1024/1024).toFixed(1);
       recStatus('✅ Record xong! ' + sizeMB + 'MB' + (audioTracks.length > 0 ? ' (có audio)' : ' (video only)'), 'ok');
-      console.log('[VTV Rec] Done. Blob size:', sizeMB, 'MB, chunks:', _rec.chunks.length);
     };
     _rec.recorder.onerror = e => {
       _rec.isRecording = false;
@@ -593,25 +531,17 @@
       recStatus('❌ Lỗi: ' + (e.error?.message||'?'), 'err');
     };
 
-    // Seek to start time, then start recording after seek completes
-    recStatus('🔴 Seek đến ' + fmtSec(_rec.startTime) + '...', 'recording');
+    _rec.recorder.start(500);
     video.currentTime = _rec.startTime;
 
-    function startAfterSeek() {
-      if (Math.abs(video.currentTime - _rec.startTime) < 1) {
-        _rec.recorder.start(500);
-        const btn = document.getElementById('vtv-rec-btn');
-        if (btn) { btn.classList.add('recording'); btn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg> Dừng'; }
-        recStatus('🔴 RECORDING ' + fmtSec(_rec.startTime) + '→' + fmtSec(_rec.endTime) + (audioTracks.length > 0 ? ' (có audio)' : ''), 'recording');
-        const dur = (_rec.endTime - _rec.startTime) * 1000;
-        _rec._recTimer = setTimeout(() => {
-          if (_rec.isRecording && _rec.recorder && _rec.recorder.state !== 'inactive') _rec.recorder.stop();
-        }, dur + 500);
-      } else {
-        setTimeout(startAfterSeek, 200);
-      }
-    }
-    setTimeout(startAfterSeek, 500);
+    const btn = document.getElementById('vtv-rec-btn');
+    if (btn) { btn.classList.add('recording'); btn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg> Dừng'; }
+    recStatus('🔴 ĐANG RECORD...' + (audioTracks.length > 0 ? ' (có audio)' : ''), 'recording');
+
+    const dur = (_rec.endTime - _rec.startTime) * 1000;
+    _rec._recTimer = setTimeout(() => {
+      if (_rec.isRecording && _rec.recorder && _rec.recorder.state !== 'inactive') _rec.recorder.stop();
+    }, dur + 500);
   };
 
   // ===== AI TITLE =====
@@ -620,15 +550,22 @@
     const btn = document.getElementById('vtv-rec-ai-btn');
     const input = document.getElementById('vtv-rec-title-input');
     if (!btn || !input) return;
-    btn.disabled = true; btn.textContent = '⏳ Đang tạo...';
+
+    btn.disabled = true;
+    btn.textContent = '⏳ Đang tạo...';
+
     try {
       const ch = CHANNELS.find(c => c.id === _currentCh);
       const channelName = ch ? ch.name : (_currentCh || 'VTV');
       const title = await generateAITitle(_rec.blob, channelName);
       input.value = title;
       recStatus('✅ Đã tạo tiêu đề AI: ' + title, 'ok');
-    } catch(e) { recStatus('⚠️ Lỗi AI: ' + e.message, 'err'); }
-    finally { btn.disabled = false; btn.textContent = '🤖 AI tạo tiêu đề'; }
+    } catch(e) {
+      recStatus('⚠️ Lỗi AI: ' + e.message, 'err');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '🤖 AI tạo tiêu đề';
+    }
   };
 
   // ===== DOWNLOAD =====
@@ -653,51 +590,153 @@
     }
   };
 
-  // ===== RATIO CROP =====
+  // ===== RATIO CROP — v7: reliable render with timeout fallback =====
   function processRatio(blob, ratio, action, title) {
     showProc(`🔄 Đang xử lý ${ratio}...`);
+
     const blobUrl = URL.createObjectURL(blob);
     const video = document.createElement('video');
-    video.src = blobUrl; video.volume = 0; video.preload = 'auto'; video.playsInline = true;
+    video.src = blobUrl;
+    video.volume = 0;
+    video.preload = 'auto';
+    video.playsInline = true;
+
+    function cleanup() {
+      // Don't revoke blobUrl here — audioVideo may still need it
+      // It will be revoked after recording stops
+    }
 
     function onReady() {
       video.removeEventListener('loadedmetadata', onReady);
       video.removeEventListener('canplay', onReady);
+
       const vw = video.videoWidth, vh = video.videoHeight;
-      if (!vw || !vh) { hideProc(); recStatus('❌ Video không có kích thước hợp lệ.', 'err'); URL.revokeObjectURL(blobUrl); return; }
+      if (!vw || !vh) {
+        hideProc(); recStatus('❌ Video không có kích thước hợp lệ.', 'err');
+        URL.revokeObjectURL(blobUrl); return;
+      }
+
       let cw, ch, sx, sy;
-      if (ratio === '1:1') { const size = Math.min(vw, vh); cw = ch = size; sx = Math.floor((vw - size) / 2); sy = Math.floor((vh - size) / 2); }
-      else if (ratio === '9:16') { ch = vh; cw = Math.min(vw, Math.round(vh * 9 / 16)); sx = Math.floor((vw - cw) / 2); sy = 0; }
-      else { cw = vw; ch = vh; sx = sy = 0; }
+      if (ratio === '1:1') {
+        const size = Math.min(vw, vh); cw = ch = size;
+        sx = Math.floor((vw - size) / 2); sy = Math.floor((vh - size) / 2);
+      } else if (ratio === '9:16') {
+        ch = vh; cw = Math.min(vw, Math.round(vh * 9 / 16));
+        sx = Math.floor((vw - cw) / 2); sy = 0;
+      } else { cw = vw; ch = vh; sx = sy = 0; }
+
       showProc(`🔄 Render ${cw}x${ch}...`);
-      const canvas = document.createElement('canvas'); canvas.width = cw; canvas.height = ch;
+
+      const canvas = document.createElement('canvas');
+      canvas.width = cw; canvas.height = ch;
       const ctx = canvas.getContext('2d');
       const canvasStream = canvas.captureStream(30);
+
+      // Parallel video to capture audio from blob
       let recordStream = canvasStream;
       const audioVideo = document.createElement('video');
-      audioVideo.src = blobUrl; audioVideo.muted = true; audioVideo.volume = 0; audioVideo.preload = 'auto'; audioVideo.playsInline = true;
+      audioVideo.src = blobUrl;
+      audioVideo.muted = true;
+      audioVideo.volume = 0;
+      audioVideo.preload = 'auto';
+      audioVideo.playsInline = true;
+
       audioVideo.onloadedmetadata = function() {
-        try { const aStr = audioVideo.captureStream ? audioVideo.captureStream() : null; if (aStr) { const tracks = aStr.getAudioTracks(); if (tracks.length > 0) { recordStream = new MediaStream([...canvasStream.getVideoTracks(), ...tracks]); } } } catch(e) {}
+        try {
+          const aStr = audioVideo.captureStream ? audioVideo.captureStream() : null;
+          if (aStr) {
+            const tracks = aStr.getAudioTracks();
+            if (tracks.length > 0) {
+              recordStream = new MediaStream([...canvasStream.getVideoTracks(), ...tracks]);
+              console.log('[VTV Crop] Audio merged:', tracks.length, 'tracks');
+            }
+          }
+        } catch(e) { console.warn('[VTV Crop] Audio merge failed:', e); }
       };
-      const mime = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus') ? 'video/webm;codecs=vp9,opus' : MediaRecorder.isTypeSupported('video/webm;codecs=vp8,opus') ? 'video/webm;codecs=vp8,opus' : 'video/webm';
-      let rec; try { rec = new MediaRecorder(recordStream, {mimeType: mime}); } catch(e) { hideProc(); recStatus('❌ Lỗi MediaRecorder: ' + e.message, 'err'); URL.revokeObjectURL(blobUrl); return; }
+
+      const mime = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus')
+        ? 'video/webm;codecs=vp9,opus'
+        : MediaRecorder.isTypeSupported('video/webm;codecs=vp8,opus')
+          ? 'video/webm;codecs=vp8,opus' : 'video/webm';
+
+      let rec;
+      try { rec = new MediaRecorder(recordStream, {mimeType: mime}); }
+      catch(e) { hideProc(); recStatus('❌ Lỗi MediaRecorder: ' + e.message, 'err'); URL.revokeObjectURL(blobUrl); return; }
+
       const chunks = [];
       rec.ondataavailable = e => { if(e.data && e.data.size > 0) chunks.push(e.data); };
-      rec.onstop = () => { hideProc(); URL.revokeObjectURL(blobUrl); if (chunks.length === 0) { recStatus('❌ Render thất bại.', 'err'); return; } const out = new Blob(chunks, {type: 'video/webm'}); if (action === 'download') downloadBlob(out, `vtv-${_currentCh}-${ratio.replace(':','x')}-${Date.now()}.webm`); else uploadToWall(out, title); };
+      rec.onstop = () => {
+        hideProc();
+        URL.revokeObjectURL(blobUrl);
+        if (chunks.length === 0) {
+          recStatus('❌ Render thất bại (không có data). Thử lại hoặc chọn "Gốc".', 'err');
+          return;
+        }
+        const out = new Blob(chunks, {type: 'video/webm'});
+        if (action === 'download') {
+          downloadBlob(out, `vtv-${_currentCh}-${ratio.replace(':','x')}-${Date.now()}.webm`);
+        } else {
+          uploadToWall(out, title);
+        }
+      };
       rec.onerror = e => { hideProc(); recStatus('❌ Lỗi render: ' + (e.error?.message || '?'), 'err'); URL.revokeObjectURL(blobUrl); };
+
       rec.start(200);
+
       audioVideo.play().catch(() => {});
+
       video.play().then(() => {
         let finished = false;
-        function finish() { if (finished) return; finished = true; try { rec.requestData(); } catch(e) {} setTimeout(() => { if (rec.state !== 'inactive') rec.stop(); try { audioVideo.pause(); } catch(e) {} }, 300); }
-        video.onended = finish; audioVideo.onended = finish;
+        function finish() {
+          if (finished) return;
+          finished = true;
+          console.log('[VTV Crop] finish() called');
+          try { rec.requestData(); } catch(e) {}
+          setTimeout(() => {
+            if (rec.state !== 'inactive') rec.stop();
+            try { audioVideo.pause(); } catch(e) {}
+          }, 300);
+        }
+        video.onended = finish;
+        audioVideo.onended = finish;
+
+        // TIMEOUT FALLBACK: if video.ended doesn't fire within expected duration + 3s
         const expectedDur = (video.duration || 0) * 1000;
-        if (expectedDur > 0 && isFinite(expectedDur)) { setTimeout(() => { if (!finished) finish(); }, expectedDur + 3000); } else { setTimeout(() => { if (!finished) finish(); }, 60000); }
-        function draw() { if (video.paused || video.ended) return; ctx.drawImage(video, sx, sy, cw, ch, 0, 0, cw, ch); requestAnimationFrame(draw); }
+        if (expectedDur > 0 && isFinite(expectedDur)) {
+          setTimeout(() => {
+            if (!finished) {
+              console.warn('[VTV Crop] Timeout fallback after', expectedDur + 3000, 'ms');
+              finish();
+            }
+          }, expectedDur + 3000);
+        } else {
+          // If duration is unknown (e.g. blob), use a generous timeout
+          console.warn('[VTV Crop] Duration unknown, using 60s timeout');
+          setTimeout(() => {
+            if (!finished) {
+              console.warn('[VTV Crop] 60s timeout fallback');
+              finish();
+            }
+          }, 60000);
+        }
+
+        function draw() {
+          if (video.paused || video.ended) return;
+          ctx.drawImage(video, sx, sy, cw, ch, 0, 0, cw, ch);
+          requestAnimationFrame(draw);
+        }
         draw();
-      }).catch(e => { hideProc(); recStatus('❌ Lỗi phát video: ' + e.message, 'err'); URL.revokeObjectURL(blobUrl); });
+      }).catch(e => {
+        hideProc(); recStatus('❌ Lỗi phát video: ' + e.message, 'err');
+        URL.revokeObjectURL(blobUrl);
+      });
     }
-    video.onerror = function() { hideProc(); recStatus('❌ Không đọc được video.', 'err'); URL.revokeObjectURL(blobUrl); };
+
+    video.onerror = function() {
+      hideProc(); recStatus('❌ Không đọc được video.', 'err');
+      URL.revokeObjectURL(blobUrl);
+    };
+
     video.addEventListener('loadedmetadata', onReady);
     video.addEventListener('canplay', onReady);
   }
@@ -710,8 +749,14 @@
     panel.classList.toggle('show', _rec.active);
     const btn = document.getElementById('vtv-rec-btn');
     if (btn) {
-      if (_rec.active) { btn.style.background = '#3a1a1a'; btn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg> Đóng'; }
-      else { btn.style.background = ''; btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record'; document.getElementById('vtv-rec-panel').classList.remove('show'); }
+      if (_rec.active) {
+        btn.style.background = '#3a1a1a';
+        btn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg> Đóng';
+      } else {
+        btn.style.background = '';
+        btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record';
+        document.getElementById('vtv-rec-panel').classList.remove('show');
+      }
     }
   }
 
@@ -764,270 +809,85 @@
     mini.classList.add('show'); mini.classList.remove('hidden');
   }
 
-  // ===== DVR / LIVE REPLAY =====
-  function setupDvrControls() {
-    const controls = document.querySelector('.vtv-controls');
-    if (!controls || document.getElementById('vtv-dvr-btn')) return;
-
-    const dvrBtn = document.createElement('button');
-    dvrBtn.id = 'vtv-dvr-btn';
-    dvrBtn.className = 'vtv-pip-btn';
-    dvrBtn.style.cssText = 'background:#1a3a1a;border-color:#2d6a2d;color:#5cb87a;';
-    dvrBtn.innerHTML = '⏪ Xem lại';
-    dvrBtn.title = 'Xem lại LIVE từ thời điểm mở kênh';
-    dvrBtn.onclick = toggleDvrPanel;
-    controls.insertBefore(dvrBtn, controls.firstChild);
-
-    const dvrPanel = document.createElement('div');
-    dvrPanel.id = 'vtv-dvr-panel';
-    dvrPanel.style.cssText = 'display:none;padding:6px 10px;background:#0a1a0a;border-top:1px solid #1a3a1a;';
-    dvrPanel.innerHTML = `
-      <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">
-        <span style="font-size:9px;color:#5cb87a;font-weight:700">⏪ Xem lại LIVE</span>
-        <span id="vtv-dvr-time" style="font-size:9px;color:#888;margin-left:auto">00:00 trước</span>
-      </div>
-      <input type="range" id="vtv-dvr-slider" min="0" max="600" value="0" step="10"
-        style="width:100%;height:4px;-webkit-appearance:none;background:#1a3a1a;border-radius:2px;cursor:pointer"
-        oninput="window._vtvDvrSeek(this.value)">
-      <div style="display:flex;justify-content:space-between;margin-top:2px">
-        <span style="font-size:8px;color:#666">LIVE</span>
-        <span style="font-size:8px;color:#666" id="vtv-dvr-max-label">10 phút trước</span>
-      </div>
-      <div style="display:flex;gap:4px;margin-top:4px">
-        <button onclick="window._vtvDvrJump(-60)" style="flex:1;padding:4px;background:#1a2a1a;border:1px solid #2d6a2d;border-radius:4px;color:#5cb87a;font-size:9px;cursor:pointer">⏪ 1 phút</button>
-        <button onclick="window._vtvDvrJump(-300)" style="flex:1;padding:4px;background:#1a2a1a;border:1px solid #2d6a2d;border-radius:4px;color:#5cb87a;font-size:9px;cursor:pointer">⏪ 5 phút</button>
-        <button onclick="window._vtvDvrJump(-600)" style="flex:1;padding:4px;background:#1a2a1a;border:1px solid #2d6a2d;border-radius:4px;color:#5cb87a;font-size:9px;cursor:pointer">⏪ 10 phút</button>
-        <button onclick="window._vtvDvrGoLive()" style="flex:1;padding:4px;background:#1a3a1a;border:1px solid #2d6a2d;border-radius:4px;color:#5cb87a;font-size:9px;cursor:pointer;font-weight:700">🔴 LIVE</button>
-      </div>
-    `;
-    controls.parentNode.insertBefore(dvrPanel, controls.nextSibling);
-  }
-
-  function toggleDvrPanel() {
-    const panel = document.getElementById('vtv-dvr-panel');
-    const btn = document.getElementById('vtv-dvr-btn');
-    if (!panel) return;
-    if (panel.style.display === 'none') {
-      panel.style.display = 'block';
-      if (btn) { btn.style.background = '#2d6a2d'; btn.style.color = '#fff'; }
-      updateDvrSliderMax();
-    } else {
-      panel.style.display = 'none';
-      if (btn) { btn.style.background = '#1a3a1a'; btn.style.color = '#5cb87a'; }
-    }
-  }
-
-  // FIX v8: Use total buffer range (stable) instead of bufferAhead (changes with seek)
-  function updateDvrSliderMax() {
-    const slider = document.getElementById('vtv-dvr-slider');
-    const video = document.getElementById('vtv-player');
-    const maxLabel = document.getElementById('vtv-dvr-max-label');
-    if (!slider || !video) return;
-    try {
-      if (video.buffered && video.buffered.length > 0) {
-        const bufEnd = video.buffered.end(video.buffered.length - 1);
-        const bufStart = video.buffered.start(0);
-        const totalBuf = Math.floor(bufEnd - bufStart);
-        _dvr.totalBufferSec = totalBuf;
-        // Slider max = total buffer (stable value)
-        const maxVal = Math.max(60, Math.min(1800, totalBuf));
-        slider.max = maxVal;
-        if (maxLabel) maxLabel.textContent = Math.round(maxVal/60) + ' phút trước';
-      }
-    } catch(e) {}
-  }
-
-  // Update DVR time display periodically
-  setInterval(() => {
-    const video = document.getElementById('vtv-player');
-    const slider = document.getElementById('vtv-dvr-slider');
-    const timeEl = document.getElementById('vtv-dvr-time');
-    if (!video || !slider || !timeEl) return;
-    const panel = document.getElementById('vtv-dvr-panel');
-    if (!panel || panel.style.display === 'none') return;
-
-    updateDvrSliderMax();
-
-    if (video.buffered && video.buffered.length > 0) {
-      const bufferedEnd = video.buffered.end(video.buffered.length - 1);
-      const currentTime = video.currentTime;
-      const behind = Math.floor(bufferedEnd - currentTime);
-      if (behind > 5) {
-        _dvr.isSeeked = true;
-        _dvr.seekOffset = behind;
-        const mins = Math.floor(behind / 60);
-        const secs = behind % 60;
-        timeEl.textContent = `${mins}:${String(secs).padStart(2,'0')} trước LIVE`;
-        timeEl.style.color = '#e67e22';
-        slider.value = behind;
-      } else {
-        _dvr.isSeeked = false;
-        _dvr.seekOffset = 0;
-        timeEl.textContent = '🔴 LIVE';
-        timeEl.style.color = '#e74c3c';
-        slider.value = 0;
-      }
-    }
-  }, 2000);
-
-  // FIX v8: Seek uses total buffer range
-  window._vtvDvrSeek = function(val) {
-    const video = document.getElementById('vtv-player');
-    if (!video) return;
-    const behind = parseInt(val);
-    if (video.buffered && video.buffered.length > 0) {
-      const bufferedEnd = video.buffered.end(video.buffered.length - 1);
-      const targetTime = bufferedEnd - behind;
-      if (targetTime >= 0) {
-        video.currentTime = targetTime;
-        _dvr.seekOffset = behind;
-        _dvr.isSeeked = behind > 5;
-      }
-    }
-    const timeEl = document.getElementById('vtv-dvr-time');
-    if (timeEl) {
-      if (behind > 0) {
-        const mins = Math.floor(behind / 60);
-        const secs = behind % 60;
-        timeEl.textContent = `${mins}:${String(secs).padStart(2,'0')} trước LIVE`;
-        timeEl.style.color = '#e67e22';
-      } else {
-        timeEl.textContent = '🔴 LIVE';
-        timeEl.style.color = '#e74c3c';
-      }
-    }
-  };
-
-  window._vtvDvrJump = function(sec) {
-    const video = document.getElementById('vtv-player');
-    if (!video) return;
-    const newBehind = Math.min(_dvr.totalBufferSec || 600, Math.max(0, _dvr.seekOffset - sec));
-    window._vtvDvrSeek(newBehind);
-    const slider = document.getElementById('vtv-dvr-slider');
-    if (slider) slider.value = newBehind;
-  };
-
-  window._vtvDvrGoLive = function() {
-    const video = document.getElementById('vtv-player');
-    if (!video) return;
-    _dvr.isSeeked = false;
-    _dvr.seekOffset = 0;
-    if (video.buffered && video.buffered.length > 0) {
-      video.currentTime = video.buffered.end(video.buffered.length - 1) - 0.5;
-    }
-    window._vtvDvrSeek(0);
-    const slider = document.getElementById('vtv-dvr-slider');
-    if (slider) slider.value = 0;
-  };
-
   // ===== MAIN PLAYER =====
   async function loadAllStreams(){
     if(_loading) return; _loading=true;
     const el=document.getElementById('vtv-load'); if(el) el.innerHTML='<div class="vtv-spinner"></div>Đang tải kênh...';
     try{const r=await fetch('/api/vtv/streams'); if(r.ok){const d=await r.json(); CHANNELS.forEach(ch=>{const i=d[ch.id]; const rawUrls=(i&&i.stream_urls)||(i&&i.stream_url?[i.stream_url]:[]); if(rawUrls.length){const urls=rawUrls.map(u=>NEEDS_PROXY.test(u)?'/api/proxy/m3u8/vtv?url='+encodeURIComponent(u):u); STREAMS[ch.id]=urls;} else STREAMS[ch.id]=[];});}}catch(e){}
     CHANNELS.forEach(ch=>{const t=document.getElementById('vtvt-'+ch.id); if(t){if(STREAMS[ch.id]&&STREAMS[ch.id].length>0){t.classList.remove('off'); t.textContent=ch.name;}else{t.style.opacity='0.35'; t.textContent=ch.name+' ✕';}}});
-    _streamsLoaded=true;
-    if(DEFAULT_CHANNEL&&STREAMS[DEFAULT_CHANNEL]&&STREAMS[DEFAULT_CHANNEL].length>0){loadChannel(DEFAULT_CHANNEL);}
-    else{for(const ch of CHANNELS){if(STREAMS[ch.id]&&STREAMS[ch.id].length>0){loadChannel(ch.id);break;}}}
-    if(el) el.style.display='none';
-    _loading=false;
+    _loading=false; _streamsLoaded=true;
   }
 
-  function loadChannel(chId){
-    if(!chId||!STREAMS[chId]||!STREAMS[chId].length) return;
-    _currentCh=chId;
-    document.querySelectorAll('.vtv-tab').forEach(t=>t.classList.toggle('on',t.id==='vtvt-'+chId));
-    const frame=document.getElementById('vtv-frame');
-    if(!frame) return;
-    frame.innerHTML='<video id="vtv-player" playsinline autoplay muted preload="auto" style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain"></video>';
-    const video=document.getElementById('vtv-player');
-    const src=STREAMS[chId][0];
-    console.log('[VTV] Loading:', chId, src);
-
-    if(_hls){try{_hls.destroy();}catch(e){} _hls=null;}
-
-    if(Hls.isSupported()){
-      // FIX v8: Large buffer for DVR, liveDurationInfinity to prevent auto-seek to live
-      const hls=new Hls({
-        enableWorker:true,
-        lowLatencyMode:false,
-        startLevel:0,
-        capLevelToPlayerSize:true,
-        maxBufferLength:600,        // 10 min buffer
-        maxMaxBufferLength:600,
-        liveSyncDurationCount:30,   // sync 30s behind live (allows 10min buffer)
-        liveMaxLatencyDurationCount:60,
-        liveDurationInfinity:true,  // don't auto-seek to live edge
-        fragLoadingTimeOut:10000,
-        manifestLoadingTimeOut:10000
-      });
-      _hls=hls;
-      hls.loadSource(src);
-      hls.attachMedia(video);
-      hls.on(Hls.Events.MANIFEST_PARSED,function(){video.play().catch(()=>{});});
-      hls.on(Hls.Events.ERROR,function(event,data){
-        if(data.fatal){
-          console.error('[VTV HLS] Fatal error:', data.type, data.details);
-          if(data.type===Hls.ErrorTypes.NETWORK_ERROR){setTimeout(()=>{if(_hls===hls){hls.startLoad();}},3000);}
-          else if(data.type===Hls.ErrorTypes.MEDIA_ERROR){try{hls.recoverMediaError();}catch(e){}}
-          else{frame.innerHTML='<div class="vtv-err"><div>⚠️ Lỗi stream</div><button onclick="loadChannel(\''+chId+'\')">Thử lại</button></div>';}
-        }
-      });
-    }else if(video.canPlayType('application/vnd.apple.mpegurl')){
-      video.src=src;
-      video.play().catch(()=>{});
-    }else{
-      frame.innerHTML='<div class="vtv-err"><div>⚠️ Trình duyệt không hỗ trợ HLS</div></div>';
-    }
+  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 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>'+
+      '<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-list" id="vtv-epg-list"><div class="vtv-epg-loading"><div class="vtv-epg-sp"></div>Đang tải...</div></div></div>';
+    return w;
+  }
 
-    // Setup controls after video is ready
-    setTimeout(()=>{
-      setupDvrControls();
-      buildInlineRecorder();
-      setupPinButton();
-    }, 500);
-
-    // Update EPG
-    fetch('/api/vtv/epg/'+chId).then(r=>r.json()).then(d=>{
-      const epgList=document.getElementById('vtv-epg-list');
-      if(epgList&&d.programs){let h='';d.programs.forEach(p=>{h+=`<div class="vtv-epg-item${p.now?' now':''}"><span class="t">${p.time}</span> <span class="n">${p.title}</span></div>`;});epgList.innerHTML=h;}
-    }).catch(()=>{});
+  async function loadEpg(chId){
+    const el=document.getElementById('vtv-epg-list'); if(!el) return;
+    el.innerHTML='<div class="vtv-epg-loading"><div class="vtv-epg-sp"></div>Đang tải lịch...</div>';
+    try{const r=await fetch('/api/vtv/epg/'+chId); if(!r.ok) throw new Error(); const d=await r.json(); const p=d.programs||[]; if(!p.length){el.innerHTML='<div class="vtv-epg-empty">Chưa có lịch</div>';return;} let h=''; p.forEach(x=>{const n=x.now?' now':''; h+='<div class="vtv-epg-item'+n+'"><span class="t">'+(x.time||'')+(x.end_time?'-'+x.end_time:'')+'</span> <span class="n">'+(x.title||'')+'</span></div>';}); el.innerHTML=h; const ni=el.querySelector('.vtv-epg-item.now'); if(ni) ni.scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'});}catch(e){el.innerHTML='<div class="vtv-epg-empty">Không tải được lịch</div>';}
   }
 
-  // ===== INIT =====
-  function insertVTVBlock(){
-    if(_blockInserted) return;
-    const homeEl=document.getElementById('view-home');
-    if(!homeEl) return;
-    const ref=homeEl.querySelector('.slider-wrap');
-    const block=document.createElement('div');
-    block.id='vtv-block'; block.className='vtv-wrap';
-    block.innerHTML=`
-      <div class="vtv-head"><span class="vtv-title">📺 VTV LIVE</span><span class="vtv-badge">● LIVE</span></div>
-      <div class="vtv-tabs">${CHANNELS.map(ch=>`<button class="vtv-tab" id="vtvt-${ch.id}" onclick="window._vtvLoadCh('${ch.id}')">${ch.name}</button>`).join('')}</div>
-      <div class="vtv-frame" id="vtv-frame"><div class="vtv-load" id="vtv-load"><div class="vtv-spinner"></div>Đang tải...</div></div>
-      <div class="vtv-controls"></div>
-      <div class="vtv-epg"><div class="vtv-epg-header"><span class="vtv-epg-title">📋 Chương trình</span></div><div class="vtv-epg-list" id="vtv-epg-list"><div class="vtv-epg-loading"><div class="vtv-epg-sp"></div>Đang tải...</div></div></div>
-    `;
-    if(ref) homeEl.insertBefore(block,ref);
-    else homeEl.appendChild(block);
-    _blockInserted=true;
+  window._vtvToggleEpg=function(){const l=document.getElementById('vtv-epg-list'),b=document.getElementById('vtv-epg-toggle'); if(!l||!b)return; if(l.style.display==='none'){l.style.display='flex';b.textContent='Ẩn';}else{l.style.display='none';b.textContent='Hiện';}};
+  window._vtvTogglePiP=async function(){const v=document.getElementById('vtv-player'); const b=document.getElementById('vtv-pip-btn'); if(!v)return; try{if(document.pictureInPictureElement===v){await document.exitPictureInPicture();_pipActive=false;if(b)b.classList.remove('on');}else{await v.requestPictureInPicture();_pipActive=true;if(b)b.classList.add('on');}}catch(e){}};
+
+  function pinBlock(){
+    const h=document.getElementById('view-home'); if(!h||document.getElementById('vtv-block')) return;
+    h.insertBefore(buildBlock(),h.firstChild); _blockInserted=true;
+    setTimeout(()=>{setupPinButton();buildInlineRecorder();},500);
+    if(!_streamsLoaded){loadAllStreams().then(()=>{setTimeout(()=>window._vtvPlay(DEFAULT_CHANNEL),300);});}
   }
 
-  window._vtvLoadCh=function(chId){loadChannel(chId);};
+  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;}
+    // Force video element reset to prevent cached content from showing
+    video.removeAttribute('src'); video.pause(); video.load();
+    const urls=STREAMS[chId]||[];
+    if(!urls.length){loadEl.style.display='none';errEl.style.display='flex';errMsg.textContent=chId==='vtvprime'?'VTVPrime: Kênh trả phí.':ch.name+': Không có luồng.';return;}
+    // Small delay to ensure video element is fully reset
+    setTimeout(()=>{_tryPlay(video,urls,0,ch.name,loadEl,errEl,errMsg);},50);
+    loadEpg(chId);
+    if(_miniActive){document.getElementById('vtv-mini-ch').textContent=ch.name;fetch('/api/vtv/epg/'+_currentCh).then(r=>r.json()).then(d=>{const p=d.programs||[];const n=p.find(x=>x.now);document.getElementById('vtv-mini-epg').textContent=n?n.time+' '+n.title:(p[0]?p[0].time+' '+p[0].title:'');}).catch(()=>{});}
+  };
 
-  // Override switchCat to handle mini player
-  const _origSwitchCat=window.switchCat;
-  if(_origSwitchCat){
-    window.switchCat=function(id){
-      if(id==='home'){if(_miniActive)closeMiniPlayer();}
-      else if(_currentCh&&STREAMS[_currentCh]&&STREAMS[_currentCh].length>0&&!_miniActive)activateMiniPlayer();
-      return _origSwitchCat.apply(this,arguments);
-    };
+  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 lỗi.';return;}
+    const src=urls[idx]; loadEl.innerHTML='<div class="vtv-spinner"></div>Kết nối '+name+' ('+(idx+1)+'/'+urls.length+')...';
+    if(typeof Hls!=='undefined'&&Hls.isSupported()){
+      const hls=new Hls({enableWorker:true,lowLatencyMode:false,startLevel:0,capLevelToPlayerSize:true,maxBufferLength:6,maxMaxBufferLength:10,liveSyncDurationCount:2,liveMaxLatencyDurationCount:3,fragLoadingTimeOut:10000,manifestLoadingTimeOut:10000}); _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 rec=0; hls.on(Hls.Events.ERROR,(ev,data)=>{if(data.fatal){if(data.type===Hls.ErrorTypes.NETWORK_ERROR){rec++;if(rec<=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='Không hỗ trợ HLS';}
   }
 
-  // Start
-  insertVTVBlock();
-  loadAllStreams();
+  // ===== NAV HOOKS =====
+  const _origShowView=window.showView;
+  window.showView=function(id){if(id==='view-home'&&_miniActive)closeMiniPlayer();else if(id!=='view-home'&&_currentCh&&STREAMS[_currentCh]&&STREAMS[_currentCh].length>0&&!_miniActive)activateMiniPlayer();return _origShowView.apply(this,arguments);};
+  const _origReadArticle=window.readArticle; if(_origReadArticle){window.readArticle=function(url){if(_currentCh&&STREAMS[_currentCh]&&STREAMS[_currentCh].length>0&&!_miniActive)activateMiniPlayer();return _origReadArticle.apply(this,arguments);};}
+  const _origSwitchCat=window.switchCat; if(_origSwitchCat){window.switchCat=function(id){if(id==='home'){if(_miniActive)closeMiniPlayer();}else if(_currentCh&&STREAMS[_currentCh]&&STREAMS[_currentCh].length>0&&!_miniActive)activateMiniPlayer();return _origSwitchCat.apply(this,arguments);};}
 
-})();
+  const _origLoadHome=window.loadHome;
+  if(_origLoadHome&&!_origLoadHome.__vtvWrapped){
+    window.loadHome=async function(){const old=document.getElementById('vtv-block');if(old)old.remove();_blockInserted=false;const r=await _origLoadHome.apply(this,arguments);try{pinBlock();}catch(e){}return r;};
+    window.loadHome.__vtvWrapped=true;
+  }
+})();