feat(wall): FPT player opens scrollable feed interleaved with Short AI in newest-first order

static/app_v2.js

@@ -618,30 +618,113 @@ function _renderYTFeedInWall(){
 function openYTEmbedFeed(videoId, title){
   // Open a YouTube embed in the SAME TikTok-style viewer used by Short AI
   // (buildTikTokSlide + initTikTokFeed) — 100% match with Short AI player.
+  // Builds a SCROLLABLE feed that starts at this FPT video and lets the user
+  // swipe UP/DOWN to browse older FPT videos interleaved with Short AI content,
+  // in newest-first order.
   showView('view-tiktok');
   var el = document.getElementById('view-tiktok');
   if(!el){ return; }
-  var embedUrl = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1&rel=0&enablejsapi=1';
-  var vtag = '<div class="yt-thumb-wrap" style="background-image:url(\'https://i.ytimg.com/vi/' + videoId + '/hqdefault.jpg\')">'
-    + '<iframe data-yt-src="' + embedUrl + '" allowfullscreen '
-    + 'allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" '
-    + 'referrerpolicy="strict-origin-when-cross-origin"></iframe>'
-    + '</div>';
+
+  function _fptTs(v){
+    if(v && v.published){
+      var d = new Date(v.published);
+      if(!isNaN(d.getTime())) return d.getTime();
+    }
+    return 0;
+  }
+
+  // 1) Gather all playable items: FPT wall videos + Short AI posts (newest first)
+  var items = [];
+  var seenFpt = {};
+  function pushFpt(v){
+    if(!v) return;
+    var vid = v.videoId || v.id;
+    if(!vid || seenFpt[vid]) return;
+    seenFpt[vid] = 1;
+    items.push({
+      kind:'fpt',
+      videoId: vid,
+      title: v.title || 'Video',
+      img: v.img || 'https://i.ytimg.com/vi/' + vid + '/hqdefault.jpg',
+      ts: _fptTs(v)
+    });
+  }
+  (_ytFeedVideos||[]).forEach(pushFpt);
+  (_fptVideos||[]).forEach(pushFpt);
+  (_wallPosts||[]).forEach(function(p){
+    if(!p || !p.video) return;
+    var ts = parseInt(p.created||'0',10);
+    if(isNaN(ts) || !ts){ var d = new Date(p.created_str||''); ts = isNaN(d.getTime()) ? 0 : d.getTime(); }
+    items.push({
+      kind:'ai',
+      videoId: p.id || ('ai-' + items.length),
+      postId: p.id || '',
+      title: p.title || 'Video',
+      img: p.short_thumb || p.img || '',
+      text: (p.text && p.text !== p.title ? p.text : '').slice(0,400),
+      video: p.video,
+      ts: ts
+    });
+  });
+
+  // 2) Sort newest-first, then rotate so the clicked FPT video is first
+  items.sort(function(a,b){ return (b.ts||0) - (a.ts||0); });
+  var start = 0;
+  for(var i=0;i<items.length;i++){
+    if(items[i].kind==='fpt' && String(items[i].videoId)===String(videoId)){ start=i; break; }
+  }
+  var ordered = items.slice(start).concat(items.slice(0,start));
+  if(!ordered.length){
+    ordered = [{kind:'fpt', videoId:videoId, title:title||'Video', img:'https://i.ytimg.com/vi/'+videoId+'/hqdefault.jpg', ts:0}];
+  }
+
+  function fptVtag(it){
+    var emb = 'https://www.youtube.com/embed/' + esc(it.videoId) + '?autoplay=1&rel=0&enablejsapi=1';
+    return '<div class="yt-thumb-wrap" style="background-image:url(\'' + esc(it.img) + '\')">'
+      + '<iframe data-yt-src="' + emb + '" allowfullscreen '
+      + 'allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" '
+      + 'referrerpolicy="strict-origin-when-cross-origin"></iframe></div>';
+  }
+  function aiVtag(it){
+    var isYT = /youtube\.com\/embed|youtu\.be\/|youtube-nocookie|tiktok\.com\/embed|facebook\.com\/plugins|instagram\.com\/p\/.*\/embed|platform\.twitter\.com|player\.vimeo\.com/.test(it.video||'');
+    if(!it.video) return '';
+    return isYT
+      ? '<div class="yt-thumb-wrap" style="background-image:url(\'' + esc(it.img) + '\')"><iframe data-yt-src="' + esc(it.video) + '" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" referrerpolicy="strict-origin-when-cross-origin"></iframe></div>'
+      : '<video playsinline preload="none"' + (it.img ? ' poster="' + esc(it.img) + '"' : '') + ' src="' + esc(it.video) + '" loop></video>';
+  }
+
   var h = '<button class="back-btn" onclick="switchCat(\'home\')">← Tường AI</button>'
-    + '<div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">'
-    + buildTikTokSlide({
-        vtag: vtag,
-        title: title||'Video',
-        badge: 'Short AI',
-        badgeClass: 'badge-ai',
-        videoId: videoId,
-        idx: 0,
-        total: 1,
-        shareUrl: embedUrl,
-        postId: '',
-        extraBtn: ''
-      })
-    + '</div></div>';
+    + '<div class="tiktok-container"><div class="tiktok-feed" id="tiktok-feed">';
+  ordered.forEach(function(it, idx){
+    var vtag, badge, badgeClass, shareUrl, postId, desc, extraBtn;
+    if(it.kind === 'fpt'){
+      vtag = fptVtag(it);
+      badge = 'FPT Play'; badgeClass = 'badge-fpt';
+      shareUrl = 'https://www.youtube.com/watch?v=' + it.videoId;
+      postId = ''; desc = ''; extraBtn = '';
+    } else {
+      vtag = aiVtag(it);
+      badge = 'Short AI'; badgeClass = 'badge-ai';
+      shareUrl = it.video || '';
+      postId = it.postId || '';
+      desc = it.text || '';
+      extraBtn = '<button class="tiktok-right-btn" onclick="event.stopPropagation();shareVideoToApps(\'' + esc(it.video) + '\',\'' + esc(it.title) + '\')"><div class="icon">📥</div></button>';
+    }
+    h += buildTikTokSlide({
+      vtag: vtag,
+      title: it.title,
+      badge: badge,
+      badgeClass: badgeClass,
+      videoId: it.videoId + '-feed-' + String(idx),
+      idx: idx,
+      total: ordered.length,
+      shareUrl: shareUrl,
+      postId: postId,
+      desc: desc,
+      extraBtn: extraBtn || ''
+    });
+  });
+  h += '</div></div>';
   el.innerHTML = h;
   setTimeout(function(){ initTikTokFeed(); }, 200);
 }