feat: video comments panel, right-side action buttons TikTok style, hash routing works, SEO share URL

static/index.html

@@ -4,9 +4,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
 <title>VNEWS - Tin Tức Việt Nam</title>
-<meta name="description" content="Tin tức tổng hợp VnExpress, BongDaPlus, 24h, BBC Tiếng Việt">
+<meta name="description" content="Tin tức tổng hợp VnExpress, BongDaPlus, 24h, BBC Tiếng Việt. Video highlight bóng đá, shorts 24h.">
 <meta property="og:title" content="VNEWS - Tin Tức Việt Nam">
-<meta property="og:description" content="Đọc tin tức, xem video highlight bóng đá, shorts 24h">
+<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">
@@ -32,16 +32,32 @@
 .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 Feed */
 .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-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:0;padding:12px 10px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:3}
+.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}
 .tiktok-title{color:#fff;font-size:12px;font-weight:600;margin:3px 0 5px;line-height:1.3}
-.tiktok-actions{display:flex;gap:6px;flex-wrap:wrap}.tiktok-btn{background:rgba(255,255,255,.12);color:#fff;border:none;padding:4px 10px;border-radius:12px;font-size:10px;cursor:pointer}
+.tiktok-seek{display:flex;gap:8px;margin-top:4px}
+.tiktok-seek button{background:rgba(255,255,255,.12);color:#fff;border:none;padding:4px 10px;border-radius:10px;font-size:10px;cursor:pointer}
 .tiktok-counter{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;padding:2px 7px;border-radius:8px;z-index:4}
 .tiktok-unmute{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;padding:4px 8px;border-radius:10px;cursor:pointer;z-index:4}
-.tiktok-cbtn{position:absolute;bottom:55px;right:8px;background:rgba(255,255,255,.12);color:#fff;border:none;padding:3px 8px;border-radius:8px;font-size:9px;cursor:pointer;z-index:4}
+/* Right side action buttons (TikTok style) */
+.tiktok-right{position:absolute;right:8px;bottom:100px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:5}
+.tiktok-right-btn{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;background:none;border:none;color:#fff}
+.tiktok-right-btn .icon{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:18px}
+.tiktok-right-btn .count{font-size:10px;color:#ddd}
+/* Comment panel */
+.cmt-panel{position:absolute;bottom:0;left:0;right:0;height:60%;background:#1a1a1a;z-index:30;transform:translateY(100%);transition:transform .3s;border-radius:14px 14px 0 0;padding:12px;overflow-y:auto}
+.cmt-panel.open{transform:translateY(0)}
+.cmt-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
+.cmt-panel-header h4{color:#fff;font-size:14px}.cmt-panel-close{background:none;border:none;color:#aaa;font-size:20px;cursor:pointer}
+.cmt-panel .cmt-item{background:#222;border-radius:6px;padding:7px;margin-bottom:5px}.cmt-panel .cmt-item b{color:#5cb87a;font-size:11px}.cmt-panel .cmt-item p{color:#ccc;font-size:12px;margin-top:2px}.cmt-panel .cmt-item small{color:#555;font-size:9px}
+.cmt-panel .cmt-form{display:flex;gap:5px;margin-top:8px;position:sticky;bottom:0;background:#1a1a1a;padding:6px 0}
+.cmt-panel .cmt-form input{flex:1;padding:8px;background:#222;border:1px solid #444;border-radius:8px;color:#eee;font-size:12px}
+.cmt-panel .cmt-form button{background:#2d8659;color:#fff;border:none;padding:8px 14px;border-radius:8px;font-size:12px;cursor:pointer}
+/* Others */
 .loading{text-align:center;padding:40px;color:#666;font-size:12px}
 .topbar{display:flex;justify-content:space-between;padding:6px 8px;color:#555;font-size:10px}
 .section-title{font-size:13px;font-weight:700;color:#5cb87a;margin:8px 0 4px;padding-left:8px;border-left:3px solid #5cb87a}
@@ -62,7 +78,7 @@ a.card-link{text-decoration:none;color:inherit}
 </style>
 </head>
 <body>
-<div class="header"><h1>📰 VNEWS</h1><p>Tin tức tổng hợp · Cập nhật liên tục</p></div>
+<div class="header"><h1>📰 VNEWS</h1><p>Tin tức · Video · Cập nhật liên tục</p></div>
 <div class="cats" id="cat-bar"></div>
 <div id="view-home" class="view active"><div class="loading">Đang tải...</div></div>
 <div id="view-cat" class="view"></div>
@@ -79,7 +95,16 @@ 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}
-function doShare(title,id){const url=SPACE+'/#/'+id;incS(id);if(navigator.share)navigator.share({title,url}).catch(()=>{});else navigator.clipboard.writeText(url).then(()=>alert('Đã sao chép: '+url)).catch(()=>{});}
+// Share uses /share/ route for SEO (server renders og:image)
+function doShare(title,id,img){
+  const url=SPACE+'/share/'+id+'?title='+encodeURIComponent(title)+'&img='+encodeURIComponent(img||'');
+  incS(id);
+  if(navigator.share)navigator.share({title,url}).catch(()=>{});
+  else navigator.clipboard.writeText(url).then(()=>alert('Đã sao chép!')).catch(()=>{});
+}
+// Save URL mapping for hash routing
+function saveUrl(aid,url){LS.set('u_'+aid,url);}
+function getUrl(aid){return LS.get('u_'+aid);}
 
 async function init(){
   _cats=await fetch('/api/categories').then(r=>r.json());
@@ -88,13 +113,23 @@ async function init(){
   document.getElementById('cat-bar').innerHTML=bar;
   document.querySelectorAll('.cat').forEach(t=>{t.onclick=()=>switchCat(t.dataset.cat);});
   await loadHome();
-  // Handle hash routing on page load
   handleHash();
 }
 function handleHash(){
   const h=location.hash;if(!h||h.length<4)return;
-  // Future: parse hash and open corresponding article/video
+  const aid=h.replace('#/','');
+  const url=getUrl(aid);
+  if(url){
+    // Determine source from URL
+    let src='vne';
+    if(url.includes('bbc.com'))src='bbc';
+    else if(url.includes('bongdaplus'))src='bdp';
+    else if(url.includes('24h.com'))src='24h';
+    readArticle(url,src);
+  }
 }
+window.addEventListener('hashchange',handleHash);
+
 function switchCat(id){
   document.querySelectorAll('.cat').forEach(x=>x.classList.remove('active'));
   document.querySelector(`[data-cat="${id}"]`)?.classList.add('active');
@@ -109,19 +144,16 @@ 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='';
-  // Shorts
   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>';
   }
-  // Highlights
   if(hl&&hl.length){
-    h+='<div class="slider-wrap"><div class="slider-header"><span class="slider-label">🎬 Highlight Bóng Đá</span></div><div class="slider-track">';
+    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>';
   }
-  // News
   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">`;
@@ -137,25 +169,18 @@ async function loadCat(id){const el=document.getElementById('view-cat');el.inner
 async function readArticle(url,source){
   if(source!=='vne'&&source!=='bbc'){window.open(url,'_blank');return;}
   showView('view-article');const el=document.getElementById('view-article');el.innerHTML='<div class="loading">Đang tải...</div>';
-  const aid=hid(url);incV(aid);location.hash='#/'+aid;
+  const aid=hid(url);incV(aid);saveUrl(aid,url);location.hash='#/'+aid;
   const data=await fetch('/api/article?url='+encodeURIComponent(url)).then(r=>r.json());
   if(!data||data.error){el.innerHTML=`<button class="back-btn" onclick="switchCat('home')">← Quay lại</button><div class="loading"><a href="${url}" target="_blank" style="color:#5cb87a">Mở link gốc</a></div>`;return;}
   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>`;
   data.body.forEach(b=>{if(b.type==='p')h+=`<p class="article-p">${b.text}</p>`;else if(b.type==='img')h+=`<img class="article-img" src="${b.src}">`;else if(b.type==='heading')h+=`<h2 class="article-h2">${b.text}</h2>`;});
-  h+=`<div class="article-actions"><button onclick="doShare('${data.title.replace(/'/g,"\\'")}','${aid}')">📤 Chia sẻ (${getS(aid)})</button><button>👁 ${getV(aid)}</button><button>💬 ${getCmts(aid).length}</button></div>`;
+  h+=`<div class="article-actions"><button onclick="doShare('${data.title.replace(/'/g,"\\'")}','${aid}','')">📤 Chia sẻ (${getS(aid)})</button><button>👁 ${getV(aid)}</button><button>💬 ${getCmts(aid).length}</button></div>`;
   h+=renderCmtSection(aid);
   h+='</div>';el.innerHTML=h;window.scrollTo(0,0);
 }
 
-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 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';}
@@ -169,20 +194,43 @@ async function openTikTok(type,startIdx){
   if(!vids.length){el.innerHTML='<div class="loading">Không tìm thấy video</div>';return;}
   const ti=vids.findIndex(v=>v._idx===startIdx);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">`;
-  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>`;const bg=v.source==='bdp'?'badge-bdp':'badge-24h';const lb=v.source==='bdp'?'BDP':'24h';
-    h+=`<div class="tiktok-slide" id="tslide-${i}"><div style="display:none" data-aid="${aid}"></div>${vtag}<div class="tiktok-bottom"><span class="badge ${bg}">${lb}</span><p class="tiktok-title">${v.title}</p><div class="tiktok-actions"><button class="tiktok-btn" onclick="doShare('${v.title.replace(/'/g,"\\'")}','${aid}')">📤 ${getS(aid)}</button><button class="tiktok-btn">👁 ${getV(aid)}</button><button class="tiktok-btn" onclick="seekV(${i},-10)">⏪</button><button class="tiktok-btn" onclick="seekV(${i},10)">⏩</button></div></div><button class="tiktok-cbtn" onclick="toggleContain(this)">⬇</button><div class="tiktok-unmute" onclick="toggleMute()">🔇</div><span class="tiktok-counter">${i+1}/${ordered.length}</span></div>`;
+  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>`;
+    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}">
+${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)">⬇ Contain</button></div></div>
+<div class="tiktok-right">
+<button class="tiktok-right-btn" onclick="event.stopPropagation();incV('${aid}');this.querySelector('.count').textContent=getV('${aid}')"><div class="icon">👁</div><div class="count">${getV(aid)}</div></button>
+<button class="tiktok-right-btn" onclick="event.stopPropagation();toggleCmtPanel(${i})"><div class="icon">💬</div><div class="count">${getCmts(aid).length}</div></button>
+<button class="tiktok-right-btn" onclick="event.stopPropagation();doShare('${v.title.replace(/'/g,"\\'")}','${aid}','${v.poster||''}');this.querySelector('.count').textContent=getS('${aid}')"><div class="icon">📤</div><div class="count">${getS(aid)}</div></button>
+</div>
+<div class="tiktok-unmute" onclick="toggleMute()">🔇</div>
+<span class="tiktok-counter">${i+1}/${ordered.length}</span>
+<div class="cmt-panel" id="cpanel-${i}">
+<div class="cmt-panel-header"><h4>💬 Bình luận</h4><button class="cmt-panel-close" onclick="toggleCmtPanel(${i})">✕</button></div>
+<div id="vcl-${i}"></div>
+<div class="cmt-form"><input id="vcn-${i}" placeholder="Tên"><input id="vct-${i}" placeholder="Bình luận..."><button onclick="submitVCmt(${i},'${aid}')">Gửi</button></div>
+</div>
+</div>`;
   });
   h+='</div></div>';
   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();
-  // Increment view for first video
-  if(ordered[0]){const aid=hid(ordered[0].link||ordered[0].title);incV(aid);}
+  // Render comments for all slides
+  ordered.forEach((v,i)=>{const aid=hid(v.link||v.title);renderVCmts(i,aid);});
 }
 
-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 aidEl=sl.querySelector('[data-aid]');if(aidEl)incV(aidEl.dataset.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();});});}
+function toggleCmtPanel(i){const p=document.getElementById('cpanel-'+i);p.classList.toggle('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);}
+
+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));incV(sl.dataset.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();});});}
 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 toggleContain(btn){const sl=btn.closest('.tiktok-slide');sl.classList.toggle('contain-mode');btn.textContent=sl.classList.contains('contain-mode')?'⤢':'⬇';}
+function toggleContain(btn){const sl=btn.closest('.tiktok-slide');sl.classList.toggle('contain-mode');btn.textContent=sl.classList.contains('contain-mode')?'⤢ 1:1':'⬇ Contain';}
 function seekV(i,s){const sl=document.getElementById('tslide-'+i);if(sl){const v=sl.querySelector('video');if(v)v.currentTime=Math.max(0,Math.min(v.duration||9999,v.currentTime+s));}}
 
 init();