From fff0ebe85de3f7bd36c92f0472047ee90fe32486 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 19 May 2025 17:02:32 +0300
Subject: [PATCH 01/23] fix(Player): workaround for binge watching

---
 src/routes/Player/Player.js | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 740ed46d4..ce4cd3c3e 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -103,7 +103,7 @@ const Player = ({ urlParams, queryParams }) => {
         video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor);
     }, [settings.subtitlesSize, settings.subtitlesOffset, settings.subtitlesTextColor, settings.subtitlesBackgroundColor, settings.subtitlesOutlineColor]);
 
-    const handleNextVideoNavigation = React.useCallback((deepLinks) => {
+    const handleNextVideoNavigation = (deepLinks) => {
         if (deepLinks.player) {
             isNavigating.current = true;
             window.location.replace(deepLinks.player);
@@ -111,20 +111,16 @@ const Player = ({ urlParams, queryParams }) => {
             isNavigating.current = true;
             window.location.replace(deepLinks.metaDetailsStreams);
         }
-    }, []);
-
-    const onEnded = React.useCallback(() => {
-        if (isNavigating.current) {
-            return;
-        }
+    };
 
+    const onEnded = () => {
         ended();
-        if (player.nextVideo !== null) {
+        if (window.playerNextVideo !== null) {
             onNextVideoRequested();
         } else {
             window.history.back();
         }
-    }, [player.nextVideo, onNextVideoRequested]);
+    };
 
     const onError = React.useCallback((error) => {
         console.error('Player', error);
@@ -229,14 +225,14 @@ const Player = ({ urlParams, queryParams }) => {
         nextVideoPopupDismissed.current = true;
     }, []);
 
-    const onNextVideoRequested = React.useCallback(() => {
-        if (player.nextVideo !== null) {
+    const onNextVideoRequested = () => {
+        if (window.playerNextVideo !== null) {
             nextVideo();
 
-            const deepLinks = player.nextVideo.deepLinks;
+            const deepLinks = window.playerNextVideo.deepLinks;
             handleNextVideoNavigation(deepLinks);
         }
-    }, [player.nextVideo, handleNextVideoNavigation]);
+    };
 
     const onVideoClick = React.useCallback(() => {
         if (video.state.paused !== null) {
@@ -394,6 +390,12 @@ const Player = ({ urlParams, queryParams }) => {
                 closeNextVideoPopup();
             }
         }
+        if (player.nextVideo) {
+            // This is a workaround for the fact that when we call onEnded nextVideo from the player is already set to null since core unloads the stream
+            // we explicitly set it to a global variable so we can access it in the onEnded function
+            // this is not a good solution but it works for now
+            window.playerNextVideo = player.nextVideo;
+        }
     }, [player.nextVideo, video.state.time, video.state.duration]);
 
     React.useEffect(() => {
@@ -429,6 +431,7 @@ const Player = ({ urlParams, queryParams }) => {
         defaultSubtitlesSelected.current = false;
         defaultAudioTrackSelected.current = false;
         nextVideoPopupDismissed.current = false;
+        isNavigating.current = false;
     }, [video.state.stream]);
 
     React.useEffect(() => {

From b4c0ab551ecbb73ea074e035ea4b294b0755c15b Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 20 May 2025 15:09:50 +0300
Subject: [PATCH 02/23] fix(Player): binge watching

---
 src/routes/Player/Player.js | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index ce4cd3c3e..1ddb14599 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -103,7 +103,7 @@ const Player = ({ urlParams, queryParams }) => {
         video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor);
     }, [settings.subtitlesSize, settings.subtitlesOffset, settings.subtitlesTextColor, settings.subtitlesBackgroundColor, settings.subtitlesOutlineColor]);
 
-    const handleNextVideoNavigation = (deepLinks) => {
+    const handleNextVideoNavigation = React.useCallback((deepLinks) => {
         if (deepLinks.player) {
             isNavigating.current = true;
             window.location.replace(deepLinks.player);
@@ -111,16 +111,23 @@ const Player = ({ urlParams, queryParams }) => {
             isNavigating.current = true;
             window.location.replace(deepLinks.metaDetailsStreams);
         }
-    };
+    }, []);
+
+    const onEnded = React.useCallback(() => {
+        if (isNavigating.current) {
+            return;
+        }
 
-    const onEnded = () => {
         ended();
         if (window.playerNextVideo !== null) {
-            onNextVideoRequested();
+            nextVideo();
+
+            const deepLinks = window.playerNextVideo.deepLinks;
+            handleNextVideoNavigation(deepLinks);
         } else {
             window.history.back();
         }
-    };
+    }, []);
 
     const onError = React.useCallback((error) => {
         console.error('Player', error);
@@ -225,14 +232,14 @@ const Player = ({ urlParams, queryParams }) => {
         nextVideoPopupDismissed.current = true;
     }, []);
 
-    const onNextVideoRequested = () => {
-        if (window.playerNextVideo !== null) {
+    const onNextVideoRequested = React.useCallback(() => {
+        if (player.nextVideo !== null) {
             nextVideo();
 
-            const deepLinks = window.playerNextVideo.deepLinks;
+            const deepLinks = player.nextVideo.deepLinks;
             handleNextVideoNavigation(deepLinks);
         }
-    };
+    }, [player.nextVideo, handleNextVideoNavigation]);
 
     const onVideoClick = React.useCallback(() => {
         if (video.state.paused !== null) {
@@ -431,7 +438,6 @@ const Player = ({ urlParams, queryParams }) => {
         defaultSubtitlesSelected.current = false;
         defaultAudioTrackSelected.current = false;
         nextVideoPopupDismissed.current = false;
-        isNavigating.current = false;
     }, [video.state.stream]);
 
     React.useEffect(() => {

From 365294946a8a68d321bebe8cfb11f3f36301cc30 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 20 May 2025 15:12:29 +0300
Subject: [PATCH 03/23] chore(Player): add logs

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

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 1ddb14599..c0443ac74 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -114,6 +114,8 @@ const Player = ({ urlParams, queryParams }) => {
     }, []);
 
     const onEnded = React.useCallback(() => {
+        // here we need to explicitly check for isNavigating.current
+        // because the ended event can be calleb multiple times by MPV inside Shell
         if (isNavigating.current) {
             return;
         }

From 38f7e5a0f805bc0192934e4d39fa53de984e5c20 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 20 May 2025 15:32:02 +0300
Subject: [PATCH 04/23] chore(Player): update logs

---
 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 c0443ac74..7a4d5b035 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -115,7 +115,7 @@ const Player = ({ urlParams, queryParams }) => {
 
     const onEnded = React.useCallback(() => {
         // here we need to explicitly check for isNavigating.current
-        // because the ended event can be calleb multiple times by MPV inside Shell
+        // the ended event can be called multiple times by MPV inside Shell
         if (isNavigating.current) {
             return;
         }

From 440713ee680fa034fe981e0119777480030464a3 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 20 May 2025 15:54:20 +0300
Subject: [PATCH 05/23] fix(Player): reset the flag back to false

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

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 7a4d5b035..f1e0657d9 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -440,6 +440,9 @@ const Player = ({ urlParams, queryParams }) => {
         defaultSubtitlesSelected.current = false;
         defaultAudioTrackSelected.current = false;
         nextVideoPopupDismissed.current = false;
+        // we need a timeout here to make sure that previous page unloads and the new one loads
+        // avoiding race conditions and flickering
+        setTimeout(() => isNavigating.current = false, 1000);
     }, [video.state.stream]);
 
     React.useEffect(() => {

From 28578e1deac922fe8e1e81d388ccc967d7304b30 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 21 May 2025 15:11:32 +0300
Subject: [PATCH 06/23] refactor(Player): reset global var

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

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index f1e0657d9..48218d126 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -404,6 +404,8 @@ const Player = ({ urlParams, queryParams }) => {
             // we explicitly set it to a global variable so we can access it in the onEnded function
             // this is not a good solution but it works for now
             window.playerNextVideo = player.nextVideo;
+        } else {
+            window.playerNextVideo = null;
         }
     }, [player.nextVideo, video.state.time, video.state.duration]);
 

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 07/23] 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 08/23] 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 09/23] 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 10/23] 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 11/23] 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 12/23] 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 13/23] 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 14/23] 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 15/23] 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 16/23] 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 17/23] 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 18/23] 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 19/23] 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 20/23] 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>

From 1c1163888efa2e31829ea0b979b89ae23bd08814 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Fri, 20 Jun 2025 11:57:19 +0200
Subject: [PATCH 21/23] refactor(service): remove init shell logic

---
 src/services/Shell/Shell.js          |  34 ++++----
 src/services/Shell/ShellTransport.js | 126 ++++++++++-----------------
 2 files changed, 64 insertions(+), 96 deletions(-)

diff --git a/src/services/Shell/Shell.js b/src/services/Shell/Shell.js
index 64610da78..d8f914a83 100644
--- a/src/services/Shell/Shell.js
+++ b/src/services/Shell/Shell.js
@@ -11,21 +11,6 @@ function Shell() {
 
     const events = new EventEmitter();
 
-    function onTransportInit() {
-        active = true;
-        error = null;
-        starting = false;
-        onStateChanged();
-    }
-    function onTransportInitError(err) {
-        console.error(err);
-        active = false;
-        error = new Error(err);
-        starting = false;
-        onStateChanged();
-        transport = null;
-    }
-
     function onStateChanged() {
         events.emit('stateChanged');
     }
@@ -68,9 +53,22 @@ function Shell() {
 
         active = false;
         starting = true;
-        transport = new ShellTransport();
-        transport.on('init', onTransportInit);
-        transport.on('init-error', onTransportInitError);
+
+        try {
+            transport = new ShellTransport();
+            active = true;
+            error = null;
+            starting = false;
+            onStateChanged();
+        } catch (e) {
+            console.error(e);
+            active = false;
+            error = new Error(e);
+            starting = false;
+            onStateChanged();
+            transport = null;
+        }
+
         onStateChanged();
     };
     this.stop = function() {
diff --git a/src/services/Shell/ShellTransport.js b/src/services/Shell/ShellTransport.js
index c70e28008..0dcf52d6d 100644
--- a/src/services/Shell/ShellTransport.js
+++ b/src/services/Shell/ShellTransport.js
@@ -2,9 +2,6 @@
 
 const EventEmitter = require('eventemitter3');
 
-let shellAvailable = false;
-const shellEvents = new EventEmitter();
-
 const QtMsgTypes = {
     signal: 1,
     propertyUpdate: 2,
@@ -19,27 +16,6 @@ const QtMsgTypes = {
 };
 const QtObjId = 'transport'; // the ID of our transport object
 
-window.initShellComm = function () {
-    delete window.initShellComm;
-    shellEvents.emit('availabilityChanged');
-};
-
-const initialize = () => {
-    if(!window.qt) return Promise.reject('Qt API not found');
-    return new Promise((resolve) => {
-        function onShellAvailabilityChanged() {
-            shellEvents.off('availabilityChanged', onShellAvailabilityChanged);
-            shellAvailable = true;
-            resolve();
-        }
-        if (shellAvailable) {
-            onShellAvailabilityChanged();
-        } else {
-            shellEvents.on('availabilityChanged', onShellAvailabilityChanged);
-        }
-    });
-};
-
 function ShellTransport() {
     const events = new EventEmitter();
 
@@ -47,66 +23,60 @@ function ShellTransport() {
 
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const shell = this;
-    initialize()
-        .then(() => {
-            const transport = window.qt && window.qt.webChannelTransport;
-            if (!transport) throw 'no viable transport found (qt.webChannelTransport)';
+    const transport = window.qt && window.qt.webChannelTransport;
+    if (!transport) throw 'no viable transport found (qt.webChannelTransport)';
 
-            let id = 0;
-            function send(msg) {
-                msg.id = id++;
-                transport.send(JSON.stringify(msg));
+    let id = 0;
+    function send(msg) {
+        msg.id = id++;
+        transport.send(JSON.stringify(msg));
+    }
+
+    transport.onmessage = function (message) {
+        const msg = JSON.parse(message.data);
+        if (msg.id === 0) {
+            const obj = msg.data[QtObjId];
+
+            obj.properties.slice(1).forEach(function (prop) {
+                shell.props[prop[1]] = prop[3];
+            });
+            if (typeof shell.props.shellVersion === 'string') {
+                shell.shellVersionArr = (
+                    shell.props.shellVersion.match(/(\d+)\.(\d+)\.(\d+)/) || []
+                )
+                    .slice(1, 4)
+                    .map(Number);
             }
+            events.emit('received-props', shell.props);
 
-            transport.onmessage = function (message) {
-                const msg = JSON.parse(message.data);
-                if (msg.id === 0) {
-                    const obj = msg.data[QtObjId];
+            obj.signals.forEach(function (sig) {
+                send({
+                    type: QtMsgTypes.connectToSignal,
+                    object: QtObjId,
+                    signal: sig[1],
+                });
+            });
 
-                    obj.properties.slice(1).forEach(function (prop) {
-                        shell.props[prop[1]] = prop[3];
-                    });
-                    if (typeof shell.props.shellVersion === 'string') {
-                        shell.shellVersionArr = (
-                            shell.props.shellVersion.match(/(\d+)\.(\d+)\.(\d+)/) || []
-                        )
-                            .slice(1, 4)
-                            .map(Number);
-                    }
-                    events.emit('received-props', shell.props);
+            const onEvent = obj.methods.filter(function (x) {
+                return x[0] === 'onEvent';
+            })[0];
 
-                    obj.signals.forEach(function (sig) {
-                        send({
-                            type: QtMsgTypes.connectToSignal,
-                            object: QtObjId,
-                            signal: sig[1],
-                        });
-                    });
-
-                    const onEvent = obj.methods.filter(function (x) {
-                        return x[0] === 'onEvent';
-                    })[0];
-
-                    shell.send = function (ev, args) {
-                        send({
-                            type: QtMsgTypes.invokeMethod,
-                            object: QtObjId,
-                            method: onEvent[1],
-                            args: [ev, args || {}],
-                        });
-                    };
-
-                    shell.send('app-ready', {}); // signal that we're ready to take events
-                }
-
-                if (msg.object === QtObjId && msg.type === QtMsgTypes.signal)
-                    events.emit(msg.args[0], msg.args[1]);
-                events.emit('init');
+            shell.send = function (ev, args) {
+                send({
+                    type: QtMsgTypes.invokeMethod,
+                    object: QtObjId,
+                    method: onEvent[1],
+                    args: [ev, args || {}],
+                });
             };
-            send({ type: QtMsgTypes.init });
-        }) .catch((error) => {
-            events.emit('init-error', error);
-        });
+
+            shell.send('app-ready', {}); // signal that we're ready to take events
+        }
+
+        if (msg.object === QtObjId && msg.type === QtMsgTypes.signal)
+            events.emit(msg.args[0], msg.args[1]);
+    };
+    send({ type: QtMsgTypes.init });
 
     this.on = function(name, listener) {
         events.on(name, listener);

From df897c63898a3068340814eaae1c246a41934c18 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 24 Jun 2025 05:09:02 +0200
Subject: [PATCH 22/23] ci: prevent dependabot from triggering auto assign
 workflow

---
 .github/workflows/auto_assign.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/auto_assign.yml b/.github/workflows/auto_assign.yml
index dfbddb6a4..0c53dd401 100644
--- a/.github/workflows/auto_assign.yml
+++ b/.github/workflows/auto_assign.yml
@@ -13,7 +13,7 @@ jobs:
     steps:
       # Auto assign PR to author
       - name: Auto Assign PR to Author
-        if: github.event_name == 'pull_request'
+        if: github.event_name == 'pull_request' && github.actor != 'dependabot[bot]'
         uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -31,6 +31,7 @@ jobs:
 
       # Dynamic labeling based on PR/Issue title
       - name: Label PRs and Issues
+        if: github.actor != 'dependabot[bot]'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         uses: actions/github-script@v7

From 1d1b84bcd015f1c2e51b257e75fecfb9c2cfa3a0 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 24 Jun 2025 03:10:56 +0000
Subject: [PATCH 23/23] chore(deps): bump svenstaro/upload-release-action from
 2.9.0 to 2.10.0

---
updated-dependencies:
- dependency-name: svenstaro/upload-release-action
  dependency-version: 2.10.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/release.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 9c7d99554..1b9f26b6e 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -19,7 +19,7 @@ jobs:
       - name: Zip build artifact
         run: zip -r stremio-web.zip ./build
       - name: Upload build artifact to GitHub release assets
-        uses: svenstaro/upload-release-action@2.9.0
+        uses: svenstaro/upload-release-action@2.10.0
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           file: stremio-web.zip