Upload static/shorts_fresh.js

static/shorts_fresh.js

@@ -1,6 +1,6 @@
 /**
- * VNEWS Fresh Shorts Fetcher v8 - 24h filter
- * Also patches wall rendering to filter old posts
+ * VNEWS Shorts & Wall 24h Filter - v8.1
+ * Runs after app_v2.js to fix Short AI/Wall display
  */
 (function() {
   'use strict';
@@ -31,41 +31,38 @@
     return url;
   }
   
-  function filter24h(items, timeField = 'created') {
+  // Filter posts by 24h
+  function filter24h(posts) {
     const now = Date.now();
-    return items.filter(item => {
-      const created = item[timeField] || 0;
+    return posts.filter(p => {
+      const created = p.created || 0;
+      // Handle both ms and s timestamps
       const ts = created > 1000000000000 ? created : created * 1000;
       return (now - ts) <= MAX_AGE_MS;
     });
   }
   
+  // Fetch shorts from RSS (freshest)
   async function fetchShorts() {
     try {
-      const r = await fetch('/api/shorts?t=' + Date.now());
+      const r = await fetch('/api/shorts/rss?t=' + Date.now());
       if (r.ok) {
-        let data = await r.json();
-        if (Array.isArray(data)) {
-          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'
-          }));
+        const data = await r.json();
+        if (data.shorts && data.shorts.length > 0) {
+          return data.shorts.filter(s => s.channel && (s.channel === 'baodantri7941' || s.channel === 'baosuckhoedoisongboyte'));
         }
       }
     } catch(e) {}
-    return [];
-  }
-  
-  async function fetchFromRSS() {
+    
+    // Fallback to /api/shorts
     try {
-      const r = await fetch('/api/shorts/rss?t=' + Date.now());
+      const r = await fetch('/api/shorts?t=' + Date.now());
       if (r.ok) {
         const data = await r.json();
-        if (data.shorts && data.shorts.length > 0) return data.shorts;
+        if (Array.isArray(data)) return data;
       }
     } catch(e) {}
+    
     return [];
   }
   
@@ -80,98 +77,123 @@
     return result;
   }
   
-  function rerenderShortsSlide(shorts) {
-    const existingSlide = document.getElementById('shorts-live-slide') || 
-      Array.from(document.querySelectorAll('.slider-wrap')).find(el => 
-        (el.querySelector('.slider-label')?.textContent || '').includes('Shorts')
-      );
+  function renderShortsSlide(shorts, afterEl) {
+    // Find existing slide or create new
+    let existingSlide = document.getElementById('shorts-live-slide');
     
     const mixed = interleaveShorts(shorts);
     if (!mixed.length) return;
     
+    const wrap = document.createElement('div');
+    wrap.className = 'slider-wrap';
+    wrap.id = 'shorts-live-slide';
     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">` : ''}<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>';
+    wrap.innerHTML = h;
     
-    if (existingSlide) {
-      existingSlide.innerHTML = h;
-      existingSlide.id = 'shorts-live-slide';
+    const homeEl = document.getElementById('view-home');
+    if (!existingSlide && homeEl && afterEl) {
+      // Insert after afterEl (which is #home-after-wc)
+      homeEl.insertBefore(wrap, afterEl.nextSibling);
     }
   }
   
-  window.refreshShorts = async function() {
-    let all = await fetchFromRSS();
-    if (all.length === 0) all = await fetchShorts();
+  function renderWall24h(afterEl) {
+    if (!window._wallPosts || !window._wallPosts.length || !afterEl) return;
+    
+    // Filter to 24h
+    const posts = filter24h(window._wallPosts).slice(0, 20);
+    if (!posts.length) return;
     
+    // Short AI (videos)
+    const aiShorts = posts.filter(p => p.video);
+    if (aiShorts.length) {
+      let wrap = document.getElementById('short-ai-section');
+      if (wrap) wrap.remove();
+      
+      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);
+    }
+    
+    // AI Wall (text posts)
+    wrap = document.getElementById('ai-wall-wrap');
+    if (wrap) wrap.remove();
+    
+    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 refreshShorts
+  window.refreshShorts = async function() {
+    let all = await fetchShorts();
     const seen = new Set();
     const fresh = all.filter(s => seen.has(s.id) ? false : (seen.add(s.id), true));
     
     if (fresh.length > 0) {
       window._shortsData = fresh;
-      rerenderShortsSlide(fresh);
+      const afterEl = document.getElementById('home-after-wc');
+      if (afterEl) renderShortsSlide(fresh, afterEl);
       localStorage.setItem('vnews_shorts', JSON.stringify({ ts: Date.now(), data: fresh }));
       toast('✓ ' + fresh.length + ' shorts (24h)!');
     }
   };
   
-  // === 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
+  // Patch prependWallPost to enforce 24h
+  const origPrepend = window.prependWallPost;
+  if (origPrepend) {
+    window.prependWallPost = function(post) {
       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);
-      }
+      const created = post.created || Date.now();
+      const ts = created > 1000000000000 ? created : created * 1000;
+      if ((now - ts) > MAX_AGE_MS) return; // Don't add old posts
+      origPrepend.call(this, post);
+    };
+  }
+  
+  // Wait for loadHome to complete, then patch wall
+  const origLoadHome = window.loadHome;
+  if (origLoadHome) {
+    window.loadHome = async function() {
+      await origLoadHome.call(this);
       
-      // 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);
+      // Now patch wall rendering
+      setTimeout(() => {
+        const afterEl = document.getElementById('home-after-wc');
+        if (afterEl && window._wallPosts) {
+          renderWall24h(afterEl);
+        }
+      }, 1000);
     };
-    
-    // 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);
-      };
+  }
+  
+  // Also run on DOM ready (backup)
+  function initWallFix() {
+    if (window._wallPosts && window._wallPosts.length > 0) {
+      const afterEl = document.getElementById('home-after-wc');
+      if (afterEl) {
+        renderWall24h(afterEl);
+        toast('🧱 Tường AI đã lọc 24h');
+      }
     }
   }
   
@@ -179,18 +201,22 @@
   try {
     const c = JSON.parse(localStorage.getItem('vnews_shorts') || '{}');
     if (c.data && c.data.length > 0 && (Date.now() - c.ts) < 7200000) {
-      window._shortsData = filter24h(c.data);
-      if (window._shortsData.length > 0) {
-        setTimeout(() => rerenderShortsSlide(window._shortsData), 2000);
+      const filtered = filter24h(c.data);
+      if (filtered.length > 0) {
+        window._shortsData = filtered;
+        setTimeout(() => {
+          const afterEl = document.getElementById('home-after-wc');
+          if (afterEl) renderShortsSlide(filtered, afterEl);
+        }, 2000);
       }
     }
   } catch(e) {}
   
-  // Patch wall rendering
-  patchWallRender();
-  
-  // Fetch fresh after 3s
-  setTimeout(() => { window.refreshShorts().catch(() => {}); }, 3000);
+  // Fetch fresh after load
+  setTimeout(() => { 
+    window.refreshShorts().catch(() => {});
+    initWallFix();
+  }, 4000);
   
-  console.log('[Shorts] Fetcher v8 - 24h filter active');
+  console.log('[Shorts] Fetcher v8.1 - 24h filter active');
 })();