Add 'friendly' to HL_LEAGUES + WC highlight tab handler in wc2026_v2.js"

static/wc2026_v2.js

@@ -1,201 +1,47 @@
-// === WORLD CUP 2026 - Full render ===
-// Fixtures: JSON sorted by date, VN names + flags, livescore auto-refresh
-// BXH: Self-rendered from fixtures data (grouped by bang)
-// News: Always fetch og:image for thumbnails
-
-let _wc2026Data = null;
-let _wcRefreshInterval = null;
-
-const WC_TEAMS = {
-  'Mexico':'🇲🇽 Mexico','Colombia':'🇨🇴 Colombia','USA':'🇺🇸 Mỹ','United States':'🇺🇸 Mỹ',
-  'Brazil':'🇧🇷 Brazil','Argentina':'🇦🇷 Argentina','Germany':'🇩🇪 Đức','France':'🇫🇷 Pháp',
-  'Spain':'🇪🇸 Tây Ban Nha','England':'🏴󠁧󠁢󠁥󠁮󠁧󠁿 Anh','Portugal':'🇵🇹 Bồ Đào Nha','Netherlands':'🇳🇱 Hà Lan',
-  'Italy':'🇮🇹 Ý','Belgium':'🇧🇪 Bỉ','Croatia':'🇭🇷 Croatia','Uruguay':'🇺🇾 Uruguay',
-  'Japan':'🇯🇵 Nhật Bản','South Korea':'🇰🇷 Hàn Quốc','Korea Republic':'🇰🇷 Hàn Quốc',
-  'Australia':'🇦🇺 Úc','Saudi Arabia':'🇸🇦 Ả Rập Xê Út','Iran':'🇮🇷 Iran','Qatar':'🇶🇦 Qatar',
-  'Canada':'🇨🇦 Canada','Morocco':'🇲🇦 Morocco','Senegal':'🇸🇳 Senegal','Ghana':'🇬🇭 Ghana',
-  'Cameroon':'🇨🇲 Cameroon','Nigeria':'🇳🇬 Nigeria','Tunisia':'🇹🇳 Tunisia',
-  'Ecuador':'🇪🇨 Ecuador','Chile':'🇨🇱 Chile','Peru':'🇵🇪 Peru','Paraguay':'🇵🇾 Paraguay',
-  'Bolivia':'🇧🇴 Bolivia','Venezuela':'🇻🇪 Venezuela','Panama':'🇵🇦 Panama',
-  'Costa Rica':'🇨🇷 Costa Rica','Honduras':'🇭🇳 Honduras','Jamaica':'🇯🇲 Jamaica',
-  'Serbia':'🇷🇸 Serbia','Switzerland':'🇨🇭 Thụy Sĩ','Denmark':'🇩🇰 Đan Mạch',
-  'Poland':'🇵🇱 Ba Lan','Wales':'🏴󠁧󠁢󠁷󠁬󠁳󠁿 Xứ Wales','Sweden':'🇸🇪 Thụy Điển',
-  'Norway':'🇳🇴 Na Uy','Austria':'🇦🇹 Áo','Czech Republic':'🇨🇿 Séc','Czechia':'🇨🇿 Séc',
-  'Scotland':'🏴󠁧󠁢󠁳󠁣󠁴󠁿 Scotland','Turkey':'🇹🇷 Thổ Nhĩ Kỳ','Türkiye':'🇹🇷 Thổ Nhĩ Kỳ',
-  'Ukraine':'🇺🇦 Ukraine','Egypt':'🇪🇬 Ai Cập','Algeria':'🇩🇿 Algeria',
-  'South Africa':'🇿🇦 Nam Phi','DR Congo':'🇨🇩 DR Congo',
-  'Ivory Coast':'🇨🇮 Bờ Biển Ngà',"Côte d'Ivoire":'🇨🇮 Bờ Biển Ngà',
-  'Indonesia':'🇮🇩 Indonesia','Vietnam':'🇻🇳 Việt Nam','Thailand':'🇹🇭 Thái Lan',
-  'China PR':'🇨🇳 Trung Quốc','New Zealand':'🇳🇿 New Zealand','Slovenia':'🇸🇮 Slovenia',
-  'Albania':'🇦🇱 Albania','Ireland':'🇮🇪 Ireland','Republic of Ireland':'🇮🇪 Ireland',
-  'Romania':'🇷🇴 Romania','Hungary':'🇭🇺 Hungary','Iceland':'🇮🇸 Iceland',
-  'Finland':'🇫🇮 Phần Lan','Greece':'🇬🇷 Hy Lạp','Uzbekistan':'🇺🇿 Uzbekistan',
-  'Iraq':'🇮🇶 Iraq','Jordan':'🇯🇴 Jordan','Palestine':'🇵🇸 Palestine',
-  'Bahrain':'🇧🇭 Bahrain','Oman':'🇴🇲 Oman','UAE':'🇦🇪 UAE',
-  'Cuba':'🇨🇺 Cuba','El Salvador':'🇸🇻 El Salvador','Guatemala':'🇬🇹 Guatemala',
-  'Trinidad and Tobago':'🇹🇹 Trinidad & Tobago','Haiti':'🇭🇹 Haiti',
-  'Mali':'🇲🇱 Mali','Burkina Faso':'🇧🇫 Burkina Faso','Mozambique':'🇲🇿 Mozambique',
-  'Tanzania':'🇹🇿 Tanzania','Zambia':'🇿🇲 Zambia','Kenya':'🇰🇪 Kenya',
-  'Angola':'🇦🇴 Angola','Guinea':'🇬🇳 Guinea','Benin':'🇧🇯 Benin',
-  'TBD':'🏳️ TBD','To Be Determined':'🏳️ TBD',
-};
-function _t(name){return WC_TEAMS[name]||WC_TEAMS[(name||'').trim()]||'🏴 '+name;}
-
-function switchWCTab(tab){
-  document.querySelectorAll('.wc-tab').forEach(t=>t.classList.remove('active'));
-  document.querySelectorAll('.wc-tab').forEach(t=>{
-    if((tab==='news'&&t.textContent.includes('Tin'))||(tab==='fixtures'&&t.textContent.includes('Lịch'))||(tab==='standings'&&t.textContent.includes('BXH'))||(tab==='stats'&&t.textContent.includes('Thống')))t.classList.add('active');
+// Add WC Highlight tab handler to wc2026_v2.js
+
+// Override switchWCTab to handle 'highlights' tab
+const _origSwitchWC = typeof switchWCTab !== 'undefined' ? switchWCTab : null;
+
+function switchWCTab(tab) {
+  document.querySelectorAll('.wc-tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.wc-tab').forEach(t => {
+    if ((tab === 'news' && t.textContent.includes('Tin')) ||
+        (tab === 'fixtures' && t.textContent.includes('Lịch')) ||
+        (tab === 'standings' && t.textContent.includes('BXH')) ||
+        (tab === 'highlights' && t.textContent.includes('Highlight')) ||
+        (tab === 'stats' && t.textContent.includes('Thống')))
+      t.classList.add('active');
   });
-  const el=document.getElementById('wc-content');if(!el)return;
-  if(!_wc2026Data){el.innerHTML='<div class="loading">Đang tải...</div>';return;}
-  if(tab==='news')renderWCNews(el);
-  else if(tab==='fixtures')renderWCFixtures(el);
-  else if(tab==='standings')renderWCStandings(el);
-  else if(tab==='stats')renderWCStats(el);
-}
-
-// === NEWS (always load og:image for missing thumbnails) ===
-function renderWCNews(el){
-  const news=_wc2026Data.news||[];const road=_wc2026Data.road||[];
-  const combined=[];let ni=0,ri=0;
-  while(ni<news.length||ri<road.length){if(ni<news.length)combined.push({...news[ni++],_type:'news'});if(ri<road.length)combined.push({...road[ri++],_type:'road'});}
-  if(!combined.length){el.innerHTML='<div class="loading">Đang cập nhật...</div>';return;}
-  let h='<div class="wc-news-grid">';
-  combined.slice(0,20).forEach((a,i)=>{
-    const badge=a._type==='road'?'<span class="badge badge-wc">Đường tới WC</span>':'<span class="badge badge-fpt">Tin WC</span>';
-    h+=`<div class="wc-news-item" onclick="readArticle('${esc(a.link)}')">`;
-    h+=`<div class="wc-news-img" id="wcimg-${i}">${a.img?`<img src="${esc(a.img)}" onerror="loadWCImg(${i},'${esc(a.link)}')">`:''}</div>`;
-    h+=`<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;
-  // Load images for items without img
-  combined.slice(0,20).forEach((a,i)=>{if(!a.img)loadWCImg(i,a.link);});
-}
-window.loadWCImg=function(i,url){
-  const el=document.getElementById('wcimg-'+i);if(!el)return;
-  fetch('/api/article?url='+encodeURIComponent(url)).then(r=>r.json()).then(d=>{
-    const img=d?.og_image||d?.img||'';
-    if(img)el.innerHTML=`<img src="${esc(img)}" onerror="this.style.display='none'">`;
-  }).catch(()=>{});
-};
-
-// === FIXTURES (sorted by date, VN names + flags, livescore) ===
-function renderWCFixtures(el){
-  const d=_wc2026Data.fixtures||{};const matches=d.matches||[];
-  if(!matches.length){el.innerHTML='<div class="loading">Đang tải lịch thi đấu...</div>';return;}
-  const sorted=[...matches].sort((a,b)=>(a.date_utc||'').localeCompare(b.date_utc||''));
-  const byDate={};
-  sorted.forEach(m=>{const day=m.date_vn?m.date_vn.split(' ').slice(1).join(' '):'TBD';if(!byDate[day])byDate[day]=[];byDate[day].push(m);});
-  let h='<div style="max-height:450px;overflow-y:auto;padding:2px">';
-  h+=`<div style="font-size:10px;color:#6a9fca;text-align:center;padding:3px 0">🏆 World Cup 2026 · ${d.total||104} trận · Giờ VN · 🔴 Livescore tự động</div>`;
-  for(const[day,dm]of Object.entries(byDate)){
-    h+=`<div style="font-size:11px;font-weight:800;color:#f0c040;padding:6px 4px 2px;margin-top:3px;border-bottom:1px solid #1a3a5a">📅 ${esc(day)}</div>`;
-    dm.forEach(m=>{
-      const live=m.status==='live',done=m.status==='finished';
-      const bc=live?'#e74c3c':done?'#2d8659':'#1a3a5a';
-      const time=m.date_vn?m.date_vn.split(' ')[0]:'';
-      h+=`<div style="padding:4px;margin:2px 0;border-left:3px solid ${bc};border-radius:3px;background:#0a1520">`;
-      h+=`<div style="display:flex;justify-content:space-between;font-size:8px;color:#6a9fca">`;
-      h+=`<span>🕐 ${esc(time)}${m.group?' · '+esc(m.group):''}</span>`;
-      if(m.location)h+=`<span style="max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">🏟 ${esc(m.location)}</span>`;
-      h+='</div>';
-      h+='<div style="display:flex;align-items:center;gap:2px;margin-top:2px">';
-      h+=`<span style="flex:1;text-align:right;font-size:11px;color:#eee">${_t(m.home)}</span>`;
-      if(live)h+=`<span style="min-width:44px;text-align:center;font-size:12px;font-weight:900;color:#e74c3c;background:#1a0808;padding:1px 4px;border-radius:3px">${esc(m.score)}</span>`;
-      else if(done)h+=`<span style="min-width:44px;text-align:center;font-size:11px;font-weight:800;color:#4ade80">${esc(m.score)}</span>`;
-      else h+=`<span style="min-width:44px;text-align:center;font-size:10px;color:#555">vs</span>`;
-      h+=`<span style="flex:1;text-align:left;font-size:11px;color:#eee">${_t(m.away)}</span>`;
-      h+='</div>';
-      if(live)h+='<div style="text-align:center;font-size:8px;color:#e74c3c;font-weight:700">● LIVE</div>';
-      h+='</div>';
-    });
-  }
-  h+='</div>';el.innerHTML=h;
+  const el = document.getElementById('wc-content');
+  if (!el) return;
+  if (!_wc2026Data && tab !== 'highlights') { el.innerHTML = '<div class="loading">Đang tải...</div>'; return; }
+  if (tab === 'news') renderWCNews(el);
+  else if (tab === 'fixtures') renderWCFixtures(el);
+  else if (tab === 'standings') renderWCStandings(el);
+  else if (tab === 'highlights') renderWCHighlights(el);
+  else if (tab === 'stats') renderWCStats(el);
 }
 
-// === BXH (self-rendered from fixtures JSON — grouped by bảng, calculate points) ===
-function renderWCStandings(el){
-  const d=_wc2026Data.fixtures||{};const matches=d.matches||[];
-  // Extract group stage matches only
-  const groupMatches=matches.filter(m=>m.group&&m.group.toLowerCase().includes('group'));
-  if(!groupMatches.length){
-    // Fallback: try bongda.com.vn HTML
-    const bxh=_wc2026Data.standings||{};
-    if(bxh.html&&bxh.html.length>100){
-      el.innerHTML=`<style>.wc-bxh{max-height:450px;overflow-y:auto}.wc-bxh,.wc-bxh *{color:#ddd!important;background:transparent!important;border-color:#1a3a5a!important}.wc-bxh table{width:100%;border-collapse:collapse;font-size:11px}.wc-bxh th{background:#0b1a2a!important;color:#6a9fca!important;padding:5px 3px;font-size:9px}.wc-bxh td{padding:4px 3px;border-bottom:1px solid #0d1a2a!important}.wc-bxh img{width:16px;height:16px;vertical-align:middle;margin-right:3px}.wc-bxh strong{color:#f0c040!important}.wc-bxh .title-content{background:#0b1a2a!important;border-radius:4px;margin:6px 0 2px;padding:5px 8px}.wc-bxh .info,.wc-bxh .btns{display:none!important}</style><div class="wc-bxh">${bxh.html}</div>`;
-      el.querySelectorAll('a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
+// === WC HIGHLIGHTS TAB (from xemlaibongda.top/the-gioi/world-cup-qualifiers) ===
+async function renderWCHighlights(el) {
+  el.innerHTML = '<div class="loading">Đang tải highlight World Cup...</div>';
+  try {
+    const vids = await fetch('/api/highlights/world-cup').then(r => r.json()).catch(() => []);
+    if (!vids || !vids.length) {
+      el.innerHTML = '<div class="loading">Chưa có highlight World Cup 2026</div>';
       return;
     }
-    el.innerHTML='<div class="loading">BXH cập nhật khi giải bắt đầu 11/06/2026<br><small style="color:#6a9fca">🔴 Livescore tự động từ bongda.com.vn</small></div>';
-    return;
-  }
-  // Calculate standings per group
-  const groups={};
-  groupMatches.forEach(m=>{
-    const g=m.group;if(!groups[g])groups[g]={};
-    [m.home,m.away].forEach(team=>{if(!groups[g][team])groups[g][team]={p:0,w:0,d:0,l:0,gf:0,ga:0,pts:0};});
-    if(m.home_score!==null&&m.away_score!==null){
-      const hs=parseInt(m.home_score),as=parseInt(m.away_score);
-      if(!isNaN(hs)&&!isNaN(as)){
-        groups[g][m.home].p++;groups[g][m.away].p++;
-        groups[g][m.home].gf+=hs;groups[g][m.home].ga+=as;
-        groups[g][m.away].gf+=as;groups[g][m.away].ga+=hs;
-        if(hs>as){groups[g][m.home].w++;groups[g][m.home].pts+=3;groups[g][m.away].l++;}
-        else if(hs<as){groups[g][m.away].w++;groups[g][m.away].pts+=3;groups[g][m.home].l++;}
-        else{groups[g][m.home].d++;groups[g][m.home].pts+=1;groups[g][m.away].d++;groups[g][m.away].pts+=1;}
-      }
-    }
-  });
-  let h='<div style="max-height:450px;overflow-y:auto;padding:2px">';
-  h+='<div style="font-size:10px;color:#6a9fca;text-align:center;padding:3px 0">🏆 BXH World Cup 2026 · 🔴 Livescore tự động</div>';
-  const sortedGroups=Object.keys(groups).sort();
-  sortedGroups.forEach(g=>{
-    const teams=Object.entries(groups[g]).map(([name,s])=>({name,...s,gd:s.gf-s.ga})).sort((a,b)=>b.pts-a.pts||b.gd-a.gd||b.gf-a.gf);
-    h+=`<div style="font-size:11px;font-weight:800;color:#8ab4d8;padding:6px 4px 3px;margin-top:6px;border-bottom:1px solid #1a3a5a">${esc(g)}</div>`;
-    h+='<table style="width:100%;border-collapse:collapse;font-size:10px;margin:2px 0">';
-    h+='<tr style="background:#0b1a2a"><th style="text-align:left;padding:4px;color:#6a9fca">Đội</th><th style="color:#6a9fca;padding:4px">Tr</th><th style="color:#6a9fca;padding:4px">T</th><th style="color:#6a9fca;padding:4px">H</th><th style="color:#6a9fca;padding:4px">B</th><th style="color:#6a9fca;padding:4px">BT</th><th style="color:#6a9fca;padding:4px">BB</th><th style="color:#6a9fca;padding:4px">HS</th><th style="color:#f0c040;padding:4px;font-weight:800">Đ</th></tr>';
-    teams.forEach((t,i)=>{
-      const bg=i<2?'#0a1a10':'transparent';// Top 2 qualify
-      const border=i===1?'border-bottom:1px solid #2d8659':''
-      h+=`<tr style="background:${bg};${border}"><td style="padding:4px;color:#eee;white-space:nowrap">${_t(t.name)}</td><td style="text-align:center;padding:4px;color:#999">${t.p}</td><td style="text-align:center;padding:4px;color:#4ade80">${t.w}</td><td style="text-align:center;padding:4px;color:#fbbf24">${t.d}</td><td style="text-align:center;padding:4px;color:#f87171">${t.l}</td><td style="text-align:center;padding:4px;color:#ccc">${t.gf}</td><td style="text-align:center;padding:4px;color:#ccc">${t.ga}</td><td style="text-align:center;padding:4px;color:${t.gd>=0?'#4ade80':'#f87171'}">${t.gd>0?'+':''}${t.gd}</td><td style="text-align:center;padding:4px;color:#f0c040;font-weight:800;font-size:12px">${t.pts}</td></tr>`;
+    let h = '<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:450px;overflow-y:auto;padding:4px">';
+    vids.slice(0, 20).forEach((v, i) => {
+      h += `<div style="cursor:pointer;border-radius:6px;overflow:hidden;background:#0a1520" onclick="openHighlightFeed('world-cup',${i})">`;
+      h += `<div style="position:relative;aspect-ratio:16/9;background:#1a2a3a">${v.img ? `<img src="${esc(v.img)}" style="width:100%;height:100%;object-fit:cover">` : ''}<div class="card-play">▶</div></div>`;
+      h += `<div style="padding:4px 6px;font-size:10px;color:#ccc;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">${esc(v.title)}</div>`;
+      h += '</div>';
     });
-    h+='</table>';
-  });
-  h+='</div>';el.innerHTML=h;
-}
-
-// === STATS ===
-function renderWCStats(el){
-  const d=_wc2026Data.stats||{};
-  if(d.html&&d.html.length>100){
-    el.innerHTML=`<style>.wc-st{max-height:450px;overflow-y:auto}.wc-st,.wc-st *{color:#ddd!important;background:transparent!important}.wc-st table{width:100%;border-collapse:collapse;font-size:11px}.wc-st th{background:#0b1a2a!important;color:#6a9fca!important;padding:5px}.wc-st td{padding:4px;border-bottom:1px solid #0d1a2a!important}.wc-st img{width:16px;height:16px;vertical-align:middle}.wc-st strong{color:#f0c040!important}</style><div class="wc-st">${d.html}</div>`;
-  }else{
-    el.innerHTML='<div class="loading">Thống kê cập nhật khi giải bắt đầu<br><small style="color:#6a9fca">Vua phá lưới · Kiến tạo · Thẻ phạt</small></div>';
+    h += '</div>';
+    el.innerHTML = h;
+  } catch(e) {
+    el.innerHTML = '<div class="loading">Lỗi tải highlight</div>';
   }
 }
-
-// === LIVE AUTO-REFRESH (90s) — cả fixtures LẪN BXH đều live ===
-function startWCLiveRefresh(){
-  if(_wcRefreshInterval)clearInterval(_wcRefreshInterval);
-  _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);
-      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);
-}
-setTimeout(startWCLiveRefresh,5000);