fix: DVR replay + recorder select from buffer + Short AI upload flow

static/yt_live.js

@@ -28,12 +28,13 @@
   };
 
   // ===== DVR / LIVE REPLAY STATE =====
-  // Buffer ~30 min of live stream for replay
+  // Buffer ~10 min of live stream for replay
   const _dvr = {
     enabled: true,
-    maxBufferSec: 1800, // 30 minutes
-    seekOffset: 0, // seconds behind live
+    maxBufferSec: 600, // 10 minutes
+    seekOffset: 0,
     isSeeked: false,
+    lastBufferedEnd: 0,
   };
 
   // ===== STYLES =====
@@ -102,6 +103,7 @@
   .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}
@@ -207,42 +209,43 @@
         hideProc();
         console.log('[VTV Upload] Parsed data:', data);
         if (data && data.ok === true) {
-          recStatus('✅ Đã tạo Short AI! Đang tải lại trang chủ...', 'ok');
-          // 100% FIX: Reload wall from server, then re-render home
+          recStatus('✅ Đã tạo Short AI! Chuyển đến trang chủ...', 'ok');
           if (data.post) {
-            // Update local cache immediately
+            // Update local cache
             if (typeof _wallPosts !== 'undefined') {
               _wallPosts.unshift(data.post);
             }
-            // 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(() => {
-                // Switch to home first
-                if (typeof switchCat === 'function') switchCat('home');
-                // Then reload home (this re-renders everything including Short AI)
-                setTimeout(() => {
-                  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;
+            // Switch to home view
+            if (typeof switchCat === 'function') {
+              switchCat('home');
             }
+            // Wait for home to be visible, then refresh slider
+            setTimeout(() => {
+              // Try refreshShortAISlider first (fast path)
+              if (typeof refreshShortAISlider === 'function') {
+                refreshShortAISlider();
+              }
+              // Scroll to Short AI section
+              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 {
+                  // Section not found — full reload as fallback
+                  if (typeof loadHome === 'function') {
+                    loadHome().then(() => {
+                      setTimeout(() => {
+                        const s2 = document.getElementById('short-ai-section');
+                        if (s2) s2.scrollIntoView({behavior:'smooth', block:'start'});
+                      }, 300);
+                    });
+                  }
+                }
+              }, 300);
+            }, 200);
           }
           return data;
         } else {
@@ -310,6 +313,7 @@
         <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>
@@ -320,7 +324,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">Chọn điểm bắt đầu → kết thúc (tối đa 60s)</div>
+      <div class="rec-hint" id="vtv-rec-hint">Xem lại LIVE → chọn điểm đầu → kết thúc → Record (tối đa 120s)</div>
       <div class="rec-status" id="vtv-rec-status">Sẵn sàng</div>
     `;
     controls.parentNode.insertBefore(inlineRec, controls.nextSibling);
@@ -419,11 +423,32 @@
     }
   }
 
+  // Recorder bar scale: dynamic based on buffer
+  let _recBarMax = 120; // default 2 min, updated from buffer
+
+  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));
+    }
+    // Update buffer range indicator
+    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 || 60;
+    const s = _rec.startTime || 0, e = _rec.endTime || Math.min(60, _recBarMax);
     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-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';
   }
 
@@ -431,27 +456,29 @@
   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 / 60 * 100;
+    const pct = (_rec.startTime / _recBarMax) * 100;
     const mk = document.getElementById('vtv-rec-mk-start');
-    mk.style.display = 'block'; mk.style.left = pct + '%';
+    mk.style.display = 'block'; mk.style.left = Math.min(100, Math.max(0, 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), '');
+    recStatus('Điểm đầu: ' + fmtSec(_rec.startTime) + ' (buffer: ' + _recBarMax + 's)', '');
   };
 
   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 > 60) { recStatus('⚠️ Tối đa 60s!', 'err'); return; }
+    if (dur > _recBarMax) { recStatus('⚠️ Tối đa ' + _recBarMax + 's!', 'err'); return; }
     _rec.endTime = cur;
-    const pct = cur / 60 * 100;
+    const pct = (cur / _recBarMax) * 100;
     const mk = document.getElementById('vtv-rec-mk-end');
-    mk.style.display = 'block'; mk.style.left = pct + '%';
+    mk.style.display = 'block'; mk.style.left = Math.min(100, Math.max(0, pct)) + '%';
     document.getElementById('vtv-rec-time-end').textContent = fmtSec(cur);
     updateRecBar();
     recStatus('✅ ' + Math.round(dur) + 's. Nhấn Record!', 'ok');
@@ -466,7 +493,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 = '01:00';
+    document.getElementById('vtv-rec-time-end').textContent = fmtSec(Math.min(60, _recBarMax));
     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;
@@ -483,7 +510,11 @@
     document.querySelectorAll('#vtv-rec-panel .rec-ratio-row button').forEach(b => b.classList.toggle('active', b.dataset.ratio === ratio));
   };
 
-  // ===== RECORD — captureStream with audio (unmute during record) =====
+  // Update buffer range indicator every 2s
+  updateRecBarScale();
+  setInterval(updateRecBarScale, 2000);
+
+  // ===== RECORD — DVR-based: seek to start, play, captureStream =====
   window._vtvRecGo = function() {
     if (_rec.startTime === null || _rec.endTime === null) return;
     if (_rec.isRecording) {
@@ -498,14 +529,28 @@
     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.3;
+    video.volume = 0.5;
 
     let stream;
     try {
@@ -547,6 +592,7 @@
       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;
@@ -554,17 +600,25 @@
       recStatus('❌ Lỗi: ' + (e.error?.message||'?'), 'err');
     };
 
-    _rec.recorder.start(500);
+    // Seek to start time, then start recording after seek completes
+    recStatus('🔴 Seek đến ' + fmtSec(_rec.startTime) + '...', 'recording');
     video.currentTime = _rec.startTime;
 
-    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);
+    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);
   };
 
   // ===== AI TITLE =====
@@ -978,14 +1032,18 @@
   window._vtvDvrGoLive = function() {
     const video = document.getElementById('vtv-player');
     if (!video) return;
+    _dvr.isSeeked = false;
+    _dvr.seekOffset = 0;
+    // Force HLS to go to live edge
+    if (_hls) {
+      _hls.trigger(Hls.Events.LIVE_SEEK_STATE_CHANGED, { liveSyncPosition: _hls.liveSyncPosition });
+    }
     if (video.buffered && video.buffered.length > 0) {
-      video.currentTime = video.buffered.end(video.buffered.length - 1);
+      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;
-    _dvr.isSeeked = false;
-    _dvr.seekOffset = 0;
   };
 
   // ===== MAIN PLAYER =====
@@ -1048,7 +1106,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:120,maxMaxBufferLength:300,liveSyncDurationCount:2,liveMaxLatencyDurationCount:5,liveDurationInfinity:false,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:600,maxMaxBufferLength:600,liveSyncDurationCount:30,liveMaxLatencyDurationCount:60,liveDurationInfinity:true,lowLatencyMode: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')){