Merge pull request #936 from mesalilac/jump-to-currently-playing

src/components/Transition/Transition.tsx

@@ -13,6 +13,7 @@ const Transition = ({ children, when, name }: Props) => {
 
     const [state, setState] = useState('enter');
     const [active, setActive] = useState(false);
+    const [transitionEnded, setTransitionEnded] = useState(false);
 
     const callbackRef = useCallback((element: HTMLElement | null) => {
         setElement(element);
@@ -30,12 +31,14 @@ const Transition = ({ children, when, name }: Props) => {
     }, [name, state, active, children]);
 
     const onTransitionEnd = useCallback(() => {
+        setTransitionEnded(true);
         state === 'exit' && setMounted(false);
     }, [state]);
 
     useEffect(() => {
         setState(when ? 'enter' : 'exit');
         when && setMounted(true);
+        setTransitionEnded(false);
     }, [when]);
 
     useEffect(() => {
@@ -53,6 +56,7 @@ const Transition = ({ children, when, name }: Props) => {
         mounted && cloneElement(children, {
             ref: callbackRef,
             className,
+            transitionEnded
         })
     );
 };

src/components/Video/Video.js

@@ -12,10 +12,10 @@ const useProfile = require('stremio/common/useProfile');
 const VideoPlaceholder = require('./VideoPlaceholder');
 const styles = require('./styles');
 
-const Video = ({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }) => {
+const Video = React.forwardRef(({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }, ref) => {
-    const { t } = useTranslation();
     const routeFocused = useRouteFocused();
     const profile = useProfile();
+    const { t } = useTranslation();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
     const popupLabelOnMouseUp = React.useCallback((event) => {
         if (!event.nativeEvent.togglePopupPrevented) {
@@ -71,7 +71,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
     const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ...props }) {
         const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched;
         return (
-            <Button {...props} className={classnames(className, styles['video-container'])} title={title}>
+            <Button {...props} className={classnames(className, styles['video-container'])} title={title} ref={ref}>
                 {
                     typeof thumbnail === 'string' && thumbnail.length > 0 ?
                         <div className={styles['thumbnail-container']}>
@@ -186,7 +186,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
             renderMenu={renderMenu}
         />
     );
-};
+});
 
 Video.Placeholder = VideoPlaceholder;
 

src/routes/Player/Player.js

@@ -832,6 +832,7 @@ const Player = ({ urlParams, queryParams }) => {
                     metaItem={player.metaItem?.content}
                     seriesInfo={player.seriesInfo}
                     closeSideDrawer={closeSideDrawer}
+                    selected={player.selected?.streamRequest.path.id}
                 />
             </Transition>
             {

src/routes/Player/SideDrawer/SideDrawer.tsx

@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react';
+import React, { useMemo, useCallback, useState, forwardRef, memo, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import { useServices } from 'stremio/services';
@@ -14,11 +14,14 @@ type Props = {
     seriesInfo: SeriesInfo;
     metaItem: MetaItem;
     closeSideDrawer: () => void;
+    selected: string;
+    transitionEnded: boolean;
 };
 
-const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, ...props }: Props, ref) => {
+const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, selected, transitionEnded, ...props }: Props, ref) => {
     const { core } = useServices();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
+    const selectedVideoRef = useRef<HTMLDivElement>(null);
     const metaItem = useMemo(() => {
         return seriesInfo ?
             {
@@ -75,6 +78,14 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
         event.stopPropagation();
     };
 
+    const getSelectedRef = useCallback((video: Video) => {
+        return video.id === selected ? selectedVideoRef : null;
+    }, [selected]);
+
+    useEffect(() => {
+        transitionEnded && selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, [transitionEnded]);
+
     return (
         <div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
             <div className={styles['close-button']} onClick={closeSideDrawer}>
@@ -120,6 +131,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                                     scheduled={video.scheduled}
                                     onMarkVideoAsWatched={onMarkVideoAsWatched}
                                     onMarkSeasonAsWatched={onMarkSeasonAsWatched}
+                                    ref={getSelectedRef(video)}
                                 />
                             ))}
                         </div>