Fix VTV loading, match detail, homepage speed

1. VTV: reduce API timeout to 2.5s, HLS fail-fast (no retry), 8s per-source timeout
2. Match detail: show basic info even when scraping fails, display events if available
3. Homepage: add per-API timeouts (8-15s) so slow APIs don't block everything

static/app_v2.js

@@ -80,15 +80,14 @@ function buildVTVBlockHTML(){
 }
 
 async function loadVTVStreams(){
-  // Safety: always hide loader after 5s max
-  const loadEl = document.getElementById('vtv-load');
+  // Safety: always hide loader after 3s max
   const hideLoader = () => { const el = document.getElementById('vtv-load'); if(el) el.style.display = 'none'; };
-  setTimeout(hideLoader, 5000);
+  setTimeout(hideLoader, 3000);
   
-  let apiOk = false;
+  // Try API with short timeout
   try {
     const ctrl = new AbortController();
-    const tid = setTimeout(() => ctrl.abort(), 4000);
+    const tid = setTimeout(() => ctrl.abort(), 2500);
     const r = await fetch('/api/vtv/streams', {signal: ctrl.signal});
     clearTimeout(tid);
     if(r.ok){
@@ -98,7 +97,6 @@ async function loadVTVStreams(){
         const sources = (info && info.all_sources && info.all_sources.length > 0) ? info.all_sources : (info && info.stream_url ? [info.stream_url] : []);
         if(sources.length > 0){
           _vtvStreams[ch.id] = sources.map(u => '/api/proxy/m3u8/vtv?url=' + encodeURIComponent(u));
-          apiOk = true;
         }
       });
     }
@@ -112,7 +110,6 @@ async function loadVTVStreams(){
       const fallback = VTV_STATIC_SOURCES[ch.id] || [];
       _vtvStreams[ch.id] = fallback.map(u => '/api/proxy/m3u8/vtv?url=' + encodeURIComponent(u));
     }
-    // Update tab: always show as available (opacity 1) since we have static fallback
     const tab = document.getElementById('vtvt-'+ch.id);
     if(tab){
       tab.classList.remove('off');
@@ -166,21 +163,34 @@ function _vtvTryPlay(video, urls, idx, name, loadEl, errEl, errMsg){
   const src = urls[idx];
   loadEl.innerHTML = '<div class="vtv-spinner"></div>Đang kết nối ' + name + ' (' + (idx+1) + '/' + urls.length + ')...';
   if(typeof Hls !== 'undefined' && Hls.isSupported()){
-    const hls = new Hls({enableWorker:true,lowLatencyMode:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:15,maxMaxBufferLength:30});
+    const hls = new Hls({enableWorker:true,lowLatencyMode:true,startLevel:-1,capLevelToPlayerSize:true,maxBufferLength:8,maxMaxBufferLength:15,maxFragLookUpTolerance:0.5});
     _vtvHls = hls;
+    
+    // Timeout: if not loaded in 8s, try next source
+    const loadTimeout = setTimeout(() => {
+      if(_vtvHls === hls) {
+        console.warn(`VTV ${name} source ${idx+1} timeout, trying next...`);
+        hls.destroy();
+        _vtvHls = null;
+        _vtvTryPlay(video, urls, idx+1, name, loadEl, errEl, errMsg);
+      }
+    }, 8000);
+    
     hls.loadSource(src);
     hls.attachMedia(video);
-    hls.on(Hls.Events.MANIFEST_PARSED, () => { video.play().catch(()=>{}); loadEl.style.display='none'; video.style.display='block'; });
-    let recAttempts = 0;
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      clearTimeout(loadTimeout);
+      video.play().catch(()=>{});
+      loadEl.style.display='none';
+      video.style.display='block';
+    });
     hls.on(Hls.Events.ERROR, (ev, data) => {
       if(data.fatal){
-        if(data.type === Hls.ErrorTypes.NETWORK_ERROR){
-          recAttempts++;
-          if(recAttempts <= 2){ setTimeout(() => hls.startLoad(), 1500); }
-          else { hls.destroy(); _vtvHls = null; _vtvTryPlay(video, urls, idx+1, name, loadEl, errEl, errMsg); }
-        } else if(data.type === Hls.ErrorTypes.MEDIA_ERROR){
-          try { hls.recoverMediaError(); } catch(e) {}
-        } else { hls.destroy(); _vtvHls = null; _vtvTryPlay(video, urls, idx+1, name, loadEl, errEl, errMsg); }
+        clearTimeout(loadTimeout);
+        // For any fatal error, try next source immediately
+        hls.destroy();
+        _vtvHls = null;
+        _vtvTryPlay(video, urls, idx+1, name, loadEl, errEl, errMsg);
       }
     });
   } else if(video.canPlayType('application/vnd.apple.mpegurl')){
@@ -197,13 +207,20 @@ async function loadHome(){
   // Load VTV streams in parallel (non-blocking)
   loadVTVStreams();
 
+  // Helper: fetch with timeout
+  const fetchWithTimeout = (url, ms=12000) => {
+    const ctrl = new AbortController();
+    const tid = setTimeout(() => ctrl.abort(), ms);
+    return fetch(url, {signal: ctrl.signal}).finally(() => clearTimeout(tid));
+  };
+
   const[featured,sh,wall,hlLeagues,ai,wcData]=await Promise.all([
-    fetch('/api/livescore/featured').then(r=>r.json()).catch(()=>null),
-    fetch('/api/shorts').then(r=>r.json()).catch(()=>[]),
-    fetch('/api/wall').then(r=>r.json()).catch(()=>({posts:[]})),
-    fetch('/api/highlights/leagues').then(r=>r.json()).catch(()=>({})),
-    fetch('/api/genk_ai').then(r=>r.json()).catch(()=>[]),
-    fetch('/api/wc2026').then(r=>r.json()).catch(()=>null)
+    fetchWithTimeout('/api/livescore/featured', 8000).then(r=>r.json()).catch(()=>null),
+    fetchWithTimeout('/api/shorts', 15000).then(r=>r.json()).catch(()=>[]),
+    fetchWithTimeout('/api/wall', 8000).then(r=>r.json()).catch(()=>({posts:[]})),
+    fetchWithTimeout('/api/highlights/leagues', 15000).then(r=>r.json()).catch(()=>({})),
+    fetchWithTimeout('/api/genk_ai', 12000).then(r=>r.json()).catch(()=>[]),
+    fetchWithTimeout('/api/wc2026', 15000).then(r=>r.json()).catch(()=>null)
   ]);
   _hlLeagueData=hlLeagues;
   _wc2026Data=wcData;
@@ -414,7 +431,58 @@ function bindMatchClicks(el){
 }
 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=''}
-async function loadMatchTab(tab){document.querySelectorAll('.mo-tab').forEach(t=>t.classList.remove('active'));document.querySelectorAll('.mo-tab').forEach(t=>{if((tab==='comm'&&t.textContent==='Diễn biến')||(tab==='stats'&&t.textContent==='Thống kê')||(tab==='detail'&&t.textContent.includes('Chi tiết')))t.classList.add('active')});const el=document.getElementById('mo-body');if(!el)return;el.innerHTML='<div class="loading">Đang tải...</div>';try{let apiUrl;if(tab==='stats')apiUrl=`/api/match/${_currentEventId}/stats`;else if(tab==='comm')apiUrl=`/api/match/${_currentEventId}/commentaries`;else{apiUrl=`/api/match/${_currentEventId}/detail`;if(_currentMatchUrl)apiUrl+='?url='+encodeURIComponent(_currentMatchUrl)}const r=await fetch(apiUrl);if(!r.ok){el.innerHTML='<div class="loading">Lỗi máy chủ ('+r.status+')</div>';return}const d=await r.json();if(d.error){el.innerHTML='<div class="loading">'+esc(d.error)+'</div>';return}if(tab==='detail'&&typeof renderMatchDetail==='function'){renderMatchDetail(el,d);return}el.innerHTML=d.html||'<div class="loading">Không có dữ liệu</div>'}catch(e){el.innerHTML='<div class="loading">Lỗi</div>'}}
+async function loadMatchTab(tab){
+  document.querySelectorAll('.mo-tab').forEach(t=>t.classList.remove('active'));
+  document.querySelectorAll('.mo-tab').forEach(t=>{
+    if((tab==='comm'&&t.textContent==='Diễn biến')||(tab==='stats'&&t.textContent==='Thống kê')||(tab==='detail'&&t.textContent.includes('Chi tiết')))t.classList.add('active')
+  });
+  const el=document.getElementById('mo-body');
+  if(!el)return;
+  el.innerHTML='<div class="loading">Đang tải...</div>';
+  try{
+    let apiUrl;
+    if(tab==='stats')apiUrl=`/api/match/${_currentEventId}/stats`;
+    else if(tab==='comm')apiUrl=`/api/match/${_currentEventId}/commentaries`;
+    else{
+      apiUrl=`/api/match/${_currentEventId}/detail`;
+      if(_currentMatchUrl)apiUrl+='?url='+encodeURIComponent(_currentMatchUrl);
+    }
+    const r=await fetch(apiUrl);
+    if(!r.ok){el.innerHTML='<div class="loading">Lỗi máy chủ ('+r.status+')</div>';return}
+    const d=await r.json();
+    if(d.error){el.innerHTML='<div class="loading">'+esc(d.error)+'</div>';return}
+    
+    // For detail tab: show match info even if scraping "found:false"
+    if(tab==='detail'){
+      if(typeof renderMatchDetail==='function'){
+        renderMatchDetail(el,d);
+      } else if(d.info && (d.info.home_team || d.info.home)){
+        // Basic info display when renderMatchDetail not available
+        const info = d.info;
+        const home = info.home_team || info.home || '';
+        const away = info.away_team || info.away || '';
+        const score = info.score || 'VS';
+        const league = info.league || info.status_label || '';
+        el.innerHTML = `<div class="match-basic-info">
+          <div class="mbl-league">${esc(league)}</div>
+          <div class="mbl-teams">
+            <div class="mbl-team">${esc(home)}</div>
+            <div class="mbl-score">${esc(score)}</div>
+            <div class="mbl-team">${esc(away)}</div>
+          </div>
+          ${d.found===false ? '<div class="mbl-notice">⚠️ Chi tiết trận đấu chưa có sẵn. Vui lòng thử lại sau.</div>' : ''}
+          ${d.events ? '<div class="mbl-events"><h4>Diễn biến</h4>' + d.events.map(ev => `<div class="mbl-ev ${ev.team}"><span class="mbl-ev-time">${ev.time||''}</span> ${ev.type==='goal'?'⚽':ev.type==='redcard'?'🟥':ev.type==='yellowcard'?'🟨':'↔️'} ${ev.players||''}</div>`).join('') + '</div>' : ''}
+        </div>`;
+      } else {
+        el.innerHTML='<div class="loading">Không tìm thấy dữ liệu trận đấu</div>';
+      }
+      return;
+    }
+    el.innerHTML=d.html||'<div class="loading">Không có dữ liệu</div>';
+  }catch(e){
+    el.innerHTML='<div class="loading">Lỗi kết nối</div>';
+  }
+}
 async function doInteract(videoId,type){try{const r=await fetch('/api/v2/interact',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id:videoId,type})});return await r.json();}catch(e){return null;}}
 async function getInteractions(videoId){try{return await fetch('/api/v2/interactions?id='+encodeURIComponent(videoId)).then(r=>r.json());}catch(e){return{views:0,likes:0,comments:0};}}
 async function getComments(videoId){try{const j=await fetch('/api/v2/comments?id='+encodeURIComponent(videoId)).then(r=>r.json());return j.comments||[];}catch(e){return[];}}