fix: Short AI 100% reload home after upload + DVR live replay controls

static/yt_live.js

@@ -27,6 +27,15 @@
     ratio: 'original', _dragMarker: null, _recTimer: null,
   };
 
+  // ===== DVR / LIVE REPLAY STATE =====
+  // Buffer ~30 min of live stream for replay
+  const _dvr = {
+    enabled: true,
+    maxBufferSec: 1800, // 30 minutes
+    seekOffset: 0, // seconds behind live
+    isSeeked: false,
+  };
+
   // ===== STYLES =====
   const style = document.createElement('style');
   style.textContent = `
@@ -143,6 +152,8 @@
   .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);
 
@@ -196,29 +207,41 @@
         hideProc();
         console.log('[VTV Upload] Parsed data:', data);
         if (data && data.ok === true) {
-          recStatus('✅ Đã tạo Short AI! Xem trong mục Tường AI.', 'ok');
-          // CRITICAL FIX: Update _wallPosts and refresh slider immediately
+          recStatus('✅ Đã tạo Short AI! Đang tải lại trang chủ...', 'ok');
+          // 100% FIX: Reload wall from server, then re-render home
           if (data.post) {
+            // Update local cache immediately
             if (typeof _wallPosts !== 'undefined') {
               _wallPosts.unshift(data.post);
-              console.log('[VTV Upload] Added post to _wallPosts, total:', _wallPosts.length);
-            }
-            // Refresh Short AI slider on home view
-            if (typeof refreshShortAISlider === 'function') {
-              setTimeout(() => {
-                refreshShortAISlider();
-                console.log('[VTV Upload] refreshShortAISlider called');
-              }, 300);
             }
-            // Switch to home so user can see the new slide
-            if (typeof switchCat === 'function') {
+            // Reload home to show new Short AI slide
+            // Use a flag to prevent double reload
+            if (window._vtvReloading) return data;
+            window._vtvReloading = true;
+            if (typeof loadHome === 'function') {
               setTimeout(() => {
-                switchCat('home');
+                // Switch to home first
+                if (typeof switchCat === 'function') switchCat('home');
+                // Then reload home (this re-renders everything including Short AI)
                 setTimeout(() => {
-                  const s = document.getElementById('short-ai-section');
-                  if (s) s.scrollIntoView({behavior:'smooth', block:'start'});
-                }, 500);
-              }, 800);
+                  loadHome().then(() => {
+                    // Scroll to Short AI section after reload
+                    setTimeout(() => {
+                      const s = document.getElementById('short-ai-section');
+                      if (s) {
+                        s.scrollIntoView({behavior:'smooth', block:'start'});
+                        // Highlight animation
+                        s.style.transition = 'box-shadow 0.5s';
+                        s.style.boxShadow = '0 0 20px rgba(155,89,182,0.8)';
+                        setTimeout(() => s.style.boxShadow = '', 2000);
+                      }
+                      window._vtvReloading = false;
+                    }, 300);
+                  }).catch(() => { window._vtvReloading = false; });
+                }, 200);
+              }, 500);
+            } else {
+              window._vtvReloading = false;
             }
           }
           return data;
@@ -809,6 +832,162 @@
     mini.classList.add('show'); mini.classList.remove('hidden');
   }
 
+  // ===== DVR / LIVE REPLAY =====
+  // Add replay controls to VTV player
+  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);
+
+    // DVR panel (hidden by default)
+    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="1800" 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">30 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'; }
+    }
+  }
+
+  function updateDvrSliderMax() {
+    const slider = document.getElementById('vtv-dvr-slider');
+    const video = document.getElementById('vtv-player');
+    if (!slider || !video) return;
+    // Calculate how much buffer we have
+    try {
+      if (video.buffered && video.buffered.length > 0) {
+        const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+        const currentTime = video.currentTime;
+        const bufferAhead = bufferedEnd - currentTime;
+        // Max seek back is min(30min, available buffer)
+        const maxSeek = Math.min(1800, Math.floor(bufferAhead));
+        slider.max = maxSeek;
+      }
+    } 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);
+
+  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;
+    // sec is negative (go back)
+    const newBehind = Math.min(1800, Math.max(0, _dvr.seekOffset - sec));
+    window._vtvDvrSeek(newBehind);
+    // Also update slider
+    const slider = document.getElementById('vtv-dvr-slider');
+    if (slider) slider.value = newBehind;
+  };
+
+  window._vtvDvrGoLive = function() {
+    const video = document.getElementById('vtv-player');
+    if (!video) return;
+    if (video.buffered && video.buffered.length > 0) {
+      video.currentTime = video.buffered.end(video.buffered.length - 1);
+    }
+    window._vtvDvrSeek(0);
+    const slider = document.getElementById('vtv-dvr-slider');
+    if (slider) slider.value = 0;
+    _dvr.isSeeked = false;
+    _dvr.seekOffset = 0;
+  };
+
   // ===== MAIN PLAYER =====
   async function loadAllStreams(){
     if(_loading) return; _loading=true;
@@ -841,7 +1020,7 @@
   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);
+    setTimeout(()=>{setupPinButton();setupDvrControls();buildInlineRecorder();},500);
     if(!_streamsLoaded){loadAllStreams().then(()=>{setTimeout(()=>window._vtvPlay(DEFAULT_CHANNEL),300);});}
   }
 
@@ -869,7 +1048,7 @@
     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);
+      const hls=new Hls({enableWorker:true,lowLatencyMode:false,startLevel:0,capLevelToPlayerSize:true,maxBufferLength:120,maxMaxBufferLength:300,liveSyncDurationCount:2,liveMaxLatencyDurationCount:5,liveDurationInfinity:false,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')){