refactor(SideDrawer): simplify refs handing

src/components/Transition/Transition.tsx

@@ -5,15 +5,15 @@ type Props = {
     children: JSX.Element,
     when: boolean,
     name: string,
-    onTransitionEnd?: () => void
 };
 
-const Transition = ({ children, when, name, onTransitionEnd }: Props) => {
+const Transition = ({ children, when, name }: Props) => {
     const [element, setElement] = useState<HTMLElement | null>(null);
     const [mounted, setMounted] = useState(false);
 
     const [state, setState] = useState('enter');
     const [active, setActive] = useState(false);
+    const [transitionEnded, setTransitionEnded] = useState(false);
 
     const callbackRef = useCallback((element: HTMLElement | null) => {
         setElement(element);
@@ -30,20 +30,15 @@ const Transition = ({ children, when, name, onTransitionEnd }: Props) => {
         );
     }, [name, state, active, children]);
 
-    const handleTransitionEnd = useCallback(() => {
+    const onTransitionEnd = useCallback(() => {
-        switch (state) {
+        setTransitionEnded(true);
-            case 'enter':
+        state === 'exit' && setMounted(false);
-                onTransitionEnd?.();
-                break;
-            case 'exit':
-                setMounted(false);
-                break;
-        }
     }, [state]);
 
     useEffect(() => {
         setState(when ? 'enter' : 'exit');
         when && setMounted(true);
+        setTransitionEnded(false);
     }, [when]);
 
     useEffect(() => {
@@ -53,14 +48,15 @@ const Transition = ({ children, when, name, onTransitionEnd }: Props) => {
     }, [element]);
 
     useEffect(() => {
-        element?.addEventListener('transitionend', handleTransitionEnd);
+        element?.addEventListener('transitionend', onTransitionEnd);
-        return () => element?.removeEventListener('transitionend', handleTransitionEnd);
+        return () => element?.removeEventListener('transitionend', onTransitionEnd);
     }, [element, onTransitionEnd]);
 
     return (
         mounted && cloneElement(children, {
             ref: callbackRef,
             className,
+            transitionEnded
         })
     );
 };

src/routes/Player/Player.js

@@ -45,7 +45,6 @@ const Player = ({ urlParams, queryParams }) => {
     const routeFocused = useRouteFocused();
     const toast = useToast();
 
-    const [sideDrawerTransitionEnded, setSideDrawerTransitionEnded] = React.useState(false);
     const [seeking, setSeeking] = React.useState(false);
 
     const [casting, setCasting] = React.useState(() => {
@@ -511,10 +510,6 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [settings.pauseOnMinimize, shell.windowClosed, shell.windowHidden]);
 
-    React.useEffect(() => {
-        if (!sideDrawerOpen) setSideDrawerTransitionEnded(false);
-    }, [sideDrawerOpen]);
-
     React.useLayoutEffect(() => {
         const onKeyDown = (event) => {
             switch (event.code) {
@@ -831,14 +826,13 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
-            <Transition when={sideDrawerOpen} name={'slide-left'} onTransitionEnd={() => setSideDrawerTransitionEnded(true)}>
+            <Transition when={sideDrawerOpen} name={'slide-left'}>
                 <SideDrawer
                     className={classnames(styles['layer'], styles['side-drawer-layer'])}
                     metaItem={player.metaItem?.content}
                     seriesInfo={player.seriesInfo}
                     closeSideDrawer={closeSideDrawer}
-                    selectedVideoID={player.selected?.streamRequest.path.id}
+                    selected={player.selected?.streamRequest.path.id}
-                    transitionEnded={sideDrawerTransitionEnded}
                 />
             </Transition>
             {

src/routes/Player/SideDrawer/SideDrawer.tsx

@@ -13,14 +13,15 @@ type Props = {
     className?: string;
     seriesInfo: SeriesInfo;
     metaItem: MetaItem;
-    selectedVideoID: string;
-    transitionEnded: boolean;
     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 ?
             {
@@ -77,12 +78,13 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
         event.stopPropagation();
     };
 
-    const selectedVideoRef = useRef<HTMLDivElement>(null);
+    const getSelectedRef = useCallback((video: Video) => {
+        return video.id === selected ? selectedVideoRef : null;
+    }, [selected]);
 
     useEffect(() => {
-        props.transitionEnded &&
+        transitionEnded && selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, [transitionEnded]);
-    }, [props.transitionEnded]);
 
     return (
         <div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
@@ -129,7 +131,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                                     scheduled={video.scheduled}
                                     onMarkVideoAsWatched={onMarkVideoAsWatched}
                                     onMarkSeasonAsWatched={onMarkSeasonAsWatched}
-                                    ref={video.id === props.selectedVideoID ? selectedVideoRef : null}
+                                    ref={getSelectedRef(video)}
                                 />
                             ))}
                         </div>