Upload static/yt_live.js with huggingface_hub

static/yt_live.js

@@ -20,6 +20,13 @@
   let _currentCh = null, _hls = null, _loading = false, _blockInserted = false;
   let _streamsLoaded = false, _pipActive = false, _miniActive = false, _vtvPinned = false;
 
+  // ===== DVR / TIMESHIFT STATE =====
+  const _dvr = {
+    active: false,           // DVR buffer đang chạy cho kênh hiện tại?
+    bufferUrl: null,         // URL playlist HLS từ server buffer
+    channel: null,           // kênh đang DVR
+  };
+
   // ===== RECORDER STATE =====
   const _rec = {
     active: false, startTime: null, endTime: null,
@@ -85,6 +92,13 @@
   .vtv-wrap.vtv-sticky .vtv-title{font-size:11px}
   .vtv-wrap.vtv-sticky .vtv-badge{font-size:8px}
   .vtv-wrap.vtv-sticky .vtv-pin-btn{top:4px;right:6px}
+  .vtv-dvr-btn{background:#0a2a0a;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-dvr-btn:hover{background:#1a4a1a;color:#fff}
+  .vtv-dvr-btn.on{background:#2d8659;border-color:#5cb87a;color:#fff}
+  .vtv-dvr-btn svg{width:11px;height:11px;fill:currentColor}
+  .vtv-dvr-sched-btn{background:#2a1a00;border:1px solid #6a4a2d;color:#f0c040;font-size:9px;padding:3px 8px;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px;font-weight:700;margin-left:2px}
+  .vtv-dvr-sched-btn:hover{background:#4a3a10;color:#fff}
+  .vtv-dvr-sched-btn svg{width:11px;height:11px;fill:currentColor}
   .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}
@@ -239,6 +253,95 @@
     });
   }
 
+  // ===== DVR / TIMESHIFT =====
+  window._vtvDvrStart = function(chId) {
+    if (!chId) chId = _currentCh;
+    if (!chId) return;
+    const statusEl = document.getElementById('vtv-status');
+    if (statusEl) statusEl.textContent = '⏳ Đang bật DVR buffer...';
+    fetch('/api/dvr/buffer/start/' + chId)
+      .then(r => r.json())
+      .then(d => {
+        if (d.error) { alert('DVR: ' + d.error); return; }
+        _dvr.active = true;
+        _dvr.channel = chId;
+        _dvr.bufferUrl = d.playlist;
+        const btn = document.getElementById('vtv-dvr-btn');
+        if (btn) { btn.classList.add('on'); btn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/></svg> DVR 5\' ON'; }
+        if (statusEl) statusEl.textContent = '✅ DVR 5\' active — tua lùi được!';
+        if (_currentCh === chId) _switchToDvrStream();
+      })
+      .catch(e => { alert('DVR start error: ' + e.message); });
+  };
+
+  window._vtvDvrStop = function(chId) {
+    if (!chId) chId = _dvr.channel || _currentCh;
+    fetch('/api/dvr/buffer/stop/' + chId).catch(() => {});
+    _dvr.active = false;
+    _dvr.bufferUrl = null;
+    const btn = document.getElementById('vtv-dvr-btn');
+    if (btn) { btn.classList.remove('on'); btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2"/></svg> DVR 5\''; }
+    if (_currentCh === chId) _switchToLiveStream();
+    const statusEl = document.getElementById('vtv-status');
+    if (statusEl) statusEl.textContent = 'Đã tắt DVR';
+  };
+
+  window._vtvDvrToggle = function() {
+    if (_dvr.active) window._vtvDvrStop();
+    else window._vtvDvrStart();
+  };
+
+  function _switchToDvrStream() {
+    if (!_dvr.bufferUrl) return;
+    const video = document.getElementById('vtv-player');
+    if (!video) return;
+    const wasMuted = video.muted;
+    if (_hls) { _hls.destroy(); _hls = null; }
+    const src = 'https://' + window.location.host + _dvr.bufferUrl;
+    if (typeof Hls !== 'undefined' && Hls.isSupported()) {
+      const hls = new Hls({enableWorker:true, lowLatencyMode:false, startLevel:0, capLevelToPlayerSize:true, maxBufferLength:30, liveSyncDurationCount:2});
+      _hls = hls;
+      hls.loadSource(src);
+      hls.attachMedia(video);
+      hls.on(Hls.Events.MANIFEST_PARSED, () => { video.play().catch(()=>{}); });
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      video.src = src;
+      video.play().catch(()=>{});
+    }
+    video.muted = wasMuted;
+  }
+
+  function _switchToLiveStream() {
+    if (!_currentCh) return;
+    const urls = STREAMS[_currentCh] || [];
+    const video = document.getElementById('vtv-player');
+    if (!video || !urls.length) return;
+    if (_hls) { _hls.destroy(); _hls = null; }
+    _tryPlay(video, urls, 0, _currentCh, document.getElementById('vtv-load'), document.getElementById('vtv-err'), document.getElementById('vtv-err-msg'));
+  }
+
+  // ===== SCHEDULED RECORD =====
+  window._vtvSchedRecord = function() {
+    const ch = _currentCh || 'vtv1';
+    const durStr = prompt('Thời lượng record (giây, max 3600):', '600');
+    if (!durStr) return;
+    const dur = parseInt(durStr);
+    if (!dur || dur < 5 || dur > 3600) { alert('Thời lượng 5-3600s'); return; }
+    const now = new Date();
+    const startIso = new Date(now.getTime() + 5000).toISOString();
+    fetch('/api/dvr/record/schedule', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({channel: ch, start_iso: startIso, duration_sec: dur, prebuffer: true})
+    })
+    .then(r => r.json())
+    .then(d => {
+      if (d.error) alert('Error: ' + d.error);
+      else alert('✅ Đã hẹn giờ record!\nKênh: ' + ch.toUpperCase() + '\nThời lượng: ' + dur + 's\nBắt đầu: ' + new Date(startIso).toLocaleString('vi-VN'));
+    })
+    .catch(e => alert('Error: ' + e.message));
+  };
+
   // ===== BUILD INLINE RECORDER =====
   function buildInlineRecorder() {
     const controls = document.querySelector('.vtv-controls');
@@ -790,7 +893,7 @@
     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-controls"><button class="vtv-dvr-btn" id="vtv-dvr-btn" onclick="window._vtvDvrToggle()" title="Bật DVR 5 phút - xem lại LIVE"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2"/></svg> DVR 5\'</button><button class="vtv-dvr-sched-btn" id="vtv-dvr-sched-btn" onclick="window._vtvSchedRecord()" title="Hẹn giờ record"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2"/><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2"/><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/></svg> Record</button><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;
   }
@@ -823,7 +926,12 @@
     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);
+    // Nếu DVR active cho kênh này, dùng buffer thay vì live
+    if (_dvr.active && _dvr.channel === chId && _dvr.bufferUrl) {
+      _switchToDvrStream();
+    } else {
+      _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(()=>{});}
   };
@@ -842,6 +950,23 @@
     }else{loadEl.style.display='none';errEl.style.display='flex';errMsg.textContent='Không hỗ trợ HLS';}
   }
 
+  // ===== SYNC DVR BUTTON STATE ON CHANNEL SWITCH =====
+  const _origVtvPlay = window._vtvPlay;
+  window._vtvPlay = function(chId) {
+    // Cập nhật trạng thái nút DVR theo kênh
+    const btn = document.getElementById('vtv-dvr-btn');
+    if (btn) {
+      if (_dvr.active && _dvr.channel === chId) {
+        btn.classList.add('on');
+        btn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/></svg> DVR 5\' ON';
+      } else {
+        btn.classList.remove('on');
+        btn.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2"/></svg> DVR 5\'';
+      }
+    }
+    return _origVtvPlay.apply(this, arguments);
+  };
+
   // ===== 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);};