From 73823e9e0744bb10c58bf3af5b38365298abca47 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Fri, 13 Jun 2025 21:56:36 +0300
Subject: [PATCH 01/14] Pass `currentlyPlayingVideoID` into `SideDrawer`

---
 src/routes/Player/Player.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 8ba813786..b10cbef42 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -787,6 +787,7 @@ const Player = ({ urlParams, queryParams }) => {
                     metaItem={player.metaItem?.content}
                     seriesInfo={player.seriesInfo}
                     closeSideDrawer={closeSideDrawer}
+                    currentlyPlayingVideoID={player.selected?.streamRequest.path.id}
                 />
             </Transition>
             {

From 40871dc8f2f64ae95d525ec1fced4f50dcb0a079 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Fri, 13 Jun 2025 21:59:19 +0300
Subject: [PATCH 02/14] Add button `jump-to-currently-playing-video`

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 52 +++++++++++++--------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index cb94e24e5..365ba87ae 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,11 +1,11 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react';
+import React, { useMemo, useCallback, useState, forwardRef, memo, useRef } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import { useServices } from 'stremio/services';
 import { CONSTANTS } from 'stremio/common';
-import { MetaPreview, Video } from 'stremio/components';
+import { MetaPreview, Video, Button } from 'stremio/components';
 import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
 import styles from './SideDrawer.less';
 
@@ -13,6 +13,7 @@ type Props = {
     className?: string;
     seriesInfo: SeriesInfo;
     metaItem: MetaItem;
+    currentlyPlayingVideoID: string;
     closeSideDrawer: () => void;
 };
 
@@ -75,6 +76,14 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
         event.stopPropagation();
     };
 
+    const currentlyPlayingVideoRef = useRef<HTMLDivElement>(null);
+
+    const jumpToCurrentlyPlaying = () => {
+        const { current } = currentlyPlayingVideoRef;
+
+        if (current) current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    };
+
     return (
         <div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
             <div className={styles['close-button']} onClick={closeSideDrawer}>
@@ -102,25 +111,28 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                             onSelect={seasonOnSelect}
                         />
                         <div className={styles['videos']}>
+                            <Button className={styles['jump-to-currently-playing-btn']} disabled={seriesInfo.season !== season} onClick={jumpToCurrentlyPlaying}><Icon className={styles['icon']} name={'discover-outline'} /></Button>
                             {videos.map((video, index) => (
-                                <Video
-                                    key={index}
-                                    className={styles['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}
-                                    seasonWatched={seasonWatched}
-                                    progress={video.progress}
-                                    deepLinks={video.deepLinks}
-                                    scheduled={video.scheduled}
-                                    onMarkVideoAsWatched={onMarkVideoAsWatched}
-                                    onMarkSeasonAsWatched={onMarkSeasonAsWatched}
-                                />
+                                <div key={index} ref={video.id === props.currentlyPlayingVideoID ? currentlyPlayingVideoRef : null}>
+                                    <Video
+                                        className={styles['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}
+                                        seasonWatched={seasonWatched}
+                                        progress={video.progress}
+                                        deepLinks={video.deepLinks}
+                                        scheduled={video.scheduled}
+                                        onMarkVideoAsWatched={onMarkVideoAsWatched}
+                                        onMarkSeasonAsWatched={onMarkSeasonAsWatched}
+
+                                    />
+                                </div>
                             ))}
                         </div>
                     </div>

From 7dc0958e392d707b90ea6e26c93f808ae25ed090 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Fri, 13 Jun 2025 22:00:17 +0300
Subject: [PATCH 03/14] Add `jump-to-currently-playing-btn` class

---
 src/routes/Player/SideDrawer/SideDrawer.less | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 2d2178c3e..e970a8ca7 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -1,5 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/components/MetaPreview/styles.less') {
@@ -71,10 +72,22 @@
         flex: 2;
         display: flex;
         flex-direction: column;
+        position: relative;
 
         .videos {
             overflow-y: auto;
         }
+
+        .jump-to-currently-playing-btn {
+            position: absolute;
+            bottom: 1rem;
+            right: 1rem;
+            z-index: 1;
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: 50%;
+            background-color: @color-primaryvariant1-light1-90;
+        }
     }
 }
 

From 524bcd90da368ba7784febf12f80980e0df82366 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Sat, 14 Jun 2025 02:38:11 +0300
Subject: [PATCH 04/14] automatically jump to video on mount, remove button

---
 src/routes/Player/SideDrawer/SideDrawer.less | 13 -------------
 src/routes/Player/SideDrawer/SideDrawer.tsx  | 14 +++++++-------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index e970a8ca7..2d2178c3e 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -1,6 +1,5 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/components/MetaPreview/styles.less') {
@@ -72,22 +71,10 @@
         flex: 2;
         display: flex;
         flex-direction: column;
-        position: relative;
 
         .videos {
             overflow-y: auto;
         }
-
-        .jump-to-currently-playing-btn {
-            position: absolute;
-            bottom: 1rem;
-            right: 1rem;
-            z-index: 1;
-            width: 2.5rem;
-            height: 2.5rem;
-            border-radius: 50%;
-            background-color: @color-primaryvariant1-light1-90;
-        }
     }
 }
 
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 365ba87ae..11ff4b995 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,11 +1,11 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useMemo, useCallback, useState, forwardRef, memo, useRef } 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';
 import { CONSTANTS } from 'stremio/common';
-import { MetaPreview, Video, Button } from 'stremio/components';
+import { MetaPreview, Video } from 'stremio/components';
 import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
 import styles from './SideDrawer.less';
 
@@ -78,11 +78,12 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
 
     const currentlyPlayingVideoRef = useRef<HTMLDivElement>(null);
 
-    const jumpToCurrentlyPlaying = () => {
+    useEffect(() => {
         const { current } = currentlyPlayingVideoRef;
-
-        if (current) current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    };
+        if (current) {
+            setTimeout(() => { current.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 300);
+        }
+    }, []);
 
     return (
         <div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
@@ -111,7 +112,6 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                             onSelect={seasonOnSelect}
                         />
                         <div className={styles['videos']}>
-                            <Button className={styles['jump-to-currently-playing-btn']} disabled={seriesInfo.season !== season} onClick={jumpToCurrentlyPlaying}><Icon className={styles['icon']} name={'discover-outline'} /></Button>
                             {videos.map((video, index) => (
                                 <div key={index} ref={video.id === props.currentlyPlayingVideoID ? currentlyPlayingVideoRef : null}>
                                     <Video

From dad52d61ed6447d8fbcb881ce78e1e9546c61088 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Sat, 14 Jun 2025 22:24:09 +0300
Subject: [PATCH 05/14] use `onTransitionEnded` and remove `setTimeout`

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 11ff4b995..1dcca3b1b 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -78,15 +78,15 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
 
     const currentlyPlayingVideoRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
+    const jumpToPlayingNow = () => {
         const { current } = currentlyPlayingVideoRef;
         if (current) {
-            setTimeout(() => { current.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 300);
+            current.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
-    }, []);
+    };
 
     return (
-        <div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
+        <div ref={ref} className={classNames(styles['side-drawer'], className)} onTransitionEnd={jumpToPlayingNow} onMouseDown={onMouseDown}>
             <div className={styles['close-button']} onClick={closeSideDrawer}>
                 <Icon className={styles['icon']} name={'chevron-forward'} />
             </div>

From f7f9e6a40842110dc707d67cf0d77f2ca26637b0 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Sat, 14 Jun 2025 22:42:14 +0300
Subject: [PATCH 06/14] remove container and use `forwardRef`

---
 src/components/Video/Video.js               |  6 +--
 src/routes/Player/SideDrawer/SideDrawer.tsx | 41 ++++++++++-----------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js
index 94fbefcc7..585920cdb 100644
--- a/src/components/Video/Video.js
+++ b/src/components/Video/Video.js
@@ -12,7 +12,7 @@ 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 routeFocused = useRouteFocused();
     const profile = useProfile();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
@@ -70,7 +70,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']}>
@@ -185,7 +185,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
             renderMenu={renderMenu}
         />
     );
-};
+});
 
 Video.Placeholder = VideoPlaceholder;
 
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 1dcca3b1b..f55130197 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, useEffect } from 'react';
+import React, { useMemo, useCallback, useState, forwardRef, memo, useRef } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import { useServices } from 'stremio/services';
@@ -113,26 +113,25 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                         />
                         <div className={styles['videos']}>
                             {videos.map((video, index) => (
-                                <div key={index} ref={video.id === props.currentlyPlayingVideoID ? currentlyPlayingVideoRef : null}>
-                                    <Video
-                                        className={styles['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}
-                                        seasonWatched={seasonWatched}
-                                        progress={video.progress}
-                                        deepLinks={video.deepLinks}
-                                        scheduled={video.scheduled}
-                                        onMarkVideoAsWatched={onMarkVideoAsWatched}
-                                        onMarkSeasonAsWatched={onMarkSeasonAsWatched}
-
-                                    />
-                                </div>
+                                <Video
+                                    key={index}
+                                    className={styles['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}
+                                    seasonWatched={seasonWatched}
+                                    progress={video.progress}
+                                    deepLinks={video.deepLinks}
+                                    scheduled={video.scheduled}
+                                    onMarkVideoAsWatched={onMarkVideoAsWatched}
+                                    onMarkSeasonAsWatched={onMarkSeasonAsWatched}
+                                    ref={video.id === props.currentlyPlayingVideoID ? currentlyPlayingVideoRef : null}
+                                />
                             ))}
                         </div>
                     </div>

From dfaba09ef203e6c99c50b46b8da5be0b56f7baf0 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Sat, 14 Jun 2025 22:50:47 +0300
Subject: [PATCH 07/14] clear up naming

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index f55130197..48198011c 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -13,7 +13,7 @@ type Props = {
     className?: string;
     seriesInfo: SeriesInfo;
     metaItem: MetaItem;
-    currentlyPlayingVideoID: string;
+    selectedVideoID: string;
     closeSideDrawer: () => void;
 };
 
@@ -76,10 +76,10 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
         event.stopPropagation();
     };
 
-    const currentlyPlayingVideoRef = useRef<HTMLDivElement>(null);
+    const selectedVideoRef = useRef<HTMLDivElement>(null);
 
     const jumpToPlayingNow = () => {
-        const { current } = currentlyPlayingVideoRef;
+        const { current } = selectedVideoRef;
         if (current) {
             current.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
@@ -130,7 +130,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                                     scheduled={video.scheduled}
                                     onMarkVideoAsWatched={onMarkVideoAsWatched}
                                     onMarkSeasonAsWatched={onMarkSeasonAsWatched}
-                                    ref={video.id === props.currentlyPlayingVideoID ? currentlyPlayingVideoRef : null}
+                                    ref={video.id === props.selectedVideoID ? selectedVideoRef : null}
                                 />
                             ))}
                         </div>

From a0d3a5012282cd55899ccebb031f2a8c1a163655 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Sat, 14 Jun 2025 22:53:57 +0300
Subject: [PATCH 08/14] fix: pass correct prop to `SideDrawer`

---
 src/routes/Player/Player.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index b10cbef42..3db3efc66 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -787,7 +787,7 @@ const Player = ({ urlParams, queryParams }) => {
                     metaItem={player.metaItem?.content}
                     seriesInfo={player.seriesInfo}
                     closeSideDrawer={closeSideDrawer}
-                    currentlyPlayingVideoID={player.selected?.streamRequest.path.id}
+                    selectedVideoID={player.selected?.streamRequest.path.id}
                 />
             </Transition>
             {

From 5f106f49d3963da6a6357a371fbb1224d08b3274 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Sat, 14 Jun 2025 23:18:08 +0300
Subject: [PATCH 09/14] fix: SideDrawer glitched element movement. Even when
 using `onTransitionEnd`, the `scrollIntoView` problem persists. The solution
 that i found is to use `requestAnimationFrame` two times, turns out that's
 enough time after the component mounts to fix the problem.

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 48198011c..5e503f7bf 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -80,9 +80,13 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
 
     const jumpToPlayingNow = () => {
         const { current } = selectedVideoRef;
-        if (current) {
-            current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
+        if (!current) return;
+
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            });
+        });
     };
 
     return (

From 37de79a0dc4aca01f39d3370d6d6e94aad37e4a2 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Fri, 20 Jun 2025 07:04:48 +0300
Subject: [PATCH 10/14] add a callback function prop `onTransitionEnd`

---
 src/components/Transition/Transition.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Transition/Transition.tsx b/src/components/Transition/Transition.tsx
index e12b2a42b..1423de011 100644
--- a/src/components/Transition/Transition.tsx
+++ b/src/components/Transition/Transition.tsx
@@ -5,9 +5,10 @@ type Props = {
     children: JSX.Element,
     when: boolean,
     name: string,
+    onTransitionEnd?: () => void
 };
 
-const Transition = ({ children, when, name }: Props) => {
+const Transition = ({ children, when, name, onTransitionEnd }: Props) => {
     const [element, setElement] = useState<HTMLElement | null>(null);
     const [mounted, setMounted] = useState(false);
 
@@ -29,8 +30,15 @@ const Transition = ({ children, when, name }: Props) => {
         );
     }, [name, state, active, children]);
 
-    const onTransitionEnd = useCallback(() => {
-        state === 'exit' && setMounted(false);
+    const handleTransitionEnd = useCallback(() => {
+        switch (state) {
+            case 'enter':
+                onTransitionEnd?.();
+                break;
+            case 'exit':
+                setMounted(false);
+                break;
+        }
     }, [state]);
 
     useEffect(() => {
@@ -45,8 +53,8 @@ const Transition = ({ children, when, name }: Props) => {
     }, [element]);
 
     useEffect(() => {
-        element?.addEventListener('transitionend', onTransitionEnd);
-        return () => element?.removeEventListener('transitionend', onTransitionEnd);
+        element?.addEventListener('transitionend', handleTransitionEnd);
+        return () => element?.removeEventListener('transitionend', handleTransitionEnd);
     }, [element, onTransitionEnd]);
 
     return (

From f920ab48f30d113645d8696e1d85360ddefbe0aa Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Fri, 20 Jun 2025 07:06:00 +0300
Subject: [PATCH 11/14] pass `sideDrawerTransitionEnded` into `SideDrawer`

---
 src/routes/Player/Player.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 3db3efc66..2e26e5240 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -44,6 +44,7 @@ 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(() => {
@@ -499,6 +500,10 @@ 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) {
@@ -781,13 +786,14 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
-            <Transition when={sideDrawerOpen} name={'slide-left'}>
+            <Transition when={sideDrawerOpen} name={'slide-left'} onTransitionEnd={() => setSideDrawerTransitionEnded(true)}>
                 <SideDrawer
                     className={classnames(styles['layer'], styles['side-drawer-layer'])}
                     metaItem={player.metaItem?.content}
                     seriesInfo={player.seriesInfo}
                     closeSideDrawer={closeSideDrawer}
                     selectedVideoID={player.selected?.streamRequest.path.id}
+                    transitionEnded={sideDrawerTransitionEnded}
                 />
             </Transition>
             {

From 82783a4de76753875c00683ad050d59ba9aa6317 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Fri, 20 Jun 2025 07:08:08 +0300
Subject: [PATCH 12/14] only scroll if `transitionEnded` is true

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 5e503f7bf..6b33f2f9e 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, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import { useServices } from 'stremio/services';
@@ -14,6 +14,7 @@ type Props = {
     seriesInfo: SeriesInfo;
     metaItem: MetaItem;
     selectedVideoID: string;
+    transitionEnded: boolean;
     closeSideDrawer: () => void;
 };
 
@@ -78,19 +79,13 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
 
     const selectedVideoRef = useRef<HTMLDivElement>(null);
 
-    const jumpToPlayingNow = () => {
-        const { current } = selectedVideoRef;
-        if (!current) return;
-
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            });
-        });
-    };
+    useEffect(() => {
+        props.transitionEnded &&
+            selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, [props.transitionEnded]);
 
     return (
-        <div ref={ref} className={classNames(styles['side-drawer'], className)} onTransitionEnd={jumpToPlayingNow} onMouseDown={onMouseDown}>
+        <div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
             <div className={styles['close-button']} onClick={closeSideDrawer}>
                 <Icon className={styles['icon']} name={'chevron-forward'} />
             </div>

From 00d89aec753f1bf3b8e1667f55b1e0eeeb256301 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 20 Jun 2025 11:46:07 +0300
Subject: [PATCH 13/14] chore: fix builds

---
 src/components/Video/Video.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js
index 5ec609d2b..217db1f2b 100644
--- a/src/components/Video/Video.js
+++ b/src/components/Video/Video.js
@@ -15,6 +15,7 @@ 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 routeFocused = useRouteFocused();
     const profile = useProfile();
+    const { t } = useTranslation();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
     const popupLabelOnMouseUp = React.useCallback((event) => {
         if (!event.nativeEvent.togglePopupPrevented) {

From a3c895dfc6589e6b0083061885cbcd523e2ea181 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 20 Jun 2025 12:08:55 +0300
Subject: [PATCH 14/14] refactor(SideDrawer): simplify refs handing

---
 src/components/Transition/Transition.tsx    | 22 +++++++++------------
 src/routes/Player/Player.js                 | 10 ++--------
 src/routes/Player/SideDrawer/SideDrawer.tsx | 18 +++++++++--------
 3 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/components/Transition/Transition.tsx b/src/components/Transition/Transition.tsx
index 1423de011..ae84d80e5 100644
--- a/src/components/Transition/Transition.tsx
+++ b/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(() => {
-        switch (state) {
-            case 'enter':
-                onTransitionEnd?.();
-                break;
-            case 'exit':
-                setMounted(false);
-                break;
-        }
+    const onTransitionEnd = useCallback(() => {
+        setTransitionEnded(true);
+        state === 'exit' && setMounted(false);
     }, [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);
-        return () => element?.removeEventListener('transitionend', handleTransitionEnd);
+        element?.addEventListener('transitionend', onTransitionEnd);
+        return () => element?.removeEventListener('transitionend', onTransitionEnd);
     }, [element, onTransitionEnd]);
 
     return (
         mounted && cloneElement(children, {
             ref: callbackRef,
             className,
+            transitionEnded
         })
     );
 };
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 69fdb73e6..6a28e3bbd 100644
--- a/src/routes/Player/Player.js
+++ b/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}
-                    transitionEnded={sideDrawerTransitionEnded}
+                    selected={player.selected?.streamRequest.path.id}
                 />
             </Transition>
             {
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 6b33f2f9e..e1eb3c1ae 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/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 &&
-            selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }, [props.transitionEnded]);
+        transitionEnded && selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, [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>