fix: add BDP to /api/article + replace scroll-snap with manual touch swipe (guaranteed slide change detection)"

static/index.html

@@ -26,9 +26,10 @@
 .slider-item{flex:0 0 160px;scroll-snap-align:start;cursor:pointer;flex-shrink:0}.slider-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#333}.slider-thumb img{width:100%;height:100%;object-fit:cover}
 .slider-title{color:#ccc;font-size:10px;margin-top:3px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .shorts-item{flex:0 0 110px!important}.shorts-thumb{aspect-ratio:3/4!important;border-radius:8px!important}
-.tiktok-container{width:100%;height:80vh;max-height:680px;min-height:400px;background:#000}
-.tiktok-feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none}.tiktok-feed::-webkit-scrollbar{display:none}
-.tiktok-slide{height:80vh;max-height:680px;min-height:400px;scroll-snap-align:start;scroll-snap-stop:always;position:relative;background:#000;display:flex;align-items:center;justify-content:center}
+/* TikTok feed: NO scroll-snap. Manual swipe control. */
+.tiktok-container{width:100%;height:80vh;max-height:680px;min-height:400px;background:#000;overflow:hidden;position:relative}
+.tiktok-feed{position:absolute;top:0;left:0;right:0;transition:transform .3s ease}
+.tiktok-slide{width:100%;height:80vh;max-height:680px;min-height:400px;position:relative;background:#000;display:flex;align-items:center;justify-content:center}
 .tiktok-slide video{width:100%;height:100%;object-fit:cover}.tiktok-slide.contain-mode video{object-fit:contain}
 .tiktok-bottom{position:absolute;bottom:0;left:0;right:60px;padding:12px 10px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:3;opacity:0;pointer-events:none;transition:opacity .25s}
 .tiktok-right{position:absolute;right:8px;bottom:100px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:5;opacity:0;pointer-events:none;transition:opacity .25s}
@@ -67,20 +68,17 @@
 <div id="view-article" class="view"></div>
 <script>
 const SPACE=location.origin;
-let _tikData=[], _viewedSession=new Set();
+let _tikData=[],_viewedSession=new Set(),_curSlide=0,_totalSlides=0;
 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);}
-
 function srvView(aid){if(_viewedSession.has(aid))return;_viewedSession.add(aid);fetch('/api/view',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({aid})}).catch(()=>{});}
 function srvStats(aid){return fetch('/api/stats/'+aid).then(r=>r.json()).catch(()=>({views:0,shares:0,comments:[]}));}
 function srvComment(aid,name,text){return fetch('/api/comment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({aid,name,text})}).then(r=>r.json()).catch(()=>({comments:[]}));}
-
 async function doShare(title,articleUrl,img){
-  const res=await fetch('/api/register_share',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:articleUrl,title:title,img:img||''})}).then(r=>r.json()).catch(()=>null);
+  const res=await fetch('/api/register_share',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:articleUrl,title,img:img||''})}).then(r=>r.json()).catch(()=>null);
   const shareUrl=res?res.social_url:(SPACE+'/#/share/'+hid(articleUrl));
   if(navigator.share)navigator.share({title,url:shareUrl}).catch(()=>{});
   else navigator.clipboard.writeText(shareUrl).then(()=>alert('Đã sao chép link!')).catch(()=>{});
 }
-
 async function init(){
   const cats=await fetch('/api/categories').then(r=>r.json());
   let bar='<div class="cat active" data-cat="home">🏠</div><div class="cat" data-cat="video">🎬 Video</div>';
@@ -89,7 +87,7 @@ async function init(){
   document.querySelectorAll('.cat').forEach(t=>{t.onclick=()=>switchCat(t.dataset.cat);});
   await loadHome();
   const pending=localStorage.getItem('pending_article');
-  if(pending){localStorage.removeItem('pending_article');readArticle(pending,'vne');}
+  if(pending){localStorage.removeItem('pending_article');readArticle(pending);}
 }
 function switchCat(id){document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));document.querySelector(`[data-cat="${id}"]`)?.classList.add('active');document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));document.querySelectorAll('video').forEach(v=>v.pause());if(id==='home')document.getElementById('view-home').classList.add('active');else if(id==='video'){document.getElementById('view-video').classList.add('active');loadVideos();}else{document.getElementById('view-cat').classList.add('active');loadCat(id);}}
 function showView(id){document.querySelectorAll('.view').forEach(x=>x.classList.remove('active'));document.getElementById(id).classList.add('active');}
