play currently focused video in tiktok mode

frontend/js/feed.js

@@ -211,7 +211,7 @@ App.feed = App.feed || {};
         if (scroller) scroller.scrollTop = 0;
     };
 
-    App.feed.open = function() {
+    App.feed.open = function(startVideoId) {
         const container = document.getElementById('feed-view');
         const scroller = getScroller();
         if (!container || !scroller) return;
@@ -247,14 +247,21 @@ App.feed = App.feed || {};
             if (sentinel) sentinelObserver.observe(sentinel);
         }
 
-        App.feed.renderSlides();
-        document.querySelectorAll('.feed-slide').forEach((slide) => observer.observe(slide));
-
         container.classList.add('open');
         container.setAttribute('aria-hidden', 'false');
         document.body.classList.add('feed-mode-open');
         document.body.style.overflow = 'hidden';
 
+        App.feed.renderSlides();
+
+        if (startVideoId != null) {
+            const targetSlide = Array.from(scroller.querySelectorAll('.feed-slide'))
+                .find((slide) => slide.dataset.videoId === String(startVideoId));
+            if (targetSlide) scroller.scrollTop = targetSlide.offsetTop;
+        }
+
+        document.querySelectorAll('.feed-slide').forEach((slide) => observer.observe(slide));
+
         App.feed.updateToggleButton();
         App.feed.updateMuteButton();
     };
@@ -276,7 +283,10 @@ App.feed = App.feed || {};
         if (state.feedOpen) {
             App.feed.close();
         } else {
-            App.feed.open();
+            const focusedId = App.videos && typeof App.videos.getFocusedVideoId === 'function'
+                ? App.videos.getFocusedVideoId()
+                : null;
+            App.feed.open(focusedId);
         }
     };
 

frontend/js/videos.js

@@ -282,6 +282,7 @@ App.videos = App.videos || {};
 
             const card = document.createElement('div');
             card.className = 'video-card';
+            card.dataset.videoId = v.id;
             const durationText = App.videos.formatDuration(v.duration);
             const favoriteKey = App.favorites.getKey(v);
             const uploaderText = v.uploader || '';
@@ -403,6 +404,31 @@ App.videos = App.videos || {};
         App.videos.ensureViewportFilled();
     };
 
+    // Finds whichever rendered video card is closest to the viewport's
+    // vertical center, used to open feed mode on the video the user is
+    // currently looking at instead of always starting from the top.
+    App.videos.getFocusedVideoId = function() {
+        const grid = document.getElementById('video-grid');
+        if (!grid) return null;
+        const cards = Array.from(grid.querySelectorAll('.video-card'));
+        if (!cards.length) return null;
+
+        const viewportCenter = window.innerHeight / 2;
+        let best = null;
+        let bestDistance = Infinity;
+        cards.forEach((card) => {
+            const rect = card.getBoundingClientRect();
+            if (rect.bottom <= 0 || rect.top >= window.innerHeight) return;
+            const distance = Math.abs((rect.top + rect.height / 2) - viewportCenter);
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                best = card;
+            }
+        });
+
+        return (best || cards[0]).dataset.videoId || null;
+    };
+
     App.videos.handleSearch = function(value) {
         if (typeof value === 'string') {
             const searchInput = document.getElementById('search-input');