Fetch VTV Nam Bộ shorts from dedicated endpoint in loadHome

static/app_v2.js

@@ -1,6 +1,5 @@
 // === VNEWS Frontend v2 - Optimized for speed ===
 
-// === LOAD HOME - Fast: immediate shell + parallel fetch ===
 function _fetchWithTimeout(url, ms){
   return new Promise((resolve,reject)=>{
     const ctrl=new AbortController();
@@ -17,7 +16,6 @@ async function loadHome(){
   const homeEl = document.getElementById('view-home');
   if(!homeEl) return;
 
-  // Build shell IMMEDIATELY — no skeleton, no delay
   homeEl.innerHTML =
     '<div id="home-featured-area"></div>'
     +'<div class="ai-compose"><div class="ai-compose-title">🤖 AI viết bài</div><div class="ai-compose-row"><input id="topic-input" placeholder="Nhập chủ đề..."><button onclick="searchTopic()">Tìm nguồn</button></div><div class="ai-compose-row"><input id="url-input" placeholder="Dán URL bài viết..."><button class="secondary" onclick="rewriteUrl()">Rewrite</button></div><div id="hot-topics" class="hot-topic-row"></div></div>'
@@ -28,11 +26,9 @@ async function loadHome(){
 
   const afterEl = homeEl.querySelector('#home-after-wc');
 
-  // Start critical loads immediately
   loadLivescore('today');
   loadHotTopics();
 
-  // Fetch all data in parallel with shorter timeouts
   const [featuredData, shortsData, wallData, hlLeagues, aiData, wcData, vtvShortsData] = await Promise.allSettled([
     _fetchWithTimeout('/api/livescore/featured', 5000),
     _fetchWithTimeout('/api/shorts', 8000),
@@ -40,10 +36,9 @@ async function loadHome(){
     _fetchWithTimeout('/api/highlights/leagues', 10000),
     _fetchWithTimeout('/api/genk_ai', 8000),
     _fetchWithTimeout('/api/wc2026', 8000),
-    _fetchWithTimeout('/api/shorts/vtvnamo?count=30', 10000),
+    _fetchWithTimeout('/api/shorts/vtvnamo?count=50', 12000),
   ]).then(results => results.map(r => r.status === 'fulfilled' ? r.value : null));
 
-  // Render featured match
   if(featuredData && featuredData.home){
     const sc=featuredData.status==='live'?'':'upcoming';
     const st=featuredData.status==='live'?`🔴 ${featuredData.minute||'LIVE'}`:`⏰ ${featuredData.time}`;
@@ -51,17 +46,14 @@ async function loadHome(){
     if(area) area.innerHTML=`<div class="featured-match" onclick="openMatch('${featuredData.event_id}')"><div class="fm-league">${featuredData.league}</div><div class="fm-teams"><div class="fm-team"><img src="${featuredData.home_logo}" onerror="this.style.display='none'"><span>${featuredData.home}</span></div><div class="fm-score">${featuredData.score||'VS'}</div><div class="fm-team"><img src="${featuredData.away_logo}" onerror="this.style.display='none'"><span>${featuredData.away}</span></div></div><div class="fm-status ${sc}">${st}</div></div>`;
   }
 
-  // Store globally
   _shortsData = shortsData || [];
   _wallPosts = (wallData && wallData.posts) || [];
   _hlLeagueData = hlLeagues || {};
   _wc2026Data = wcData;
   _wcShortsData = vtvShortsData || [];
 
-  // Render WC if data arrived
   if(wcData) switchWCTab('news');
 
-  // Render sections into the after-wc area
   _renderShortsIn(afterEl);
   _renderWallIn(afterEl);
   _renderHLIn(afterEl);
@@ -134,16 +126,11 @@ function _renderHLIn(afterEl){
   }
 }
 
-// === WALL POST HELPERS ===
 function makeWallItem(p,i){
   const hasVideo = p.video && p.video.length > 0;
-  const thumbContent = p.img
-    ? `<img src="${esc(p.img)}" loading="lazy" onerror="this.style.display='none'">`
-    : (hasVideo ? `<video src="${esc(p.video)}" muted></video>` : '');
+  const thumbContent = p.img ? `<img src="${esc(p.img)}" loading="lazy" onerror="this.style.display='none'">` : (hasVideo ? `<video src="${esc(p.video)}" muted></video>` : '');
   const videoBadge = hasVideo ? `<div class="wall-video-badge">🎬</div>` : '';
-  const videoBtn = hasVideo
-    ? `<button class="wall-btn-video" onclick="event.stopPropagation();openShortAIFeed(${i})">▶ Xem Short</button>`
-    : `<button class="wall-btn-make" onclick="event.stopPropagation();makeShortVideo('${esc(p.id||i)}',this)">🎬 Tạo Video</button>`;
+  const videoBtn = hasVideo ? `<button class="wall-btn-video" onclick="event.stopPropagation();openShortAIFeed(${i})">▶ Xem Short</button>` : `<button class="wall-btn-make" onclick="event.stopPropagation();makeShortVideo('${esc(p.id||i)}',this)">🎬 Tạo Video</button>`;
   return `<div class="wall-item" id="wall-item-${esc(p.id||i)}"><div class="wall-thumb">${thumbContent}${videoBadge}</div><div class="wall-title">${esc(p.title)}</div><div class="wall-text">${esc((p.text||'').slice(0,180))}</div><div class="wall-actions"><button class="primary" onclick="readWallPost(${i})">Xem</button>${videoBtn}</div></div>`;
 }
 
@@ -184,17 +171,12 @@ async function makeShortVideo(postId, btn, voice, speed){
 function refreshShortAISlider(){
   const aiShorts = _wallPosts.filter(p=>p.video);
   let shortAISection = document.getElementById('short-ai-section');
-  if(aiShorts.length === 0){
-    if(shortAISection) shortAISection.remove();
-    return;
-  }
+  if(aiShorts.length === 0){ if(shortAISection) shortAISection.remove(); return; }
   if(shortAISection){
     const track = shortAISection.querySelector('.slider-track');
     if(track){
       let h = '';
-      aiShorts.slice(0,20).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>`;
-      });
+      aiShorts.slice(0,20).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>`;});
       track.innerHTML = h;
     }
   }
@@ -223,20 +205,15 @@ function prependWallPost(post){
   div.className='wall-item wall-item-new';
   div.id='wall-item-'+(post.id||'new-'+Date.now());
   const hasVideo = post.video && post.video.length > 0;
-  const thumbContent = post.img
-    ? `<img src="${esc(post.img)}" loading="lazy" onerror="this.style.display='none'">`
-    : (hasVideo ? `<video src="${esc(post.video)}" muted></video>` : '');
+  const thumbContent = post.img ? `<img src="${esc(post.img)}" loading="lazy" onerror="this.style.display='none'">` : (hasVideo ? `<video src="${esc(post.video)}" muted></video>` : '');
   const videoBadge = hasVideo ? `<div class="wall-video-badge">🎬</div>` : '';
-  const videoBtn = hasVideo
-    ? `<button class="wall-btn-video" onclick="event.stopPropagation();openShortAIFeed(0)">▶ Xem Short</button>`
-    : `<button class="wall-btn-make" onclick="event.stopPropagation();makeShortVideo('${esc(post.id)}',this)">🎬 Tạo Video</button>`;
+  const videoBtn = hasVideo ? `<button class="wall-btn-video" onclick="event.stopPropagation();openShortAIFeed(0)">▶ Xem Short</button>` : `<button class="wall-btn-make" onclick="event.stopPropagation();makeShortVideo('${esc(post.id)}',this)">🎬 Tạo Video</button>`;
   div.innerHTML=`<div class="wall-thumb">${thumbContent}${videoBadge}</div><div class="wall-title">${esc(post.title)}</div><div class="wall-text">${esc((post.text||'').slice(0,180))}</div><div class="wall-actions"><button class="primary" onclick="readWallPost(0)">Xem</button>${videoBtn}</div>`;
   track.prepend(div);
   track.scrollTo({left:0,behavior:'smooth'});
   if(hasVideo) refreshShortAISlider();
 }
 
-// === REST OF FUNCTIONS ===
 let _shortsData=[];
 let _wallPosts=[];
 let _wcShortsData=[];
@@ -272,8 +249,7 @@ function bindMatchClicks(el){
       const teamA=this.querySelector('.teams a[href*="/tran-dau/"]');
       const a = statusA || teamA;
       if(a){
-        e.preventDefault();
-        e.stopPropagation();
+        e.preventDefault();e.stopPropagation();
         const href=a.getAttribute('href')||'';
         const m=href.match(/\/tran-dau\/(\d+)\//);
         if(m){
@@ -283,9 +259,7 @@ function bindMatchClicks(el){
       }
     });
   });
-  el.querySelectorAll('a').forEach(a=>{
-    a.addEventListener('click',e=>{e.preventDefault();e.stopPropagation()});
-  });
+  el.querySelectorAll('a').forEach(a=>{a.addEventListener('click',e=>{e.preventDefault();e.stopPropagation()});});
 }
 function openMatch(id,url){if(!id)return;_currentEventId=id;if(url)_currentMatchUrl=url;document.getElementById('match-overlay').classList.add('active');document.body.style.overflow='hidden';loadMatchTab('detail')}
 function closeMatch(){document.getElementById('match-overlay').classList.remove('active');document.body.style.overflow=''}
@@ -308,23 +282,9 @@ async function openYTShortsFeed(startIdx){
   showView('view-tiktok');
   const el=document.getElementById('view-tiktok');
   el.innerHTML='<div class="loading">Đang tải shorts...</div>';
-
-  // Try to get shorts from multiple sources
   let arts = _shortsData.length ? _shortsData : [];
-
-  if(!arts.length){
-    try{
-      arts = await fetch('/api/shorts').then(r=>r.json()).catch(()=>[]);
-    }catch(e){
-      arts = [];
-    }
-  }
-
-  if(!arts.length){
-    el.innerHTML='<div class="loading">Không có shorts</div>';
-    return;
-  }
-
+  if(!arts.length){try{arts=await fetch('/api/shorts').then(r=>r.json()).catch(()=>[]);}catch(e){arts=[];}}
+  if(!arts.length){el.innerHTML='<div class="loading">Không có shorts</div>';return;}
   const ordered=startIdx>0?[...arts.slice(startIdx),...arts.slice(0,startIdx)]:arts;
   let h=`<button class="back-btn" onclick="switchCat('home')">← Shorts</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;
   ordered.forEach((v,i)=>{
@@ -353,29 +313,20 @@ async function readWallPost(i){const p=_wallPosts[i];if(!p)return;showView('view
   if(images.length > 0){
     imgGallery = '<div class="article-image-gallery">';
     images.forEach((imgUrl, imgIdx) => {
-      if(imgIdx === 0){
-        imgGallery += `<img class="article-img article-hero-img" src="${esc(imgUrl)}" onerror="this.style.display='none" loading="eager">`;
-      } else {
-        if(imgIdx === 1) imgGallery += '<div class="gallery-thumbs">';
-        imgGallery += `<div class="gallery-thumb"><img src="${esc(imgUrl)}" onerror="this.parentElement.style.display='none'" loading="lazy"></div>`;
-      }
+      if(imgIdx === 0){imgGallery += `<img class="article-img article-hero-img" src="${esc(imgUrl)}" onerror="this.style.display='none" loading="eager">`;}
+      else{if(imgIdx === 1) imgGallery += '<div class="gallery-thumbs">';imgGallery += `<div class="gallery-thumb"><img src="${esc(imgUrl)}" onerror="this.parentElement.style.display='none'" loading="lazy"></div>`;}
     });
     if(images.length > 1) imgGallery += '</div>';
     imgGallery += '</div>';
   }
   const hasVideo = p.video && p.video.length > 0;
-  const voiceOptions = [
-    {id:'hoaimy', label:'🎙️ Nữ — Hoài My'},
-    {id:'namminh', label:'🎙️ Nam — Nam Minh'},
-  ];
+  const voiceOptions = [{id:'hoaimy',label:'🎙️ Nữ — Hoài My'},{id:'namminh',label:'🎙️ Nam — Nam Minh'}];
   let voiceSelector = '';
   if(!hasVideo){
     voiceSelector = `<div class="tts-selector"><div class="tts-selector-label">🎙️ Chọn giọng đọc:</div><div class="tts-voice-btns">`;
-    voiceOptions.forEach(v=>{
-      voiceSelector += `<button class="tts-voice-btn" onclick="document.querySelectorAll('.tts-voice-btn').forEach(b=>b.classList.remove('active'));this.classList.add('active');document.getElementById('selected-voice').value='${v.id}'">${v.label}</button>`;
-    });
-    voiceSelector += `</div><div class="tts-speed-row"><span>Tốc độ:</span><select id="selected-speed"><option value="1.0">1.0x — Bình thường</option><option value="1.2" selected>1.2x — Nhanh</option><option value="1.5">1.5x — Rất nhanh</option><option value="0.8">0.8x — Chậm</option></select></div>`;
-    voiceSelector += `<input type="hidden" id="selected-voice" value="hoaimy"></div>`;
+    voiceOptions.forEach(v=>{voiceSelector+=`<button class="tts-voice-btn" onclick="document.querySelectorAll('.tts-voice-btn').forEach(b=>b.classList.remove('active'));this.classList.add('active');document.getElementById('selected-voice').value='${v.id}'">${v.label}</button>`;});
+    voiceSelector+=`</div><div class="tts-speed-row"><span>Tốc độ:</span><select id="selected-speed"><option value="1.0">1.0x</option><option value="1.2" selected>1.2x</option><option value="1.5">1.5x</option><option value="0.8">0.8x</option></select></div>`;
+    voiceSelector+=`<input type="hidden" id="selected-voice" value="hoaimy"></div>`;
   }
   document.getElementById('view-article').innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><span class="badge badge-ai">AI</span><h1 class="article-title">${esc(p.title)}</h1>${imgGallery}<p class="article-p" style="white-space:pre-wrap">${esc(p.text)}</p>${hasVideo?`<video class="article-img" src="${esc(p.video)}" controls playsinline style="max-height:400px"></video>`:''}<div class="article-actions">${hasVideo?`<button onclick="openShortAIFeed(${i})">🎬 Xem Short</button>${voiceSelector}<button class="primary" onclick="makeShortVideo('${esc(p.id)}',this,document.getElementById('selected-voice')?.value,parseFloat(document.getElementById('selected-speed')?.value)||1.2)">🔄 Tạo lại Short</button>`:`${voiceSelector}<button class="primary" onclick="makeShortVideo('${esc(p.id)}',this,document.getElementById('selected-voice')?.value,parseFloat(document.getElementById('selected-speed')?.value)||1.2)">🎬 Tạo Video Shorts</button>`}<button onclick="doShare('${esc(p.title)}','${SPACE}','${esc(p.img||'')}')">📤</button></div></div>`;
   const firstVoiceBtn = document.querySelector('.tts-voice-btn');
@@ -384,46 +335,6 @@ async function readWallPost(i){const p=_wallPosts[i];if(!p)return;showView('view
 async function loadNewsTab(){const el=document.getElementById('view-cat');el.innerHTML='<div class="loading">Đang tải...</div>';try{const r=await fetch('/api/homepage');const news=await r.json();if(!news.length){el.innerHTML='<div class="loading">Không có tin</div>';return}const groups={};news.forEach(a=>{if(!groups[a.group])groups[a.group]=[];groups[a.group].push(a)});let h='';for(const[g,arts]of Object.entries(groups)){h+=`<div class="section-title">${g}</div><div class="grid">`;arts.slice(0,6).forEach(a=>{h+=`<div class="card" onclick="readArticle('${esc(a.link)}')"><div class="card-img">${a.img?`<img src="${a.img}" loading="lazy">`:''}</div><div class="card-body"><span class="badge badge-vne">${esc(a.source||'VnE')}</span><div class="card-title">${esc(a.title)}</div></div></div>`});h+='</div>'}el.innerHTML=h}catch(e){el.innerHTML='<div class="loading">Lỗi</div>'}}
 async function loadCat(id){const el=document.getElementById('view-cat');el.innerHTML='<div class="loading">Đang tải...</div>';const arts=await fetch('/api/category/'+id).then(r=>r.json()).catch(()=>[]);if(!arts.length){el.innerHTML='<div class="loading">Không có tin</div>';return}let h='<div class="grid">';arts.forEach(a=>{h+=`<div class="card" onclick="readArticle('${esc(a.link)}')"><div class="card-img">${a.img?`<img src="${a.img}" loading="lazy">`:''}</div><div class="card-body"><span class="badge badge-vne">${esc(a.source||'')}</span><div class="card-title">${esc(a.title)}</div></div></div>`});h+='</div>';el.innerHTML=h}
 fetch('/api/storage_status').then(r=>r.json()).then(j=>{if(!j.persistent){const home=document.getElementById('view-home');if(home){const w=document.createElement('div');w.className='storage-warn';w.innerHTML='⚠️ Persistent Storage chưa bật.';home.prepend(w)}}}).catch(()=>{});
-
-(function(){
-  try{
-    var hash = window.location.hash;
-    if(hash && hash.length > 1){
-      var articleUrl = decodeURIComponent(hash.substring(1));
-      if(articleUrl.startsWith('http')){
-        history.replaceState(null, '', window.location.pathname);
-        setTimeout(function(){
-          if(typeof readArticle==='function') readArticle(articleUrl);
-        }, 1500);
-      }
-    }
-  }catch(e){}
-})();
-
-(function(){
-  try{
-    const pa=localStorage.getItem('pending_article');
-    const pv=localStorage.getItem('pending_video');
-    if(pa){
-      localStorage.removeItem('pending_article');
-      setTimeout(()=>{
-        if(typeof readArticle==='function') readArticle(pa);
-      },1500);
-    }
-    if(pv){
-      localStorage.removeItem('pending_video');
-      try{
-        const v=JSON.parse(pv);
-        if(v&&v.url) setTimeout(()=>{window.open(v.url,'_blank')},1500);
-      }catch(e){}
-    }
-  }catch(e){}
-})();
-
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', function() {
-    if (typeof loadHome === 'function') loadHome();
-  });
-} else {
-  if (typeof loadHome === 'function') loadHome();
-}
+(function(){try{var hash=window.location.hash;if(hash&&hash.length>1){var articleUrl=decodeURIComponent(hash.substring(1));if(articleUrl.startsWith('http')){history.replaceState(null,'',window.location.pathname);setTimeout(function(){if(typeof readArticle==='function')readArticle(articleUrl);},1500);}}}catch(e){}})();
+(function(){try{const pa=localStorage.getItem('pending_article');const pv=localStorage.getItem('pending_video');if(pa){localStorage.removeItem('pending_article');setTimeout(()=>{if(typeof readArticle==='function')readArticle(pa);},1500);}if(pv){localStorage.removeItem('pending_video');try{const v=JSON.parse(pv);if(v&&v.url)setTimeout(()=>{window.open(v.url,'_blank')},1500);}catch(e){}}}catch(e){}})();
+if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',function(){if(typeof loadHome==='function')loadHome();});}else{if(typeof loadHome==='function')loadHome();}