fix: share URL points to VNEWS with SEO, highlight passes link not index, close cmt on scroll, persist note

static/index.html

@@ -6,7 +6,6 @@
 <title>VNEWS - Tin Tức Việt Nam</title>
 <meta name="description" content="Tin tức tổng hợp VnExpress, BongDaPlus, 24h, BBC. Video highlight bóng đá.">
 <meta property="og:title" content="VNEWS - Tin Tức Việt Nam">
-<meta property="og:description" content="Đọc tin, xem video highlight bóng đá, shorts 24h">
 <meta property="og:image" content="https://s1.vnecdn.net/vnexpress/restruct/i/v9505/logo_default.jpg">
 <meta property="og:type" content="website">
 <link rel="canonical" href="https://bep40-vnews.hf.space">
@@ -72,19 +71,18 @@ a.card-link{text-decoration:none;color:inherit}
 const SPACE=location.origin;let _cats=[],_tikData=[],_viewed=new Set();
 const LS={get(k){try{return JSON.parse(localStorage.getItem(k))}catch{return null}},set(k,v){try{localStorage.setItem(k,JSON.stringify(v))}catch{}}};
 function hid(s){let h=0;for(let i=0;i<s.length;i++){h=((h<<5)-h)+s.charCodeAt(i);h|=0;}return Math.abs(h).toString(36).slice(0,10);}
-// View: only count ONCE per video per page session
 function incV(id){if(_viewed.has(id))return getV(id);_viewed.add(id);let v=(LS.get('v_'+id)||0)+1;LS.set('v_'+id,v);return v;}
 function getV(id){return LS.get('v_'+id)||0}
 function getCmts(id){return LS.get('c_'+id)||[]}
 function addCmt(id,n,t){let c=getCmts(id);c.push({n,t,d:new Date().toLocaleString('vi-VN')});LS.set('c_'+id,c);return c;}
 function incS(id){let v=(LS.get('s_'+id)||0)+1;LS.set('s_'+id,v);return v;}
 function getS(id){return LS.get('s_'+id)||0}
