Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-24 12:32:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge f85991dd8b into 392a496617

Browse source
This commit is contained in:
botsy 2026-05-12 11:17:10 +00:00 committed by GitHub
commit 45b0bb587a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 48 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/routes/MetaDetails/VideosList/VideosList.js
View file

@ -11,10 +11,11 @@ const SeasonsBar = require('./SeasonsBar');
const { default: EpisodePicker } = require('../EpisodePicker');
const styles = require('./styles');
let savedScrollTop = 0;
const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, selectedVideoId, toggleNotifications }) => {
const core = useCore();
const profile = useProfile();
const showNotificationsToggle = React.useMemo(() => {
return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length;
}, [metaItem]);
@ -71,6 +72,32 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
return videosForSeason.every((video) => video.watched);
}, [videosForSeason]);
const videosContainerRef = React.useRef(null);
const isMountedRef = React.useRef(false);
const saveScrollPosition = React.useCallback(() => {
savedScrollTop = videosContainerRef.current?.scrollTop ?? 0;
}, []);
// Restore scroll on mount (before paint), consume immediately
React.useLayoutEffect(() => {
if (savedScrollTop > 0 && videosContainerRef.current) {
videosContainerRef.current.scrollTop = savedScrollTop;
savedScrollTop = 0;
}
}, []);
// Scroll to top when the season changes (skip on initial mount to respect restored scroll position)
React.useEffect(() => {
if (!isMountedRef.current) {
isMountedRef.current = true;
return;
}
if (videosContainerRef.current) {
videosContainerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
}
}, [selectedSeason]);
const [search, setSearch] = React.useState('');
const searchInputOnChange = React.useCallback((event) => {
setSearch(event.currentTarget.value);
@ -154,7 +181,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
value={search}
onChange={searchInputOnChange}
/>
<div className={styles['videos-container']}>
<div ref={videosContainerRef} className={styles['videos-container']}>
{
videosForSeason
.filter((video) => {
@ -165,24 +192,25 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
);
})
.map((video, index) => (
<Video
key={index}
id={video.id}
title={video.title}
thumbnail={video.thumbnail}
season={video.season}
episode={video.episode}
released={video.released}
upcoming={video.upcoming}
watched={video.watched}
progress={video.progress}
deepLinks={video.deepLinks}
scheduled={video.scheduled}
seasonWatched={seasonWatched}
selected={video.id === selectedVideoId}
onMarkVideoAsWatched={onMarkVideoAsWatched}
onMarkSeasonAsWatched={onMarkSeasonAsWatched}
/>
<div key={index} onClick={saveScrollPosition}>
<Video
id={video.id}
title={video.title}
thumbnail={video.thumbnail}
season={video.season}
episode={video.episode}
released={video.released}
upcoming={video.upcoming}
watched={video.watched}
progress={video.progress}
deepLinks={video.deepLinks}
scheduled={video.scheduled}
seasonWatched={seasonWatched}
selected={video.id === selectedVideoId}
onMarkVideoAsWatched={onMarkVideoAsWatched}
onMarkSeasonAsWatched={onMarkSeasonAsWatched}
/>
</div>
))
}
</div>