diff --git a/frontend/js/feed.js b/frontend/js/feed.js index bbbdee5..3415bd1 100644 --- a/frontend/js/feed.js +++ b/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); } }; diff --git a/frontend/js/videos.js b/frontend/js/videos.js index b52df20..9e6b075 100644 --- a/frontend/js/videos.js +++ b/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');