Upload static/app_v2.js with huggingface_hub

static/app_v2.js

@@ -8,37 +8,176 @@ function fetchWithTimeout(url, opts, ms){
   return fetch(url, {...opts, signal: ctrl.signal}).then(r=>{clearTimeout(tid);return r}).catch(e=>{clearTimeout(tid);throw e});
 }
 
-// === LOAD HOME ===
+// === LOAD HOME (progressive — show skeleton first, fill data as it arrives) ===
 async function loadHome(){
-  const[featured,sh,wall,hlLeagues,ai,wcData]=await Promise.all([
-    fetchWithTimeout('/api/livescore/featured').then(r=>r.json()).catch(()=>null),
-    fetchWithTimeout('/api/shorts').then(r=>r.json()).catch(()=>[]),
-    fetchWithTimeout('/api/wall').then(r=>r.json()).catch(()=>({posts:[]})),
-    fetchWithTimeout('/api/highlights/leagues').then(r=>r.json()).catch(()=>({})),
-    fetchWithTimeout('/api/genk_ai').then(r=>r.json()).catch(()=>[]),
-    fetchWithTimeout('/api/wc2026').then(r=>r.json()).catch(()=>null)
-  ]);
-  _hlLeagueData=hlLeagues;
-  _wc2026Data=wcData;
-  _shortsData=interleaveShorts(sh||[]);
-  _wallPosts=(wall&&wall.posts)||[];
-  let h='';
-  if(featured&&featured.home){const sc=featured.status==='live'?'':'upcoming';const st=featured.status==='live'?`🔴 ${featured.minute||'LIVE'}`:`⏰ ${featured.time}`;h+=`<div class="featured-match" onclick="openMatch('${featured.event_id}')"><div class="fm-league">${featured.league}</div><div class="fm-teams"><div class="fm-team"><img src="${featured.home_logo}" onerror="this.style.display='none'"><span>${featured.home}</span></div><div class="fm-score">${featured.score||'VS'}</div><div class="fm-team"><img src="${featured.away_logo}" onerror="this.style.display='none'"><span>${featured.away}</span></div></div><div class="fm-status ${sc}">${st}</div></div>`;}
-  h+=`<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>`;
-  h+='<div id="hashtag-box"></div>';
-  h+=`<div class="ls-section"><div class="ls-header"><h3>⚽ Livescore</h3></div><div class="ls-tabs"><span class="ls-tab active" data-tab="today" onclick="loadLivescore('today')">📅 Hôm nay</span><span class="ls-tab" data-tab="live" onclick="loadLivescore('live')">🔴 Live</span><span class="ls-tab" data-tab="incoming" onclick="loadLivescore('incoming')">⏰ Sắp tới</span><span class="ls-tab" data-tab="results" onclick="loadLivescore('results')">✅ Kết quả</span><span class="ls-tab" data-tab="bxh_nha" onclick="loadLivescore('bxh_nha')">🏆 NHA</span><span class="ls-tab" data-tab="bxh_laliga" onclick="loadLivescore('bxh_laliga')">🏆 La Liga</span></div><div class="ls-content" id="ls-content"><div class="loading">Đang tải...</div></div></div>`;
-  h+=`<div id="wc2026-live-section" class="wc2026-section"><div class="wc-header"><h2>🏆 World Cup 2026</h2><span class="wc-live-badge">● LIVE</span></div><div class="wc-tabs"><span class="wc-tab active" onclick="switchWCTab('news')">📰 Tin tức</span><span class="wc-tab" onclick="switchWCTab('fixtures')">📅 Lịch thi đấu</span><span class="wc-tab" onclick="switchWCTab('standings')">🏆 BXH</span><span class="wc-tab" onclick="switchWCTab('highlights')">🎬 Highlight</span><span class="wc-tab" onclick="switchWCTab('stats')">📊 Thống kê</span></div><div class="wc-content" id="wc-content"><div class="loading">Đang tải World Cup 2026...</div></div></div>`;
-  const wallPosts=_wallPosts;
-  const aiShorts=wallPosts.filter(p=>p.video);
-  if(aiShorts.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Short AI</span></div><div class="slider-track">';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="${p.video}" muted preload="metadata"></video><div class="card-play">▶</div></div><div class="slider-title">${esc(p.title)}</div></div>`});h+='</div></div>';}
-  if(_shortsData.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts Dân trí & SKĐS</span><span class="slider-note">Mới nhất · xen kẽ</span></div><div class="slider-track">';_shortsData.slice(0,30).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="${a.img}">`:''}<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></div>';}
-  if(wallPosts.length){h+=`<div class="slider-wrap" id="ai-wall-wrap"><div class="slider-header"><span class="slider-label">🧱 Tường AI</span></div><div class="slider-track" id="ai-wall-track">`;wallPosts.slice(0,20).forEach((p,i)=>{h+=makeWallItem(p,i)});h+='</div></div>';}
-  const HL_CONFIG={"world-cup":{name:"World Cup 2026",emoji:"🌍"},"premier-league":{name:"Premier League",emoji:"🏴"},"champions-league":{name:"Champions League",emoji:"⭐"},"la-liga":{name:"La Liga",emoji:"🇪🇸"},"serie-a":{name:"Serie A",emoji:"🇮🇹"},"bundesliga":{name:"Bundesliga",emoji:"🇩🇪"},"friendly":{name:"Giao hữu",emoji:"🤝"}};
-  for(const[key,cfg] of Object.entries(HL_CONFIG)){const vids=hlLeagues[key];if(!vids||!vids.length)continue;h+=`<div class="slider-wrap"><div class="slider-header"><span class="slider-label">${cfg.emoji} ${cfg.name}</span></div><div class="slider-track">`;vids.slice(0,8).forEach((a,i)=>{h+=`<div class="slider-item" onclick="openHighlightFeed('${key}',${i})"><div class="slider-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${esc(a.title)}</div></div>`});h+='</div></div>';}
-  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();
-  if(_wc2026Data)switchWCTab('news');
+  // 1. Render skeleton immediately so page never hangs
+  const home = document.getElementById('view-home');
+  home.innerHTML = '<div class="loading" id="home-loading" style="padding:20px;text-align:center;color:#777">⚡ Đang tải nhanh...</div>'
+    + '<div id="home-featured"></div>'
+    + '<div id="home-ai-compose"></div>'
+    + '<div id="home-hashtag"></div>'
+    + '<div id="home-livescore"></div>'
+    + '<div id="home-wc-shorts"></div>'
+    + '<div id="home-wc2026"></div>'
+    + '<div id="home-short-ai"></div>'
+    + '<div id="home-shorts"></div>'
+    + '<div id="home-wall"></div>'
+    + '<div id="home-highlights"></div>'
+    + '<div id="home-ai"></div>';
+
+  // 2. Fire all fetches in parallel (non-blocking)
+  const promises = {
+    featured: fetchWithTimeout('/api/livescore/featured',null,8000).then(r=>r.json()).catch(()=>null),
+    shorts: fetchWithTimeout('/api/shorts',null,8000).then(r=>r.json()).catch(()=>[]),
+    wall: fetchWithTimeout('/api/wall',null,8000).then(r=>r.json()).catch(()=>({posts:[]})),
+    hlLeagues: fetchWithTimeout('/api/highlights/leagues',null,10000).then(r=>r.json()).catch(()=>({})),
+    ai: fetchWithTimeout('/api/genk_ai',null,8000).then(r=>r.json()).catch(()=>[]),
+    wcData: fetchWithTimeout('/api/wc2026',null,10000).then(r=>r.json()).catch(()=>null),
+    wcHighlights: fetchWithTimeout('/api/wc2026/highlights',null,10000).then(r=>r.json()).catch(()=>[]),
+    vtvShorts: fetchWithTimeout('/api/vtv_nambo_shorts',null,10000).then(r=>r.json()).catch(()=>[]),
+  };
+
+  // 3. Fill each section as soon as its data arrives (no waiting for others)
+  promises.featured.then(d => {
+    if(d && d.home){
+      const sc=d.status==='live'?'':'upcoming';
+      const st=d.status==='live'?`🔴 ${d.minute||'LIVE'}`:`⏰ ${d.time}`;
+      document.getElementById('home-featured').innerHTML =
+        `<div class="featured-match" onclick="openMatch('${d.event_id}')"><div class="fm-league">${d.league}</div><div class="fm-teams"><div class="fm-team"><img src="${d.home_logo}" onerror="this.style.display='none'"><span>${d.home}</span></div><div class="fm-score">${d.score||'VS'}</div><div class="fm-team"><img src="${d.away_logo}" onerror="this.style.display='none'"><span>${d.away}</span></div></div><div class="fm-status ${sc}">${st}</div></div>`;
+    }
+  });
+  document.getElementById('home-ai-compose').innerHTML =
+    `<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>`;
+  document.getElementById('home-hashtag').innerHTML = '<div id="hashtag-box"></div>';
+  document.getElementById('home-livescore').innerHTML =
+    `<div class="ls-section"><div class="ls-header"><h3>⚽ Livescore</h3></div><div class="ls-tabs"><span class="ls-tab active" data-tab="today" onclick="loadLivescore('today')">📅 Hôm nay</span><span class="ls-tab" data-tab="live" onclick="loadLivescore('live')">🔴 Live</span><span class="ls-tab" data-tab="incoming" onclick="loadLivescore('incoming')">⏰ Sắp tới</span><span class="ls-tab" data-tab="results" onclick="loadLivescore('results')">✅ Kết quả</span><span class="ls-tab" data-tab="bxh_nha" onclick="loadLivescore('bxh_nha')">🏆 NHA</span><span class="ls-tab" data-tab="bxh_laliga" onclick="loadLivescore('bxh_laliga')">🏆 La Liga</span></div><div class="ls-content" id="ls-content"><div class="loading">Đang tải...</div></div></div>`;
+
+  // VTV Nam Bộ shorts (auto-sliding)
+  promises.vtvShorts.then(vtv => {
+    const arr = Array.isArray(vtv) ? vtv : [];
+    if(arr.length){
+      let th = '<div class="slider-wrap" id="vtv-shorts-wrap"><div class="slider-header"><span class="slider-label">📺 Khoảnh khắc World Cup</span><span class="slider-note">VTV Nam Bộ · Tự động</span></div><div class="slider-track" id="vtv-shorts-track">';
+      arr.slice(0,20).forEach((v,i)=>{
+        th += `<div class="slider-item shorts-item" onclick="openVTVShort(${i})"><div class="slider-thumb shorts-thumb">${v.img?`<img src="${esc(v.img)}" onerror="this.style.display='none'">`:''}<div class="card-play">▶</div></div><div class="slider-title">${esc(v.title||'VTV Nam Bộ')}</div></div>`;
+      });
+      th += '</div></div>';
+      document.getElementById('home-wc-shorts').innerHTML = th;
+      // Start auto-slide
+      setTimeout(()=>startAutoSlide('vtv-shorts-track'), 2000);
+    }
+  });
+
+  // World Cup 2026 section
+  promises.wcData.then(wcData => {
+    _wc2026Data = wcData;
+    document.getElementById('home-wc2026').innerHTML =
+      `<div id="wc2026-live-section" class="wc2026-section"><div class="wc-header"><h2>🏆 World Cup 2026</h2><span class="wc-live-badge">● LIVE</span></div><div class="wc-tabs"><span class="wc-tab active" onclick="switchWCTab('news')">📰 Tin tức</span><span class="wc-tab" onclick="switchWCTab('fixtures')">📅 Lịch thi đấu</span><span class="wc-tab" onclick="switchWCTab('standings')">🏆 BXH</span><span class="wc-tab" onclick="switchWCTab('highlights')">🎬 Highlight</span><span class="wc-tab" onclick="switchWCTab('stats')">📊 Thống kê</span></div><div class="wc-content" id="wc-content">${wcData?'<div class="loading">Đang tải...</div>':'<div class="loading">Chưa có dữ liệu</div>'}</div></div>`;
+    if(wcData) switchWCTab('news');
+  });
+
+  // Short AI
+  promises.wall.then(wall => {
+    _wallPosts = (wall && wall.posts) || [];
+    const aiShorts = _wallPosts.filter(p=>p.video);
+    if(aiShorts.length){
+      let h='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Short AI</span></div><div class="slider-track">';
+      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="${p.video}" muted preload="metadata"></video><div class="card-play">▶</div></div><div class="slider-title">${esc(p.title)}</div></div>`;});
+      h+='</div></div>';
+      document.getElementById('home-short-ai').innerHTML = h;
+    }
+  });
+
+  // Shorts Dân trí & SKĐS
+  promises.shorts.then(sh => {
+    _shortsData = interleaveShorts(Array.isArray(sh)?sh:[]);
+    if(_shortsData.length){
+      let h='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts Dân trí & SKĐS</span><span class="slider-note">Mới nhất · xen kẽ</span></div><div class="slider-track" id="shorts-track">';
+      _shortsData.slice(0,30).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="${a.img}">`:''}<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></div>';
+      document.getElementById('home-shorts').innerHTML = h;
+    }
+  });
+
+  // Wall posts
+  promises.wall.then(wall => {
+    const wp = (wall && wall.posts) || [];
+    if(wp.length){
+      let h=`<div class="slider-wrap" id="ai-wall-wrap"><div class="slider-header"><span class="slider-label">🧱 Tường AI</span></div><div class="slider-track" id="ai-wall-track">`;
+      wp.slice(0,20).forEach((p,i)=>{h+=makeWallItem(p,i);});
+      h+='</div></div>';
+      document.getElementById('home-wall').innerHTML = h;
+    }
+  });
+
+  // Highlights (including World Cup from xemlaibongda API)
+  promises.hlLeagues.then(hlLeagues => {
+    _hlLeagueData = hlLeagues;
+    const HL_CONFIG={"world-cup":{name:"World Cup 2026",emoji:"🌍"},"premier-league":{name:"Premier League",emoji:"🏴"},"champions-league":{name:"Champions League",emoji:"⭐"},"la-liga":{name:"La Liga",emoji:"🇪🇸"},"serie-a":{name:"Serie A",emoji:"🇮🇹"},"bundesliga":{name:"Bundesliga",emoji:"🇩🇪"},"friendly":{name:"Giao hữu",emoji:"🤝"}};
+    let h='';
+    for(const[key,cfg] of Object.entries(HL_CONFIG)){
+      const vids=hlLeagues[key];
+      if(!vids||!vids.length)continue;
+      h+=`<div class="slider-wrap"><div class="slider-header"><span class="slider-label">${cfg.emoji} ${cfg.name}</span></div><div class="slider-track">`;
+      vids.slice(0,8).forEach((a,i)=>{h+=`<div class="slider-item" onclick="openHighlightFeed('${key}',${i})"><div class="slider-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${esc(a.title)}</div></div>`;});
+      h+='</div></div>';
+    }
+    document.getElementById('home-highlights').innerHTML = h;
+  });
+
+  // AI apps
+  promises.ai.then(ai => {
+    if(ai && ai.length){
+      let 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('home-ai').innerHTML = h;
+    }
+  });
+
+  // 4. Start background tasks
+  loadLivescore('today');
+  loadHotTopics();
+
+  // 5. Remove loading indicator
+  setTimeout(()=>{
+    const el = document.getElementById('home-loading');
+    if(el) el.remove();
+  }, 500);
+}
+
+// === AUTO-SLIDE for VTV shorts ===
+let _autoSlideTimer = null;
+function startAutoSlide(trackId){
+  const track = document.getElementById(trackId);
+  if(!track) return;
+  if(_autoSlideTimer) clearInterval(_autoSlideTimer);
+  let pos = 0;
+  const itemWidth = 120; // shorts item flex-basis + gap
+  _autoSlideTimer = setInterval(()=>{
+    const maxScroll = track.scrollWidth - track.clientWidth;
+    if(maxScroll <= 0) return;
+    pos += itemWidth;
+    if(pos > maxScroll){ pos = 0; }
+    track.scrollTo({left: pos, behavior: 'smooth'});
+  }, 2500);
+}
+
+// === OPEN VTV SHORT ===
+function openVTVShort(idx){
+  // Fetch VTV shorts data and open in video view
+  fetchWithTimeout('/api/vtv_nambo_shorts').then(r=>r.json()).then(arr=>{
+    const v = arr[idx];
+    if(!v) return;
+    showView('view-video');
+    const vv = document.getElementById('view-video');
+    vv.innerHTML = `<button class="back-btn" onclick="switchCat('home')">← Quay lại</button>
+      <div class="article-view">
+        <h1 class="article-title">${esc(v.title||'VTV Nam Bộ')}</h1>
+        <div class="tiktok-container" style="height:80vh;max-height:600px">
+          <video src="https://www.youtube.com/embed/${v.id}?autoplay=1&rel=0" style="width:100%;height:100%;border:none" controls autoplay playsinline></video>
+        </div>
+      </div>`;
+  }).catch(()=>{});
 }
 
 // === WALL POST HELPERS ===
