Upload static/yt_live.js

static/yt_live.js

@@ -1,6 +1,6 @@
 // === VNEWS — VTV1-VTV10 + VTVPrime LIVE CHANNELS ===
 // Default channel: VTV6
-// Features: PiP button, floating mini-player when reading articles/videos
+// Features: PiP button, floating mini-player, INLINE RECORDER
 // Fixed: VTV stays at top ONLY when user clicks pin button
 
 (function(){
@@ -31,7 +31,7 @@
   let _streamsLoaded = false;
   let _pipActive = false;
   let _miniActive = false;
-  let _vtvPinned = false; // only true when user clicks pin
+  let _vtvPinned = false;
 
   // ===== STYLES =====
   const style = document.createElement('style');
@@ -95,6 +95,47 @@
   .vtv-wrap.vtv-sticky .vtv-badge{font-size:8px}
   .vtv-wrap.vtv-sticky .vtv-pin-btn{top:4px;right:6px}
 
+  /* ===== INLINE RECORDER ===== */
+  .vtv-rec-btn{background:#660000;border:1px solid #990000;color:#ff6666;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-rec-btn:hover{background:#990000;color:#fff}
+  .vtv-rec-btn.recording{background:#cc0000;border-color:#ff0000;color:#fff;animation:vtv-rec-pulse 1s infinite}
+  @keyframes vtv-rec-pulse{0%,100%{opacity:1}50%{opacity:.5}}
+  .vtv-rec-btn svg{width:12px;height:12px;fill:currentColor}
+
+  .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}
+  .vtv-inline-rec .rec-bar .rec-progress{position:absolute;top:0;bottom:0;background:rgba(155,89,182,.3);left:0;width:0%}
+  .vtv-inline-rec .rec-bar .rec-marker{position:absolute;top:0;bottom:0;width:3px;z-index:2}
+  .vtv-inline-rec .rec-bar .rec-marker.s{background:#2ecc71}
+  .vtv-inline-rec .rec-bar .rec-marker.e{background:#e74c3c}
+  .vtv-inline-rec .rec-time{display:flex;justify-content:space-between;font-size:9px;color:#888;margin-bottom:6px}
+  .vtv-inline-rec .rec-controls{display:flex;gap:4px}
+  .vtv-inline-rec .rec-controls button{flex:1;padding:6px;border:none;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer}
+  .vtv-inline-rec .rec-controls .rec-set-start{background:#1a3a1a;border:1px solid #2d6a2d;color:#5cb87a}
+  .vtv-inline-rec .rec-controls .rec-set-end{background:#3a1a1a;border:1px solid #6a2d2d;color:#e74c3c}
+  .vtv-inline-rec .rec-controls .rec-go{background:#1a0a3a;border:1px solid #3a2a6a;color:#9b59b6}
+  .vtv-inline-rec .rec-controls .rec-reset{background:#222;border:1px solid #333;color:#888}
+  .vtv-inline-rec .rec-hint{font-size:9px;color:#666;text-align:center;margin-top:4px}
+  .vtv-inline-rec .rec-status{font-size:10px;color:#888;text-align:center;padding:4px;margin-top:4px;background:#111;border-radius:4px}
+  .vtv-inline-rec .rec-status.ok{color:#2ecc71}
+  .vtv-inline-rec .rec-status.err{color:#e74c3c}
+  .vtv-inline-rec .rec-status.recording{color:#e74c3c;animation:vtv-rec-pulse 1s infinite}
+
+  .vtv-rec-panel{display:none;padding:10px;background:#0d0d20;border-top:1px solid #2a1a4a}
+  .vtv-rec-panel.show{display:block}
+  .vtv-rec-panel .rec-panel-title{font-size:11px;font-weight:700;color:#9b59b6;margin-bottom:8px;display:flex;align-items:center;gap:6px}
+  .vtv-rec-panel .rec-ratio-row{display:flex;gap:4px;margin-bottom:8px}
+  .vtv-rec-panel .rec-ratio-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-ratio-row button.active{border-color:#9b59b6;color:#9b59b6;background:#2a1a4a}
+  .vtv-rec-panel .rec-actions{display:flex;gap:4px}
+  .vtv-rec-panel .rec-actions button{flex:1;padding:8px;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer}
+  .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-preview-wrap{margin-top:8px;text-align:center}
+  .vtv-rec-panel .rec-preview-wrap video{max-width:100%;max-height:200px;border-radius:6px;background:#000}
+  .vtv-rec-panel .rec-processing{text-align:center;padding:12px;color:#9b59b6;font-size:12px}
+
   /* ===== MINI PLAYER ===== */
   .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}
@@ -114,6 +155,453 @@
   `;
   document.head.appendChild(style);
 
+  // ===== INLINE RECORDER STATE =====
+  let _recState = {
+    active: false,
+    startTime: null,
+    endTime: null,
+    isRecording: false,
+    recorder: null,
+    chunks: [],
+    blob: null,
+    ratio: 'original',
+    _dragMarker: null,
+    _timer: null,
+    _recTimer: null,
+  };
+
+  // ===== INLINE RECORDER UI =====
+  function buildInlineRecorder() {
+    const controls = document.querySelector('.vtv-controls');
+    if (!controls || document.getElementById('vtv-rec-btn')) return;
+
+    // Record button in controls bar
+    const recBtn = document.createElement('button');
+    recBtn.id = 'vtv-rec-btn';
+    recBtn.className = 'vtv-rec-btn';
+    recBtn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record';
+    recBtn.title = 'Record video ngắn từ LIVE (max 60s)';
+    recBtn.onclick = toggleInlineRecorder;
+    controls.appendChild(recBtn);
+
+    // Inline recorder panel
+    const inlineRec = document.createElement('div');
+    inlineRec.id = 'vtv-inline-rec';
+    inlineRec.className = 'vtv-inline-rec';
+    inlineRec.innerHTML = `
+      <div class="rec-time">
+        <span id="vtv-rec-time-start">00:00</span>
+        <span id="vtv-rec-time-dur">Duration: 0s</span>
+        <span id="vtv-rec-time-end">01:00</span>
+      </div>
+      <div class="rec-bar" id="vtv-rec-bar">
+        <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>
+      </div>
+      <div class="rec-controls">
+        <button class="rec-set-start" id="vtv-rec-set-start" onclick="window._vtvRecSetStart()">🔵 Điểm đầu</button>
+        <button class="rec-set-end" id="vtv-rec-set-end" onclick="window._vtvRecSetEnd()" disabled>🔴 Điểm cuối</button>
+        <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-status" id="vtv-rec-status">Sẵn sàng</div>
+    `;
+    controls.parentNode.insertBefore(inlineRec, controls.nextSibling);
+
+    // Post-record panel (ratio + download/share)
+    const recPanel = document.createElement('div');
+    recPanel.id = 'vtv-rec-panel';
+    recPanel.className = 'vtv-rec-panel';
+    recPanel.innerHTML = `
+      <div class="rec-panel-title">🎬 Đã record xong!</div>
+      <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>
+      <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>
+        <button data-ratio="9:16" onclick="window._vtvRecSetRatio('9:16')">📱 9:16</button>
+      </div>
+      <div class="rec-actions">
+        <button class="rec-download" onclick="window._vtvRecDownload()">💾 Lưu về máy</button>
+        <button class="rec-share" onclick="window._vtvRecShare()">🎬 Tạo Short AI</button>
+      </div>
+      <div class="rec-processing" id="vtv-rec-proc" style="display:none">
+        <div class="vtv-spinner" style="width:20px;height:20px;margin:0 auto 6px"></div>
+        <span id="vtv-rec-proc-text">Đang xử lý...</span>
+      </div>
+    `;
+    inlineRec.parentNode.insertBefore(recPanel, inlineRec.nextSibling);
+
+    // Timeline click
+    document.getElementById('vtv-rec-bar').addEventListener('click', function(e) {
+      const video = document.getElementById('vtv-player');
+      if (!video || !video.src) { recStatus('⚠️ Chưa có stream!'); return; }
+      const rect = this.getBoundingClientRect();
+      const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const time = pct * 60; // max 60s
+
+      if (_recState.startTime === null) {
+        _recState.startTime = time;
+        const mk = document.getElementById('vtv-rec-mk-start');
+        mk.style.display = 'block'; mk.style.left = (pct * 100) + '%';
+        document.getElementById('vtv-rec-time-start').textContent = fmtSec(time);
+        document.getElementById('vtv-rec-set-end').disabled = false;
+        recStatus('Điểm đầu: ' + fmtSec(time) + '. Chọn điểm cuối.', '');
+      } else if (_recState.endTime === null) {
+        if (time <= _recState.startTime) { recStatus('⚠️ Điểm cuối phải sau điểm đầu!', 'err'); return; }
+        const dur = time - _recState.startTime;
+        if (dur > 60) { recStatus('⚠️ Tối đa 60s!', 'err'); return; }
+        _recState.endTime = time;
+        const mk = document.getElementById('vtv-rec-mk-end');
+        mk.style.display = 'block'; mk.style.left = (pct * 100) + '%';
+        document.getElementById('vtv-rec-time-end').textContent = fmtSec(time);
+        updateRecProgress();
+        recStatus('✅ ' + Math.round(dur) + 's. Nhấn Record!', 'ok');
+        document.getElementById('vtv-rec-go').disabled = false;
+      }
+    });
+
+    // Drag markers
+    setupRecDrag('vtv-rec-mk-start', 'start');
+    setupRecDrag('vtv-rec-mk-end', 'end');
+  }
+
+  function setupRecDrag(mkId, which) {
+    const mk = document.getElementById(mkId);
+    if (!mk) return;
+    mk.addEventListener('mousedown', function(e) { e.preventDefault(); e.stopPropagation(); _recState._dragMarker = which; });
+    mk.addEventListener('touchstart', function(e) { e.preventDefault(); e.stopPropagation(); _recState._dragMarker = which; }, {passive:false});
+  }
+
+  // Global drag handlers
+  document.addEventListener('mousemove', function(e) {
+    if (!_recState._dragMarker) return;
+    const bar = document.getElementById('vtv-rec-bar');
+    if (!bar) return;
+    const rect = bar.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const time = pct * 60;
+    const mkId = _recState._dragMarker === 'start' ? 'vtv-rec-mk-start' : 'vtv-rec-mk-end';
+    const mk = document.getElementById(mkId);
+    if (!mk) return;
+    if (_recState._dragMarker === 'start') {
+      if (_recState.endTime !== null && time >= _recState.endTime - 1) return;
+      _recState.startTime = time;
+      mk.style.left = (pct * 100) + '%';
+      document.getElementById('vtv-rec-time-start').textContent = fmtSec(time);
+    } else {
+      if (_recState.startTime !== null && time <= _recState.startTime + 1) return;
+      _recState.endTime = time;
+      mk.style.left = (pct * 100) + '%';
+      document.getElementById('vtv-rec-time-end').textContent = fmtSec(time);
+    }
+    updateRecProgress();
+  });
+  document.addEventListener('touchmove', function(e) {
+    if (!_recState._dragMarker) return;
+    const bar = document.getElementById('vtv-rec-bar');
+    if (!bar) return;
+    const rect = bar.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (e.touches[0].clientX - rect.left) / rect.width));
+    const time = pct * 60;
+    const mkId = _recState._dragMarker === 'start' ? 'vtv-rec-mk-start' : 'vtv-rec-mk-end';
+    const mk = document.getElementById(mkId);
+    if (!mk) return;
+    if (_recState._dragMarker === 'start') {
+      if (_recState.endTime !== null && time >= _recState.endTime - 1) return;
+      _recState.startTime = time; mk.style.left = (pct * 100) + '%';
+      document.getElementById('vtv-rec-time-start').textContent = fmtSec(time);
+    } else {
+      if (_recState.startTime !== null && time <= _recState.startTime + 1) return;
+      _recState.endTime = time; mk.style.left = (pct * 100) + '%';
+      document.getElementById('vtv-rec-time-end').textContent = fmtSec(time);
+    }
+    updateRecProgress();
+  }, {passive:false});
+  document.addEventListener('mouseup', function() { _recState._dragMarker = null; });
+  document.addEventListener('touchend', function() { _recState._dragMarker = null; });
+
+  function updateRecProgress() {
+    const s = _recState.startTime || 0;
+    const e = _recState.endTime || 60;
+    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-time-dur').textContent = 'Duration: ' + Math.round(dur) + 's';
+  }
+
+  function recStatus(msg, type) {
+    const el = document.getElementById('vtv-rec-status');
+    if (!el) return;
+    el.textContent = msg;
+    el.className = 'rec-status' + (type ? ' ' + type : '');
+  }
+
+  // ===== INLINE RECORDER CONTROLS =====
+  window._vtvRecSetStart = function() {
+    const video = document.getElementById('vtv-player');
+    if (!video || !video.src) { recStatus('⚠️ Chưa có stream!', 'err'); return; }
+    const cur = video.currentTime || 0;
+    _recState.startTime = cur;
+    const pct = cur / 60 * 100;
+    const mk = document.getElementById('vtv-rec-mk-start');
+    mk.style.display = 'block'; mk.style.left = pct + '%';
+    document.getElementById('vtv-rec-time-start').textContent = fmtSec(cur);
+    document.getElementById('vtv-rec-set-end').disabled = false;
+    recStatus('Điểm đầu: ' + fmtSec(cur), '');
+  };
+
+  window._vtvRecSetEnd = function() {
+    if (_recState.startTime === null) { recStatus('⚠️ Chọn điểm đầu trước!', 'err'); return; }
+    const video = document.getElementById('vtv-player');
+    if (!video) return;
+    const cur = video.currentTime || 0;
+    if (cur <= _recState.startTime) { recStatus('⚠️ Điểm cuối phải sau điểm đầu!', 'err'); return; }
+    const dur = cur - _recState.startTime;
+    if (dur > 60) { recStatus('⚠️ Tối đa 60s!', 'err'); return; }
+    _recState.endTime = cur;
+    const pct = cur / 60 * 100;
+    const mk = document.getElementById('vtv-rec-mk-end');
+    mk.style.display = 'block'; mk.style.left = pct + '%';
+    document.getElementById('vtv-rec-time-end').textContent = fmtSec(cur);
+    updateRecProgress();
+    recStatus('✅ ' + Math.round(dur) + 's. Nhấn Record!', 'ok');
+    document.getElementById('vtv-rec-go').disabled = false;
+  };
+
+  window._vtvRecReset = function() {
+    _recState.startTime = null; _recState.endTime = null;
+    _recState.isRecording = false; _recState.blob = null;
+    if (_recState.recorder && _recState.recorder.state !== 'inactive') _recState.recorder.stop();
+    clearTimeout(_recState._recTimer);
+    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%';
+    document.getElementById('vtv-rec-time-start').textContent = '00:00';
+    document.getElementById('vtv-rec-time-end').textContent = '01:00';
+    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;
+    document.getElementById('vtv-rec-go').disabled = true;
+    document.getElementById('vtv-rec-panel').classList.remove('show');
+    recStatus('Đã reset.', '');
+    // Reset rec button
+    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'; }
+  };
+
+  window._vtvRecGo = function() {
+    if (_recState.startTime === null || _recState.endTime === null) return;
+    if (_recState.isRecording) {
+      // Stop
+      if (_recState.recorder && _recState.recorder.state !== 'inactive') _recState.recorder.stop();
+      _recState.isRecording = false;
+      clearTimeout(_recState._recTimer);
+      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'; }
+      return;
+    }
+
+    const video = document.getElementById('vtv-player');
+    if (!video) { recStatus('⚠️ Không tìm thấy video!', 'err'); return; }
+
+    _recState.chunks = [];
+    _recState.isRecording = true;
+
+    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 {
+      const stream = video.captureStream ? video.captureStream() : video.mozCaptureStream();
+      if (!stream) { recStatus('❌ Không hỗ trợ captureStream!', 'err'); _recState.isRecording = false; return; }
+      _recState.recorder = new MediaRecorder(stream, {mimeType});
+    } catch(e) { recStatus('❌ Lỗi: ' + e.message, 'err'); _recState.isRecording = false; return; }
+
+    _recState.recorder.ondataavailable = e => { if(e.data && e.data.size > 0) _recState.chunks.push(e.data); };
+    _recState.recorder.onstop = function() {
+      _recState.isRecording = false;
+      _recState.blob = new Blob(_recState.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'; }
+      // Show panel
+      document.getElementById('vtv-rec-panel').classList.add('show');
+      const pv = document.getElementById('vtv-rec-preview-vid');
+      pv.src = URL.createObjectURL(_recState.blob);
+      document.getElementById('vtv-rec-preview-wrap').style.display = 'block';
+      recStatus('✅ Record xong! ' + (_recState.blob.size/1024/1024).toFixed(1) + 'MB', 'ok');
+    };
+    _recState.recorder.onerror = e => { recStatus('❌ Lỗi: ' + (e.error?.message||'?'), 'err'); _recState.isRecording = false; };
+
+    _recState.recorder.start(1000);
+    video.currentTime = _recState.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');
+
+    const dur = (_recState.endTime - _recState.startTime) * 1000;
+    _recState._recTimer = setTimeout(() => {
+      if (_recState.isRecording) {
+        if (_recState.recorder && _recState.recorder.state !== 'inactive') _recState.recorder.stop();
+        _recState.isRecording = false;
+      }
+    }, dur + 500);
+  };
+
+  window._vtvRecSetRatio = function(ratio) {
+    _recState.ratio = ratio;
+    document.querySelectorAll('#vtv-rec-panel .rec-ratio-row button').forEach(b => {
+      b.classList.toggle('active', b.dataset.ratio === ratio);
+    });
+  };
+
+  window._vtvRecDownload = function() {
+    if (!_recState.blob) return;
+    if (_recState.ratio === 'original') {
+      downloadBlob(_recState.blob, `vtv-${_currentCh}-${Date.now()}.webm`);
+    } else {
+      applyRatioProcess(_recState.blob, _recState.ratio, 'download');
+    }
+  };
+
+  window._vtvRecShare = function() {
+    if (!_recState.blob) return;
+    if (_recState.ratio !== 'original') {
+      applyRatioProcess(_recState.blob, _recState.ratio, 'upload');
+    } else {
+      uploadToServer(_recState.blob);
+    }
+  };
+
+  function downloadBlob(blob, filename) {
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob); a.download = filename; a.click();
+    URL.revokeObjectURL(a.href);
+    recStatus('✅ Đã tải: ' + filename, 'ok');
+  }
+
+  function uploadToServer(blob) {
+    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');
+    showRecProc('⏳ Đang upload...');
+    fetch('/api/wall', { method: 'POST', body: formData })
+      .then(r => r.json())
+      .then(data => {
+        hideRecProc();
+        if (data.ok) {
+          recStatus('✅ Đã tạo Short AI! Xem trong Tường AI.', 'ok');
+        } else {
+          recStatus('⚠️ ' + (data.error || 'Upload lỗi') + '. Đang tải về...', 'err');
+          setTimeout(() => downloadBlob(blob, `vtv-${_currentCh}-${Date.now()}.webm`), 800);
+        }
+      })
+      .catch(e => {
+        hideRecProc();
+        recStatus('⚠️ Mất kết nối. Đang tải về...', 'err');
+        setTimeout(() => downloadBlob(blob, `vtv-${_currentCh}-${Date.now()}.webm`), 800);
+      });
+  }
+
+  function showRecProc(text) {
+    document.getElementById('vtv-rec-proc').style.display = 'block';
+    document.getElementById('vtv-rec-proc-text').textContent = text;
+  }
+  function hideRecProc() {
+    document.getElementById('vtv-rec-proc').style.display = 'none';
+  }
+
+  function applyRatioProcess(blob, ratio, action) {
+    showRecProc(`🔄 Đang xử lý ${ratio}...`);
+    const video = document.createElement('video');
+    video.src = URL.createObjectURL(blob);
+    video.muted = true;
+    video.preload = 'auto';
+
+    video.onloadedmetadata = function() {
+      const vw = video.videoWidth, vh = video.videoHeight;
+      let cw, ch, sx, sy;
+      if (ratio === '1:1') {
+        const size = Math.min(vw, vh); cw = ch = size;
+        sx = (vw - size) / 2; sy = (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; }
+
+      const canvas = document.createElement('canvas');
+      canvas.width = cw; canvas.height = ch;
+      const ctx = canvas.getContext('2d');
+      const canvasStream = canvas.captureStream(30);
+
+      let combinedStream = canvasStream;
+      try {
+        const vs = video.captureStream ? video.captureStream() : null;
+        if (vs) {
+          const at = vs.getAudioTracks();
+          if (at.length > 0) combinedStream = new MediaStream([...canvasStream.getVideoTracks(), ...at]);
+        }
+      } catch(e) {}
+
+      const mime = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus') ? 'video/webm;codecs=vp9,opus' : 'video/webm';
+      let rec;
+      try { rec = new MediaRecorder(combinedStream, {mimeType: mime}); }
+      catch(e) { hideRecProc(); recStatus('❌ Lỗi: ' + e.message, 'err'); return; }
+
+      const chunks = [];
+      rec.ondataavailable = e => { if(e.data.size > 0) chunks.push(e.data); };
+      rec.onstop = () => {
+        hideRecProc();
+        const out = new Blob(chunks, {type: 'video/webm'});
+        URL.revokeObjectURL(video.src);
+        if (action === 'download') {
+          downloadBlob(out, `vtv-${_currentCh}-${ratio.replace(':','x')}-${Date.now()}.webm`);
+        } else {
+          uploadToServer(out);
+        }
+      };
+      rec.start(1000);
+      video.currentTime = 0;
+      video.play().then(() => {
+        function draw() {
+          if (video.paused || video.ended) { rec.stop(); return; }
+          ctx.drawImage(video, sx, sy, cw, ch, 0, 0, cw, ch);
+          requestAnimationFrame(draw);
+        }
+        draw();
+        setTimeout(() => { if(rec.state !== 'inactive') rec.stop(); }, video.duration * 1000 + 500);
+      }).catch(e => { hideRecProc(); recStatus('❌ ' + e.message, 'err'); });
+    };
+    video.onerror = function() { hideRecProc(); recStatus('❌ Không đọc được video.', 'err'); };
+  }
+
+  window._vtvRecToggle = toggleInlineRecorder;
+
+  function toggleInlineRecorder() {
+    const panel = document.getElementById('vtv-inline-rec');
+    if (!panel) { buildInlineRecorder(); setTimeout(toggleInlineRecorder, 200); return; }
+    _recState.active = !_recState.active;
+    panel.classList.toggle('show', _recState.active);
+    const btn = document.getElementById('vtv-rec-btn');
+    if (btn) {
+      if (_recState.active) {
+        btn.style.background = '#3a1a1a';
+        btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Đóng';
+      } else {
+        btn.style.background = '';
+        btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Record';
+        // Also hide post-record panel
+        document.getElementById('vtv-rec-panel').classList.remove('show');
+      }
+    }
+  }
+
   // ===== PIN BUTTON =====
   function setupPinButton(){
     const block = document.getElementById('vtv-block');
@@ -121,7 +609,6 @@
     const header = block.querySelector('.vtv-head');
     if(!header) return;
     if(document.getElementById('vtv-pin-btn')) return;
-
     const btn = document.createElement('button');
     btn.id = 'vtv-pin-btn';
     btn.className = 'vtv-pin-btn';
@@ -130,15 +617,8 @@
     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';
-      }
+      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'; }
     };
     header.style.position = 'relative';
     header.appendChild(btn);
@@ -175,106 +655,57 @@
 
   function closeMiniPlayer(){
     const mini = document.getElementById('vtv-mini');
-    if(mini){
-      const v = document.getElementById('vtv-mini-vid');
-      if(v){ v.pause(); v.src = ''; }
-      mini.remove();
-    }
+    if(mini){ const v = document.getElementById('vtv-mini-vid'); if(v){ v.pause(); v.src = ''; } mini.remove(); }
     _miniActive = false;
   }
 
-  function expandFromMini(){
-    closeMiniPlayer();
-    if(typeof switchCat === 'function') switchCat('home');
-  }
+  function expandFromMini(){ closeMiniPlayer(); if(typeof switchCat === 'function') switchCat('home'); }
 
   function activateMiniPlayer(){
     if(!_currentCh) return;
-    createMiniPlayer();
-    _miniActive = true;
+    createMiniPlayer(); _miniActive = true;
     const mini = document.getElementById('vtv-mini');
     const miniVid = document.getElementById('vtv-mini-vid');
     const mainVid = document.getElementById('vtv-player');
-
     if(_hls){
       const hls = new Hls({enableWorker:true,lowLatencyMode:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:10});
-      hls.loadSource(STREAMS[_currentCh][0]);
-      hls.attachMedia(miniVid);
-      miniVid.play().catch(()=>{});
-    } else if(mainVid && mainVid.src){
-      miniVid.src = mainVid.src;
-      miniVid.play().catch(()=>{});
-    }
-
-    const ch = CHANNELS.find(c=>c.id===_currentCh);
-    if(ch) document.getElementById('vtv-mini-ch').textContent = ch.name;
-    updateMiniEpg();
-    mini.classList.add('show');
-    mini.classList.remove('hidden');
+      hls.loadSource(STREAMS[_currentCh][0]); hls.attachMedia(miniVid); miniVid.play().catch(()=>{});
+    } else if(mainVid && mainVid.src){ miniVid.src = mainVid.src; miniVid.play().catch(()=>{}); }
+    const ch = CHANNELS.find(c=>c.id===_currentCh); if(ch) document.getElementById('vtv-mini-ch').textContent = ch.name;
+    updateMiniEpg(); mini.classList.add('show'); mini.classList.remove('hidden');
   }
 
   function updateMiniEpg(){
     if(!_currentCh) return;
     fetch('/api/vtv/epg/'+_currentCh).then(r=>r.json()).then(d=>{
-      const progs = d.programs||[];
-      const now = progs.find(p=>p.now);
+      const progs = d.programs||[]; const now = progs.find(p=>p.now);
       document.getElementById('vtv-mini-epg').textContent = now ? now.time+' '+now.title : (progs[0] ? progs[0].time+' '+progs[0].title : '');
     }).catch(()=>{});
   }
 
   async function toggleMiniPiP(){
-    const v = document.getElementById('vtv-mini-vid');
-    if(!v) return;
-    try{
-      if(document.pictureInPictureElement === v){
-        await document.exitPictureInPicture();
-      } else {
-        await v.requestPictureInPicture();
-      }
-    } catch(e){ alert('Không hỗ trợ PiP'); }
+    const v = document.getElementById('vtv-mini-vid'); if(!v) return;
+    try{ if(document.pictureInPictureElement === v){ await document.exitPictureInPicture(); } else { await v.requestPictureInPicture(); } } catch(e){ alert('Không hỗ trợ PiP'); }
   }
 
   // ===== MAIN PLAYER =====
   async function loadAllStreams(){
-    if(_loading) return;
-    _loading = true;
+    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', {signal: AbortSignal.timeout(10000)});
-      if(r.ok){
-        const data = await r.json();
-        CHANNELS.forEach(ch=>{
-          const info = data[ch.id];
-          if(info && info.stream_url){
-            let url = info.stream_url;
-            if(NEEDS_PROXY.test(url)) url = '/api/proxy/m3u8/vtv?url='+encodeURIComponent(url);
-            STREAMS[ch.id] = [url];
-          } else {
-            STREAMS[ch.id] = [];
-          }
-        });
-      }
+      if(r.ok){ const data = await r.json(); CHANNELS.forEach(ch=>{ const info = data[ch.id]; if(info && info.stream_url){ let url = info.stream_url; if(NEEDS_PROXY.test(url)) url = '/api/proxy/m3u8/vtv?url='+encodeURIComponent(url); STREAMS[ch.id] = [url]; } else { STREAMS[ch.id] = []; } }); }
     } catch(e){ console.warn('VTV API error:', e); }
-    CHANNELS.forEach(ch=>{
-      const tab = document.getElementById('vtvt-'+ch.id);
-      if(tab){
-        if(STREAMS[ch.id]&&STREAMS[ch.id].length>0){ tab.classList.remove('off'); tab.textContent=ch.name; }
-        else { tab.style.opacity='0.35'; tab.textContent=ch.name+' ✕'; }
-      }
-    });
-    _loading = false;
-    _streamsLoaded = true;
+    CHANNELS.forEach(ch=>{ const tab = document.getElementById('vtvt-'+ch.id); if(tab){ if(STREAMS[ch.id]&&STREAMS[ch.id].length>0){ tab.classList.remove('off'); tab.textContent=ch.name; } else { tab.style.opacity='0.35'; tab.textContent=ch.name+' ✕'; } } });
+    _loading = false; _streamsLoaded = true;
   }
 
   function buildBlock(){
     const w = document.createElement('div');
-    w.className = 'vtv-wrap';
-    w.id = 'vtv-block';
+    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>';
-    });
+    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>' +
@@ -298,26 +729,19 @@
   }
 
   async function loadEpg(chId){
-    const el = document.getElementById('vtv-epg-list');
-    if(!el) return;
+    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, {signal: AbortSignal.timeout(10000)});
       if(!r.ok) throw new Error('fail');
-      const data = await r.json();
-      const progs = data.programs||[];
+      const data = await r.json(); const progs = data.programs||[];
       if(!progs.length){ el.innerHTML='<div class="vtv-epg-empty">Chưa có lịch phát sóng</div>'; return; }
       let h = '';
-      progs.forEach(p=>{
-        const nw = p.now ? ' now' : '';
-        h += '<div class="vtv-epg-item'+nw+'"><span class="t">'+(p.time||'')+(p.end_time?'-'+p.end_time:'')+'</span> <span class="n">'+(p.title||'')+'</span></div>';
-      });
+      progs.forEach(p=>{ const nw = p.now ? ' now' : ''; h += '<div class="vtv-epg-item'+nw+'"><span class="t">'+(p.time||'')+(p.end_time?'-'+p.end_time:'')+'</span> <span class="n">'+(p.title||'')+'</span></div>'; });
       el.innerHTML = h;
       const nowItem = el.querySelector('.vtv-epg-item.now');
       if(nowItem) nowItem.scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'});
-    } catch(e){
-      el.innerHTML = '<div class="vtv-epg-empty">Không tải được lịch</div>';
-    }
+    } catch(e){ el.innerHTML = '<div class="vtv-epg-empty">Không tải được lịch</div>'; }
   }
 
   window._vtvToggleEpg = function(){
@@ -328,19 +752,10 @@
   };
 
   window._vtvTogglePiP = async function(){
-    const v = document.getElementById('vtv-player');
-    const btn = document.getElementById('vtv-pip-btn');
-    if(!v) return;
+    const v = document.getElementById('vtv-player'); const btn = document.getElementById('vtv-pip-btn'); if(!v) return;
     try{
-      if(document.pictureInPictureElement === v){
-        await document.exitPictureInPicture();
-        _pipActive = false;
-        if(btn) btn.classList.remove('on');
-      } else {
-        await v.requestPictureInPicture();
-        _pipActive = true;
-        if(btn) btn.classList.add('on');
-      }
+      if(document.pictureInPictureElement === v){ await document.exitPictureInPicture(); _pipActive = false; if(btn) btn.classList.remove('on'); }
+      else { await v.requestPictureInPicture(); _pipActive = true; if(btn) btn.classList.add('on'); }
     } catch(e){ alert('Không hỗ trợ PiP'); }
   };
 
@@ -349,112 +764,58 @@
     if(!h||document.getElementById('vtv-block')) return;
     h.insertBefore(buildBlock(), h.firstChild);
     _blockInserted = true;
-    // Setup pin button after block is in DOM
-    setTimeout(()=>setupPinButton(), 500);
-    if(!_streamsLoaded){
-      loadAllStreams().then(()=>{
-        setTimeout(()=>window._vtvPlay(DEFAULT_CHANNEL), 300);
-      });
-    }
+    setTimeout(()=>{ setupPinButton(); buildInlineRecorder(); }, 500);
+    if(!_streamsLoaded){ loadAllStreams().then(()=>{ setTimeout(()=>window._vtvPlay(DEFAULT_CHANNEL), 300); }); }
   }
 
   window._vtvRetry = function(){ if(_currentCh) window._vtvPlay(_currentCh); };
 
   window._vtvPlay = function(chId){
-    const ch = CHANNELS.find(c=>c.id===chId);
-    if(!ch) return;
+    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 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 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';
+    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;
-    }
+    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;
-      updateMiniEpg();
-    }
+    if(_miniActive){ document.getElementById('vtv-mini-ch').textContent = ch.name; updateMiniEpg(); }
   };
 
   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;
-    }
+    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:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:20});
-      _hls = hls;
-      hls.loadSource(src);
-      hls.attachMedia(video);
+      _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); }
-        }
-      });
+      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';
-    }
+    } else { loadEl.style.display='none'; errEl.style.display='flex'; errMsg.textContent='Không hỗ trợ HLS'; }
   }
 
   // ===== NAVIGATION 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();
-    }
+    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);
-    };
-  }
-
+  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);
-    };
-  }
+  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); }; }
 
   // Override loadHome to inject VTV block
   const _origLoadHome = window.loadHome;
@@ -469,4 +830,6 @@
     };
     window.loadHome.__vtvWrapped = true;
   }
+
+  function fmtSec(s){ return String(Math.floor(s/60)).padStart(2,'0')+':'+String(Math.floor(s%60)).padStart(2,'0'); }
 })();