Upload static/yt_live.js

static/yt_live.js

@@ -1,6 +1,7 @@
-// === VNEWS — VTV LIVE + Inline Recorder v7 ===
+// === VNEWS — VTV LIVE + Inline Recorder v8 ===
 // 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
+// NEW v8: "Xem từ đầu" (Watch from start), "Record từ đầu đến giờ tùy chỉnh" (Record from start to custom end time)
+// FIX v8: EPG date fix in backend, recorder supports scheduled recording from stream start
 
 (function(){
   if(window._ytLiveLoaded) return;
@@ -19,12 +20,14 @@
   const STREAMS = {};
   let _currentCh = null, _hls = null, _loading = false, _blockInserted = false;
   let _streamsLoaded = false, _pipActive = false, _miniActive = false, _vtvPinned = false;
+  let _watchFromStart = false;
 
   // ===== RECORDER STATE =====
   const _rec = {
     active: false, startTime: null, endTime: null,
     isRecording: false, recorder: null, chunks: [], blob: null,
     ratio: 'original', _dragMarker: null, _recTimer: null,
+    scheduleMode: false, scheduleEndTime: null, _scheduleTimer: null,
   };
 
   // ===== STYLES =====
@@ -48,11 +51,15 @@
   .vtv-load{display:flex;align-items:center;justify-content:center;height:180px;color:#00ccff;font-size:12px;flex-direction:column;gap:8px}
   .vtv-spinner{width:24px;height:24px;border:2px solid #333;border-top-color:#00ccff;border-radius:50%;animation:vtvspin .8s linear infinite}
   @keyframes vtvspin{to{transform:rotate(360deg)}}
-  .vtv-controls{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#0d1a2a;border-top:1px solid #1a2a3a}
+  .vtv-controls{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#0d1a2a;border-top:1px solid #1a2a3a;flex-wrap:wrap}
   .vtv-pip-btn{background:#1a2a3a;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:3px 8px;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px}
   .vtv-pip-btn:hover{background:#0b4a7a;color:#fff}
   .vtv-pip-btn.on{background:#0066cc;border-color:#00ccff;color:#fff}
   .vtv-pip-btn svg{width:12px;height:12px;fill:currentColor}
+  .vtv-from-start-btn{background:#1a3a1a;border:1px solid #2d6a2d;color:#5cb87a;font-size:9px;padding:3px 8px;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px;font-weight:700}
+  .vtv-from-start-btn:hover{background:#2d6a2d;color:#fff}
+  .vtv-from-start-btn.on{background:#2d8659;border-color:#5cb87a;color:#fff}
+  .vtv-from-start-btn svg{width:12px;height:12px;fill:currentColor}
   .vtv-epg{margin:0;padding:6px 10px;background:#0a1628;border-top:1px solid #1a2a3a}
   .vtv-epg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
   .vtv-epg-title{font-size:10px;font-weight:700;color:#00ccff}
@@ -128,6 +135,20 @@
   .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-schedule-rec{display:none;padding:8px 10px;background:#0a1a0a;border-top:1px solid #1a3a1a}
+  .vtv-schedule-rec.show{display:block}
+  .vtv-schedule-rec .sch-title{font-size:10px;font-weight:700;color:#5cb87a;margin-bottom:6px}
+  .vtv-schedule-rec .sch-row{display:flex;gap:4px;align-items:center;margin-bottom:4px}
+  .vtv-schedule-rec .sch-row label{font-size:9px;color:#8ab4d8;white-space:nowrap}
+  .vtv-schedule-rec .sch-row input[type=time]{background:#1a2a3a;border:1px solid #2a3a4a;border-radius:4px;color:#ccc;font-size:10px;padding:3px 6px;flex:1}
+  .vtv-schedule-rec .sch-row input[type=date]{background:#1a2a3a;border:1px solid #2a3a4a;border-radius:4px;color:#ccc;font-size:10px;padding:3px 6px;flex:1}
+  .vtv-schedule-rec .sch-btn-row{display:flex;gap:4px;margin-top:6px}
+  .vtv-schedule-rec .sch-btn-row button{flex:1;padding:6px;border:none;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer}
+  .vtv-schedule-rec .sch-btn-row .sch-start{background:#1a3a1a;border:1px solid #2d6a2d;color:#5cb87a}
+  .vtv-schedule-rec .sch-btn-row .sch-cancel{background:#3a1a1a;border:1px solid #6a2d2d;color:#e74c3c}
+  .vtv-schedule-rec .sch-status{font-size:9px;color:#888;text-align:center;margin-top:4px}
+  .vtv-schedule-rec .sch-status.active{color:#5cb87a}
+  .vtv-schedule-rec .sch-status.error{color:#e74c3c}
   .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%)}
@@ -171,7 +192,6 @@
     if (el) el.style.display = 'none';
   }
 
-  // ===== 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`);
@@ -210,7 +230,6 @@
       });
   }
 
-  // ===== AI TITLE GENERATION =====
   async function generateAITitle(blob, channelName) {
     return new Promise((resolve) => {
       const video = document.createElement('video');
@@ -239,11 +258,63 @@
     });
   }
 
-  // ===== BUILD INLINE RECORDER =====
+  // ===== WATCH FROM START (v8) =====
+  window._vtvToggleFromStart = function() {
+    _watchFromStart = !_watchFromStart;
+    const btn = document.getElementById('vtv-from-start-btn');
+    const video = document.getElementById('vtv-player');
+    if (!btn) return;
+
+    if (_watchFromStart) {
+      btn.classList.add('on');
+      btn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M12 5V1l-7 7 7 7V13c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg> Từ đầu';
+      if (video) {
+        setTimeout(() => {
+          if (video.seekable && video.seekable.length > 0) {
+            const start = video.seekable.start(0);
+            video.currentTime = start;
+            recStatus('⏪ Đang xem từ đầu stream (' + fmtSec(start) + ')', 'ok');
+          } else if (_hls) {
+            try {
+              const level = _hls.levels[_hls.currentLevel];
+              if (level && level.details && level.details.fragments && level.details.fragments.length > 0) {
+                const firstFrag = level.details.fragments[0];
+                if (firstFrag && firstFrag.start !== undefined) {
+                  video.currentTime = firstFrag.start;
+                  recStatus('⏪ Đang xem từ đầu stream', 'ok');
+                }
+              }
+            } catch(e) {
+              recStatus('⏪ Xem từ đầu: chờ buffer...', '');
+            }
+          }
+        }, 500);
+      }
+    } else {
+      btn.classList.remove('on');
+      btn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M12 5V1l-7 7 7 7V13c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg> Xem từ đầu';
+      if (video) {
+        if (video.seekable && video.seekable.length > 0) {
+          video.currentTime = video.seekable.end(video.seekable.length - 1);
+        }
+        recStatus('🔴 Đã chuyển về LIVE', '');
+      }
+    }
+  };
+
+  // ===== BUILD INLINE RECORDER (v8) =====
   function buildInlineRecorder() {
     const controls = document.querySelector('.vtv-controls');
     if (!controls || document.getElementById('vtv-rec-btn')) return;
 
+    const fromStartBtn = document.createElement('button');
+    fromStartBtn.id = 'vtv-from-start-btn';
+    fromStartBtn.className = 'vtv-from-start-btn';
+    fromStartBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M12 5V1l-7 7 7 7V13c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg> Xem từ đầu';
+    fromStartBtn.title = 'Xem lại từ thời điểm stream bắt đầu';
+    fromStartBtn.onclick = window._vtvToggleFromStart;
+    controls.appendChild(fromStartBtn);
+
     const recBtn = document.createElement('button');
     recBtn.id = 'vtv-rec-btn';
     recBtn.className = 'vtv-rec-btn';
@@ -272,11 +343,36 @@
         <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">Chọn điểm bắt đầu → kết thúc (tối đa 60s) hoặc dùng "Lên lịch record"</div>
       <div class="rec-status" id="vtv-rec-status">Sẵn sàng</div>
     `;
     controls.parentNode.insertBefore(inlineRec, controls.nextSibling);
 
+    const scheduleRec = document.createElement('div');
+    scheduleRec.id = 'vtv-schedule-rec';
+    scheduleRec.className = 'vtv-schedule-rec';
+    const now = new Date();
+    const later = new Date(now.getTime() + 60 * 60 * 1000);
+    const dateStr = now.toISOString().split('T')[0];
+    const endTimeStr = later.toTimeString().substring(0, 5);
+    scheduleRec.innerHTML = `
+      <div class="sch-title">📅 Lên lịch record từ đầu đến giờ tùy chỉnh</div>
+      <div class="sch-row">
+        <label>Ngày:</label>
+        <input type="date" id="vtv-sch-date" value="${dateStr}">
+      </div>
+      <div class="sch-row">
+        <label>Record đến:</label>
+        <input type="time" id="vtv-sch-time" value="${endTimeStr}">
+      </div>
+      <div class="sch-btn-row">
+        <button class="sch-start" onclick="window._vtvSchStart()">⏺ Bắt đầu lên lịch</button>
+        <button class="sch-cancel" onclick="window._vtvSchCancel()" id="vtv-sch-cancel-btn" disabled>✕ Hủy</button>
+      </div>
+      <div class="sch-status" id="vtv-sch-status">Record từ thời điểm stream hoạt động đến giờ chỉ định</div>
+    `;
+    inlineRec.parentNode.insertBefore(scheduleRec, inlineRec.nextSibling);
+
     const recPanel = document.createElement('div');
     recPanel.id = 'vtv-rec-panel';
     recPanel.className = 'vtv-rec-panel';
@@ -303,7 +399,7 @@
         <span id="vtv-rec-proc-text">Đang xử lý...</span>
       </div>
     `;
-    inlineRec.parentNode.insertBefore(recPanel, inlineRec.nextSibling);
+    scheduleRec.parentNode.insertBefore(recPanel, scheduleRec.nextSibling);
 
     document.getElementById('vtv-rec-bar').addEventListener('click', function(e) {
       if (!_rec.isRecording) handleRecBarClick(e);
@@ -315,7 +411,6 @@
     document.getElementById('vtv-rec-mk-end').addEventListener('touchstart', function(e){ e.preventDefault(); e.stopPropagation(); _rec._dragMarker = 'end'; }, {passive:false});
   }
 
-  // Global drag
   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; });
@@ -379,7 +474,6 @@
     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; }
@@ -414,6 +508,12 @@
     _rec.startTime = null; _rec.endTime = null; _rec.isRecording = false; _rec.blob = null;
     if (_rec.recorder && _rec.recorder.state !== 'inactive') _rec.recorder.stop();
     clearTimeout(_rec._recTimer);
+    if (_rec._scheduleTimer) { clearTimeout(_rec._scheduleTimer); _rec._scheduleTimer = null; }
+    _rec.scheduleMode = false;
+    const schCancelBtn = document.getElementById('vtv-sch-cancel-btn');
+    if (schCancelBtn) schCancelBtn.disabled = true;
+    const schStatus = document.getElementById('vtv-sch-status');
+    if (schStatus) { schStatus.textContent = 'Record từ thời điểm stream hoạt động đến giờ chỉ định'; schStatus.className = 'sch-status'; }
     document.getElementById('vtv-rec-mk-start').style.display = 'none';
     document.getElementById('vtv-rec-mk-end').style.display = 'none';
     document.getElementById('vtv-rec-progress').style.width = '0%';
@@ -435,7 +535,6 @@
     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) =====
   window._vtvRecGo = function() {
     if (_rec.startTime === null || _rec.endTime === null) return;
     if (_rec.isRecording) {
@@ -518,339 +617,175 @@
     }, dur + 500);
   };
 
-  // ===== 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 đề';
+  // ===== v8: SCHEDULED RECORDING FROM START =====
+  window._vtvSchStart = function() {
+    const video = document.getElementById('vtv-player');
+    if (!video || !video.src) {
+      const schStatus = document.getElementById('vtv-sch-status');
+      if (schStatus) { schStatus.textContent = '⚠️ Chưa có stream! Chọn kênh trước.'; schStatus.className = 'sch-status error'; }
+      return;
     }
-  };
 
-  // ===== 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', title);
+    const dateInput = document.getElementById('vtv-sch-date');
+    const timeInput = document.getElementById('vtv-sch-time');
+    if (!dateInput || !timeInput || !dateInput.value || !timeInput.value) {
+      const schStatus = document.getElementById('vtv-sch-status');
+      if (schStatus) { schStatus.textContent = '⚠️ Chọn ngày và giờ kết thúc!'; schStatus.className = 'sch-status error'; }
+      return;
     }
-  };
 
-  // ===== 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', title);
-    } else {
-      uploadToWall(_rec.blob, title);
+    const targetEnd = new Date(dateInput.value + 'T' + timeInput.value + ':00');
+    const now = new Date();
+
+    if (targetEnd <= now) {
+      const schStatus = document.getElementById('vtv-sch-status');
+      if (schStatus) { schStatus.textContent = '⚠️ Giờ kết thúc phải ở tương lai!'; schStatus.className = 'sch-status error'; }
+      return;
     }
-  };
 
-  // ===== 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;
-
-    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;
-      }
+    const durationMs = targetEnd - now;
+    const durationMin = Math.round(durationMs / 60000);
 
-      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; }
-
-      showProc(`🔄 Render ${cw}x${ch}...`);
-
-      const canvas = document.createElement('canvas');
-      canvas.width = cw; canvas.height = ch;
-      const ctx = canvas.getContext('2d');
-      const canvasStream = canvas.captureStream(30);
-
-      let recordStream = canvasStream;
-      const audioVideo = document.createElement('video');
-      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]);
-              console.log('[VTV Crop] Audio merged:', tracks.length, 'tracks');
-            }
-          }
-        } catch(e) { console.warn('[VTV Crop] Audio merge failed:', e); }
-      };
+    _rec.scheduleMode = true;
+    _rec.scheduleEndTime = targetEnd;
 
-      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';
+    const schStatus = document.getElementById('vtv-sch-status');
+    const schCancelBtn = document.getElementById('vtv-sch-cancel-btn');
+    if (schStatus) { schStatus.textContent = `⏳ Đã lên lịch! Record từ BÂY GIỮ (${now.toLocaleTimeString('vi-VN', {hour:'2-digit',minute:'2-digit'})}) đến ${timeInput.value} (${durationMin} phút)`; schStatus.className = 'sch-status active'; }
+    if (schCancelBtn) schCancelBtn.disabled = false;
 
-      let rec;
-      try { rec = new MediaRecorder(recordStream, {mimeType: mime}); }
-      catch(e) { hideProc(); recStatus('❌ Lỗi MediaRecorder: ' + e.message, 'err'); URL.revokeObjectURL(blobUrl); return; }
+    let startTime = 0;
+    if (video.seekable && video.seekable.length > 0) {
+      startTime = video.seekable.start(0);
+    }
 
-      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 (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;
-          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;
-
-        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 {
-          console.warn('[VTV Crop] Duration unknown, using 60s timeout');
-          setTimeout(() => {
-            if (!finished) {
-              console.warn('[VTV Crop] 60s timeout fallback');
-              finish();
-            }
-          }, 60000);
-        }
+    _rec.chunks = [];
+    _rec.isRecording = true;
 
-        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);
-      });
+    const wasMuted = video.muted;
+    video.muted = false;
+    const wasVolume = video.volume;
+    video.volume = 0.5;
+
+    let stream;
+    try {
+      stream = video.captureStream ? video.captureStream() : video.mozCaptureStream();
+      if (!stream) throw new Error('captureStream not supported');
+    } catch(e) {
+      video.muted = wasMuted; video.volume = wasVolume;
+      _rec.isRecording = false;
+      _rec.scheduleMode = false;
+      if (schStatus) { schStatus.textContent = '❌ ' + e.message; schStatus.className = 'sch-status error'; }
+      return;
     }
 
-    video.onerror = function() {
-      hideProc(); recStatus('❌ Không đọc được video.', 'err');
-      URL.revokeObjectURL(blobUrl);
-    };
+    const audioTracks = stream.getAudioTracks();
 
-    video.addEventListener('loadedmetadata', onReady);
-    video.addEventListener('canplay', onReady);
-  }
+    let mimeType = 'video/webm;codecs=vp9,opus';
+    if (!MediaRecorder.isTypeSupported(mimeType)) mimeType = 'video/webm;codecs=vp8,opus';
+    if (!MediaRecorder.isTypeSupported(mimeType)) mimeType = 'video/webm';
 
-  // ===== TOGGLE REC PANEL =====
-  function toggleRecPanel() {
-    const panel = document.getElementById('vtv-inline-rec');
-    if (!panel) { buildInlineRecorder(); setTimeout(toggleRecPanel, 200); return; }
-    _rec.active = !_rec.active;
-    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');
-      }
+    try { _rec.recorder = new MediaRecorder(stream, {mimeType}); }
+    catch(e) {
+      video.muted = wasMuted; video.volume = wasVolume;
+      _rec.isRecording = false;
+      _rec.scheduleMode = false;
+      if (schStatus) { schStatus.textContent = '❌ Lỗi MediaRecorder: ' + e.message; schStatus.className = 'sch-status error'; }
+      return;
     }
-  }
 
-  // ===== PIN BUTTON =====
-  function setupPinButton(){
-    const block = document.getElementById('vtv-block');
-    if(!block) return;
-    const header = block.querySelector('.vtv-head');
-    if(!header || document.getElementById('vtv-pin-btn')) return;
-    const btn = document.createElement('button');
-    btn.id = 'vtv-pin-btn'; btn.className = 'vtv-pin-btn';
-    btn.innerHTML = '📌 Ghim';
-    btn.title = 'Ghim VTV cố định trên đầu trang';
-    btn.onclick = function(e){
-      e.stopPropagation(); _vtvPinned = !_vtvPinned;
-      if(_vtvPinned){ block.classList.add('vtv-sticky'); btn.classList.add('pinned'); btn.innerHTML = '📌 Đã ghim'; }
-      else { block.classList.remove('vtv-sticky'); btn.classList.remove('pinned'); btn.innerHTML = '📌 Ghim'; }
+    _rec.recorder.ondataavailable = e => { if(e.data && e.data.size > 0) _rec.chunks.push(e.data); };
+    _rec.recorder.onstop = function() {
+      _rec.isRecording = false;
+      video.muted = wasMuted;
+      video.volume = wasVolume;
+      _rec.blob = new Blob(_rec.chunks, {type: 'video/webm'});
+      _rec.scheduleMode = false;
+      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'; }
+      document.getElementById('vtv-rec-panel').classList.add('show');
+      const pv = document.getElementById('vtv-rec-preview-vid');
+      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 schStatus2 = document.getElementById('vtv-sch-status');
+      if (schStatus2) { schStatus2.textContent = `✅ Record xong! ${sizeMB}MB (${durationMin}p)`; schStatus2.className = 'sch-status active'; }
+      const schCancelBtn2 = document.getElementById('vtv-sch-cancel-btn');
+      if (schCancelBtn2) schCancelBtn2.disabled = true;
+      recStatus('✅ Record xong! ' + sizeMB + 'MB' + (audioTracks.length > 0 ? ' (có audio)' : ' (video only)'), 'ok');
     };
-    header.style.position = 'relative';
-    header.appendChild(btn);
-  }
-
-  // ===== MINI PLAYER =====
-  function createMiniPlayer(){
-    if(document.getElementById('vtv-mini')) return;
-    const mini = document.createElement('div');
-    mini.className = 'vtv-mini'; mini.id = 'vtv-mini';
-    mini.innerHTML = `<div class="vtv-mini-frame"><video id="vtv-mini-vid" playsinline muted preload="auto"></video></div>
-      <div class="vtv-mini-bar"><div style="display:flex;align-items:center;flex:1;min-width:0"><span class="vtv-mini-ch" id="vtv-mini-ch">VTV</span><span class="vtv-mini-epg" id="vtv-mini-epg"></span></div>
-      <div class="vtv-mini-btns"><button class="vtv-mini-btn" id="vtv-mini-pip">📺</button><button class="vtv-mini-btn" id="vtv-mini-expand">⬆️</button><button class="vtv-mini-btn" id="vtv-mini-hide">⬇️</button><button class="vtv-mini-btn x" id="vtv-mini-close">✕</button></div></div>
-      <div class="vtv-mini-peek" id="vtv-mini-peek">📺 Xem</div>`;
-    document.body.appendChild(mini);
-    document.getElementById('vtv-mini-pip').onclick = async function(){
-      const v = document.getElementById('vtv-mini-vid');
-      try{ if(document.pictureInPictureElement === v) await document.exitPictureInPicture(); else await v.requestPictureInPicture(); }catch(e){}
+    _rec.recorder.onerror = e => {
+      _rec.isRecording = false;
+      _rec.scheduleMode = false;
+      video.muted = wasMuted; video.volume = wasVolume;
+      if (schStatus) { schStatus.textContent = '❌ Lỗi: ' + (e.error?.message||'?'); schStatus.className = 'sch-status error'; }
+      recStatus('❌ Lỗi: ' + (e.error?.message||'?'), 'err');
     };
-    document.getElementById('vtv-mini-expand').onclick = function(){ closeMiniPlayer(); if(typeof switchCat==='function') switchCat('home'); };
-    document.getElementById('vtv-mini-hide').onclick = ()=>{ mini.classList.add('hidden'); };
-    document.getElementById('vtv-mini-close').onclick = closeMiniPlayer;
-    document.getElementById('vtv-mini-peek').onclick = ()=>{ mini.classList.remove('hidden'); };
-  }
-  function closeMiniPlayer(){ const m=document.getElementById('vtv-mini'); if(m){const v=document.getElementById('vtv-mini-vid'); if(v){v.pause();v.src='';} m.remove();} _miniActive=false; }
-  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(()=>{});}
-    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(()=>{});
-    mini.classList.add('show'); mini.classList.remove('hidden');
-  }
 
-  // ===== 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]; 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;
-  }
+    _rec.recorder.start(1000);
 
