Upload static/vtv_recorder_inject.js

static/vtv_recorder_inject.js

@@ -0,0 +1,111 @@
+/**
+ * VTV Recorder Inject
+ * - Auto-inject recorder UI vào home view
+ * - Thêm tab/button "🎬 Record VTV" trên cat-bar
+ * - Nhận diện khi user mở tab recorder
+ */
+(function(){
+  'use strict';
+
+  // ===== Inject recorder section into home view =====
+  function injectRecorderSection() {
+    const homeEl = document.getElementById('view-home');
+    if (!homeEl) return;
+
+    // Check if already injected
+    if (document.getElementById('vtv-recorder-injected')) return;
+
+    // Find the featured area and insert recorder after it
+    const featuredArea = document.getElementById('home-featured-area');
+    if (featuredArea && featuredArea.parentNode) {
+      const recSection = document.createElement('div');
+      recSection.id = 'vtv-recorder-injected';
+      recSection.className = 'slider-wrap';
+      recSection.style.marginTop = '6px';
+      recSection.innerHTML = `
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:4px 10px 2px">
+          <span class="slider-label" style="color:#e74c3c">🎬 Record LIVE VTV</span>
+          <button id="rec-expand-btn" style="background:#2a1a4a;border:1px solid #6a3a9a;color:#9b59b6;border-radius:14px;padding:3px 10px;font-size:10px;cursor:pointer;font-weight:700">
+            Mở ▶
+          </button>
+        </div>
+        <div id="rec-section-mini" style="padding:4px 10px 8px">
+          <div style="display:flex;gap:6px;flex-wrap:wrap" id="rec-mini-channels">
+            <span style="color:#666;font-size:10px">Chọn kênh để record video ngắn (max 60s)...</span>
+          </div>
+        </div>
+      `;
+      featuredArea.parentNode.insertBefore(recSection, featuredArea.nextSibling);
+
+      // Mini channel buttons
+      const channels = [
+        {id:'vtv1',name:'VTV1'},{id:'vtv2',name:'VTV2'},{id:'vtv3',name:'VTV3'},
+        {id:'vtv4',name:'VTV4'},{id:'vtv5',name:'VTV5'},{id:'vtv6',name:'VTV6'},
+        {id:'vtv7',name:'VTV7'},{id:'vtv8',name:'VTV8'},{id:'vtv9',name:'VTV9'},
+      ];
+      const miniWrap = document.getElementById('rec-mini-channels');
+      if (miniWrap) {
+        let h = '';
+        channels.forEach(ch => {
+          h += `<button class="hot-chip" style="cursor:pointer" onclick="openVTVRecorder('${ch.id}')">📺 ${ch.name}</button>`;
+        });
+        h += `<button class="hot-chip" style="cursor:pointer;background:#1a0a3a;border-color:#6a3a9a;color:#9b59b6" onclick="openVTVRecorder(null)">📋 Tất cả kênh</button>`;
+        miniWrap.innerHTML = h;
+      }
+
+      // Expand button
+      document.getElementById('rec-expand-btn')?.addEventListener('click', function() {
+        openVTVRecorder(null);
+      });
+    }
+  }
+
+  // ===== Open recorder full view =====
+  window.openVTVRecorder = function(channelId) {
+    showView('view-tiktok');
+    const el = document.getElementById('view-tiktok');
+    el.innerHTML = '';
+
+    // Back button
+    const backBtn = document.createElement('button');
+    backBtn.className = 'back-btn';
+    backBtn.textContent = '← Quay lại';
+    backBtn.onclick = () => switchCat('home');
+    el.appendChild(backBtn);
+
+    // Container for recorder
+    const container = document.createElement('div');
+    container.style.padding = '8px';
+    container.style.maxWidth = '500px';
+    container.style.margin = '0 auto';
+    el.appendChild(container);
+
+    // HLS.js check
+    if (typeof Hls === 'undefined') {
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js';
+      script.onload = () => renderVTVRecorder(container);
+      document.head.appendChild(script);
+    } else {
+      renderVTVRecorder(container);
+    }
+  };
+
+  // ===== Init =====
+  // Inject after home loads
+  const origLoadHome = window.loadHome;
+  if (origLoadHome) {
+    window.loadHome = async function() {
+      await origLoadHome();
+      setTimeout(injectRecorderSection, 200);
+    };
+  }
+
+  // Also try to inject on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => setTimeout(injectRecorderSection, 1000));
+  } else {
+    setTimeout(injectRecorderSection, 1000);
+  }
+
+})();