@@ -217,7 +356,43 @@ async function toggleComments(videoId,idx){const panel=document.getElementById('
 function renderInlineComments(panel,videoId,idx,cmts){let h='<div class="inline-cmt-header"><span>💬 Bình luận</span><button onclick="document.getElementById(\'cmt-inline-'+idx+'\').style.display=\'none\'">✕</button></div><div class="inline-cmt-list">';if(cmts.length){cmts.slice(-30).forEach(c=>{h+=`<div class="inline-cmt-item"><span class="inline-cmt-time">${c.time||''}</span>${esc(c.text)}</div>`;});}else{h+='<div style="color:#777;font-size:11px;padding:4px">Chưa có bình luận</div>';}h+=`</div><div class="inline-cmt-input"><input id="cmt-input-${idx}" placeholder="Viết bình luận..." onkeydown="if(event.key==='Enter')submitInlineCmt('${esc(videoId)}',${idx})"><button onclick="submitInlineCmt('${esc(videoId)}',${idx})">Gửi</button></div>`;panel.innerHTML=h;const list=panel.querySelector('.inline-cmt-list');if(list)list.scrollTop=list.scrollHeight;}
 async function submitInlineCmt(videoId,idx){const inp=document.getElementById('cmt-input-'+idx);if(!inp)return;const text=inp.value.trim();if(!text)return;inp.value='';inp.disabled=true;const cmts=await postComment(videoId,text);inp.disabled=false;const panel=document.getElementById('cmt-inline-'+idx);if(panel)renderInlineComments(panel,videoId,idx,cmts);const cc=document.getElementById('cc-'+idx);if(cc)cc.textContent=fmtNum(cmts.length);}
 function initTikTokFeed(){const feed=document.getElementById('tiktok-feed');if(!feed)return;const slides=feed.querySelectorAll('.tiktok-slide');let cur=-1;function act(i){if(i===cur)return;slides.forEach((sl,idx)=>{const v=sl.querySelector('video');const fr=sl.querySelector('iframe');if(idx===i){if(v&&v.dataset.hls&&!v._hls&&typeof Hls!=='undefined'&&Hls.isSupported()){const hls=new Hls();hls.loadSource(v.dataset.hls);hls.attachMedia(v);hls.on(Hls.Events.MANIFEST_PARSED,()=>v.play().catch(()=>{}));v._hls=hls}else if(v)v.play().catch(()=>{});if(fr&&!fr.src&&fr.dataset.ytSrc)fr.src=fr.dataset.ytSrc;const vid=sl.dataset.vid;if(vid&&!sl._viewed){sl._viewed=true;doInteract(vid,'view').then(j=>{if(j){const vc=document.getElementById('vc-'+idx);if(vc)vc.textContent=fmtNum(j.views);}});}}else{if(v){v.pause();if(v._hls){v._hls.destroy();v._hls=null}}if(fr&&fr.src)fr.src=''}});cur=i}let sT;feed.addEventListener('scroll',()=>{clearTimeout(sT);sT=setTimeout(()=>{const rect=feed.getBoundingClientRect(),ctr=rect.top+rect.height/2;let best=-1,bestD=1e9;slides.forEach((sl,i)=>{const d=Math.abs(sl.getBoundingClientRect().top+sl.getBoundingClientRect().height/2-ctr);if(d<bestD){bestD=d;best=i}});if(best>=0)act(best)},150)});setTimeout(()=>act(0),400);slides.forEach(sl=>{const v=sl.querySelector('video');if(v)v.addEventListener('click',e=>{e.preventDefault();v.paused?v.play().catch(()=>{}):v.pause()})});const ids=[...slides].map(sl=>sl.dataset.vid||'');loadCounters(ids)}
-async function openHighlightFeed(league,idx){showView('view-tiktok');const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải...</div>';let articles=(_hlLeagueData||{})[league]||[];if(!articles.length){try{articles=await fetch('/api/highlights/'+league).then(r=>r.json())}catch(e){articles=[]}}if(!articles.length){el.innerHTML='<div class="loading">Không có video</div>';return}const vids=[];const results=await Promise.all(articles.map(async(a,i)=>{try{const r=await fetch('/api/video_url?url='+encodeURIComponent(a.link));const v=await r.json();if(v&&v.src)return{...a,...v,_idx:i}}catch(e){}return null}));results.forEach(r=>{if(r)vids.push(r)});vids.sort((a,b)=>a._idx-b._idx);if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return}let ti=vids.findIndex(v=>v._idx===idx);if(ti<0)ti=0;const ordered=ti>0?[...vids.slice(ti),...vids.slice(0,ti)]:vids;let h=`<button class="back-btn" onclick="switchCat('home')">← Highlight</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;ordered.forEach((v,i)=>{const isYT=v.type==='youtube',isHLS=!isYT&&v.src?.includes('.m3u8'),poster=v.poster?` poster="${v.poster}"`:'';const vtag=isYT?`<iframe data-yt-src="${v.src}" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture"></iframe>`:isHLS?`<video playsinline preload="none"${poster} data-hls="${v.src}" loop controls></video>`:`<video playsinline preload="none"${poster} loop controls><source src="${v.src}" type="video/mp4"></video>`;const videoId='hl-'+league+'-'+(v.id||v._idx);h+=buildTikTokSlide({vtag,title:v.title,badge:'HL',badgeClass:'badge-fpt',videoId,idx:i,total:ordered.length,shareUrl:v.link||'',extraBtn:`<button class="tiktok-right-btn" onclick="event.stopPropagation();this.closest('.tiktok-slide').classList.toggle('ratio-wide')"><div class="icon">⬜</div><div class="count">16:9</div></button>`});});h+='</div></div>';el.innerHTML=h;initTikTokFeed();}
+async function openHighlightFeed(league,idx,directUrl){
+  showView('view-tiktok');
+  const el=document.getElementById('view-tiktok');
+  el.innerHTML='<div class="loading">Đang tải...</div>';
+  let articles=(_hlLeagueData||{})[league]||[];
+  // For world-cup league, use the new WC highlights API data which is already in _hlLeagueData
+  if(!articles.length && league==='world-cup'){
+    try{articles=await fetch('/api/wc2026/highlights').then(r=>r.json())}catch(e){articles=[]}
+  }
+  if(!articles.length){try{articles=await fetch('/api/highlights/'+league).then(r=>r.json())}catch(e){articles=[]}}
+  if(!articles.length){el.innerHTML='<div class="loading">Không có video</div>';return}
+  const vids=[];
+  // If articles have direct src (from xemlaibongda API), use it without fetching /api/video_url
+  const hasDirectSrc = articles[0] && articles[0].src;
+  if(hasDirectSrc){
+    articles.forEach((a,i)=>{vids.push({...a,_idx:i})});
+  } else {
+    const results=await Promise.all(articles.map(async(a,i)=>{try{const r=await fetch('/api/video_url?url='+encodeURIComponent(a.link));const v=await r.json();if(v&&v.src)return{...a,...v,_idx:i}}catch(e){}return null}));
+    results.forEach(r=>{if(r)vids.push(r)});
+  }
+  vids.sort((a,b)=>a._idx-b._idx);
+  if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return}
+  let ti=vids.findIndex(v=>v._idx===idx);
+  if(ti<0)ti=0;
+  const ordered=ti>0?[...vids.slice(ti),...vids.slice(0,ti)]:vids;
+  let h=`<button class="back-btn" onclick="switchCat('home')">← Highlight</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;
+  ordered.forEach((v,i)=>{
+    const isYT=v.type==='youtube';
+    const isHLS=!isYT&&(v.src||v.link||'').includes('.m3u8');
+    const poster=v.poster?` poster="${v.poster}"`:'';
+    const vtag=isYT?`<iframe data-yt-src="${v.src}" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture"></iframe>`:isHLS?`<video playsinline preload="none"${poster} data-hls="${v.src}" loop controls></video>`:`<video playsinline preload="none"${poster} loop controls><source src="${v.src}" type="video/mp4"></video>`;
+    const videoId='hl-'+league+'-'+(v.id||v._idx);
+    const shareUrl=v.link||v.src||'';
+    h+=buildTikTokSlide({vtag,title:v.title,badge:'HL',badgeClass:'badge-fpt',videoId,idx:i,total:ordered.length,shareUrl,extraBtn:`<button class="tiktok-right-btn" onclick="event.stopPropagation();this.closest('.tiktok-slide').classList.toggle('ratio-wide')"><div class="icon">⬜</div><div class="count">16:9</div></button>`});
+  });
+  h+='</div></div>';el.innerHTML=h;initTikTokFeed();
+}
 async function openYTShortsFeed(startIdx){showView('view-tiktok');const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải...</div>';const arts=_shortsData.length?_shortsData:await fetch('/api/shorts').then(r=>r.json()).catch(()=>[]);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)=>{const id=v.id||'';const src=`https://www.youtube.com/embed/${id}?autoplay=1&rel=0&playsinline=1`;const vtag=`<iframe data-yt-src="${src}" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture"></iframe>`;const badge=v.channel==='baosuckhoedoisongboyte'?'SKĐS':'Dân trí';const videoId='yt-'+id;h+=buildTikTokSlide({vtag,title:v.title,badge,badgeClass:'badge-fpt',videoId,idx:i,total:ordered.length,shareUrl:'https://youtube.com/watch?v='+id});});h+='</div></div>';el.innerHTML=h;initTikTokFeed();}
 async function openShortAIFeed(startIdx){showView('view-tiktok');const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải...</div>';const wall=(await fetch('/api/wall').then(r=>r.json()).catch(()=>({posts:[]}))).posts||[];const vids=wall.filter(p=>p.video);if(!vids.length){el.innerHTML='<div class="loading">Chưa có Short AI</div>';return}const ordered=startIdx>0?[...vids.slice(startIdx),...vids.slice(0,startIdx)]:vids;let h=`<button class="back-btn" onclick="switchCat('home')">← Short AI</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;ordered.forEach((p,i)=>{const vtag=`<video src="${p.video}" playsinline loop controls></video>`;const videoId='ai-'+(p.id||i);h+=buildTikTokSlide({vtag,title:p.title,badge:'AI',badgeClass:'badge-ai',videoId,idx:i,total:ordered.length,shareUrl:SPACE});});h+='</div></div>';el.innerHTML=h;initTikTokFeed();}
 async function readArticle(url){showView('view-article');const el=document.getElementById('view-article');el.innerHTML='<div class="loading">Đang tải...</div>';try{const r=await fetch('/api/article?url='+encodeURIComponent(url));const data=await r.json();if(data&&!data.error&&data.body&&data.body.length){_currentArticle={url,data};let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><h1 class="article-title">${esc(data.title)}</h1>`;if(data.summary)h+=`<div class="article-summary">${esc(data.summary)}</div>`;const seen={};data.body.forEach(b=>{if(b.type==='p')h+=`<p class="article-p">${b.text}</p>`;else if(b.type==='img'&&b.src&&!seen[b.src]){seen[b.src]=1;h+=`<img class="article-img" src="${esc(b.src)}" onerror="this.style.display='none'">`}else if(b.type==='heading')h+=`<h2 class="article-h2">${esc(b.text)}</h2>`});h+=`<div class="article-actions"><button class="primary" onclick="rewriteArticle()">🤖 Rewrite AI đăng tường</button><button onclick="doShare('${esc(data.title)}','${esc(url)}','${esc(data.og_image||'')}')">📤</button><button onclick="window.open('${esc(url)}','_blank')">🔗 Gốc</button></div><div class="article-ai-ask"><h3 style="font-size:14px;color:#5cb87a">🤖 Hỏi AI</h3><textarea id="ask-q" placeholder="Hỏi về bài viết..."></textarea><button onclick="askAI()">Hỏi</button><div id="ask-a" class="article-ai-answer"></div></div></div>`;el.innerHTML=h;window.scrollTo(0,0);return;}}catch(e){}el.innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="loading"><p>Không đọc được.</p><a href="${esc(url)}" target="_blank" style="color:#5cb87a">Mở gốc →</a></div>`;}