From 0e3aa9c2c88f55b65bd9689a3a1b7a67a0127eb7 Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 15 Jul 2025 17:00:08 +0200 Subject: [PATCH 1/3] feat: scroll to last watched video on details page --- src/components/Video/Video.js | 34 +++++++------------ src/routes/MetaDetails/MetaDetails.js | 1 + .../MetaDetails/VideosList/VideosList.js | 5 ++- src/routes/Player/SideDrawer/SideDrawer.tsx | 15 ++++---- 4 files changed, 25 insertions(+), 30 deletions(-) diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js index 229fe758d..9d604828a 100644 --- a/src/components/Video/Video.js +++ b/src/components/Video/Video.js @@ -12,11 +12,12 @@ const useProfile = require('stremio/common/useProfile'); const VideoPlaceholder = require('./VideoPlaceholder'); const styles = require('./styles'); -const Video = React.forwardRef(({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }, ref) => { +const Video = ({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, selected, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }) => { const routeFocused = useRouteFocused(); const profile = useProfile(); const { t } = useTranslation(); const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); + const popupLabelOnMouseUp = React.useCallback((event) => { if (!event.nativeEvent.togglePopupPrevented) { if (event.nativeEvent.ctrlKey || event.nativeEvent.button === 2) { @@ -68,27 +69,17 @@ const Video = React.forwardRef(({ className, id, title, thumbnail, season, episo } } }, [deepLinks]); - const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ref: popupRef, ...props }) { + const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ref, ...props }) { const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched; - const handleRef = React.useCallback((node) => { - if (popupRef) { - if (typeof popupRef === 'function') { - popupRef(node); - } else { - popupRef.current = node; - } - } - if (ref) { - if (typeof ref === 'function') { - ref(node); - } else { - ref.current = node; - } - } - }, [popupRef]); + + React.useEffect(() => { + selected && ref.current?.scrollIntoView({ + behavior: 'smooth', + }); + }, [selected]); return ( - ); - }, []); + }, [selected]); const renderMenu = React.useMemo(() => function renderMenu() { return (
@@ -203,7 +194,7 @@ const Video = React.forwardRef(({ className, id, title, thumbnail, season, episo renderMenu={renderMenu} /> ); -}); +}; Video.Placeholder = VideoPlaceholder; @@ -220,6 +211,7 @@ Video.propTypes = { progress: PropTypes.number, scheduled: PropTypes.bool, seasonWatched: PropTypes.bool, + selected: PropTypes.bool, deepLinks: PropTypes.shape({ metaDetailsStreams: PropTypes.string, player: PropTypes.string diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index d806ffed5..fd27478b5 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -190,6 +190,7 @@ const MetaDetails = ({ urlParams, queryParams }) => { metaItem={metaDetails.metaItem} libraryItem={metaDetails.libraryItem} season={season} + selectedVideoId={metaDetails.libraryItem?.state?.video_id} seasonOnSelect={seasonOnSelect} toggleNotifications={toggleNotifications} /> diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js index 88d53d427..8891947db 100644 --- a/src/routes/MetaDetails/VideosList/VideosList.js +++ b/src/routes/MetaDetails/VideosList/VideosList.js @@ -11,9 +11,10 @@ const SeasonsBar = require('./SeasonsBar'); const { default: EpisodePicker } = require('../EpisodePicker'); const styles = require('./styles'); -const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, toggleNotifications }) => { +const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, selectedVideoId, toggleNotifications }) => { const { core } = useServices(); const profile = useProfile(); + const showNotificationsToggle = React.useMemo(() => { return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length; }, [metaItem]); @@ -178,6 +179,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, deepLinks={video.deepLinks} scheduled={video.scheduled} seasonWatched={seasonWatched} + selected={video.id === selectedVideoId} onMarkVideoAsWatched={onMarkVideoAsWatched} onMarkSeasonAsWatched={onMarkSeasonAsWatched} /> @@ -195,6 +197,7 @@ VideosList.propTypes = { metaItem: PropTypes.object, libraryItem: PropTypes.object, season: PropTypes.number, + selectedVideoId: PropTypes.string, seasonOnSelect: PropTypes.func, toggleNotifications: PropTypes.func, }; diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx index 299c37b23..d5b13e11f 100644 --- a/src/routes/Player/SideDrawer/SideDrawer.tsx +++ b/src/routes/Player/SideDrawer/SideDrawer.tsx @@ -1,6 +1,6 @@ // Copyright (C) 2017-2024 Smart code 203358507 -import React, { useMemo, useCallback, useState, forwardRef, memo, useRef } from 'react'; +import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react'; import classNames from 'classnames'; import Icon from '@stremio/stremio-icons/react'; import { useServices } from 'stremio/services'; @@ -21,7 +21,8 @@ type Props = { const SideDrawer = memo(forwardRef(({ seriesInfo, className, closeSideDrawer, selected, ...props }: Props, ref) => { const { core } = useServices(); const [season, setSeason] = useState(seriesInfo?.season); - const selectedVideoRef = useRef(null); + const [selectedVideoId, setSelectedVideoId] = useState(null); + const metaItem = useMemo(() => { return seriesInfo ? { @@ -78,11 +79,9 @@ const SideDrawer = memo(forwardRef(({ seriesInfo, classNa event.stopPropagation(); }; - const onTransitionEnd = () => { - selectedVideoRef.current?.scrollIntoView({ - behavior: 'smooth', - }); - }; + const onTransitionEnd = useCallback(() => { + setSelectedVideoId(selected); + }, [selected]); return (
@@ -114,7 +113,6 @@ const SideDrawer = memo(forwardRef(({ seriesInfo, classNa {videos.map((video, index) => (