Upload static/shorts_fresh.js with huggingface_hub

static/shorts_fresh.js

@@ -1,7 +1,6 @@
 /**
- * VNEWS Fresh Shorts Fetcher v2
- * Fetches latest shorts from YouTube page via allorigins proxy
- * Parses new YouTube shortsLockupViewModel structure
+ * VNEWS Fresh Shorts Fetcher v3
+ * Fetches latest shorts from YouTube, updates slide in-place
  */
 (function() {
   'use strict';
@@ -19,6 +18,18 @@
     setTimeout(() => { t.style.display = 'none'; }, 4000);
   }
   
+  function esc(s) {
+    return String(s||'').replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
+  }
+  
+  function proxyImg(url) {
+    if (!url || typeof url !== 'string') return '';
+    if (url.startsWith('http') && !url.includes(location.host)) {
+      return '/api/proxy/img?url=' + encodeURIComponent(url);
+    }
+    return url;
+  }
+  
   async function fetchWithRetry(url, maxRetries) {
     for (let i = 0; i < maxRetries; i++) {
       try {
@@ -44,27 +55,12 @@
     let shortsTab = null;
     for (const tab of tabs) {
       const tr = tab.tabRenderer || {};
-      if (tr.title === 'Shorts' || tr.selected) {
-        // Check if it has richGrid with shorts
-        const content = tr.content || {};
-        if (content.richGridRenderer) {
-          shortsTab = content.richGridRenderer;
-          break;
-        }
-      }
-    }
-    
-    if (!shortsTab) {
-      // Fallback: use first richGrid found
-      for (const tab of tabs) {
-        const content = (tab.tabRenderer || {}).content || {};
-        if (content.richGridRenderer) {
-          shortsTab = content.richGridRenderer;
-          break;
-        }
+      const content = tr.content || {};
+      if (content.richGridRenderer) {
+        shortsTab = content.richGridRenderer;
+        break;
       }
     }
-    
     if (!shortsTab) return [];
     
     const items = shortsTab.contents || [];
@@ -78,25 +74,14 @@
       // New YouTube format: shortsLockupViewModel
       if (inner.shortsLockupViewModel) {
         const slvm = inner.shortsLockupViewModel;
-        
-        // Get videoId from onTap endpoint
         let vid = '';
-        const onTap = slvm.onTap || {};
-        const cmd = onTap.innertubeCommand || {};
+        const cmd = (slvm.onTap || {}).innertubeCommand || {};
         vid = (cmd.watchEndpoint || {}).videoId || (cmd.reelWatchEndpoint || {}).videoId || '';
-        
         if (!vid || seen.has(vid)) continue;
         seen.add(vid);
         
-        // Get title
-        let title = '';
-        const overlay = slvm.overlayMetadata || {};
-        title = (overlay.primaryText || {}).content || slvm.accessibilityText || 'YouTube Short';
-        
-        // Get thumbnail
-        let img = '';
-        const thumbs = (slvm.thumbnail || {}).sources || [];
-        if (thumbs.length > 0) img = thumbs[0].url || '';
+        let title = (slvm.overlayMetadata || {}).primaryText?.content || slvm.accessibilityText || 'YouTube Short';
+        let img = (slvm.thumbnail?.sources || [])[0]?.url || '';
         
         shorts.push({
           id: vid,
@@ -107,24 +92,21 @@
           source: 'yt'
         });
       }
-      
       // Old format: reelItemRenderer
       else if (inner.reelItemRenderer) {
         const rir = inner.reelItemRenderer;
         const vid = rir.videoId || '';
         if (!vid || seen.has(vid)) continue;
         seen.add(vid);
-        const title = rir.headline || 'YouTube Short';
         shorts.push({
           id: vid,
-          title: title.substring(0, 120),
+          title: (rir.headline || 'YouTube Short').substring(0, 120),
           img: 'https://i.ytimg.com/vi/' + vid + '/hqdefault.jpg',
           link: 'https://www.youtube.com/shorts/' + vid,
           channel: handle,
           source: 'yt'
         });
       }
-      
       // videoRenderer fallback
       else if (inner.videoRenderer) {
         const vr = inner.videoRenderer;
@@ -146,7 +128,7 @@
       if (shorts.length >= 30) break;
     }
     
-    // Last resort: regex fallback
+    // Last resort: regex
     if (shorts.length === 0) {
       const vids = [...new Set([...html.matchAll(/"videoId":"([A-Za-z0-9_-]{11})"/g)].map(m => m[1]))];
       for (const vid of vids) {
@@ -168,37 +150,92 @@
     return shorts;
   }
   
-  // Fetch all channels
-  window.fetchFreshShorts = async function() {
-    const all = [];
-    for (const ch of CHANNELS) {
-      const url = 'https://www.youtube.com/@' + ch.handle + '/shorts';
-      const html = await fetchWithRetry(url, 3);
-      if (html) {
-        const shorts = extractShorts(html, ch.handle);
-        all.push(...shorts);
+  // Interleave shorts from different channels
+  function interleaveShorts(shorts) {
+    const dt = shorts.filter(s => s.channel === 'baodantri7941');
+    const sk = shorts.filter(s => s.channel === 'baosuckhoedoisongboyte');
+    const result = [];
+    let i = 0, j = 0;
+    while (i < dt.length || j < sk.length) {
+      if (i < dt.length) result.push(dt[i++]);
+      if (j < sk.length) result.push(sk[j++]);
+    }
+    return result;
+  }
+  
+  // Re-render the shorts slide in-place
+  function rerenderShortsSlide(shorts) {
+    // Find existing shorts slide
+    let existingSlide = document.getElementById('shorts-live-slide');
+    if (!existingSlide) {
+      // Try to find by label
+      const labels = document.querySelectorAll('.slider-wrap .slider-label');
+      for (const label of labels) {
+        if ((label.textContent || '').includes('Shorts')) {
+          existingSlide = label.closest('.slider-wrap');
+          break;
+        }
       }
-      await new Promise(r => setTimeout(r, 1500));
     }
-    // Deduplicate
-    const seen = new Set();
-    return all.filter(s => seen.has(s.id) ? false : (seen.add(s.id), true));
-  };
+    
+    // Build new slide HTML
+    const mixed = interleaveShorts(shorts);
+    if (!mixed.length) return;
+    
+    let h = '<div class="slider-header"><span class="slider-label">📱 Shorts Dân trí & SKĐS</span><span class="slider-note">🟢 Live từ YouTube · vừa cập nhật</span></div><div class="slider-track">';
+    mixed.slice(0, 30).forEach((a, i) => {
+      const badge = a.channel === 'baosuckhoedoisongboyte' ? 'SKĐS' : 'Dân trí';
+      h += '<div class="slider-item shorts-item" onclick="openYTShortsFeed(' + i + ')"><div class="slider-thumb shorts-thumb">' + (a.img ? '<img src="' + esc(proxyImg(a.img)) + '" loading="lazy">' : '') + '<div class="card-play">▶</div></div><div class="slider-title"><span style="color:#f0c040;font-size:8px">' + badge + '</span> ' + esc(a.title) + '</div></div>';
+    });
+    h += '</div>';
+    
+    if (existingSlide) {
+      // Update in place
+      existingSlide.innerHTML = h;
+      existingSlide.id = 'shorts-live-slide';
+      existingSlide.style.boxShadow = '0 0 8px #5cb87a';
+      setTimeout(() => { existingSlide.style.boxShadow = 'none'; }, 2000);
+    } else {
+      // Create new slide
+      const wrap = document.createElement('div');
+      wrap.id = 'shorts-live-slide';
+      wrap.className = 'slider-wrap';
+      wrap.innerHTML = h;
+      const homeEl = document.getElementById('view-home');
+      if (homeEl) {
+        homeEl.insertBefore(wrap, homeEl.children[1] || null);
+      }
+    }
+  }
   
   // Main refresh function
   window.refreshShorts = async function() {
     try {
       toast('🔄 Đang tải shorts mới từ YouTube...');
-      const fresh = await window.fetchFreshShorts();
+      
+      const all = [];
+      for (const ch of CHANNELS) {
+        const url = 'https://www.youtube.com/@' + ch.handle + '/shorts';
+        const html = await fetchWithRetry(url, 3);
+        if (html) {
+          const shorts = extractShorts(html, ch.handle);
+          all.push(...shorts);
+        }
+        await new Promise(r => setTimeout(r, 1500));
+      }
+      
+      // Deduplicate
+      const seen = new Set();
+      const fresh = all.filter(s => seen.has(s.id) ? false : (seen.add(s.id), true));
+      
       if (fresh.length > 0) {
+        // Update global data
         window._shortsData = fresh;
+        // Re-render the slide
+        rerenderShortsSlide(fresh);
+        // Save to localStorage
         localStorage.setItem('vnews_shorts', JSON.stringify({ ts: Date.now(), data: fresh }));
         toast('✓ Đã cập nhật ' + fresh.length + ' shorts mới!');
-        // Re-render if on home
-        if (typeof _renderShortsIn === 'function') {
-          const el = document.getElementById('home-after-wc');
-          if (el) _renderShortsIn(el);
-        }
         return fresh;
       } else {
         toast('⚠️ Không tải được shorts mới');
@@ -222,12 +259,16 @@
     return null;
   }
   
-  // Init: use cache first, then refresh in background
+  // Init
   const cached = loadCache();
-  if (cached) window._shortsData = cached;
+  if (cached) {
+    window._shortsData = cached;
+    // Re-render with cached data too
+    setTimeout(() => rerenderShortsSlide(cached), 3000);
+  }
   
   // Auto refresh 4s after page load
   setTimeout(() => { window.refreshShorts().catch(() => {}); }, 4000);
   
-  console.log('[Shorts] Fresh fetcher v2 loaded');
+  console.log('[Shorts] Fresh fetcher v3 loaded');
 })();