Upload static/shorts_fresh.js

static/shorts_fresh.js

@@ -1,10 +1,11 @@
 /**
- * VNEWS Fresh Shorts Fetcher v8 - 24h filter for both shorts and wall
+ * VNEWS Fresh Shorts Fetcher v8 - 24h filter
+ * Also patches wall rendering to filter old posts
  */
 (function() {
   'use strict';
   
-  const MAX_AGE_MS = 86400000; // 24h in ms
+  const MAX_AGE_MS = 86400000; // 24h
   
   function toast(msg) {
     let t = document.getElementById('short-progress-toast');
@@ -30,35 +31,26 @@
     return url;
   }
   
-  // Filter items by 24h
   function filter24h(items, timeField = 'created') {
     const now = Date.now();
     return items.filter(item => {
-      const created = item[timeField] || (typeof item.created === 'number' ? item.created * 1000 : item.created);
-      if (created) {
-        // Handle both timestamp (ms) and Unix timestamp (s)
-        const ts = created > 1000000000000 ? created : created * 1000;
-        return (now - ts) <= MAX_AGE_MS;
-      }
-      return true; // Keep if no timestamp
+      const created = item[timeField] || 0;
+      const ts = created > 1000000000000 ? created : created * 1000;
+      return (now - ts) <= MAX_AGE_MS;
     });
   }
   
-  // Fetch shorts from server API
   async function fetchShorts() {
     try {
       const r = await fetch('/api/shorts?t=' + Date.now());
       if (r.ok) {
         let data = await r.json();
         if (Array.isArray(data)) {
-          data = filter24h(data);
-          return data.map(item => ({
-            id: item.id,
-            title: item.title || 'YouTube Short',
+          return filter24h(data).map(item => ({
+            id: item.id, title: item.title || 'YouTube Short',
             img: item.img || `https://i.ytimg.com/vi/${item.id}/hqdefault.jpg`,
             link: item.link || `https://www.youtube.com/shorts/${item.id}`,
-            channel: item.channel || 'baodantri7941',
-            source: 'yt'
+            channel: item.channel || 'baodantri7941', source: 'yt'
           }));
         }
       }
@@ -66,15 +58,12 @@
     return [];
   }
   
-  // Fetch shorts from YouTube RSS (fresh)
   async function fetchFromRSS() {
     try {
       const r = await fetch('/api/shorts/rss?t=' + Date.now());
       if (r.ok) {
         const data = await r.json();
-        if (data.shorts && data.shorts.length > 0) {
-          return data.shorts; // Server already filtered
-        }
+        if (data.shorts && data.shorts.length > 0) return data.shorts;
       }
     } catch(e) {}
     return [];
@@ -83,8 +72,7 @@
   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;
+    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++]);
@@ -104,9 +92,7 @@
     let h = '<div class="slider-header"><span class="slider-label">📱 Shorts Dân trí & SKĐS (24h)</span><span class="slider-note">🟢 vừa cập nhật</span></div><div class="slider-track">';
     mixed.slice(0, 25).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" onerror="this.src=\'https://i.ytimg.com/vi/' + a.id + '/hqdefault.jpg\'">' : '') + 
-        '<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 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>';
     
@@ -131,70 +117,79 @@
     }
   };
   
-  // Patch _renderWallIn to filter 24h
-  const origRenderWallIn = window._renderWallIn;
-  window._renderWallIn = function(afterEl) {
-    if (!window._wallPosts || !window._wallPosts.length || !afterEl) return;
-    
-    // Filter to 24h
-    const now = Date.now();
-    const posts = window._wallPosts.filter(p => {
-      const created = p.created || 0;
-      const ts = created > 1000000000000 ? created : created * 1000;
-      return (now - ts) <= MAX_AGE_MS;
-    }).slice(0, 20);
-    
-    if (!posts.length) return;
-    
-    // Render Short AI slide (videos only)
-    const aiShorts = posts.filter(p => p.video);
-    if (aiShorts.length) {
-      let wrap = document.getElementById('short-ai-section');
-      if (!wrap) {
-        wrap = document.createElement('div');
+  // === WALL 24H PATCH ===
+  function patchWallRender() {
+    // Override _renderWallIn to filter 24h
+    const origRender = window._renderWallIn;
+    window._renderWallIn = function(afterEl) {
+      if (!window._wallPosts || !window._wallPosts.length || !afterEl) return;
+      
+      // Filter to 24h
+      const now = Date.now();
+      const posts = window._wallPosts.filter(p => {
+        const created = p.created || 0;
+        const ts = created > 1000000000000 ? created : created * 1000;
+        return (now - ts) <= MAX_AGE_MS;
+      }).slice(0, 20);
+      
+      if (!posts.length) return;
+      
+      // Render Short AI slide (videos only)
+      const aiShorts = posts.filter(p => p.video);
+      if (aiShorts.length) {
+        let wrap = document.createElement('div');
         wrap.className = 'slider-wrap';
         wrap.id = 'short-ai-section';
+        let h = '<div class="slider-header"><span class="slider-label">🎬 Short AI (24h)</span></div><div class="slider-track">';
+        aiShorts.forEach((p, i) => {
+          h += `<div class="slider-item shorts-item" onclick="openShortAIFeed(${i})"><div class="slider-thumb shorts-thumb"><video src="${esc(p.video)}" muted preload="metadata"></video><div class="card-play">▶</div></div><div class="slider-title">${esc(p.title)}</div></div>`;
+        });
+        h += '</div>';
+        wrap.innerHTML = h;
         afterEl.parentNode.insertBefore(wrap, afterEl);
       }
-      let h = '<div class="slider-header"><span class="slider-label">🎬 Short AI (24h)</span></div><div class="slider-track">';
-      aiShorts.forEach((p, i) => {
-        h += '<div class="slider-item shorts-item" onclick="openShortAIFeed(' + i + ')"><div class="slider-thumb shorts-thumb"><video src="' + esc(p.video) + '" muted preload="metadata"></video><div class="card-play">▶</div></div><div class="slider-title">' + esc(p.title) + '</div></div>';
+      
+      // Render AI Wall
+      wrap = document.createElement('div');
+      wrap.className = 'slider-wrap';
+      wrap.id = 'ai-wall-wrap';
+      let h = '<div class="slider-header"><span class="slider-label">🧱 Tường AI (24h)</span></div><div class="slider-track" id="ai-wall-track">';
+      posts.forEach((p, i) => {
+        h += `<div class="wall-item" id="wall-item-${esc(p.id)}"><div class="wall-thumb">${p.img ? `<img src="${proxyImg(p.img)}">` : (p.video ? `<video src="${esc(p.video)}" muted></video>` : '')}</div><div class="wall-title">${esc(p.title)}</div></div>`;
       });
       h += '</div>';
       wrap.innerHTML = h;
-    }
+      afterEl.parentNode.insertBefore(wrap, afterEl);
+    };
     
-    // Render AI Wall
-    wrap = document.createElement('div');
-    wrap.className = 'slider-wrap';
-    wrap.id = 'ai-wall-wrap';
-    let h = '<div class="slider-header"><span class="slider-label">🧱 Tường AI (24h)</span></div><div class="slider-track" id="ai-wall-track">';
-    posts.forEach((p, i) => {
-      h += '<div class="wall-item" id="wall-item-' + esc(p.id) + '"><div class="wall-thumb">' + 
-        (p.img ? '<img src="' + proxyImg(p.img) + '">' : (p.video ? '<video src="' + esc(p.video) + '" muted></video>' : '')) + 
-        '</div><div class="wall-title">' + esc(p.title) + '</div></div>';
-    });
-    h += '</div>';
-    wrap.innerHTML = h;
-    afterEl.parentNode.insertBefore(wrap, afterEl);
-  };
+    // Override prependWallPost to check age
+    const origPrepend = window.prependWallPost;
+    if (origPrepend) {
+      window.prependWallPost = function(post) {
+        const now = Date.now();
+        const created = post.created || Date.now();
+        const ts = created > 1000000000000 ? created : created * 1000;
+        if ((now - ts) > MAX_AGE_MS) return;
+        origPrepend.call(this, post);
+      };
+    }
+  }
   
   // Load cache
   try {
     const c = JSON.parse(localStorage.getItem('vnews_shorts') || '{}');
     if (c.data && c.data.length > 0 && (Date.now() - c.ts) < 7200000) {
-      window._shortsData = c.data.filter((item, i, arr) => {
-        const created = item.created || c.ts;
-        const ts = created > 1000000000000 ? created : created * 1000;
-        return (Date.now() - ts) <= MAX_AGE_MS;
-      });
+      window._shortsData = filter24h(c.data);
       if (window._shortsData.length > 0) {
         setTimeout(() => rerenderShortsSlide(window._shortsData), 2000);
       }
     }
   } catch(e) {}
   
-  // Fetch fresh
+  // Patch wall rendering
+  patchWallRender();
+  
+  // Fetch fresh after 3s
   setTimeout(() => { window.refreshShorts().catch(() => {}); }, 3000);
   
   console.log('[Shorts] Fetcher v8 - 24h filter active');