-  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;
-  }
+    if (startTime > 0) {
+      video.currentTime = startTime;
+    }
 
-  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>';}
-  }
+    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 (lên lịch)...' + (audioTracks.length > 0 ? ' (có audio)' : ''), 'recording');
 
-  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){}};
+    _rec._scheduleTimer = setTimeout(() => {
+      if (_rec.isRecording && _rec.recorder && _rec.recorder.state !== 'inactive') {
+        _rec.recorder.stop();
+      }
+    }, durationMs + 1000);
 
-  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);});}
-  }
+    const updateInterval = setInterval(() => {
+      if (!_rec.isRecording || !_rec.scheduleMode) {
+        clearInterval(updateInterval);
+        return;
+      }
+      const elapsed = Math.round((new Date() - now) / 1000);
+      const remaining = Math.round((targetEnd - new Date()) / 1000);
+      if (remaining > 0) {
+        recStatus(`🔴 RECORDING... Đã record ${fmtSec(elapsed)}, còn lại ${fmtSec(remaining)}`, 'recording');
+      }
+    }, 10000);
+  };
 
-  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;}
-    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;}
-    _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(()=>{});}
+  window._vtvSchCancel = function() {
+    if (_rec._scheduleTimer) { clearTimeout(_rec._scheduleTimer); _rec._scheduleTimer = null; }
+    if (_rec.isRecording && _rec.recorder && _rec.recorder.state !== 'inactive') {
+      _rec.recorder.stop();
+    }
+    _rec.scheduleMode = false;
+    const schStatus = document.getElementById('vtv-sch-status');
+    if (schStatus) { schStatus.textContent = 'Đã hủy lịch record.'; schStatus.className = 'sch-status'; }
+    const schCancelBtn = document.getElementById('vtv-sch-cancel-btn');
+    if (schCancelBtn) schCancelBtn.disabled = true;
   };
 
-  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';}
-  }
+  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;
 
-  // ===== 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);};}
+    btn.disabled = true;
+    btn.textContent = '⏳ Đang tạo...';
 
-  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;
-  }
-})();
+    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 đề';
+    }
+  };
+
+  window._vtvRecDownload = function() {
+    if (!_rec.blob) return;
+    const title = document.getElementById('vtv-rec-title