-// Share: uses /s?url=...&title=...&img=... for SEO og:image
+// Share: URL points to THIS site (/s route) with SEO og:image, then redirects back here to open article
 function doShare(title,articleUrl,img){
   const shareUrl=SPACE+'/s?url='+encodeURIComponent(articleUrl)+'&title='+encodeURIComponent(title)+'&img='+encodeURIComponent(img||'');
   const aid=hid(articleUrl||title);incS(aid);
   if(navigator.share)navigator.share({title,url:shareUrl}).catch(()=>{});
-  else navigator.clipboard.writeText(shareUrl).then(()=>alert('Đã sao chép link!')).catch(()=>{});
+  else navigator.clipboard.writeText(shareUrl).then(()=>alert('Đã sao chép!')).catch(()=>{});
 }
 
 async function init(){
@@ -94,7 +92,7 @@ async function init(){
   document.getElementById('cat-bar').innerHTML=bar;
   document.querySelectorAll('.cat').forEach(t=>{t.onclick=()=>switchCat(t.dataset.cat);});
   await loadHome();
-  // Check if redirected from share link
+  // Handle redirect from share link
   const pending=localStorage.getItem('pending_article');
   if(pending){localStorage.removeItem('pending_article');let src='vne';if(pending.includes('bbc.com'))src='bbc';readArticle(pending,src);}
 }
@@ -104,8 +102,8 @@ function showView(id){document.querySelectorAll('.view').forEach(x=>x.classList.
 async function loadHome(){
   const[news,hl,sh]=await Promise.all([fetch('/api/homepage').then(r=>r.json()),fetch('/api/highlights').then(r=>r.json()),fetch('/api/shorts').then(r=>r.json())]);
   let h='';
-  if(sh&&sh.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts 24h</span></div><div class="slider-track">';sh.forEach((a,i)=>{h+=`<div class="slider-item shorts-item" onclick="openTikTok('shorts',${i})"><div class="slider-thumb shorts-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
-  if(hl&&hl.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Highlight</span></div><div class="slider-track">';hl.forEach((a,i)=>{h+=`<div class="slider-item" onclick="openTikTok('highlights',${i})"><div class="slider-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
+  if(sh&&sh.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts 24h</span></div><div class="slider-track">';sh.forEach((a,i)=>{h+=`<div class="slider-item shorts-item" onclick="openTikTok('shorts','${a.link}')"><div class="slider-thumb shorts-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
+  if(hl&&hl.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Highlight</span></div><div class="slider-track">';hl.forEach((a,i)=>{h+=`<div class="slider-item" onclick="openTikTok('highlights','${a.link}')"><div class="slider-thumb">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="slider-title">${a.title}</div></div>`;});h+='</div></div>';}
   const groups={};news.forEach(a=>{if(!groups[a.group])groups[a.group]=[];groups[a.group].push(a);});
   for(const[g,arts] of Object.entries(groups)){h+=`<div class="section-title">${g}</div><div class="grid">`;arts.slice(0,6).forEach(a=>{const bg=a.source==='bbc'?'badge-bbc':a.source==='bdp'?'badge-bdp':'badge-vne';const lb=a.source==='bbc'?'BBC':a.source==='bdp'?'BDP':'VnE';const aid=hid(a.link);h+=`<div class="card" onclick="readArticle('${a.link.replace(/'/g,"\\'")}','${a.source}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${lb}</span><div class="card-title">${a.title}</div><div class="card-meta"><span>👁${getV(aid)}</span><span>💬${getCmts(aid).length}</span></div></div></div>`;});h+='</div>';}
   document.getElementById('view-home').innerHTML=h;
@@ -128,17 +126,18 @@ async function readArticle(url,source){
 function renderCmtSection(aid){const cmts=getCmts(aid);let h=`<div class="cmt-section"><h3>💬 Bình luận (${cmts.length})</h3><div id="cl-${aid}">`;cmts.slice().reverse().forEach(c=>{h+=`<div class="cmt-item"><b>${c.n}</b> <small>${c.d}</small><p>${c.t}</p></div>`;});if(!cmts.length)h+='<p style="color:#666;font-size:11px">Chưa có bình luận</p>';h+=`</div><div class="cmt-form"><input id="cn-${aid}" placeholder="Tên"><input id="ct-${aid}" placeholder="Bình luận..."><button onclick="submitCmt('${aid}')">Gửi</button></div></div>`;return h;}
 function submitCmt(aid){const n=document.getElementById('cn-'+aid),t=document.getElementById('ct-'+aid);if(!n.value.trim()||!t.value.trim())return;addCmt(aid,n.value.trim(),t.value.trim());t.value='';const cmts=getCmts(aid);let h='';cmts.slice().reverse().forEach(c=>{h+=`<div class="cmt-item"><b>${c.n}</b> <small>${c.d}</small><p>${c.t}</p></div>`;});document.getElementById('cl-'+aid).innerHTML=h;}
 
-async function loadVideos(){const el=document.getElementById('view-video');if(el.dataset.loaded)return;el.innerHTML='<div class="loading">Đang tải...</div>';const[hl,bdp]=await Promise.all([fetch('/api/highlights').then(r=>r.json()),fetch('/api/bdp_videos').then(r=>r.json())]);let h='<div class="section-title">🎬 Highlight</div><div class="grid">';hl.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('highlights',${i})"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-24h">24h</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';if(bdp.length){h+='<div class="section-title">⚽ BDP</div><div class="grid">';bdp.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('bdp',${i})"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-bdp">BDP</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';}el.innerHTML=h;el.dataset.loaded='1';}
+async function loadVideos(){const el=document.getElementById('view-video');if(el.dataset.loaded)return;el.innerHTML='<div class="loading">Đang tải...</div>';const[hl,bdp]=await Promise.all([fetch('/api/highlights').then(r=>r.json()),fetch('/api/bdp_videos').then(r=>r.json())]);let h='<div class="section-title">🎬 Highlight</div><div class="grid">';hl.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('highlights','${a.link}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-24h">24h</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';if(bdp.length){h+='<div class="section-title">⚽ BDP</div><div class="grid">';bdp.forEach((a,i)=>{h+=`<div class="card" onclick="openTikTok('bdp','${a.link}')"><div class="card-img">${a.img?`<img src="${a.img}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge badge-bdp">BDP</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';}el.innerHTML=h;el.dataset.loaded='1';}
 
-async function openTikTok(type,startIdx){
+// openTikTok now receives articleLink instead of index — matches by link
+async function openTikTok(type, targetLink){
   showView('view-tiktok');document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));
   const el=document.getElementById('view-tiktok');el.innerHTML='<div class="loading">Đang tải video...</div>';
   let articles;if(type==='shorts')articles=await fetch('/api/shorts').then(r=>r.json());else if(type==='highlights')articles=await fetch('/api/highlights').then(r=>r.json());else articles=await fetch('/api/bdp_videos').then(r=>r.json());
   const vids=[];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){if(v.all_parts&&v.all_parts.length>1){v.all_parts.forEach((p,pi)=>{vids.push({...a,src:p,poster:v.poster,_idx:i,_part:pi,title:a.title+` (P${pi+1})`});});}else{vids.push({...a,...v,_idx:i,_part:0});}}}catch(e){}}));
   vids.sort((a,b)=>a._idx-b._idx||a._part-b._part);
   if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return;}
-  // Put clicked video first: find first vid with matching _idx
-  const ti=vids.findIndex(v=>v._idx===startIdx);
+  // Find target by LINK (not index) — guaranteed correct match
+  const ti=vids.findIndex(v=>v.link===targetLink);
   const ordered=ti>0?[...vids.slice(ti),...vids.slice(0,ti)]:vids;
   _tikData=ordered;
   let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">`;
@@ -146,7 +145,7 @@ async function openTikTok(type,startIdx){
     const aid=hid(v.link||v.title);const isHLS=v.src.includes('.m3u8');const poster=v.poster?` poster="${v.poster}"`:'';
     const vtag=isHLS?`<video playsinline preload="metadata"${poster} data-hls="${v.src}" muted loop></video>`:`<video playsinline preload="metadata"${poster} muted loop><source src="${v.src}" type="video/mp4"></video>`;
     const bg=v.source==='bdp'?'badge-bdp':'badge-24h';const lb=v.source==='bdp'?'BDP':'24h';
-    h+=`<div class="tiktok-slide" id="tslide-${i}" data-aid="${aid}" data-link="${v.link||''}" data-img="${v.poster||v.img||''}">
+    h+=`<div class="tiktok-slide" id="tslide-${i}" data-aid="${aid}" data-link="${(v.link||'').replace(/"/g,'')}" data-img="${(v.poster||v.img||'').replace(/"/g,'')}">
 ${vtag}
 <div class="tiktok-bottom"><span class="badge ${bg}">${lb}</span><p class="tiktok-title">${v.title}</p>
 <div class="tiktok-seek"><button onclick="seekV(${i},-10)">⏪ 10s</button><button onclick="seekV(${i},10)">10s ⏩</button><button onclick="toggleContain(this)">⬇</button></div></div>
@@ -164,15 +163,19 @@ ${vtag}
   h+=`<div class="topbar"><span>📋 Danh sách (${ordered.length})</span></div><div class="grid">`;
   ordered.forEach((v,i)=>{const bg=v.source==='bdp'?'badge-bdp':'badge-24h';h+=`<a href="#tslide-${i}" class="card-link"><div class="card"><div class="card-img">${(v.img||v.poster)?`<img src="${v.img||v.poster}">`:''}<div class="card-play">▶</div></div><div class="card-body"><span class="badge ${bg}">${v.source==='bdp'?'BDP':'24h'}</span><div class="card-title">${v.title}</div></div></div></a>`;});
   h+='</div>';el.innerHTML=h;initFeed();
-  ordered.forEach((v,i)=>{const aid=hid(v.link||v.title);renderVCmts(i,aid);});
+  ordered.forEach((v,i)=>{renderVCmts(i,hid(v.link||v.title));});
 }
 function shareVid(i){const v=_tikData[i];if(!v)return;doShare(v.title,v.link||'',v.poster||v.img||'');const aid=hid(v.link||v.title);document.getElementById('sc-'+i).textContent=getS(aid);}
-function toggleCmtPanel(i){document.getElementById('cpanel-'+i).classList.toggle('open');}
+function toggleCmtPanel(i){const p=document.getElementById('cpanel-'+i);p.classList.toggle('open');}
+function closeAllCmtPanels(){document.querySelectorAll('.cmt-panel.open').forEach(p=>p.classList.remove('open'));}
 function renderVCmts(i,aid){const el=document.getElementById('vcl-'+i);if(!el)return;const cmts=getCmts(aid);let h='';cmts.slice().reverse().forEach(c=>{h+=`<div class="cmt-item"><b>${c.n}</b> <small>${c.d}</small><p>${c.t}</p></div>`;});if(!cmts.length)h='<p style="color:#666;font-size:11px">Chưa có bình luận</p>';el.innerHTML=h;}
 function submitVCmt(i,aid){const n=document.getElementById('vcn-'+i),t=document.getElementById('vct-'+i);if(!n.value.trim()||!t.value.trim())return;addCmt(aid,n.value.trim(),t.value.trim());t.value='';renderVCmts(i,aid);document.getElementById('cc-'+i).textContent=getCmts(aid).length;}
 
 function initFeed(){const feed=document.getElementById('tiktok-feed');if(!feed)return;const slides=feed.querySelectorAll('.tiktok-slide');slides.forEach(sl=>{const v=sl.querySelector('video[data-hls]');if(v&&!v._h){v._h=1;const s=v.dataset.hls;if(v.canPlayType('application/vnd.apple.mpegURL'))v.src=s;else if(Hls.isSupported()){const h=new Hls();h.loadSource(s);h.attachMedia(v);}else v.src=s;}});
-let cur=-1;function act(idx){if(idx===cur)return;slides.forEach((sl,i)=>{const v=sl.querySelector('video');if(i===idx){v.currentTime=0;v.play().catch(()=>setTimeout(()=>v.play().catch(()=>{}),500));const aid=sl.dataset.aid;if(aid){incV(aid);const vc=document.getElementById('vc-'+i);if(vc)vc.textContent=getV(aid);}}else v.pause();});cur=idx;}
+let cur=-1;function act(idx){if(idx===cur)return;
+  // Close comment panels when switching slides
+  closeAllCmtPanels();
+  slides.forEach((sl,i)=>{const v=sl.querySelector('video');if(i===idx){v.currentTime=0;v.play().catch(()=>setTimeout(()=>v.play().catch(()=>{}),500));const aid=sl.dataset.aid;if(aid){incV(aid);const vc=document.getElementById('vc-'+i);if(vc)vc.textContent=getV(aid);}}else v.pause();});cur=idx;}
 let sT;feed.addEventListener('scroll',()=>{clearTimeout(sT);sT=setTimeout(()=>{const rect=feed.getBoundingClientRect();const 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),500);
 slides.forEach(sl=>{const v=sl.querySelector('video');v.addEventListener('click',e=>{e.preventDefault();v.paused?v.play().catch(()=>{}):v.pause();});});}