Fix: M3U player video tags now have allowFullscreen, x5-playsinline, webkit-playsinline for mobile fullscreen. Added PiP (Picture-in-Picture) button and togglePiP function. Enhanced toggleFeedFullscreen with screen.orientation.lock landscape on mobile. Fixed HLS live manifest - single segment replaced with 3-segment sliding window for continuous playback.

static/app_v2.js

@@ -1686,7 +1686,7 @@ async function doInteract(videoId,type){try{const r=await fetch('/api/v2/interac
 async function getInteractions(videoId){try{return await fetch('/api/v2/interactions?id='+encodeURIComponent(videoId)).then(r=>r.json());}catch(e){return{views:0,likes:0,comments:0};}}
 async function getComments(videoId){try{const j=await fetch('/api/v2/comments?id='+encodeURIComponent(videoId)).then(r=>r.json());return j.comments||[];}catch(e){return[];}}
 async function postComment(videoId,text){try{const j=await fetch('/api/v2/comment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id:videoId,text})}).then(r=>r.json());return j.comments||[];}catch(e){return[];}}
-function buildTikTokSlide(opts){return`<div class="tiktok-slide" data-vid="${esc(opts.videoId)}" data-slide-kind="${esc(opts.kind||'')}"${opts.attrs||''}><div class="slide-gesture" data-gesture="1"></div><div class="slide-status" id="stt-${esc(opts.videoId)}"></div>${opts.vtag}<div class="tiktok-bottom"><span class="badge ${opts.badgeClass||'badge-fpt'}">${opts.badge||''}</span><p class="tiktok-title">${esc(opts.title)}</p>${opts.desc?`<p class="tiktok-desc">${esc(opts.desc)}</p>`:''}</div><div class="tiktok-right"><button class="tiktok-right-btn" onclick="event.stopPropagation();doView('${esc(opts.videoId)}',this)"><div class="icon">👁</div><div class="count" id="vc-${opts.idx}">0</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();doLike('${esc(opts.videoId)}',this)"><div class="icon">❤️</div><div class="count" id="lc-${opts.idx}">0</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();toggleComments('${esc(opts.videoId)}',${opts.idx})"><div class="icon">💬</div><div class="count" id="cc-${opts.idx}">0</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();doShare('${esc(opts.title)}','${esc(opts.shareUrl||'')}','${esc(opts.shareImg||'')}','${esc(opts.postId||'')}')"><div class="icon">📤</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();toggle169View('${esc(opts.videoId)}','169-toggle-${opts.idx}')"><div class="icon" id="169-toggle-${opts.idx}">🖥️</div></button>${opts.extraBtn||''}<button class="tiktok-right-btn" onclick="event.stopPropagation();toggleFeedFullscreen('${esc(opts.videoId)}')"><div class="icon" id="fs-toggle-${opts.idx}">⛶</div></button></div><span class="tiktok-counter">${opts.idx+1}/${opts.total}</span><div class="inline-comments" id="cmt-inline-${opts.idx}" style="display:none"></div></div>`;}
+function buildTikTokSlide(opts){return`<div class="tiktok-slide" data-vid="${esc(opts.videoId)}" data-slide-kind="${esc(opts.kind||'')}"${opts.attrs||''}><div class="slide-gesture" data-gesture="1"></div><div class="slide-status" id="stt-${esc(opts.videoId)}"></div>${opts.vtag}<div class="tiktok-bottom"><span class="badge ${opts.badgeClass||'badge-fpt'}">${opts.badge||''}</span><p class="tiktok-title">${esc(opts.title)}</p>${opts.desc?`<p class="tiktok-desc">${esc(opts.desc)}</p>`:''}</div><div class="tiktok-right"><button class="tiktok-right-btn" onclick="event.stopPropagation();doView('${esc(opts.videoId)}',this)"><div class="icon">👁</div><div class="count" id="vc-${opts.idx}">0</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();doLike('${esc(opts.videoId)}',this)"><div class="icon">❤️</div><div class="count" id="lc-${opts.idx}">0</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();toggleComments('${esc(opts.videoId)}',${opts.idx})"><div class="icon">💬</div><div class="count" id="cc-${opts.idx}">0</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();doShare('${esc(opts.title)}','${esc(opts.shareUrl||'')}','${esc(opts.shareImg||'')}','${esc(opts.postId||'')}')"><div class="icon">📤</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();toggle169View('${esc(opts.videoId)}','169-toggle-${opts.idx}')"><div class="icon" id="169-toggle-${opts.idx}">🖥️</div></button>${opts.extraBtn||''}<button class="tiktok-right-btn" onclick="event.stopPropagation();togglePiP('${esc(opts.videoId)}')" title="Picture-in-Picture"><div class="icon" id="pip-toggle-${opts.idx}">⧉</div></button><button class="tiktok-right-btn" onclick="event.stopPropagation();toggleFeedFullscreen('${esc(opts.videoId)}')" title="Toàn màn hình"><div class="icon" id="fs-toggle-${opts.idx}">⛶</div></button></div><span class="tiktok-counter">${opts.idx+1}/${opts.total}</span><div class="inline-comments" id="cmt-inline-${opts.idx}" style="display:none"></div></div>`;}
 function toggleFeedFullscreen(videoId){
   const slide = videoId ? document.querySelector('.tiktok-slide[data-vid="'+videoId+'"]') : null;
   const feedEl = slide ? slide.closest('.tiktok-container') : document.querySelector('.tiktok-container');
@@ -1696,10 +1696,65 @@ function toggleFeedFullscreen(videoId){
   const icons = feedEl.querySelectorAll('[id^="fs-toggle-"]');
   icons.forEach(ic => { ic.textContent = on ? '✕' : '⛶'; });
   if(on){
+    // On mobile: lock to landscape for a true fullscreen experience
+    if(slide){
+      const vid = slide.querySelector('video');
+      if(vid){
+        // Try the native Fullscreen API first (works on mobile with allowFullscreen attr)
+        if(vid.requestFullscreen){
+          vid.requestFullscreen().catch(()=>{
+            // Fallback: try to enter Picture-in-Picture if fullscreen fails
+            if(vid.disablePictureInPicture === false && vid.requestPictureInPicture){
+              vid.requestPictureInPicture().catch(()=>{});
+            }
+          });
+        }
+        // Lock screen orientation on mobile browsers that support it
+        if(screen.orientation && screen.orientation.lock){
+          screen.orientation.lock('landscape').catch(()=>{});
+        }
+      }
+    }
     // keep the active slide centered & playable in full height
     setTimeout(()=>{ slide && slide.scrollIntoView({block:'nearest'}); }, 60);
   } else if(slide){
     slide.scrollIntoView({block:'nearest'});
+    // Restore portrait orientation on mobile
+    if(screen.orientation && screen.orientation.lock){
+      screen.orientation.lock('portrait-primary').catch(()=>{});
+    }
+    // Exit native fullscreen if active
+    if(document.fullscreenElement){
+      document.exitFullscreen().catch(()=>{});
+    }
+  }
+}
+
+// Picture-in-Picture toggle for M3U player
+function togglePiP(videoId){
+  const slide = videoId ? document.querySelector('.tiktok-slide[data-vid="'+videoId+'"]') : null;
+  if(!slide) return;
+  const vid = slide.querySelector('video');
+  if(!vid) return;
+  const icons = document.querySelectorAll('[id^="pip-toggle-"]');
+  const icon = icons[0];
+  if(!icon) return;
+  // Check if PiP is supported
+  if(!vid.disablePictureInPicture && vid.requestPictureInPicture){
+    if(document.pictureInPictureElement){
+      // Currently in PiP - exit
+      document.exitPictureInPicture().catch(()=>{});
+      if(icon) icon.textContent = '⧉';
+    } else {
+      // Enter PiP
+      vid.requestPictureInPicture().then(function(){
+        if(icon) icon.textContent = '❐';
+      }).catch(function(err){
+        toast('PiP không khả dụng: ' + (err.message || err));
+      });
+    }
+  } else {
+    toast('Trình duyệt không hỗ trợ Picture-in-Picture');
   }
 }
 async function doView(videoId,btn){const j=await doInteract(videoId,'view');if(j){const c=btn.querySelector('.count');if(c)c.textContent=fmtNum(j.views);}}
@@ -2839,7 +2894,7 @@ async function openM3UPlayer(chIdx){
     // mirror fallback for the same channel is done via the status retry.
     var purl = _m3uProxyUrl(firstStream);
     var vtag = '<div class="yt-thumb-wrap" style="'+(logo?('background-image:url(\''+esc(logo)+'\')'):'')+'">'
-      + '<video playsinline preload="none" data-hls="' + esc(purl) + '" loop'
+      + '<video playsinline x5-playsinline webkit-playsinline allowFullscreen preload="none" data-hls="' + esc(purl) + '" loop'
       + (logo ? ' poster="' + esc(logo) + '"' : '')
       + ' style="width:100%;height:100%;object-fit:contain;background:#000"></video></div>';
     var title = och.name || och.title || 'Kênh';
@@ -2957,7 +3012,7 @@ function playM3UStream(chIdx, streamIdx){
   window._m3uOrdered = ordered;
   var logo = ch.logo || '';
   var vtag = '<div class="yt-thumb-wrap" style="'+(logo?('background-image:url(\''+esc(logo)+'\')'):'')+'">'
-    + '<video playsinline preload="none" data-hls="' + esc(purl) + '" loop'
+    + '<video playsinline x5-playsinline webkit-playsinline allowFullscreen preload="none" data-hls="' + esc(purl) + '" loop'
     + (logo ? ' poster="' + esc(logo) + '"' : '')
     + ' style="width:100%;height:100%;object-fit:contain;background:#000"></video></div>';
   var _chJson = '';