Fix v6: audio+video record + ratio crop + AI title + Short AI upload

Audio fix:
- Unmute video during record so captureStream() includes audio tracks
- Restore muted state after recording
- Log audio/video track count for debugging

Ratio crop fix:
- video.volume=0 (not muted) to avoid autoplay block
- video.ended event to stop recorder (NOT setTimeout with duration)
- 200ms timeslice for frequent data collection
- rec.requestData() flush before stop
- Parallel audioVideo element to capture audio from blob during crop

AI Title:
- Auto-generate title based on channel name + duration + timestamp
- User can edit title manually before uploading
- "AI tạo tiêu đề" button in post-record panel

Short AI Upload:
- Video cropped with correct ratio uploaded directly to /api/wall
- Title from input field (or AI-generated) sent with upload
- Success: "Đã tạo Short AI! Xem trong mục Tường AI."
- Fallback: download to device if upload fails

static/yt_live.js

@@ -1,7 +1,6 @@
-// === VNEWS — VTV LIVE + Inline Recorder v5 ===
-// Features: PiP, mini-player, INLINE RECORDER with ratio crop + upload
-// No separate recorder page — everything inline on the VTV player
-// FIX v5: processRatio uses video.ended event, parallel audio video, 200ms timeslice
+// === VNEWS — VTV LIVE + Inline Recorder v6 ===
+// Features: PiP, mini-player, INLINE RECORDER with ratio crop + AI title + Short AI upload
+// FIX v6: audio from captureStream (unmute during record), video.ended for crop, AI title generation
 
 (function(){
   if(window._ytLiveLoaded) return;
@@ -26,7 +25,6 @@
     active: false, startTime: null, endTime: null,
     isRecording: false, recorder: null, chunks: [], blob: null,
     ratio: 'original', _dragMarker: null, _recTimer: null,
-    rawStream: null,
   };
 
   // ===== STYLES =====
@@ -124,6 +122,12 @@
   .vtv-rec-panel .rec-actions .rec-download{background:#2d8659;color:#fff}
   .vtv-rec-panel .rec-actions .rec-share{background:#9b59b6;color:#fff}
   .vtv-rec-panel .rec-proc{text-align:center;padding:12px;color:#9b59b6;font-size:12px;display:none}
+  .vtv-rec-panel .rec-title-input{width:100%;background:#1a1a2e;border:1px solid #2a2a4a;border-radius:6px;padding:8px;color:#ccc;font-size:11px;margin-bottom:8px;box-sizing:border-box}
+  .vtv-rec-panel .rec-title-input:focus{border-color:#9b59b6;outline:none}
+  .vtv-rec-panel .rec-ai-title-row{display:flex;gap:4px;margin-bottom:8px}
+  .vtv-rec-panel .rec-ai-title-row button{flex:1;padding:6px;background:#1a1a2e;border:1px solid #2a2a4a;border-radius:6px;color:#888;font-size:10px;cursor:pointer}
+  .vtv-rec-panel .rec-ai-title-row button:hover{border-color:#9b59b6;color:#9b59b6}
+  .vtv-rec-panel .rec-ai-title-row button:disabled{opacity:.4;cursor:not-allowed}
   .vtv-mini{position:fixed;top:0;left:0;right:0;z-index:99990;background:#000;border-bottom:2px solid #0066cc;box-shadow:0 4px 20px rgba(0,102,204,.4);display:none;transition:transform .3s ease}
   .vtv-mini.show{display:block}
   .vtv-mini.hidden{transform:translateY(-88%)}
@@ -144,6 +148,7 @@
 
   // ===== HELPERS =====
   function fmtSec(s){ return String(Math.floor(s/60)).padStart(2,'0')+':'+String(Math.floor(s%60)).padStart(2,'0'); }
+  function escH(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
 
   function recStatus(msg, type) {
     const el = document.getElementById('vtv-rec-status');
@@ -158,37 +163,73 @@
   }
 
   function showProc(text) {
-    document.getElementById('vtv-rec-proc').style.display = 'block';
-    document.getElementById('vtv-rec-proc-text').textContent = text;
+    const el = document.getElementById('vtv-rec-proc');
+    if (el) { el.style.display = 'block'; document.getElementById('vtv-rec-proc-text').textContent = text; }
   }
   function hideProc() {
-    document.getElementById('vtv-rec-proc').style.display = 'none';
+    const el = document.getElementById('vtv-rec-proc');
+    if (el) el.style.display = 'none';
   }
 
-  function uploadBlob(blob) {
+  // ===== UPLOAD TO WALL (Short AI) =====
+  function uploadToWall(blob, title, source) {
     const formData = new FormData();
     formData.append('video', blob, `vtv-${_currentCh}-${Date.now()}.webm`);
-    formData.append('title', `Record LIVE ${_currentCh?.toUpperCase()} - ${new Date().toLocaleString('vi-VN')}`);
-    formData.append('source', 'vtv_inline_recorder');
-    showProc('⏳ Đang upload...');
-    fetch('/api/wall', { method: 'POST', body: formData })
+    formData.append('title', title || `Record LIVE ${_currentCh?.toUpperCase()} - ${new Date().toLocaleString('vi-VN')}`);
+    formData.append('source', source || 'vtv_inline_recorder');
+    showProc('⏳ Đang upload lên Short AI...');
+    return fetch('/api/wall', { method: 'POST', body: formData })
       .then(r => r.json())
       .then(data => {
         hideProc();
         if (data.ok) {
-          recStatus('✅ Đã tạo Short AI! Xem trong Tường AI.', 'ok');
+          recStatus('✅ Đã tạo Short AI! Xem trong mục Tường AI.', 'ok');
+          return data;
         } else {
-          recStatus('⚠️ ' + (data.error || 'Upload lỗi') + '. Đang tải về...', 'err');
-          setTimeout(() => downloadBlob(blob, `vtv-${_currentCh}-${Date.now()}.webm`), 800);
+          throw new Error(data.error || 'Upload lỗi');
         }
       })
       .catch(e => {
         hideProc();
-        recStatus('⚠️ Mất kết nối. Đang tải về...', 'err');
+        recStatus('⚠️ ' + e.message + '. Đang tải về...', 'err');
         setTimeout(() => downloadBlob(blob, `vtv-${_currentCh}-${Date.now()}.webm`), 800);
+        throw e;
       });
   }
 
+  // ===== 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);
+      video.muted = true;
+      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'});
+        const titles = [
+          `🔴 LIVE ${channelName} - ${timeStr} ${dateStr}`,
+          `📺 ${channelName} - Video ngắn ${dur}s`,
+          `🎬 ${channelName} Record - ${timeStr}`,
+          `⚡ ${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]);
+      };
+      video.onerror = function() {
+        URL.revokeObjectURL(video.src);
+        resolve(`📺 Record ${channelName} - ${new Date().toLocaleTimeString('vi-VN',{hour:'2-digit',minute:'2-digit'})}`);
+      };
+    });
+  }
+
   // ===== BUILD INLINE RECORDER =====
   function buildInlineRecorder() {
     const controls = document.querySelector('.vtv-controls');
@@ -235,6 +276,10 @@
       <div class="rec-preview-wrap" id="vtv-rec-preview-wrap" style="display:none">
         <video id="vtv-rec-preview-vid" controls style="max-width:100%;max-height:180px;border-radius:6px;background:#000"></video>
       </div>
+      <input type="text" class="rec-title-input" id="vtv-rec-title-input" placeholder="Tiêu đề video (để trống = AI tự tạo)">
+      <div class="rec-ai-title-row">
+        <button onclick="window._vtvRecGenAITitle()" id="vtv-rec-ai-btn">🤖 AI tạo tiêu đề</button>
+      </div>
       <div class="rec-ratio-row">
         <button class="active" data-ratio="original" onclick="window._vtvRecSetRatio('original')">📺 Gốc</button>
         <button data-ratio="1:1" onclick="window._vtvRecSetRatio('1:1')">⬜ 1:1</button>
@@ -262,14 +307,8 @@
   }
 
   // Global drag
-  document.addEventListener('mousemove', function(e) {
-    if (!_rec._dragMarker) return;
-    dragMarker(e.clientX);
-  });
-  document.addEventListener('touchmove', function(e) {
-    if (!_rec._dragMarker) return;
-    dragMarker(e.touches[0].clientX);
-  }, {passive:false});
+  document.addEventListener('mousemove', function(e) { if (_rec._dragMarker) dragMarker(e.clientX); });
+  document.addEventListener('touchmove', function(e) { if (_rec._dragMarker) dragMarker(e.touches[0].clientX); }, {passive:false});
   document.addEventListener('mouseup', function(){ _rec._dragMarker = null; });
   document.addEventListener('touchend', function(){ _rec._dragMarker = null; });
 
@@ -376,6 +415,7 @@
     document.getElementById('vtv-rec-set-end').disabled = true;
     document.getElementById('vtv-rec-go').disabled = true;
     document.getElementById('vtv-rec-panel').classList.remove('show');
+    document.getElementById('vtv-rec-title-input').value = '';
     recStatus('Đã reset.', '');
     const btn = document.getElementById('vtv-rec-btn');
     if (btn) { btn.classList.remove('recording'); btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record'; }
@@ -386,7 +426,7 @@
     document.querySelectorAll('#vtv-rec-panel .rec-ratio-row button').forEach(b => b.classList.toggle('active', b.dataset.ratio === ratio));
   };
 
-  // ===== RECORD — captureStream with audio =====
+  // ===== RECORD — captureStream with audio (unmute during record) =====
   window._vtvRecGo = function() {
     if (_rec.startTime === null || _rec.endTime === null) return;
     if (_rec.isRecording) {
@@ -404,27 +444,34 @@
     _rec.chunks = [];
     _rec.isRecording = true;
 
+    // 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;
 
     let stream;
     try {
       stream = video.captureStream ? video.captureStream() : video.mozCaptureStream();
       if (!stream) throw new Error('captureStream not supported');
     } catch(e) {
-      video.muted = wasMuted;
+      video.muted = wasMuted; video.volume = wasVolume;
       recStatus('❌ ' + e.message, 'err');
       _rec.isRecording = false;
       return;
     }
 
+    const audioTracks = stream.getAudioTracks();
+    console.log('[VTV Rec] Audio tracks:', audioTracks.length, 'Video tracks:', stream.getVideoTracks().length);
+
     let mimeType = 'video/webm;codecs=vp9,opus';
     if (!MediaRecorder.isTypeSupported(mimeType)) mimeType = 'video/webm;codecs=vp8,opus';
     if (!MediaRecorder.isTypeSupported(mimeType)) mimeType = 'video/webm';
 
     try { _rec.recorder = new MediaRecorder(stream, {mimeType}); }
     catch(e) {
-      video.muted = wasMuted;
+      video.muted = wasMuted; video.volume = wasVolume;
       recStatus('❌ Lỗi MediaRecorder: ' + e.message, 'err');
       _rec.isRecording = false;
       return;
@@ -434,6 +481,7 @@
     _rec.recorder.onstop = function() {
       _rec.isRecording = false;
       video.muted = wasMuted;
+      video.volume = wasVolume;
       _rec.blob = new Blob(_rec.chunks, {type: 'video/webm'});
       const btn = document.getElementById('vtv-rec-btn');
       if (btn) { btn.classList.remove('recording'); btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record'; }
@@ -442,20 +490,21 @@
       pv.src = URL.createObjectURL(_rec.blob);
       document.getElementById('vtv-rec-preview-wrap').style.display = 'block';
       const sizeMB = (_rec.blob.size/1024/1024).toFixed(1);
-      recStatus('✅ Record xong! ' + sizeMB + 'MB', 'ok');
+      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 => {
       _rec.isRecording = false;
-      video.muted = wasMuted;
+      video.muted = wasMuted; video.volume = wasVolume;
       recStatus('❌ Lỗi: ' + (e.error?.message||'?'), 'err');
     };
 
-    _rec.recorder.start(1000);
+    _rec.recorder.start(500); // 500ms timeslice
     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...', 'recording');
+    recStatus('🔴 ĐANG RECORD...' + (audioTracks.length > 0 ? ' (có audio)' : ''), 'recording');
 
     const dur = (_rec.endTime - _rec.startTime) * 1000;
     _rec._recTimer = setTimeout(() => {
@@ -463,37 +512,65 @@
     }, dur + 500);
   };
 
-  // ===== DOWNLOAD & SHARE =====
+  // ===== AI TITLE =====
+  window._vtvRecGenAITitle = async function() {
+    if (!_rec.blob) { recStatus('⚠️ Chưa record!', 'err'); return; }
+    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...';
+
+    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 đề';
+    }
+  };
+
+  // ===== DOWNLOAD =====
   window._vtvRecDownload = function() {
     if (!_rec.blob) return;
+    const title = document.getElementById('vtv-rec-title-input')?.value || '';
     if (_rec.ratio === 'original') {
       downloadBlob(_rec.blob, `vtv-${_currentCh}-${Date.now()}.webm`);
     } else {
-      processRatio(_rec.blob, _rec.ratio, 'download');
+      processRatio(_rec.blob, _rec.ratio, 'download', title);
     }
   };
 
+  // ===== SHARE TO SHORT AI =====
   window._vtvRecShare = function() {
     if (!_rec.blob) return;
+    const title = document.getElementById('vtv-rec-title-input')?.value || '';
     if (_rec.ratio !== 'original') {
-      processRatio(_rec.blob, _rec.ratio, 'upload');
+      processRatio(_rec.blob, _rec.ratio, 'upload', title);
     } else {
-      uploadBlob(_rec.blob);
+      uploadToWall(_rec.blob, title);
     }
   };
 
-  // ===== RATIO CROP — v5: reliable render using video.ended event =====
-  // Root causes of previous failures:
-  //   1. audioCtx.decodeAudioData() cannot decode WebM container → audio always null
-  //   2. video.duration from captureStream blob = Infinity → setTimeout(NaN) fires immediately → empty chunks
-  //   3. rec.start(1000) with 1s timeslice + early stop = no data collected before stop
-  // Fix: use video.ended event (NOT setTimeout), volume=0 (NOT muted), 200ms timeslice, requestData() flush
-  function processRatio(blob, ratio, action) {
+  // ===== 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 video = document.createElement('video');
     video.src = URL.createObjectURL(blob);
-    video.volume = 0; // silent but NOT muted (avoids autoplay issues)
+    video.volume = 0;
     video.preload = 'auto';
     video.playsInline = true;
 
@@ -523,7 +600,7 @@
       const ctx = canvas.getContext('2d');
       const canvasStream = canvas.captureStream(30);
 
-      // Parallel video element to capture audio from the same blob
+      // Parallel video to capture audio from blob
       let recordStream = canvasStream;
       const audioVideo = document.createElement('video');
       audioVideo.src = video.src;
@@ -534,14 +611,15 @@
 
       audioVideo.onloadedmetadata = function() {
         try {
-          const aStream = audioVideo.captureStream ? audioVideo.captureStream() : null;
-          if (aStream) {
-            const tracks = aStream.getAudioTracks();
+          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('Audio capture failed:', e); }
+        } catch(e) { console.warn('[VTV Crop] Audio merge failed:', e); }
       };
 
       const mime = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus')
@@ -565,12 +643,11 @@
         if (action === 'download') {
           downloadBlob(out, `vtv-${_currentCh}-${ratio.replace(':','x')}-${Date.now()}.webm`);
         } else {
-          uploadBlob(out);
+          uploadToWall(out, title);
         }
       };
       rec.onerror = e => { hideProc(); recStatus('❌ Lỗi render: ' + (e.error?.message || '?'), 'err'); URL.revokeObjectURL(video.src); };
 
-      // Small timeslice for frequent data collection
       rec.start(200);
 
       audioVideo.play().catch(() => {});