v6.8: Fix page hang — remove VTV loadHome override (double-load), add cachedFetch to all API calls, debounce loadLivescore, global _homeLoaded guard

static/vnews_all.js

@@ -26,10 +26,10 @@ function clearApiCache() { _apiCache.clear(); }
 // Updated: Voice selector + speed control + image gallery + auto voice detect
 
 // === LOAD HOME ===
-let _homeLoaded = false;
+window._homeLoaded = window._homeLoaded || false;
 let _homeLoading = false;
 async function loadHome(){
-  if(_homeLoaded) return; // Already loaded, skip
+  if(window._homeLoaded) return; // Already loaded, skip
   if(_homeLoading) return; // Currently loading, skip
   _homeLoading = true;
   // Load critical content first (featured + livescore HTML)
@@ -70,6 +70,9 @@ async function loadHome(){
   if(ai&&ai.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🤖 Ứng dụng AI</span></div><div class="slider-track">';ai.slice(0,12).forEach(a=>{h+=`<div class="slider-item" onclick="readArticle('${esc(a.link)}')"><div class="slider-thumb">${a.img?`<img src="${a.img}">`:''}</div><div class="slider-title">${esc(a.title)}</div></div>`});h+='</div></div>';}
   document.getElementById('view-home').innerHTML=h;
   loadLivescore('today');loadHotTopics();
+  window._homeLoaded = true;
+  // Inject VTV block after home loaded
+  if(window._vtvInject) window._vtvInject();
   if(_wc2026Data)switchWCTab('news');
 }
 
@@ -223,12 +226,18 @@ function renderSecondarySections(){
 
 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;}
 let _htPage=0,_htTopic='';
-async function loadHotTopics(){const j=await fetch('/api/hot_topics').then(r=>r.json()).catch(()=>({topics:[]}));const el=document.getElementById('hot-topics');if(!el)return;el.innerHTML=(j.topics||[]).slice(0,18).map(t=>{const topicText=t.topic||t.label.replace(/^#/,'');return`<button class="hot-chip" onclick="searchTopic('${topicText.replace(/'/g,"\\'")}')">${esc(t.label)}</button>`;}).join('');if(j.topics&&j.topics[0]){const firstTopic=j.topics[0].topic||j.topics[0].label.replace(/^#/,'');setTimeout(()=>searchTopic(firstTopic),800);}}
+async function loadHotTopics(){const j=await cachedFetch('/api/hot_topics', 60000).catch(()=>({topics:[]}));const el=document.getElementById('hot-topics');if(!el)return;el.innerHTML=(j.topics||[]).slice(0,18).map(t=>{const topicText=t.topic||t.label.replace(/^#/,'');return`<button class="hot-chip" onclick="searchTopic('${topicText.replace(/'/g,"\\'")}')">${esc(t.label)}</button>`;}).join('');if(j.topics&&j.topics[0]){const firstTopic=j.topics[0].topic||j.topics[0].label.replace(/^#/,'');setTimeout(()=>searchTopic(firstTopic),800);}}
 function searchTopic(topic){if(!topic){topic=document.getElementById('topic-input')?.value.trim();if(!topic){alert('Nhập chủ đề');return;}}document.getElementById('topic-input').value='';_htTopic=topic;_htPage=0;showHashtagSources(topic,0);}
-async function showHashtagSources(topic,page){const box=document.getElementById('hashtag-box');if(!box)return;if(page===0)box.innerHTML=`<div class="hashtag-sources"><h3>🔍 ${esc(topic)}</h3><div class="hashtag-loading"><div class="hashtag-spinner"></div>Đang tìm...</div></div>`;try{const r=await fetch(`/api/hashtag/sources?topic=${encodeURIComponent(topic)}&page=${page}`);const j=await r.json();const sources=j.sources||[];if(!sources.length&&page===0){box.innerHTML=`<div class="hashtag-sources"><h3>🔍 ${esc(topic)}</h3><div style="color:#888;padding:8px">Không tìm được bài viết liên quan</div></div>`;return;}let h='';if(page===0)h=`<div class="hashtag-sources"><h3>🔍 ${esc(topic)} <span style="font-size:10px;color:#888">(${j.total} bài từ 8 nguồn)</span></h3><div id="ht-list">`;sources.forEach((s,i)=>{const idx=page*8+i;h+=`<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-${idx}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via||'')}</div></div></div>`;});if(page===0){h+=`</div><button class="hashtag-rewrite-btn" onclick="rewriteHashtag('${esc(topic).replace(/'/g,"\\'")}')">🤖 Rewrite AI tổng hợp & đăng tường</button>`;if(j.has_more)h+=`<button class="hashtag-load-more" id="ht-more" onclick="loadMoreHashtag()">Tải thêm ▼</button>`;h+=`</div>`;box.innerHTML=h;}else{document.getElementById('ht-list')?.insertAdjacentHTML('beforeend',h);const btn=document.getElementById('ht-more');if(btn){if(!j.has_more)btn.remove();else{btn.disabled=false;btn.textContent='Tải thêm ▼';}}}sources.forEach((s,i)=>{const idx=page*8+i;if(!s.url)return;fetch('/api/article?url='+encodeURIComponent(s.url)).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+idx);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}}).catch(()=>{});});}catch(e){box.innerHTML=`<div class="hashtag-sources"><h3>🔍 ${esc(topic)}</h3><div style="color:#e74c3c;padding:8px">Lỗi: ${esc(e.message)}</div></div>`;}}
+async function showHashtagSources(topic,page){const box=document.getElementById('hashtag-box');if(!box)return;if(page===0)box.innerHTML=`<div class="hashtag-sources"><h3>🔍 ${esc(topic)}</h3><div class="hashtag-loading"><div class="hashtag-spinner"></div>Đang tìm...</div></div>`;try{const j=await cachedFetch(`/api/hashtag/sources?topic=${encodeURIComponent(topic)}&page=${page}`, 60000);const sources=j.sources||[];if(!sources.length&&page===0){box.innerHTML=`<div class="hashtag-sources"><h3>🔍 ${esc(topic)}</h3><div style="color:#888;padding:8px">Không tìm được bài viết liên quan</div></div>`;return;}let h='';if(page===0)h=`<div class="hashtag-sources"><h3>🔍 ${esc(topic)} <span style="font-size:10px;color:#888">(${j.total} bài từ 8 nguồn)</span></h3><div id="ht-list">`;sources.forEach((s,i)=>{const idx=page*8+i;h+=`<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-${idx}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via||'')}</div></div></div>`;});if(page===0){h+=`</div><button class="hashtag-rewrite-btn" onclick="rewriteHashtag('${esc(topic).replace(/'/g,"\\'")}')">🤖 Rewrite AI tổng hợp & đăng tường</button>`;if(j.has_more)h+=`<button class="hashtag-load-more" id="ht-more" onclick="loadMoreHashtag()">Tải thêm ▼</button>`;h+=`</div>`;box.innerHTML=h;}else{document.getElementById('ht-list')?.insertAdjacentHTML('beforeend',h);const btn=document.getElementById('ht-more');if(btn){if(!j.has_more)btn.remove();else{btn.disabled=false;btn.textContent='Tải thêm ▼';}}}sources.forEach((s,i)=>{const idx=page*8+i;if(!s.url)return;cachedFetch('/api/article?url='+encodeURIComponent(s.url), 120000).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+idx);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}}).catch(()=>{});});}catch(e){box.innerHTML=`<div class="hashtag-sources"><h3>🔍 ${esc(topic)}</h3><div style="color:#e74c3c;padding:8px">Lỗi: ${esc(e.message)}</div></div>`;}}
 function loadMoreHashtag(){_htPage++;const btn=document.getElementById('ht-more');if(btn){btn.disabled=true;btn.textContent='Đang tải...';}showHashtagSources(_htTopic,_htPage);}
 async function rewriteHashtag(topic){const btn=event?.target;if(btn){btn.disabled=true;btn.textContent='Đang tổng hợp...';}try{const r=await fetch('/api/topic_post',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({topic})});const j=await r.json();if(!r.ok||j.error)throw new Error(j.error||'Lỗi');toast('✅ Đã đăng Tường AI!');if(btn)btn.textContent='✅ Đăng thành công!';if(j.post)prependWallPost(j.post);}catch(e){toast('❌ '+e.message);if(btn){btn.disabled=false;btn.textContent='🤖 Rewrite AI';}}}
-async function loadLivescore(tab){document.querySelectorAll('.ls-tab').forEach(t=>t.classList.remove('active'));document.querySelector(`.ls-tab[data-tab="${tab}"]`)?.classList.add('active');const el=document.getElementById('ls-content');if(!el)return;el.innerHTML='<div class="loading">Đang tải...</div>';let ep='/api/livescore/'+tab;if(tab.startsWith('bxh_'))ep='/api/livescore/standings/'+tab.replace('bxh_','');try{const r=await fetch(ep);const d=await r.json();el.innerHTML=d.html&&d.html.length>50?d.html:'<div class="loading">Không có dữ liệu</div>';bindMatchClicks(el);}catch(e){el.innerHTML='<div class="loading">Lỗi</div>';}}
+// Debounce livescore calls
+let _lsLoading = false;
+async function loadLivescore(tab){
+  if(_lsLoading) return; // Skip if already loading
+  _lsLoading = true;
+  setTimeout(()=>{_lsLoading=false;}, 500);
+document.querySelectorAll('.ls-tab').forEach(t=>t.classList.remove('active'));document.querySelector(`.ls-tab[data-tab="${tab}"]`)?.classList.add('active');const el=document.getElementById('ls-content');if(!el)return;el.innerHTML='<div class="loading">Đang tải...</div>';let ep='/api/livescore/'+tab;if(tab.startsWith('bxh_'))ep='/api/livescore/standings/'+tab.replace('bxh_','');try{const d=await cachedFetch(ep, 30000);el.innerHTML=d.html&&d.html.length>50?d.html:'<div class="loading">Không có dữ liệu</div>';bindMatchClicks(el);}catch(e){el.innerHTML='<div class="loading">Lỗi</div>';}}
 function bindMatchClicks(el){
   if(!el) return;
   // Handle direct <a> clicks inside match-detail (highest priority)
@@ -522,7 +531,7 @@ fetch('/api/storage_status').then(r=>r.json()).then(j=>{if(!j.persistent){const
 
   function updateMiniEpg(){
     if(!_currentCh) return;
-    fetch('/api/vtv/epg/'+_currentCh).then(r=>r.json()).then(d=>{
+    cachedFetch('/api/vtv/epg/'+_currentCh, 60000).then(d=>{
       const progs = d.programs||[];
       const now = progs.find(p=>p.now);
       document.getElementById('vtv-mini-epg').textContent = now ? now.time+' '+now.title : (progs[0] ? progs[0].time+' '+progs[0].title : '');
@@ -864,26 +873,16 @@ fetch('/api/storage_status').then(r=>r.json()).then(j=>{if(!j.persistent){const
       });
   };
 
-  // Override loadHome to inject VTV block
-  const _origLoadHome = window.loadHome;
-  if(_origLoadHome && !_origLoadHome.__vtvWrapped){
-    window.loadHome = async function(){
-      // Skip if already loaded (guard against double-wrap)
-      if(window._homeLoaded) return;
-      const old = document.getElementById('vtv-block');
-      if(old) old.remove();
-      _blockInserted = false;
-      const r = await _origLoadHome.apply(this, arguments);
-      try{ 
-        pinBlock(); 
-        // Inject MyTV section after VTV block
-        setTimeout(()=>{ try{ injectMyTVBlock(); }catch(e){ console.warn('MyTV inject error:', e); } }, 500);
-        setTimeout(()=>{ try{ injectMyTVBlock(); }catch(e){} }, 2000);
-      }catch(e){ console.warn('VTV pinBlock error:', e); }
-      return r;
-    };
-    window.loadHome.__vtvWrapped = true;
-  }
+  // Inject VTV block AFTER loadHome completes (no override to avoid double-load)
+  // Use a one-time listener pattern
+  window._vtvInject = function(){
+    if(!window._homeLoaded) return; // loadHome not done yet
+    pinBlock();
+    // Inject MyTV section after VTV block (once)
+    if(!_mytvInserted){
+      setTimeout(()=>{ try{ injectMyTVBlock(); }catch(e){} }, 500);
+    }
+  };
 })();
 
 // ===== static/hot_multi.js =====
@@ -891,7 +890,7 @@ fetch('/api/storage_status').then(r=>r.json()).then(j=>{if(!j.persistent){const
 // This file loaded AFTER app_v2.js, overrides the function
 
 async function loadHotTopics(){
-  const j=await fetch('/api/hot_topics').then(r=>r.json()).catch(()=>({topics:[]}));
+  const j=await cachedFetch('/api/hot_topics', 60000).catch(()=>({topics:[]}));
   const el=document.getElementById('hot-topics');if(!el)return;
   const topics=j.topics||[];
   el.innerHTML=topics.slice(0,18).map(t=>{
@@ -911,7 +910,7 @@ async function loadMultiHashtag(topicList){
   box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp</h3><div class="hashtag-loading"><div class="hashtag-spinner"></div>Tổng hợp từ ${topicList.length} chủ đề nóng nhất...</div></div>`;
   try{
     const results=await Promise.all(topicList.map(topic=>
-      fetch(`/api/hashtag/sources?topic=${encodeURIComponent(topic)}&page=0`).then(r=>r.json()).catch(()=>({sources:[]}))
+      cachedFetch(`/api/hashtag/sources?topic=${encodeURIComponent(topic)}&page=0`, 60000).catch(()=>({sources:[]}))
     ));
     // Interleave from all topics
     const all=[];const seen=new Set();
@@ -932,7 +931,7 @@ async function loadMultiHashtag(topicList){
     h+=`</div></div>`;
     box.innerHTML=h;
     // Lazy load images
-    all.slice(0,12).forEach((s,i)=>{if(!s.url)return;fetch('/api/article?url='+encodeURIComponent(s.url)).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+i);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}}).catch(()=>{});});
+    all.slice(0,12).forEach((s,i)=>{if(!s.url)return;cachedFetch('/api/article?url='+encodeURIComponent(s.url), 120000).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+i);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}}).catch(()=>{});});
     _htTopic=topicList[0];
   }catch(e){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#e74c3c;padding:8px">Lỗi tải tin</div></div>`;}
 }
@@ -981,9 +980,9 @@ function startHomepageLive() {
     if (!document.getElementById('view-home')?.classList.contains('active')) return;
     _liveTick++;
     const lsTab = document.querySelector('.ls-tab.active');
-    if (lsTab && lsTab.dataset.tab) loadLivescore(lsTab.dataset.tab);
+    // loadLivescore already called in loadHome, skip to avoid duplicate
     try {
-      const f = await fetch('/api/livescore/featured').then(r => r.json()).catch(() => null);
+      const f = await cachedFetch('/api/livescore/featured', 30000).catch(() => null);
       if (f && f.home) {
         const el = document.querySelector('.featured-match');
         if (el) {
@@ -1020,7 +1019,7 @@ function refreshHashtag() {
   if (typeof _htTopic !== 'undefined' && _htTopic) {
     const box = document.getElementById('hashtag-box');
     if (box && box.innerHTML.length > 50) {
-      fetch(`/api/hashtag/sources?topic=${encodeURIComponent(_htTopic)}&page=0`)
+      cachedFetch(`/api/hashtag/sources?topic=${encodeURIComponent(_htTopic)}&page=0`, 60000)
         .then(r => r.json())
         .then(j => {
           const sources = j.sources || [];
@@ -1034,7 +1033,7 @@ function refreshHashtag() {
           list.innerHTML = h;
           sources.forEach((s, i) => {
             if (!s.url) return;
-            fetch('/api/article?url=' + encodeURIComponent(s.url)).then(r => r.json()).then(d => {
+            cachedFetch('/api/article?url=' + encodeURIComponent(s.url), 120000).then(d => {
               if (d && (d.og_image || d.img)) {
                 const el = document.getElementById('ht-img-' + i);
                 if (el) el.innerHTML = `<img src="${esc(d.og_image || d.img)}" onerror="this.style.display='none'">`;
@@ -1104,7 +1103,7 @@ function renderWCNews(el){
     h+=`<div class="wc-news-item" onclick="readArticle('${esc(a.link)}')"><div class="wc-news-img" id="wcimg-${i}">${a.img?`<img src="${esc(a.img)}" onerror="this.parentElement.innerHTML=''">`:''}</div><div class="wc-news-text">${badge}<div class="wc-news-title">${esc(a.title)}</div><div class="wc-news-via">${esc(a.source||'')}</div></div></div>`;
   });
   h+='</div>';el.innerHTML=h;
-  combined.slice(0,20).forEach((a,i)=>{if(a.img)return;fetch('/api/article?url='+encodeURIComponent(a.link)).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const x=document.getElementById('wcimg-'+i);if(x)x.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.parentElement.innerHTML=''">`;}}).catch(()=>{});});
+  combined.slice(0,20).forEach((a,i)=>{if(a.img)return;cachedFetch('/api/article?url='+encodeURIComponent(a.link), 120000).then(d=>{a.img=d.image;return d;}).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const x=document.getElementById('wcimg-'+i);if(x)x.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.parentElement.innerHTML=''">`;}}).catch(()=>{});});
 }
 
 // === FIXTURES ===
@@ -1165,8 +1164,8 @@ async function renderWCHighlights(el){
   try{
     // Load both WC and Friendly highlights
     const[wc,fr]=await Promise.all([
-      fetch('/api/highlights/world-cup').then(r=>r.json()).catch(()=>[]),
-      fetch('/api/highlights/friendly').then(r=>r.json()).catch(()=>[])
+      cachedFetch('/api/highlights/world-cup', 120000).catch(()=>[]),
+      cachedFetch('/api/highlights/friendly', 120000).catch(()=>[])
     ]);
     // Keep per-league index so the clicked card maps to the correct video in its own league array
     const all=[...(wc||[]).map((v,j)=>({...v,_league:'WC',_li:j})),...(fr||[]).map((v,j)=>({...v,_league:'Friendly',_li:j}))];
@@ -1190,7 +1189,7 @@ function startWCLiveRefresh(){
   _wcRefreshInterval=setInterval(async()=>{
     if(!document.getElementById('view-home')?.classList.contains('active'))return;
     try{
-      const data=await fetch('/api/wc2026').then(r=>r.json()).catch(()=>null);
+      const data=await cachedFetch('/api/wc2026', 300000).catch(()=>null);
       if(data){_wc2026Data=data;const wcEl=document.getElementById('wc-content');if(wcEl){const tab=document.querySelector('.wc-tab.active');if(tab){const t=tab.textContent;if(t.includes('Tin'))renderWCNews(wcEl);else if(t.includes('Lịch'))renderWCFixtures(wcEl);else if(t.includes('BXH'))renderWCStandings(wcEl);else if(t.includes('Thống'))renderWCStats(wcEl);}}}
     }catch(e){}
   },90000);