@@ -100,22 +98,17 @@ async function loadHome(){
   if(sh&&sh.length){h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">📱 Shorts</span></div><div class="slider-track">';sh.forEach(a=>{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=>{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';h+=`<div class="card" onclick="readArticle(\`${a.link}\`,\`${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></div>`;});h+='</div>';}
+  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';h+=`<div class="card" onclick="readArticle(\`${a.link}\`)"><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></div>`;});h+='</div>';}
   document.getElementById('view-home').innerHTML=h;
 }
-async function loadCat(id){const el=document.getElementById('view-cat');el.innerHTML='<div class="loading">Đang tải...</div>';const arts=await fetch('/api/category/'+id).then(r=>r.json());if(!arts.length){el.innerHTML='<div class="loading">Không có tin</div>';return;}let h='<div class="grid">';arts.forEach(a=>{const bg=a.source==='bbc'?'badge-bbc':a.source==='bdp'?'badge-bdp':'badge-vne';h+=`<div class="card" onclick="readArticle(\`${a.link}\`,\`${a.source}\`)"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${a.source}</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';el.innerHTML=h;}
+async function loadCat(id){const el=document.getElementById('view-cat');el.innerHTML='<div class="loading">Đang tải...</div>';const arts=await fetch('/api/category/'+id).then(r=>r.json());if(!arts.length){el.innerHTML='<div class="loading">Không có tin</div>';return;}let h='<div class="grid">';arts.forEach(a=>{const bg=a.source==='bbc'?'badge-bbc':a.source==='bdp'?'badge-bdp':'badge-vne';h+=`<div class="card" onclick="readArticle(\`${a.link}\`)"><div class="card-img">${a.img?`<img src="${a.img}">`:''}</div><div class="card-body"><span class="badge ${bg}">${a.source}</span><div class="card-title">${a.title}</div></div></div>`;});h+='</div>';el.innerHTML=h;}
 
-// ★ FIX: readArticle handles ALL sources in VNEWS reader (fetches article from /api/article)
-// Only opens external link if API returns error (unsupported source)
-async function readArticle(url,source){
+// Article reader: always tries to render in VNEWS. Never redirects externally.
+async function readArticle(url){
   showView('view-article');const el=document.getElementById('view-article');el.innerHTML='<div class="loading">Đang tải...</div>';
   const aid=hid(url);srvView(aid);
   const[data,stats]=await Promise.all([fetch('/api/article?url='+encodeURIComponent(url)).then(r=>r.json()),srvStats(aid)]);
-  if(!data||data.error){
-    // API doesn't support this source → show link to open externally
-    el.innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><p style="text-align:center;padding:40px"><a href="${url}" target="_blank" style="color:#5cb87a;font-size:14px">📰 Mở bài viết gốc</a></p></div>`;
-    return;
-  }
+  if(!data||data.error){el.innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><p style="text-align:center;padding:40px"><a href="${url}" target="_blank" style="color:#5cb87a;font-size:14px">📰 Mở bài viết</a></p></div>`;return;}
   const ogImg=data.og_image||'';
   let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="article-view"><h1 class="article-title">${data.title}</h1>`;
   if(data.summary)h+=`<div class="article-summary">${data.summary}</div>`;
@@ -131,6 +124,7 @@ async function submitCmt(aid){const n=document.getElementById('cn-'+aid),t=docum
 
 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=>{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=>{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';}
 
+// ══════ TIKTOK FEED: Manual swipe (no scroll-snap) ══════
 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>';
@@ -144,8 +138,8 @@ async function openTikTok(type,targetLink){
   if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return;}
   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">`;
+  _tikData=ordered;_curSlide=0;_totalSlides=ordered.length;
+  let h=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="tiktok-container" id="tiktok-ctn"><div class="tiktok-feed" id="tiktok-feed">`;
   ordered.forEach((v,i)=>{
     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>`;
@@ -166,59 +160,78 @@ ${vtag}
   });
   h+='</div></div>';
   h+=`<div class="topbar"><span>📋 ${ordered.length} video</span></div><div class="grid">`;
-  ordered.forEach((v,i)=>{const bg=v.source==='bdp'?'badge-bdp':'badge-24h';h+=`<div class="card" onclick="scrollToSlide(${i})"><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>`;});
+  ordered.forEach((v,i)=>{const bg=v.source==='bdp'?'badge-bdp':'badge-24h';h+=`<div class="card" onclick="goToSlide(${i})"><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>`;});
   h+='</div>';
   el.innerHTML=h;
   initFeed();
   ordered.forEach((v,i)=>{const aid=hid(v.link||v.title);srvStats(aid).then(s=>{const vc=document.getElementById('vc-'+i);if(vc)vc.textContent=s.views;const cc=document.getElementById('cc-'+i);if(cc)cc.textContent=s.comments.length;const sc=document.getElementById('sc-'+i);if(sc)sc.textContent=s.shares;renderVCmts(i,s.comments);});});
 }
 
-function scrollToSlide(i){
-  const feed=document.getElementById('tiktok-feed');const slide=document.getElementById('ts-'+i);
-  if(feed&&slide){feed.scrollTop=slide.offsetTop-feed.offsetTop;}
+// Go to specific slide (from grid card click)
+function goToSlide(i){
+  if(i<0||i>=_totalSlides)return;
+  _curSlide=i;
+  const feed=document.getElementById('tiktok-feed');
+  feed.style.transition='transform .3s ease';
+  feed.style.transform=`translateY(-${i*100}%)`;
+  activateSlide(i);
+}
+
+function activateSlide(idx){
+  // ★ CLOSE ALL COMMENT PANELS - guaranteed to run on every slide change
+  document.querySelectorAll('.cmt-panel.open').forEach(p=>p.classList.remove('open'));
+  const slides=document.querySelectorAll('.tiktok-slide');
+  slides.forEach((sl,i)=>{
+    const v=sl.querySelector('video');
+    if(i===idx){v.currentTime=0;v.play().catch(()=>setTimeout(()=>v.play().catch(()=>{}),200));srvView(sl.dataset.aid||'');}
+    else{v.pause();sl.classList.remove('show-ui');}
+  });
 }
 
 function shareVid(i){const v=_tikData[i];if(!v)return;doShare(v.title,v.link||'',v.poster||v.img||'');}
 function toggleCmt(i){const p=document.getElementById('cp-'+i);if(p)p.classList.toggle('open');}
-function closeAllCmtPanels(){document.querySelectorAll('.cmt-panel.open').forEach(p=>p.classList.remove('open'));}
 function renderVCmts(i,cmts){const el=document.getElementById('vcl-'+i);if(!el)return;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||!cmts.length)h='<p style="color:#666;font-size:11px">Chưa có bình luận</p>';el.innerHTML=h;}
 async function submitVCmt(i,aid){const n=document.getElementById('vcn-'+i),t=document.getElementById('vct-'+i);if(!n.value.trim()||!t.value.trim())return;const res=await srvComment(aid,n.value.trim(),t.value.trim());t.value='';renderVCmts(i,res.comments||[]);const cc=document.getElementById('cc-'+i);if(cc)cc.textContent=(res.comments||[]).length;}
 
-// ★ FIX: Use IntersectionObserver to detect which slide is visible
-// This works reliably with scroll-snap on all browsers including mobile
+// ★ MANUAL SWIPE: touch events on container, translateY on feed
 function initFeed(){
-  const feed=document.getElementById('tiktok-feed');if(!feed)return;
+  const ctn=document.getElementById('tiktok-ctn');
+  const feed=document.getElementById('tiktok-feed');
+  if(!ctn||!feed)return;
   const slides=feed.querySelectorAll('.tiktok-slide');
   // Init HLS
   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 activate(idx){
-    if(idx===cur)return;
-    // ★ CLOSE ALL COMMENT PANELS
-    closeAllCmtPanels();
-    slides.forEach((sl,i)=>{
-      const v=sl.querySelector('video');
-      if(i===idx){v.currentTime=0;v.play().catch(()=>setTimeout(()=>v.play().catch(()=>{}),300));srvView(sl.dataset.aid||'');}
-      else{v.pause();sl.classList.remove('show-ui');}
-    });
-    cur=idx;
-  }
-
-  // ★ FIX: IntersectionObserver — fires when a slide becomes >50% visible in the feed
-  const observer=new IntersectionObserver((entries)=>{
-    entries.forEach(entry=>{
-      if(entry.isIntersecting){
-        const idx=parseInt(entry.target.dataset.idx);
-        if(!isNaN(idx))activate(idx);
-      }
-    });
-  },{root:feed, threshold:0.5});
-  slides.forEach(sl=>observer.observe(sl));
-
-  // Also close comments on any scroll start (belt and suspenders)
-  feed.addEventListener('scroll',()=>{closeAllCmtPanels();},{passive:true});
-
-  setTimeout(()=>activate(0),400);
+  // Play first
+  setTimeout(()=>activateSlide(0),400);
+  // Touch swipe
+  let startY=0,deltaY=0,swiping=false;
+  ctn.addEventListener('touchstart',e=>{
+    // Don't swipe if touching comment panel
+    if(e.target.closest('.cmt-panel'))return;
+    startY=e.touches[0].clientY;deltaY=0;swiping=true;
+    feed.style.transition='none';
+  },{passive:true});
+  ctn.addEventListener('touchmove',e=>{
+    if(!swiping)return;
+    deltaY=e.touches[0].clientY-startY;
+    const offset=-_curSlide*100;
+    const pct=offset+(deltaY/ctn.offsetHeight)*100;
+    feed.style.transform=`translateY(${pct}%)`;
+  },{passive:true});
+  ctn.addEventListener('touchend',()=>{
+    if(!swiping)return;swiping=false;
+    feed.style.transition='transform .3s ease';
+    const threshold=ctn.offsetHeight*0.2;
+    if(deltaY<-threshold&&_curSlide<_totalSlides-1){_curSlide++;activateSlide(_curSlide);}
+    else if(deltaY>threshold&&_curSlide>0){_curSlide--;activateSlide(_curSlide);}
+    feed.style.transform=`translateY(-${_curSlide*100}%)`;
+  });
+  // Mouse wheel for desktop
+  ctn.addEventListener('wheel',e=>{
+    e.preventDefault();
+    if(e.deltaY>30&&_curSlide<_totalSlides-1){_curSlide++;goToSlide(_curSlide);}
+    else if(e.deltaY<-30&&_curSlide>0){_curSlide--;goToSlide(_curSlide);}
+  },{passive:false});
   // TAP: show/hide UI
   slides.forEach(sl=>{
     const v=sl.querySelector('video');let hideT;
@@ -234,7 +247,7 @@ function initFeed(){
     });
   });
 }
-function toggleMute(){const f=document.getElementById('tiktok-feed');if(!f)return;const vs=f.querySelectorAll('video');const m=!vs[0]?.muted;vs.forEach(v=>v.muted=m);f.querySelectorAll('.tiktok-unmute').forEach(b=>b.textContent=m?'🔇':'🔊');}
+function toggleMute(){document.querySelectorAll('.tiktok-slide video').forEach(v=>v.muted=!v.muted);document.querySelectorAll('.tiktok-unmute').forEach(b=>b.textContent=document.querySelector('.tiktok-slide video')?.muted?'🔇':'🔊');}
 function toggleContain(btn){const sl=btn.closest('.tiktok-slide');sl.classList.toggle('contain-mode');btn.textContent=sl.classList.contains('contain-mode')?'⤢':'⬇';}
 function seekV(i,s){const sl=document.getElementById('ts-'+i);if(sl){const v=sl.querySelector('video');if(v)v.currentTime=Math.max(0,Math.min(v.duration||9999,v.currentTime+s));}}