Restore static/yt_live.js to 0cc342c

static/yt_live.js

@@ -1,6 +1,6 @@
-// === VNEWS — VTV LIVE + Inline Recorder v7 ===
+// === VNEWS — VTV LIVE + Inline Recorder v6 ===
 // 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
+// FIX v6: audio from captureStream (unmute during record), video.ended for crop, AI title generation
 
 (function(){
   if(window._ytLiveLoaded) return;
@@ -171,7 +171,7 @@
     if (el) el.style.display = 'none';
   }
 
-  // ===== UPLOAD TO WALL (Short AI) — v7: robust JSON parse =====
+  // ===== UPLOAD TO WALL (Short AI) =====
   function uploadToWall(blob, title, source) {
     const formData = new FormData();
     formData.append('video', blob, `vtv-${_currentCh}-${Date.now()}.webm`);
@@ -179,56 +179,18 @@
     formData.append('source', source || 'vtv_inline_recorder');
     showProc('⏳ Đang upload lên Short AI...');
     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;
-          try { data = JSON.parse(text); } catch(e) {
-            console.error('[VTV Upload] JSON parse failed:', e, 'Raw:', text.substring(0, 500));
-            throw new Error('Server trả về lỗi (không phải JSON). Status: ' + r.status);
-          }
-          return data;
-        });
-      })
+      .then(r => r.json())
       .then(data => {
         hideProc();
-        console.log('[VTV Upload] Parsed data:', data);
-        if (data && data.ok === true) {
+        if (data.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);
-            }
-            // 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') {
-              setTimeout(() => {
-                switchCat('home');
-                setTimeout(() => {
-                  const s = document.getElementById('short-ai-section');
-                  if (s) s.scrollIntoView({behavior:'smooth', block:'start'});
-                }, 500);
-              }, 800);
-            }
-          }
           return data;
         } else {
-          throw new Error(data && data.error ? data.error : 'Upload thất bại (ok=false)');
+          throw new Error(data.error || 'Upload lỗi');
         }
       })
       .catch(e => {
         hideProc();
-        console.error('[VTV Upload] Error:', e);
         recStatus('⚠️ ' + e.message + '. Đang tải về...', 'err');
         setTimeout(() => downloadBlob(blob, `vtv-${_currentCh}-${Date.now()}.webm`), 800);
         throw e;
@@ -237,6 +199,7 @@
 
   // ===== AI TITLE GENERATION =====
   async function generateAITitle(blob, channelName) {
+    // Get video info for AI context
     return new Promise((resolve) => {
       const video = document.createElement('video');
       video.src = URL.createObjectURL(blob);
@@ -244,6 +207,8 @@
       video.onloadedmetadata = function() {
         URL.revokeObjectURL(video.src);
         const dur = Math.round(video.duration || 0);
+        const w = video.videoWidth, h = video.videoHeight;
+        // Generate title based on channel + duration + timestamp
         const now = new Date();
         const timeStr = now.toLocaleTimeString('vi-VN',{hour:'2-digit',minute:'2-digit'});
         const dateStr = now.toLocaleDateString('vi-VN',{day:'2-digit',month:'2-digit'});
@@ -254,6 +219,7 @@
           `⚡ ${channelName} Highlights - ${dateStr}`,
           `📱 ${channelName} Short - ${timeStr} ${dateStr}`,
         ];
+        // Pick one based on duration
         const idx = dur < 15 ? 4 : dur < 30 ? 1 : dur < 45 ? 2 : 0;
         resolve(titles[idx % titles.length]);
       };
@@ -481,6 +447,7 @@
     // CRITICAL: Unmute video so captureStream includes audio tracks
     const wasMuted = video.muted;
     video.muted = false;
+    // Also set volume low so user doesn't hear double audio
     const wasVolume = video.volume;
     video.volume = 0.3;
 
@@ -523,6 +490,7 @@
       pv.src = URL.createObjectURL(_rec.blob);
       document.getElementById('vtv-rec-preview-wrap').style.display = 'block';
       const sizeMB = (_rec.blob.size/1024/1024).toFixed(1);
+      const hasAudio = _rec.blob.size > 50000; // rough heuristic
       recStatus('✅ Record xong! ' + sizeMB + 'MB' + (audioTracks.length > 0 ? ' (có audio)' : ' (video only)'), 'ok');
     };
     _rec.recorder.onerror = e => {
@@ -531,7 +499,7 @@
       recStatus('❌ Lỗi: ' + (e.error?.message||'?'), 'err');
     };
 
-    _rec.recorder.start(500);
+    _rec.recorder.start(500); // 500ms timeslice
     video.currentTime = _rec.startTime;
 
     const btn = document.getElementById('vtv-rec-btn');
@@ -590,22 +558,22 @@
     }
   };
 
-  // ===== RATIO CROP — v7: reliable render with timeout fallback =====
+  // ===== RATIO CROP — v6: reliable render =====
+  // Key fixes:
+  //   1. video.volume=0 (not muted) to avoid autoplay block
+  //   2. video.ended event to stop (NOT setTimeout with duration)
+  //   3. 200ms timeslice for frequent data collection
+  //   4. rec.requestData() flush before stop
+  //   5. Parallel audioVideo element to capture audio from blob
   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.src = URL.createObjectURL(blob);
     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);
@@ -613,7 +581,7 @@
       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;
+        URL.revokeObjectURL(video.src); return;
       }
 
       let cw, ch, sx, sy;
@@ -635,7 +603,7 @@
       // Parallel video to capture audio from blob
       let recordStream = canvasStream;
       const audioVideo = document.createElement('video');
-      audioVideo.src = blobUrl;
+      audioVideo.src = video.src;
       audioVideo.muted = true;
       audioVideo.volume = 0;
       audioVideo.preload = 'auto';
@@ -661,15 +629,14 @@
 
       let rec;
       try { rec = new MediaRecorder(recordStream, {mimeType: mime}); }
-      catch(e) { hideProc(); recStatus('❌ Lỗi MediaRecorder: ' + e.message, 'err'); URL.revokeObjectURL(blobUrl); return; }
+      catch(e) { hideProc(); recStatus('❌ Lỗi MediaRecorder: ' + e.message, 'err'); URL.revokeObjectURL(video.src); return; }
 
       const chunks = [];
       rec.ondataavailable = e => { if(e.data && e.data.size > 0) chunks.push(e.data); };
       rec.onstop = () => {
-        hideProc();
-        URL.revokeObjectURL(blobUrl);
+        hideProc(); URL.revokeObjectURL(video.src);
         if (chunks.length === 0) {
-          recStatus('❌ Render thất bại (không có data). Thử lại hoặc chọn "Gốc".', 'err');
+          recStatus('❌ Render thất bại. Thử lại hoặc chọn "Gốc".', 'err');
           return;
         }
         const out = new Blob(chunks, {type: 'video/webm'});
@@ -679,7 +646,7 @@
           uploadToWall(out, title);
         }
       };
-      rec.onerror = e => { hideProc(); recStatus('❌ Lỗi render: ' + (e.error?.message || '?'), 'err'); URL.revokeObjectURL(blobUrl); };
+      rec.onerror = e => { hideProc(); recStatus('❌ Lỗi render: ' + (e.error?.message || '?'), 'err'); URL.revokeObjectURL(video.src); };
 
       rec.start(200);
 
@@ -690,7 +657,6 @@
         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();
@@ -700,26 +666,6 @@
         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) {
-              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);
@@ -728,13 +674,13 @@
         draw();
       }).catch(e => {
         hideProc(); recStatus('❌ Lỗi phát video: ' + e.message, 'err');
-        URL.revokeObjectURL(blobUrl);
+        URL.revokeObjectURL(video.src);
       });
     }
 
     video.onerror = function() {
       hideProc(); recStatus('❌ Không đọc được video.', 'err');
-      URL.revokeObjectURL(blobUrl);
+      URL.revokeObjectURL(video.src);
     };
 
     video.addEventListener('loadedmetadata', onReady);
@@ -802,7 +748,7 @@
   function activateMiniPlayer(){
     if(!_currentCh) return; createMiniPlayer(); _miniActive=true;
     const mini=document.getElementById('vtv-mini'); const mv=document.getElementById('vtv-mini-vid'); const v=document.getElementById('vtv-player');
-    if(_hls){const h=new Hls({enableWorker:true,lowLatencyMode:false,startLevel:0,capLevelToPlayerSize:true,maxBufferLength:4,fragLoadingTimeOut:8000,manifestLoadingTimeOut:8000}); h.loadSource(STREAMS[_currentCh][0]); h.attachMedia(mv); mv.play().catch(()=>{});}
+    if(_hls){const h=new Hls({enableWorker:true,lowLatencyMode:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:10}); h.loadSource(STREAMS[_currentCh][0]); h.attachMedia(mv); mv.play().catch(()=>{});}
     else if(v&&v.src){mv.src=v.src; mv.play().catch(()=>{});}
     const ch=CHANNELS.find(c=>c.id===_currentCh); if(ch) 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(()=>{});
@@ -813,7 +759,7 @@
   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){}
+    try{const r=await fetch('/api/vtv/streams',{signal:AbortSignal.timeout(10000)}); if(r.ok){const d=await r.json(); CHANNELS.forEach(ch=>{const i=d[ch.id]; if(i&&i.stream_url){let u=i.stream_url; if(NEEDS_PROXY.test(u)) u='/api/proxy/m3u8/vtv?url='+encodeURIComponent(u); STREAMS[ch.id]=[u];} 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+' ✕';}}});
     _loading=false; _streamsLoaded=true;
   }
@@ -832,7 +778,7 @@
   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>';}
+    try{const r=await fetch('/api/vtv/epg/'+chId,{signal:AbortSignal.timeout(10000)}); 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>';}
   }
 
   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';}};
@@ -855,12 +801,9 @@
     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);
+    _tryPlay(video,urls,0,ch.name,loadEl,errEl,errMsg);
     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(()=>{});}
   };
@@ -869,7 +812,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:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:20}); _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')){
@@ -890,4 +833,4 @@
     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;
   }
-})();
+})();