From a726ffb60d172f261ddc71b34788c2e33cc0248a Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 6 Dec 2024 14:39:16 +0200
Subject: [PATCH 01/57] feat: init side drawer component

---
 src/routes/Player/ControlBar/ControlBar.js   |  18 ++--
 src/routes/Player/Player.js                  |  91 ++++++----------
 src/routes/Player/SideDrawer/SideDrawer.less |  32 ++++++
 src/routes/Player/SideDrawer/SideDrawer.tsx  | 106 +++++++++++++++++++
 src/routes/Player/styles.less                |  81 ++++++++++++++
 src/types/MetaItem.d.ts                      |   2 +-
 src/types/Video.d.ts                         |   5 +
 7 files changed, 268 insertions(+), 67 deletions(-)
 create mode 100644 src/routes/Player/SideDrawer/SideDrawer.less
 create mode 100644 src/routes/Player/SideDrawer/SideDrawer.tsx

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index a68a542bf..505ce982f 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -35,9 +35,9 @@ const ControlBar = ({
     onVolumeChangeRequested,
     onSeekRequested,
     onToggleSubtitlesMenu,
-    onToggleInfoMenu,
+    // onToggleInfoMenu,
     onToggleSpeedMenu,
-    onToggleVideosMenu,
+    onToggleSideDrawer,
     onToggleOptionsMenu,
     onToggleStatisticsMenu,
     ...props
@@ -48,9 +48,9 @@ const ControlBar = ({
     const onSubtitlesButtonMouseDown = React.useCallback((event) => {
         event.nativeEvent.subtitlesMenuClosePrevented = true;
     }, []);
-    const onInfoButtonMouseDown = React.useCallback((event) => {
-        event.nativeEvent.infoMenuClosePrevented = true;
-    }, []);
+    // const onInfoButtonMouseDown = React.useCallback((event) => {
+    //     event.nativeEvent.infoMenuClosePrevented = true;
+    // }, []);
     const onSpeedButtonMouseDown = React.useCallback((event) => {
         event.nativeEvent.speedMenuClosePrevented = true;
     }, []);
@@ -151,9 +151,9 @@ const ControlBar = ({
                     <Button className={classnames(styles['control-bar-button'], { 'disabled': playbackSpeed === null })} tabIndex={-1} onMouseDown={onSpeedButtonMouseDown} onClick={onToggleSpeedMenu}>
                         <Icon className={styles['icon']} name={'speed'} />
                     </Button>
-                    <Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onToggleInfoMenu}>
+                    {/* <Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onToggleInfoMenu}>
                         <Icon className={styles['icon']} name={'about'} />
-                    </Button>
+                    </Button> */}
                     <Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
                         <Icon className={styles['icon']} name={'cast'} />
                     </Button>
@@ -162,7 +162,7 @@ const ControlBar = ({
                     </Button>
                     {
                         metaItem?.content?.videos?.length > 0 ?
-                            <Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onVideosButtonMouseDown} onClick={onToggleVideosMenu}>
+                            <Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onVideosButtonMouseDown} onClick={onToggleSideDrawer}>
                                 <Icon className={styles['icon']} name={'episodes'} />
                             </Button>
                             :
@@ -202,7 +202,7 @@ ControlBar.propTypes = {
     onToggleSubtitlesMenu: PropTypes.func,
     onToggleInfoMenu: PropTypes.func,
     onToggleSpeedMenu: PropTypes.func,
-    onToggleVideosMenu: PropTypes.func,
+    onToggleSideDrawer: PropTypes.func,
     onToggleOptionsMenu: PropTypes.func,
     onToggleStatisticsMenu: PropTypes.func,
 };
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 5ace96f77..1a6b238c0 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -15,9 +15,7 @@ const Error = require('./Error');
 const ControlBar = require('./ControlBar');
 const NextVideoPopup = require('./NextVideoPopup');
 const StatisticsMenu = require('./StatisticsMenu');
-const InfoMenu = require('./InfoMenu');
 const OptionsMenu = require('./OptionsMenu');
-const VideosMenu = require('./VideosMenu');
 const SubtitlesMenu = require('./SubtitlesMenu');
 const SpeedMenu = require('./SpeedMenu');
 const usePlayer = require('./usePlayer');
@@ -26,6 +24,8 @@ const useStatistics = require('./useStatistics');
 const useVideo = require('./useVideo');
 const styles = require('./styles');
 const Video = require('./Video');
+const { default: SideDrawer } = require('./SideDrawer/SideDrawer');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 
 const Player = ({ urlParams, queryParams }) => {
     const { t } = useTranslation();
@@ -54,27 +54,24 @@ const Player = ({ urlParams, queryParams }) => {
 
     const [optionsMenuOpen, , closeOptionsMenu, toggleOptionsMenu] = useBinaryState(false);
     const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
-    const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
     const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
-    const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
     const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
     const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
+    const [sideDrawerOpen, openSideDrawer, closeSideDrawer, toggleSideDrawer] = useBinaryState(false);
 
     const menusOpen = React.useMemo(() => {
-        return optionsMenuOpen || subtitlesMenuOpen || infoMenuOpen || speedMenuOpen || videosMenuOpen || statisticsMenuOpen;
-    }, [optionsMenuOpen, subtitlesMenuOpen, infoMenuOpen, speedMenuOpen, videosMenuOpen, statisticsMenuOpen]);
+        return optionsMenuOpen || subtitlesMenuOpen || speedMenuOpen || statisticsMenuOpen;
+    }, [optionsMenuOpen, subtitlesMenuOpen, speedMenuOpen, statisticsMenuOpen]);
 
     const closeMenus = React.useCallback(() => {
         closeOptionsMenu();
         closeSubtitlesMenu();
-        closeInfoMenu();
         closeSpeedMenu();
-        closeVideosMenu();
         closeStatisticsMenu();
     }, []);
 
     const overlayHidden = React.useMemo(() => {
-        return immersed && !casting && video.state.paused !== null && !video.state.paused && !menusOpen && !nextVideoPopupOpen;
+        return immersed && !casting && video.state.paused !== null && !video.state.paused && !menusOpen && !nextVideoPopupOpen && !sideDrawerOpen;
     }, [immersed, casting, video.state.paused, menusOpen, nextVideoPopupOpen]);
 
     const nextVideoPopupDismissed = React.useRef(false);
@@ -237,15 +234,9 @@ const Player = ({ urlParams, queryParams }) => {
         if (!event.nativeEvent.subtitlesMenuClosePrevented) {
             closeSubtitlesMenu();
         }
-        if (!event.nativeEvent.infoMenuClosePrevented) {
-            closeInfoMenu();
-        }
         if (!event.nativeEvent.speedMenuClosePrevented) {
             closeSpeedMenu();
         }
-        if (!event.nativeEvent.videosMenuClosePrevented) {
-            closeVideosMenu();
-        }
         if (!event.nativeEvent.statisticsMenuClosePrevented) {
             closeStatisticsMenu();
         }
@@ -412,19 +403,19 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [video.state.audioTracks, video.state.subtitlesTracks, video.state.extraSubtitlesTracks]);
 
-    React.useEffect(() => {
-        if (player.metaItem === null || player.metaItem.type !== 'Ready') {
-            closeInfoMenu();
-            closeVideosMenu();
-        }
-    }, [player.metaItem]);
-
     React.useEffect(() => {
         if (video.state.playbackSpeed === null) {
             closeSpeedMenu();
         }
     }, [video.state.playbackSpeed]);
 
+    React.useEffect(() => {
+        if (sideDrawerOpen) {
+            closeMenus();
+            setImmersed(true);
+        }
+    }, [sideDrawerOpen]);
+
     React.useEffect(() => {
         const toastFilter = (item) => item?.dataset?.type === 'CoreEvent';
         toast.addFilter(toastFilter);
@@ -521,7 +512,7 @@ const Player = ({ urlParams, queryParams }) => {
                 case 'KeyI': {
                     closeMenus();
                     if (player.metaItem !== null && player.metaItem.type === 'Ready') {
-                        toggleInfoMenu();
+                        toggleSideDrawer();
                     }
 
                     break;
@@ -534,14 +525,6 @@ const Player = ({ urlParams, queryParams }) => {
 
                     break;
                 }
-                case 'KeyV': {
-                    closeMenus();
-                    if (player.metaItem !== null && player.metaItem.type === 'Ready' && player.metaItem?.content?.videos?.length > 0) {
-                        toggleVideosMenu();
-                    }
-
-                    break;
-                }
                 case 'KeyD': {
                     closeMenus();
                     if (streamingServer.statistics !== null && streamingServer.statistics.type !== 'Err' && player.selected && typeof player.selected.stream.infoHash === 'string' && typeof player.selected.stream.fileIdx === 'number') {
@@ -563,11 +546,11 @@ const Player = ({ urlParams, queryParams }) => {
         };
         const onWheel = ({ deltaY }) => {
             if (deltaY > 0) {
-                if (!menusOpen && video.state.volume !== null) {
+                if (!menusOpen && !sideDrawerOpen && video.state.volume !== null) {
                     onVolumeChangeRequested(video.state.volume - 5);
                 }
             } else {
-                if (!menusOpen && video.state.volume !== null) {
+                if (!menusOpen && !sideDrawerOpen && video.state.volume !== null) {
                     onVolumeChangeRequested(video.state.volume + 5);
                 }
             }
@@ -582,7 +565,7 @@ const Player = ({ urlParams, queryParams }) => {
             window.removeEventListener('keyup', onKeyUp);
             window.removeEventListener('wheel', onWheel);
         };
-    }, [player.metaItem, player.selected, streamingServer.statistics, settings.seekTimeDuration, settings.seekShortTimeDuration, routeFocused, menusOpen, nextVideoPopupOpen, video.state.paused, video.state.time, video.state.volume, video.state.audioTracks, video.state.subtitlesTracks, video.state.extraSubtitlesTracks, video.state.playbackSpeed, toggleSubtitlesMenu, toggleInfoMenu, toggleVideosMenu, toggleStatisticsMenu]);
+    }, [player.metaItem, player.selected, streamingServer.statistics, settings.seekTimeDuration, settings.seekShortTimeDuration, routeFocused, menusOpen, nextVideoPopupOpen, video.state.paused, video.state.time, video.state.volume, video.state.audioTracks, video.state.subtitlesTracks, video.state.extraSubtitlesTracks, video.state.playbackSpeed, toggleSubtitlesMenu, toggleStatisticsMenu, toggleSideDrawer]);
 
     React.useEffect(() => {
         video.events.on('error', onError);
@@ -691,10 +674,9 @@ const Player = ({ urlParams, queryParams }) => {
                 onSeekRequested={onSeekRequested}
                 onToggleOptionsMenu={toggleOptionsMenu}
                 onToggleSubtitlesMenu={toggleSubtitlesMenu}
-                onToggleInfoMenu={toggleInfoMenu}
                 onToggleSpeedMenu={toggleSpeedMenu}
-                onToggleVideosMenu={toggleVideosMenu}
                 onToggleStatisticsMenu={toggleStatisticsMenu}
+                onToggleSideDrawer={toggleSideDrawer}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
             />
@@ -719,6 +701,22 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
+            {
+                player.metaItem !== null && player.metaItem.type === 'Ready' ?
+                    <>
+                        <div className={classnames(styles['layer'], styles['side-drawer-button'], { [styles['open']]: sideDrawerOpen })} onClick={openSideDrawer}>
+                            <Icon name={'chevron-back'} className={styles['icon']} />
+                        </div>
+                        <SideDrawer
+                            metaItem={player.metaItem.content}
+                            seriesInfo={player.seriesInfo}
+                            className={classnames(styles['layer'], styles['side-drawer-layer'], { [styles['open']]: sideDrawerOpen })}
+                            closeSideBar={closeSideDrawer}
+                            sideDrawerOpen={sideDrawerOpen}
+                        />
+                    </>
+                    : null
+            }
             {
                 subtitlesMenuOpen ?
                     <SubtitlesMenu
@@ -746,17 +744,6 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
-            {
-                infoMenuOpen ?
-                    <InfoMenu
-                        className={classnames(styles['layer'], styles['menu-layer'])}
-                        stream={player.selected !== null ? player.selected.stream : null}
-                        addon={player.addon}
-                        metaItem={player.metaItem !== null && player.metaItem.type === 'Ready' ? player.metaItem.content : null}
-                    />
-                    :
-                    null
-            }
             {
                 speedMenuOpen ?
                     <SpeedMenu
@@ -767,16 +754,6 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
-            {
-                videosMenuOpen ?
-                    <VideosMenu
-                        className={classnames(styles['layer'], styles['menu-layer'])}
-                        metaItem={player.metaItem !== null && player.metaItem.type === 'Ready' ? player.metaItem.content : null}
-                        seriesInfo={player.seriesInfo}
-                    />
-                    :
-                    null
-            }
             {
                 optionsMenuOpen ?
                     <OptionsMenu
diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
new file mode 100644
index 000000000..bebbd1777
--- /dev/null
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -0,0 +1,32 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+.overlay {
+    display: none;
+
+    &.open {
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.2);
+        z-index: 1;
+    }
+}
+
+.side-drawer {
+    position: relative;
+    height: 100%;
+    z-index: 2;
+
+    .info {
+        overflow: hidden;
+        padding: 1rem;
+    }
+
+    .content {
+        overflow: auto;
+        max-height: 58%;
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
new file mode 100644
index 000000000..faddc91b9
--- /dev/null
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import MetaPreview from 'stremio/common/MetaPreview/MetaPreview';
+import Video from '../../MetaDetails/VideosList/Video/Video';
+import styles from './SideDrawer.less';
+import classNames from 'classnames';
+import { CONSTANTS } from 'stremio/common';
+import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
+
+type Props = {
+    seriesInfo: any;
+    metaItem: MetaItem;
+    className?: string;
+    closeSideBar: () => void;
+    sideDrawerOpen: boolean;
+};
+
+const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...props }: Props) => {
+    const [season, setSeason] = React.useState<number>(seriesInfo?.season);
+    const metaItem = React.useMemo(() => {
+        return props.metaItem !== null && Array.isArray(props.metaItem.videos) && seriesInfo ?
+            {
+                ...props.metaItem,
+                links: props.metaItem.links.filter(({ category }) => category === CONSTANTS.SHARE_LINK_CATEGORY)
+            }
+            :
+            props.metaItem;
+    }, [props.metaItem]);
+    const videos = React.useMemo(() => {
+        return props.metaItem && Array.isArray(props.metaItem.videos) ?
+            props.metaItem.videos.filter((video) => video.season === season)
+            :
+            props.metaItem.videos;
+    }, [props.metaItem, season]);
+    const seasons = React.useMemo(() => {
+        return props.metaItem && props.metaItem.videos
+            .map(({ season }) => season)
+            .filter((season, index, seasons) => {
+                return season !== null && season !== undefined &&
+                    !isNaN(season) &&
+                    typeof season === 'number' &&
+                    seasons.indexOf(season) === index;
+            })
+            .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
+    }, [props.metaItem.videos]);
+
+    const seasonOnSelect = React.useCallback((event: { value: string }) => {
+        setSeason(parseInt(event.value));
+    }, []);
+
+    return (
+        <>
+            <div className={classNames(styles['overlay'], { [styles['open']]: sideDrawerOpen })} onClick={closeSideBar} />
+            <div className={classNames(styles['side-drawer'], className)}>
+                <div className={styles['info']}>
+                    {
+                        metaItem !== null ?
+                            <MetaPreview
+                                compact={true}
+                                name={metaItem.name}
+                                logo={metaItem.logo}
+                                runtime={metaItem.runtime}
+                                releaseInfo={metaItem.releaseInfo}
+                                released={metaItem.released}
+                                description={metaItem.description}
+                                links={metaItem.links}
+                            />
+                            :
+                            null
+                    }
+                </div>
+                {
+                    videos !== null && seriesInfo ?
+                        <>
+                            <SeasonsBar
+                                season={season}
+                                seasons={seasons}
+                                onSelect={seasonOnSelect}
+                            />
+                            <div className={styles['content']}>
+                                {videos.map((video, index) => (
+                                    <Video
+                                        key={index}
+                                        className={styles['video']}
+                                        id={video.id}
+                                        title={video.title}
+                                        thumbnail={video.thumbnail}
+                                        episode={video.episode}
+                                        released={video.released}
+                                        upcoming={video.upcoming}
+                                        watched={video.watched}
+                                        progress={video.progress}
+                                        deepLinks={video.deepLinks}
+                                        scheduled={video.scheduled}
+                                    />
+                                ))}
+                            </div>
+                        </>
+                        : null
+                }
+
+            </div>
+        </>
+    );
+};
+
+export default SideDrawer;
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 8bff42fe1..9f48bbc91 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/Slider/styles.less') {
     active-slider-within: active-slider-within;
@@ -112,5 +113,85 @@ html:not(.active-slider-within) {
             backdrop-filter: blur(15px);
             overflow: auto;
         }
+
+        &.side-drawer-button {
+            right: -4rem;
+            top: 50%;
+            left: initial;
+            bottom: initial;
+            height: 12.5rem;
+            width: 7.5rem;
+            transform: translateY(-50%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: var(--modal-background-color);
+            cursor: pointer;
+            border-top-left-radius: 50%;
+            border-bottom-left-radius: 50%;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            
+            .icon {
+                width: 2.5rem;
+                height: 2.5rem;
+                color: var(--primary-foreground-color);
+                opacity: 0.6;
+                margin-right: 4rem;
+                transition: all 0.3s ease-in-out;
+    
+            }
+
+            &.open {
+                display: none;
+            }
+
+            &:hover {
+                .icon {
+                    opacity: 1;
+                }
+            }
+        }
+
+        &.side-drawer-layer {
+            top: 0;
+            right: 0;
+            left: initial;
+            bottom: initial;
+            max-width: 30%;
+            height: 100vh;
+            border-top-left-radius: var(--border-radius);
+            border-bottom-left-radius: var(--border-radius);
+            background-color: var(--modal-background-color);
+            box-shadow: 0 1.35rem 2.7rem var(--color-background-dark5-40),
+                        0 1.1rem 0.85rem var(--color-background-dark5-20);
+            backdrop-filter: blur(15px);
+            overflow: visible;
+            padding: 1rem;
+            z-index: 1;
+            transition: transform 0.3s ease-in-out;
+            transform: translateX(100%);
+
+            &.open {
+                transform: translateX(0);
+            }
+
+            @media screen and (max-width: @small) {
+                max-width: 40%;
+            }
+
+            @media screen and (max-width: @xsmall) {
+                max-width: 50%;
+            }
+
+            @media screen and (max-width: @xxsmall) {
+                max-width: 60%;
+            }
+
+            @media screen and (max-width: @minimum) {
+                max-width: 70%;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/types/MetaItem.d.ts b/src/types/MetaItem.d.ts
index 0d692a580..56e7db3c7 100644
--- a/src/types/MetaItem.d.ts
+++ b/src/types/MetaItem.d.ts
@@ -15,7 +15,7 @@ type MetaItemPreview = {
     posterShape: PosterShape,
     releaseInfo: string | null,
     runtime: string | null,
-    released: string | null,
+    released: Date | null | undefined,
     trailerStreams: TrailerStream[],
     links: Link[],
     behaviorHints: BehaviorHints,
diff --git a/src/types/Video.d.ts b/src/types/Video.d.ts
index 92bc704f5..7ed3d0fac 100644
--- a/src/types/Video.d.ts
+++ b/src/types/Video.d.ts
@@ -14,4 +14,9 @@ type Video = {
     episode?: number,
     streams: Stream[],
     trailerStreams: TrailerStream[],
+    watched: boolean,
+    progress: number,
+    upcoming: boolean,
+    deepLinks: VideoDeepLinks,
+    scheduled: boolean,
 };

From a81792ea5d6c1397330ac65fc42f95bba8d2ce85 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 6 Dec 2024 14:45:25 +0200
Subject: [PATCH 02/57] remove: InfoMenu and VideosMenu

---
 src/routes/Player/ControlBar/ControlBar.js |  8 ---
 src/routes/Player/InfoMenu/InfoMenu.js     | 77 ----------------------
 src/routes/Player/InfoMenu/index.js        |  5 --
 src/routes/Player/InfoMenu/styles.less     | 10 ---
 src/routes/Player/VideosMenu/VideosMenu.js | 51 --------------
 src/routes/Player/VideosMenu/index.js      |  5 --
 src/routes/Player/VideosMenu/styles.less   |  7 --
 7 files changed, 163 deletions(-)
 delete mode 100644 src/routes/Player/InfoMenu/InfoMenu.js
 delete mode 100644 src/routes/Player/InfoMenu/index.js
 delete mode 100644 src/routes/Player/InfoMenu/styles.less
 delete mode 100644 src/routes/Player/VideosMenu/VideosMenu.js
 delete mode 100644 src/routes/Player/VideosMenu/index.js
 delete mode 100644 src/routes/Player/VideosMenu/styles.less

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 505ce982f..1d1330539 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -35,7 +35,6 @@ const ControlBar = ({
     onVolumeChangeRequested,
     onSeekRequested,
     onToggleSubtitlesMenu,
-    // onToggleInfoMenu,
     onToggleSpeedMenu,
     onToggleSideDrawer,
     onToggleOptionsMenu,
@@ -48,9 +47,6 @@ const ControlBar = ({
     const onSubtitlesButtonMouseDown = React.useCallback((event) => {
         event.nativeEvent.subtitlesMenuClosePrevented = true;
     }, []);
-    // const onInfoButtonMouseDown = React.useCallback((event) => {
-    //     event.nativeEvent.infoMenuClosePrevented = true;
-    // }, []);
     const onSpeedButtonMouseDown = React.useCallback((event) => {
         event.nativeEvent.speedMenuClosePrevented = true;
     }, []);
@@ -151,9 +147,6 @@ const ControlBar = ({
                     <Button className={classnames(styles['control-bar-button'], { 'disabled': playbackSpeed === null })} tabIndex={-1} onMouseDown={onSpeedButtonMouseDown} onClick={onToggleSpeedMenu}>
                         <Icon className={styles['icon']} name={'speed'} />
                     </Button>
-                    {/* <Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onToggleInfoMenu}>
-                        <Icon className={styles['icon']} name={'about'} />
-                    </Button> */}
                     <Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
                         <Icon className={styles['icon']} name={'cast'} />
                     </Button>
@@ -200,7 +193,6 @@ ControlBar.propTypes = {
     onVolumeChangeRequested: PropTypes.func,
     onSeekRequested: PropTypes.func,
     onToggleSubtitlesMenu: PropTypes.func,
-    onToggleInfoMenu: PropTypes.func,
     onToggleSpeedMenu: PropTypes.func,
     onToggleSideDrawer: PropTypes.func,
     onToggleOptionsMenu: PropTypes.func,
diff --git a/src/routes/Player/InfoMenu/InfoMenu.js b/src/routes/Player/InfoMenu/InfoMenu.js
deleted file mode 100644
index eec5e7286..000000000
--- a/src/routes/Player/InfoMenu/InfoMenu.js
+++ /dev/null
@@ -1,77 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-// const Stream = require('stremio/routes/MetaDetails/StreamsList/Stream');
-// const AddonDetails = require('stremio/common/AddonDetailsModal/AddonDetails');
-const { MetaPreview, CONSTANTS } = require('stremio/common');
-const styles = require('./styles');
-
-const InfoMenu = ({ className, ...props }) => {
-    const metaItem = React.useMemo(() => {
-        return props.metaItem !== null ?
-            {
-                ...props.metaItem,
-                links: props.metaItem.links.filter(({ category }) => category === CONSTANTS.SHARE_LINK_CATEGORY)
-            }
-            :
-            null;
-    }, [props.metaItem]);
-    const onMouseDown = React.useCallback((event) => {
-        event.nativeEvent.infoMenuClosePrevented = true;
-    }, []);
-    return (
-        <div className={classnames(className, styles['info-menu-container'])} onMouseDown={onMouseDown}>
-            {
-                metaItem !== null ?
-                    <MetaPreview
-                        className={styles['meta-preview']}
-                        compact={true}
-                        name={metaItem.name}
-                        logo={metaItem.logo}
-                        runtime={metaItem.runtime}
-                        releaseInfo={metaItem.releaseInfo}
-                        released={metaItem.released}
-                        description={metaItem.description}
-                        links={metaItem.links}
-                    />
-                    :
-                    null
-            }
-            {/* {
-                props.stream !== null ?
-                    <Stream
-                        {...props.stream}
-                        className={classnames(styles['stream'], 'active')}
-                        addonName={props.addon !== null ? props.addon.manifest.name : ''}
-                    />
-                    :
-                    null
-            } */}
-            {/* {
-                props.addon !== null ?
-                    <AddonDetails
-                        id={props.addon.manifest.id}
-                        name={props.addon.manifest.name}
-                        version={props.addon.manifest.version}
-                        logo={props.addon.manifest.logo}
-                        description={props.addon.manifest.description}
-                        types={props.addon.manifest.types}
-                        transportUrl={props.addon.transportUrl}
-                    />
-                    :
-                    null
-            } */}
-        </div>
-    );
-};
-
-InfoMenu.propTypes = {
-    className: PropTypes.string,
-    metaItem: PropTypes.object,
-    addon: PropTypes.object,
-    stream: PropTypes.object
-};
-
-module.exports = InfoMenu;
diff --git a/src/routes/Player/InfoMenu/index.js b/src/routes/Player/InfoMenu/index.js
deleted file mode 100644
index 8dae65490..000000000
--- a/src/routes/Player/InfoMenu/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const InfoMenu = require('./InfoMenu');
-
-module.exports = InfoMenu;
diff --git a/src/routes/Player/InfoMenu/styles.less b/src/routes/Player/InfoMenu/styles.less
deleted file mode 100644
index 32a72b77d..000000000
--- a/src/routes/Player/InfoMenu/styles.less
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-.info-menu-container {
-    width: 30rem;
-    padding: 2rem;
-
-    .stream {
-        pointer-events: none;
-    }
-}
\ No newline at end of file
diff --git a/src/routes/Player/VideosMenu/VideosMenu.js b/src/routes/Player/VideosMenu/VideosMenu.js
deleted file mode 100644
index 9d5819db7..000000000
--- a/src/routes/Player/VideosMenu/VideosMenu.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const Video = require('../../MetaDetails/VideosList/Video');
-const styles = require('./styles');
-
-const VideosMenu = ({ className, metaItem, seriesInfo }) => {
-    const onMouseDown = React.useCallback((event) => {
-        event.nativeEvent.videosMenuClosePrevented = true;
-    }, []);
-    const videos = React.useMemo(() => {
-        return seriesInfo && typeof seriesInfo.season === 'number' && Array.isArray(metaItem.videos) ?
-            metaItem.videos.filter(({ season }) => season === seriesInfo.season)
-            :
-            metaItem.videos;
-    }, [metaItem, seriesInfo]);
-    return (
-        <div className={classnames(className, styles['videos-menu-container'])} onMouseDown={onMouseDown}>
-            {
-                videos.map((video, index) => (
-                    <Video
-                        key={index}
-                        id={video.id}
-                        title={video.title}
-                        thumbnail={video.thumbnail}
-                        episode={video.episode}
-                        released={video.released}
-                        upcoming={video.upcoming}
-                        watched={video.watched}
-                        progress={video.progress}
-                        deepLinks={video.deepLinks}
-                        scheduled={video.scheduled}
-                    />
-                ))
-            }
-        </div>
-    );
-};
-
-VideosMenu.propTypes = {
-    className: PropTypes.string,
-    metaItem: PropTypes.object,
-    seriesInfo: PropTypes.shape({
-        season: PropTypes.number,
-        episode: PropTypes.number,
-    }),
-};
-
-module.exports = VideosMenu;
diff --git a/src/routes/Player/VideosMenu/index.js b/src/routes/Player/VideosMenu/index.js
deleted file mode 100644
index c2fa21666..000000000
--- a/src/routes/Player/VideosMenu/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const VideosMenu = require('./VideosMenu');
-
-module.exports = VideosMenu;
diff --git a/src/routes/Player/VideosMenu/styles.less b/src/routes/Player/VideosMenu/styles.less
deleted file mode 100644
index 8cc7e4805..000000000
--- a/src/routes/Player/VideosMenu/styles.less
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-.videos-menu-container {
-    width: 30rem;
-    padding: 1rem;
-    padding-bottom: 0;
-}
\ No newline at end of file

From 61c578160bd77f592da06bfb9086ac5792c95907 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 6 Dec 2024 14:48:50 +0200
Subject: [PATCH 03/57] refactor(SideDrawer): simplify the conditionals

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 38 ++++++++-------------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index faddc91b9..56a2a8cf6 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -17,7 +17,7 @@ type Props = {
 const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...props }: Props) => {
     const [season, setSeason] = React.useState<number>(seriesInfo?.season);
     const metaItem = React.useMemo(() => {
-        return props.metaItem !== null && Array.isArray(props.metaItem.videos) && seriesInfo ?
+        return seriesInfo ?
             {
                 ...props.metaItem,
                 links: props.metaItem.links.filter(({ category }) => category === CONSTANTS.SHARE_LINK_CATEGORY)
@@ -26,19 +26,16 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             props.metaItem;
     }, [props.metaItem]);
     const videos = React.useMemo(() => {
-        return props.metaItem && Array.isArray(props.metaItem.videos) ?
+        return Array.isArray(props.metaItem.videos) ?
             props.metaItem.videos.filter((video) => video.season === season)
             :
             props.metaItem.videos;
     }, [props.metaItem, season]);
     const seasons = React.useMemo(() => {
-        return props.metaItem && props.metaItem.videos
+        return props.metaItem.videos
             .map(({ season }) => season)
             .filter((season, index, seasons) => {
-                return season !== null && season !== undefined &&
-                    !isNaN(season) &&
-                    typeof season === 'number' &&
-                    seasons.indexOf(season) === index;
+                return seasons.indexOf(season) === index;
             })
             .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
     }, [props.metaItem.videos]);
@@ -52,24 +49,19 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             <div className={classNames(styles['overlay'], { [styles['open']]: sideDrawerOpen })} onClick={closeSideBar} />
             <div className={classNames(styles['side-drawer'], className)}>
                 <div className={styles['info']}>
-                    {
-                        metaItem !== null ?
-                            <MetaPreview
-                                compact={true}
-                                name={metaItem.name}
-                                logo={metaItem.logo}
-                                runtime={metaItem.runtime}
-                                releaseInfo={metaItem.releaseInfo}
-                                released={metaItem.released}
-                                description={metaItem.description}
-                                links={metaItem.links}
-                            />
-                            :
-                            null
-                    }
+                    <MetaPreview
+                        compact={true}
+                        name={metaItem.name}
+                        logo={metaItem.logo}
+                        runtime={metaItem.runtime}
+                        releaseInfo={metaItem.releaseInfo}
+                        released={metaItem.released}
+                        description={metaItem.description}
+                        links={metaItem.links}
+                    />
                 </div>
                 {
-                    videos !== null && seriesInfo ?
+                    seriesInfo ?
                         <>
                             <SeasonsBar
                                 season={season}

From 888b008cae743368a86f6965d7bcc752cf0c5208 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 6 Dec 2024 15:37:23 +0200
Subject: [PATCH 04/57] refactor: simlifications, fix arrows

---
 .../MetaDetails/VideosList/SeasonsBar/styles.less  |  4 ----
 src/routes/Player/Player.js                        |  6 +++---
 src/routes/Player/SideDrawer/SideDrawer.tsx        | 14 +++++++-------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
index f030385b4..b725e5b81 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
@@ -36,10 +36,6 @@
             background-color: var(--overlay-color);
         }
 
-        &:focus {
-            background-color: var(--primary-foreground-color);
-        }
-
         &>:first-child {
             margin-right: 0.5rem;
         }
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 1a6b238c0..03fe5cbcc 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -71,7 +71,7 @@ const Player = ({ urlParams, queryParams }) => {
     }, []);
 
     const overlayHidden = React.useMemo(() => {
-        return immersed && !casting && video.state.paused !== null && !video.state.paused && !menusOpen && !nextVideoPopupOpen && !sideDrawerOpen;
+        return immersed && !casting && video.state.paused !== null && !video.state.paused && !menusOpen && !nextVideoPopupOpen;
     }, [immersed, casting, video.state.paused, menusOpen, nextVideoPopupOpen]);
 
     const nextVideoPopupDismissed = React.useRef(false);
@@ -486,14 +486,14 @@ const Player = ({ urlParams, queryParams }) => {
                     break;
                 }
                 case 'ArrowUp': {
-                    if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
+                    if (!menusOpen && !nextVideoPopupOpen && !sideDrawerOpen && video.state.volume !== null) {
                         onVolumeChangeRequested(video.state.volume + 5);
                     }
 
                     break;
                 }
                 case 'ArrowDown': {
-                    if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
+                    if (!menusOpen && !nextVideoPopupOpen && !sideDrawerOpen && video.state.volume !== null) {
                         onVolumeChangeRequested(video.state.volume - 5);
                     }
 
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 56a2a8cf6..cc43e2fb8 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
+import { CONSTANTS } from 'stremio/common';
 import MetaPreview from 'stremio/common/MetaPreview/MetaPreview';
 import Video from '../../MetaDetails/VideosList/Video/Video';
-import styles from './SideDrawer.less';
-import classNames from 'classnames';
-import { CONSTANTS } from 'stremio/common';
 import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
+import classNames from 'classnames';
+import styles from './SideDrawer.less';
 
 type Props = {
     seriesInfo: any;
@@ -26,11 +26,11 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             props.metaItem;
     }, [props.metaItem]);
     const videos = React.useMemo(() => {
-        return Array.isArray(props.metaItem.videos) ?
-            props.metaItem.videos.filter((video) => video.season === season)
+        return Array.isArray(metaItem.videos) ?
+            metaItem.videos.filter((video) => video.season === season)
             :
-            props.metaItem.videos;
-    }, [props.metaItem, season]);
+            metaItem.videos;
+    }, [metaItem, season]);
     const seasons = React.useMemo(() => {
         return props.metaItem.videos
             .map(({ season }) => season)

From 2b03b087f27c51060d0ffac1f2ea0e3a2a1a9b81 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 12:30:47 +0200
Subject: [PATCH 05/57] fix: ts error for the inert attribute

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 3 ++-
 src/routes/Player/styles.less               | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index cc43e2fb8..b4402c63d 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -47,7 +47,8 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
     return (
         <>
             <div className={classNames(styles['overlay'], { [styles['open']]: sideDrawerOpen })} onClick={closeSideBar} />
-            <div className={classNames(styles['side-drawer'], className)}>
+            {/* @ts-expect-error inert is not recognisable on div element; we need it to not focus the sideDrawer when closed */}
+            <div className={classNames(styles['side-drawer'], className)} inert={!sideDrawerOpen ? '' : undefined}>
                 <div className={styles['info']}>
                     <MetaPreview
                         compact={true}
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 9f48bbc91..b7b7c1bd3 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -168,13 +168,15 @@ html:not(.active-slider-within) {
                         0 1.1rem 0.85rem var(--color-background-dark5-20);
             backdrop-filter: blur(15px);
             overflow: visible;
-            padding: 1rem;
             z-index: 1;
+            padding: 1rem;
             transition: transform 0.3s ease-in-out;
             transform: translateX(100%);
+            pointer-events: none;
 
             &.open {
                 transform: translateX(0);
+                pointer-events: all;
             }
 
             @media screen and (max-width: @small) {

From e372b8956640cee9eec7b2056ce1f344e8d58140 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 15:24:10 +0200
Subject: [PATCH 06/57] refactor: mobile UI improvements

---
 package-lock.json                            |  8 ++++----
 package.json                                 |  2 +-
 src/routes/Player/Player.js                  |  2 +-
 src/routes/Player/SideDrawer/SideDrawer.less |  2 +-
 src/routes/Player/styles.less                | 19 +++++++++++++++----
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f0f5755d0..99e6300b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
                 "@sentry/browser": "6.13.3",
                 "@stremio/stremio-colors": "5.0.1",
                 "@stremio/stremio-core-web": "0.48.1",
-                "@stremio/stremio-icons": "5.4.0",
+                "@stremio/stremio-icons": "5.4.1",
                 "@stremio/stremio-video": "0.0.46",
                 "a-color-picker": "1.2.1",
                 "bowser": "2.11.0",
@@ -3158,9 +3158,9 @@
             "license": "MIT"
         },
         "node_modules/@stremio/stremio-icons": {
-            "version": "5.4.0",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.0.tgz",
-            "integrity": "sha512-rRWNER+wLgMjxd6sKT0MMq4lzXDOobY3GNdT3NDeeymBtB/CD0YmYqQuUOyYDjEZ1btIbNaniUOBoPW9d3ZQ8A==",
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.1.tgz",
+            "integrity": "sha512-7g4JP7tPRT1UDZxbuH/Urq7fc6te3joy8qyx/NGWIW7wO169TTISO7ZWdejzESvUVgZ/7i6rzkRmXZ3wefWcBg==",
             "workspaces": [
                 "react",
                 "react-native",
diff --git a/package.json b/package.json
index e61cd72cd..a382d7b4d 100755
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
         "@stremio/stremio-core-web": "0.48.1",
-        "@stremio/stremio-icons": "5.4.0",
+        "@stremio/stremio-icons": "5.4.1",
         "@stremio/stremio-video": "0.0.46",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 03fe5cbcc..54a579760 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -704,7 +704,7 @@ const Player = ({ urlParams, queryParams }) => {
             {
                 player.metaItem !== null && player.metaItem.type === 'Ready' ?
                     <>
-                        <div className={classnames(styles['layer'], styles['side-drawer-button'], { [styles['open']]: sideDrawerOpen })} onClick={openSideDrawer}>
+                        <div className={classnames(styles['layer'], styles['side-drawer-button-layer'], { [styles['open']]: sideDrawerOpen })} onClick={openSideDrawer}>
                             <Icon name={'chevron-back'} className={styles['icon']} />
                         </div>
                         <SideDrawer
diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index bebbd1777..d5aca9da9 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -27,6 +27,6 @@
 
     .content {
         overflow: auto;
-        max-height: 58%;
+        max-height: 57%;
     }
 }
\ No newline at end of file
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index b7b7c1bd3..d3e176006 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -19,7 +19,7 @@ html:not(.active-slider-within) {
     .player-container.overlayHidden {
         cursor: none;
 
-        .nav-bar-layer, .control-bar-layer, .menu-layer {
+        .nav-bar-layer, .control-bar-layer, .menu-layer, .side-drawer-button-layer {
             opacity: 0;
             transition: opacity 200ms;
         }
@@ -114,7 +114,7 @@ html:not(.active-slider-within) {
             overflow: auto;
         }
 
-        &.side-drawer-button {
+        &.side-drawer-button-layer {
             right: -4rem;
             top: 50%;
             left: initial;
@@ -140,7 +140,6 @@ html:not(.active-slider-within) {
                 opacity: 0.6;
                 margin-right: 4rem;
                 transition: all 0.3s ease-in-out;
-    
             }
 
             &.open {
@@ -152,6 +151,18 @@ html:not(.active-slider-within) {
                     opacity: 1;
                 }
             }
+
+            @media screen and (max-width: @xsmall) {
+                height: 8rem;
+                width: 4.5rem;
+                right: -2.5rem;
+
+                .icon {
+                    width: 2rem;
+                    height: 2rem;
+                    margin-right: 2.5rem;
+                }
+            }
         }
 
         &.side-drawer-layer {
@@ -167,7 +178,7 @@ html:not(.active-slider-within) {
             box-shadow: 0 1.35rem 2.7rem var(--color-background-dark5-40),
                         0 1.1rem 0.85rem var(--color-background-dark5-20);
             backdrop-filter: blur(15px);
-            overflow: visible;
+            overflow-y: auto;
             z-index: 1;
             padding: 1rem;
             transition: transform 0.3s ease-in-out;

From 7d2c5118b385c6d089e72a4447ae2adea67254f8 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 15:59:09 +0200
Subject: [PATCH 07/57] refactor(styles): more mobile adjustments

---
 src/routes/Player/SideDrawer/SideDrawer.less | 19 +++++++++++++------
 src/routes/Player/SideDrawer/SideDrawer.tsx  |  6 +++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index d5aca9da9..7e20175d1 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -1,5 +1,9 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
+@seasons-bar-height: 5rem;
+
 .overlay {
     display: none;
 
@@ -16,17 +20,20 @@
 }
 
 .side-drawer {
-    position: relative;
-    height: 100%;
-    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 
     .info {
-        overflow: hidden;
         padding: 1rem;
     }
 
     .content {
-        overflow: auto;
-        max-height: 57%;
+        max-height: 60%;
+
+        .videos {
+            overflow-y: auto;
+            height: calc(100% - @seasons-bar-height);
+        }
     }
 }
\ No newline at end of file
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index b4402c63d..88cc7f330 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -63,13 +63,13 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
                 </div>
                 {
                     seriesInfo ?
-                        <>
+                        <div className={styles['content']}>
                             <SeasonsBar
                                 season={season}
                                 seasons={seasons}
                                 onSelect={seasonOnSelect}
                             />
-                            <div className={styles['content']}>
+                            <div className={styles['videos']}>
                                 {videos.map((video, index) => (
                                     <Video
                                         key={index}
@@ -87,7 +87,7 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
                                     />
                                 ))}
                             </div>
-                        </>
+                        </div>
                         : null
                 }
 

From cbffdfa33c4ec254aab8de464ffde195fa37a15e Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 16:01:25 +0200
Subject: [PATCH 08/57] refactor(styles): mobile UI adjustments (3)

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

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 7e20175d1..f664cb1e9 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -2,7 +2,7 @@
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
-@seasons-bar-height: 5rem;
+@seasons-bar-height: 4rem;
 
 .overlay {
     display: none;
@@ -26,6 +26,7 @@
 
     .info {
         padding: 1rem;
+        overflow-y: auto;
     }
 
     .content {

From 36bae5221a7ff12b2d735253b38bd1f9be079290 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 16:20:47 +0200
Subject: [PATCH 09/57] refactor(styles): orientation UI tweaks

---
 src/routes/Player/SideDrawer/SideDrawer.less |  2 +-
 src/routes/Player/styles.less                | 10 +++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index f664cb1e9..72cc8371e 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -2,7 +2,7 @@
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
-@seasons-bar-height: 4rem;
+@seasons-bar-height: 5rem;
 
 .overlay {
     display: none;
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index d3e176006..514db97c2 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -194,16 +194,12 @@ html:not(.active-slider-within) {
                 max-width: 40%;
             }
 
-            @media screen and (max-width: @xsmall) {
+            @media (orientation: landscape) and (max-width: @xsmall) {
                 max-width: 50%;
             }
 
-            @media screen and (max-width: @xxsmall) {
-                max-width: 60%;
-            }
-
-            @media screen and (max-width: @minimum) {
-                max-width: 70%;
+            @media (orientation: portrait) and (max-width: @xsmall) {
+                max-width: 90%;
             }
         }
     }

From 8e42bb0d1db75ffd3dc429b00e1bc4fb2d841b01 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 17:22:37 +0200
Subject: [PATCH 10/57] refactor(styles): videos height

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

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 72cc8371e..9d8d53ee8 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -30,7 +30,7 @@
     }
 
     .content {
-        max-height: 60%;
+        height: 60%;
 
         .videos {
             overflow-y: auto;

From d9cec1205cdfd6a40fa0d3407305058e776582ef Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 17:39:55 +0200
Subject: [PATCH 11/57] refactor(styles): use dvh to respect safe areas

dvh solves an issue where without fullscreen not all videos in the list are fully visible since vh does not count the safe / unsafe area
---
 src/routes/Player/SideDrawer/SideDrawer.less | 3 ++-
 src/routes/Player/styles.less                | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 9d8d53ee8..ba6a79719 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -30,7 +30,8 @@
     }
 
     .content {
-        height: 60%;
+        min-height: 60%;
+        max-height: 60%;
 
         .videos {
             overflow-y: auto;
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 514db97c2..e8434fd22 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -171,7 +171,7 @@ html:not(.active-slider-within) {
             left: initial;
             bottom: initial;
             max-width: 30%;
-            height: 100vh;
+            height: 100dvh;
             border-top-left-radius: var(--border-radius);
             border-bottom-left-radius: var(--border-radius);
             background-color: var(--modal-background-color);

From 5a422b5b33ba41d6fd67c4d28be9a32aec716da4 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 18:05:10 +0200
Subject: [PATCH 12/57] refactor (styles): landscape mode on mobile

---
 src/routes/Player/SideDrawer/SideDrawer.less | 48 ++++++++++++++++++--
 src/routes/Player/styles.less                | 18 +-------
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index ba6a79719..2c7a45ffb 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -2,7 +2,9 @@
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
-@seasons-bar-height: 5rem;
+@seasons-bar-height: 6rem;
+@padding: 1rem;
+@videos-height: 60%;
 
 .overlay {
     display: none;
@@ -23,19 +25,55 @@
     display: flex;
     flex-direction: column;
     justify-content: space-around;
+    padding: @padding;
+    height: 100dvh;
+    max-width: 30%;
+    overflow-y: auto;
 
     .info {
-        padding: 1rem;
+        padding: @padding;
         overflow-y: auto;
     }
 
     .content {
-        min-height: 60%;
-        max-height: 60%;
+        min-height: @videos-height;
+        max-height: @videos-height;
 
         .videos {
             overflow-y: auto;
             height: calc(100% - @seasons-bar-height);
         }
     }
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: @small) {
+    .side-drawer {
+        max-width: 40%;
+    }
+}
+
+@media (orientation: portrait) and (max-width: @xsmall) {
+    .side-drawer {
+        max-width: 90%;
+    }
+}
+
+@media (orientation: landscape) and (max-width: @xsmall) {
+    .side-drawer {
+        max-width: 50%;
+
+        .content {
+            min-height: calc(@videos-height * 1.2);
+            max-height: calc(@videos-height * 1.2);
+        }
+    }
+}
+@media screen and (max-width: @xxsmall) {
+    .side-drawer {
+        padding: calc(@padding / 2);
+
+        .info {
+            padding: calc(@padding / 2);
+        }
+    }
+}
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index e8434fd22..cb85d3354 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -170,37 +170,21 @@ html:not(.active-slider-within) {
             right: 0;
             left: initial;
             bottom: initial;
-            max-width: 30%;
-            height: 100dvh;
             border-top-left-radius: var(--border-radius);
             border-bottom-left-radius: var(--border-radius);
             background-color: var(--modal-background-color);
             box-shadow: 0 1.35rem 2.7rem var(--color-background-dark5-40),
                         0 1.1rem 0.85rem var(--color-background-dark5-20);
             backdrop-filter: blur(15px);
-            overflow-y: auto;
-            z-index: 1;
-            padding: 1rem;
             transition: transform 0.3s ease-in-out;
             transform: translateX(100%);
             pointer-events: none;
+            z-index: 1;
 
             &.open {
                 transform: translateX(0);
                 pointer-events: all;
             }
-
-            @media screen and (max-width: @small) {
-                max-width: 40%;
-            }
-
-            @media (orientation: landscape) and (max-width: @xsmall) {
-                max-width: 50%;
-            }
-
-            @media (orientation: portrait) and (max-width: @xsmall) {
-                max-width: 90%;
-            }
         }
     }
 }
\ No newline at end of file

From 121cdcaa0423c0159b36b52e64ad6adb619b4f53 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 18:10:07 +0200
Subject: [PATCH 13/57] chore: use core-web branch package for testing

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 99e6300b9..e261e0773 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.16.0",
                 "@sentry/browser": "6.13.3",
                 "@stremio/stremio-colors": "5.0.1",
-                "@stremio/stremio-core-web": "0.48.1",
+                "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/feat/player-mark-video-as-watched/dev/stremio-stremio-core-web-0.48.1.tgz",
                 "@stremio/stremio-icons": "5.4.1",
                 "@stremio/stremio-video": "0.0.46",
                 "a-color-picker": "1.2.1",
@@ -3133,8 +3133,8 @@
         },
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.48.1",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.1.tgz",
-            "integrity": "sha512-bdWxBuuOOC0NdG1Mg60lEhpK7Bw/Ea6D89bRcvIvM3WnJrUpGA4jbx4xWj3KQRM08PM3WWCY9/FzctlWCxFMRg==",
+            "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/player-mark-video-as-watched/dev/stremio-stremio-core-web-0.48.1.tgz",
+            "integrity": "sha512-TLjzZuulB/fJ8FbOJq/hQ+K6WsF2Bas0GzHmUiIwJIKoBo8WqwrPc90JfAOmkyFEP90NtM/UtIxQ0cxXpAoagQ==",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
             }
diff --git a/package.json b/package.json
index a382d7b4d..83baa706d 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@babel/runtime": "7.16.0",
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
-        "@stremio/stremio-core-web": "0.48.1",
+        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/feat/player-mark-video-as-watched/dev/stremio-stremio-core-web-0.48.1.tgz",
         "@stremio/stremio-icons": "5.4.1",
         "@stremio/stremio-video": "0.0.46",
         "a-color-picker": "1.2.1",

From b89468783fa926b048432ee82cd5273bf4d75798 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 9 Dec 2024 18:14:59 +0200
Subject: [PATCH 14/57] chore: update & sync pkgs

---
 package-lock.json | 210 ++++++++++++++++++++++++++++------------------
 1 file changed, 129 insertions(+), 81 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6fc767c5a..428b3790f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1866,23 +1866,16 @@
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.26.0",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
-            "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
-            "license": "MIT",
+            "version": "7.16.0",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
+            "integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
             "dependencies": {
-                "regenerator-runtime": "^0.14.0"
+                "regenerator-runtime": "^0.13.4"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
-        "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
-            "version": "0.14.1",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-            "license": "MIT"
-        },
         "node_modules/@babel/template": {
             "version": "7.25.9",
             "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
@@ -3257,81 +3250,106 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/@sentry-internal/browser-utils": {
-            "version": "8.42.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.42.0.tgz",
-            "integrity": "sha512-xzgRI0wglKYsPrna574w1t38aftuvo44gjOKFvPNGPnYfiW9y4m+64kUz3JFbtanvOrKPcaITpdYiB4DeJXEbA==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry/core": "8.42.0"
-            },
-            "engines": {
-                "node": ">=14.18"
-            }
-        },
-        "node_modules/@sentry-internal/feedback": {
-            "version": "8.42.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.42.0.tgz",
-            "integrity": "sha512-dkIw5Wdukwzngg5gNJ0QcK48LyJaMAnBspqTqZ3ItR01STi6Z+6+/Bt5XgmrvDgRD+FNBinflc5zMmfdFXXhvw==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry/core": "8.42.0"
-            },
-            "engines": {
-                "node": ">=14.18"
-            }
-        },
-        "node_modules/@sentry-internal/replay": {
-            "version": "8.42.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.42.0.tgz",
-            "integrity": "sha512-oNcJEBlDfXnRFYC5Mxj5fairyZHNqlnU4g8kPuztB9G5zlsyLgWfPxzcn1ixVQunth2/WZRklDi4o1ZfyHww7w==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry-internal/browser-utils": "8.42.0",
-                "@sentry/core": "8.42.0"
-            },
-            "engines": {
-                "node": ">=14.18"
-            }
-        },
-        "node_modules/@sentry-internal/replay-canvas": {
-            "version": "8.42.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.42.0.tgz",
-            "integrity": "sha512-XrPErqVhPsPh/oFLVKvz7Wb+Fi2J1zCPLeZCxWqFuPWI2agRyLVu0KvqJyzSpSrRAEJC/XFzuSVILlYlXXSfgA==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry-internal/replay": "8.42.0",
-                "@sentry/core": "8.42.0"
-            },
-            "engines": {
-                "node": ">=14.18"
-            }
-        },
         "node_modules/@sentry/browser": {
-            "version": "8.42.0",
-            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.42.0.tgz",
-            "integrity": "sha512-lStrEk609KJHwXfDrOgoYVVoFFExixHywxSExk7ZDtwj2YPv6r6Y1gogvgr7dAZj7jWzadHkxZ33l9EOSJBfug==",
-            "license": "MIT",
+            "version": "6.13.3",
+            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.13.3.tgz",
+            "integrity": "sha512-jwlpsk2/u1cofvfYsjmqcnx50JJtf/T6HTgdW+ih8+rqWC5ABEZf4IiB/H+KAyjJ3wVzCOugMq5irL83XDCfqQ==",
             "dependencies": {
-                "@sentry-internal/browser-utils": "8.42.0",
-                "@sentry-internal/feedback": "8.42.0",
-                "@sentry-internal/replay": "8.42.0",
-                "@sentry-internal/replay-canvas": "8.42.0",
-                "@sentry/core": "8.42.0"
+                "@sentry/core": "6.13.3",
+                "@sentry/types": "6.13.3",
+                "@sentry/utils": "6.13.3",
+                "tslib": "^1.9.3"
             },
             "engines": {
-                "node": ">=14.18"
+                "node": ">=6"
             }
         },
+        "node_modules/@sentry/browser/node_modules/tslib": {
+            "version": "1.14.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        },
         "node_modules/@sentry/core": {
-            "version": "8.42.0",
-            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.42.0.tgz",
-            "integrity": "sha512-ac6O3pgoIbU6rpwz6LlwW0wp3/GAHuSI0C5IsTgIY6baN8rOBnlAtG6KrHDDkGmUQ2srxkDJu9n1O6Td3cBCqw==",
-            "license": "MIT",
+            "version": "6.13.3",
+            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.13.3.tgz",
+            "integrity": "sha512-obm3SjgCk8A7nB37b2AU1eq1q7gMoJRrGMv9VRIyfcG0Wlz/5lJ9O3ohUk+YZaaVfZMxXn6hFtsBiOWmlv7IIA==",
+            "dependencies": {
+                "@sentry/hub": "6.13.3",
+                "@sentry/minimal": "6.13.3",
+                "@sentry/types": "6.13.3",
+                "@sentry/utils": "6.13.3",
+                "tslib": "^1.9.3"
+            },
             "engines": {
-                "node": ">=14.18"
+                "node": ">=6"
             }
         },
+        "node_modules/@sentry/core/node_modules/tslib": {
+            "version": "1.14.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        },
+        "node_modules/@sentry/hub": {
+            "version": "6.13.3",
+            "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.13.3.tgz",
+            "integrity": "sha512-eYppBVqvhs5cvm33snW2sxfcw6G20/74RbBn+E4WDo15hozis89kU7ZCJDOPkXuag3v1h9igns/kM6PNBb41dw==",
+            "dependencies": {
+                "@sentry/types": "6.13.3",
+                "@sentry/utils": "6.13.3",
+                "tslib": "^1.9.3"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@sentry/hub/node_modules/tslib": {
+            "version": "1.14.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        },
+        "node_modules/@sentry/minimal": {
+            "version": "6.13.3",
+            "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.13.3.tgz",
+            "integrity": "sha512-63MlYYRni3fs5Bh8XBAfVZ+ctDdWg0fapSTP1ydIC37fKvbE+5zhyUqwrEKBIiclEApg1VKX7bkKxVdu/vsFdw==",
+            "dependencies": {
+                "@sentry/hub": "6.13.3",
+                "@sentry/types": "6.13.3",
+                "tslib": "^1.9.3"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@sentry/minimal/node_modules/tslib": {
+            "version": "1.14.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        },
+        "node_modules/@sentry/types": {
+            "version": "6.13.3",
+            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.13.3.tgz",
+            "integrity": "sha512-Vrz5CdhaTRSvCQjSyIFIaV9PodjAVFkzJkTRxyY7P77RcegMsRSsG1yzlvCtA99zG9+e6MfoJOgbOCwuZids5A==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@sentry/utils": {
+            "version": "6.13.3",
+            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.13.3.tgz",
+            "integrity": "sha512-zYFuFH3MaYtBZTeJ4Yajg7pDf0pM3MWs3+9k5my9Fd+eqNcl7dYQYJbT9gyC0HXK1QI4CAMNNlHNl4YXhF91ag==",
+            "dependencies": {
+                "@sentry/types": "6.13.3",
+                "tslib": "^1.9.3"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@sentry/utils/node_modules/tslib": {
+            "version": "1.14.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        },
         "node_modules/@sinclair/typebox": {
             "version": "0.27.8",
             "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -3373,10 +3391,9 @@
             }
         },
         "node_modules/@stremio/stremio-colors": {
-            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-colors/-/stremio-colors-5.2.0.tgz",
-            "integrity": "sha512-dYlPgu9W/H7c9s1zmW5tiDnRenaUa4Hg1QCyOg1lhOcgSfM/bVTi5nnqX+IfvGTTUNA0zgzh8hI3o3miwnZxTg==",
-            "license": "MIT"
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-colors/-/stremio-colors-5.0.1.tgz",
+            "integrity": "sha512-Dt3PYmy1DZ473QNs99KYXVWQPHtpIl37VUY0+gCEvvuCqE1fRrZIJtZ9KbysUKonvO7WwdQDztgcW0iGoc1dEA=="
         },
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.48.1",
@@ -8570,6 +8587,22 @@
                 }
             }
         },
+        "node_modules/i18next/node_modules/@babel/runtime": {
+            "version": "7.26.0",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+            "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+            "dependencies": {
+                "regenerator-runtime": "^0.14.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/i18next/node_modules/regenerator-runtime": {
+            "version": "0.14.1",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        },
         "node_modules/iconv-lite": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -12447,6 +12480,22 @@
                 }
             }
         },
+        "node_modules/react-i18next/node_modules/@babel/runtime": {
+            "version": "7.26.0",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+            "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+            "dependencies": {
+                "regenerator-runtime": "^0.14.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/react-i18next/node_modules/regenerator-runtime": {
+            "version": "0.14.1",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        },
         "node_modules/react-is": {
             "version": "18.3.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -12552,7 +12601,6 @@
         },
         "node_modules/regenerator-runtime": {
             "version": "0.13.11",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/regenerator-transform": {

From cc046ce48afb160e98415423e72a1e1d557b712d Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 10 Dec 2024 19:12:41 +0200
Subject: [PATCH 15/57] refactor: fix iOS overflow issues

---
 src/routes/Player/Player.js                  |  4 ++--
 src/routes/Player/SideDrawer/SideDrawer.less |  4 ++--
 src/routes/Player/SideDrawer/SideDrawer.tsx  | 15 ++++++++++++++-
 src/routes/Player/styles.less                | 13 +++++++------
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 97e0c8cb3..07d678632 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -702,7 +702,7 @@ const Player = ({ urlParams, queryParams }) => {
             }
             {
                 player.metaItem !== null && player.metaItem.type === 'Ready' ?
-                    <>
+                    <React.Fragment>
                         <div className={classnames(styles['layer'], styles['side-drawer-button-layer'], { [styles['open']]: sideDrawerOpen })} onClick={openSideDrawer}>
                             <Icon name={'chevron-back'} className={styles['icon']} />
                         </div>
@@ -713,7 +713,7 @@ const Player = ({ urlParams, queryParams }) => {
                             closeSideBar={closeSideDrawer}
                             sideDrawerOpen={sideDrawerOpen}
                         />
-                    </>
+                    </React.Fragment>
                     : null
             }
             {
diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 2c7a45ffb..7cef5897d 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -7,10 +7,10 @@
 @videos-height: 60%;
 
 .overlay {
-    display: none;
+    visibility: hidden;
 
     &.open {
-        display: block;
+        visibility: visible;
         position: fixed;
         top: 0;
         left: 0;
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 88cc7f330..a0b4f2bb2 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { CONSTANTS } from 'stremio/common';
 import MetaPreview from 'stremio/common/MetaPreview/MetaPreview';
-import Video from '../../MetaDetails/VideosList/Video/Video';
+import Video from 'stremio/common/Video/Video';
 import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
 import classNames from 'classnames';
 import styles from './SideDrawer.less';
+import { useServices } from 'stremio/services';
 
 type Props = {
     seriesInfo: any;
@@ -15,6 +16,7 @@ type Props = {
 };
 
 const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...props }: Props) => {
+    const { core } = useServices();
     const [season, setSeason] = React.useState<number>(seriesInfo?.season);
     const metaItem = React.useMemo(() => {
         return seriesInfo ?
@@ -44,6 +46,16 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
         setSeason(parseInt(event.value));
     }, []);
 
+    const onMarkVideoAsWatched = (video: Video, watched: boolean) => {
+        core.transport.dispatch({
+            action: 'Player',
+            args: {
+                action: 'MarkVideoAsWatched',
+                args: [video, !watched]
+            }
+        });
+    };
+
     return (
         <>
             <div className={classNames(styles['overlay'], { [styles['open']]: sideDrawerOpen })} onClick={closeSideBar} />
@@ -84,6 +96,7 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
                                         progress={video.progress}
                                         deepLinks={video.deepLinks}
                                         scheduled={video.scheduled}
+                                        onMarkVideoAsWatched={onMarkVideoAsWatched}
                                     />
                                 ))}
                             </div>
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index cb85d3354..3cca50704 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -127,11 +127,13 @@ html:not(.active-slider-within) {
             align-items: center;
             background-color: var(--modal-background-color);
             cursor: pointer;
-            border-top-left-radius: 50%;
-            border-bottom-left-radius: 50%;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
+            border-radius: 50%;
+            -webkit-tap-highlight-color: transparent;
+            vertical-align: middle;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            transition: opacity 0.3s ease-in-out, border-radius 0.3s ease-in-out;
+            will-change: transform, opacity;
+            opacity: 1;
             
             .icon {
                 width: 2.5rem;
@@ -139,11 +141,10 @@ html:not(.active-slider-within) {
                 color: var(--primary-foreground-color);
                 opacity: 0.6;
                 margin-right: 4rem;
-                transition: all 0.3s ease-in-out;
             }
 
             &.open {
-                display: none;
+                opacity: 0;
             }
 
             &:hover {

From c3d506c749f22553fe833957a3b290c7b87aeef9 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 10 Dec 2024 19:48:43 +0200
Subject: [PATCH 16/57] fix: padding on MetaPreview

---
 src/routes/Player/SideDrawer/SideDrawer.less | 11 +++++++++++
 src/routes/Player/SideDrawer/SideDrawer.tsx  |  1 +
 2 files changed, 12 insertions(+)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 7cef5897d..085840128 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -2,6 +2,11 @@
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
+:import('~stremio/common/MetaPreview/styles.less') {
+    action-buttons-container: action-buttons-container;
+}
+
+
 @seasons-bar-height: 6rem;
 @padding: 1rem;
 @videos-height: 60%;
@@ -33,6 +38,12 @@
     .info {
         padding: @padding;
         overflow-y: auto;
+
+        .side-drawer-meta-preview {
+            .action-buttons-container {
+                padding-top: 0;
+            }
+        }
     }
 
     .content {
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index a0b4f2bb2..df89746f5 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -63,6 +63,7 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             <div className={classNames(styles['side-drawer'], className)} inert={!sideDrawerOpen ? '' : undefined}>
                 <div className={styles['info']}>
                     <MetaPreview
+                        className={styles['side-drawer-meta-preview']}
                         compact={true}
                         name={metaItem.name}
                         logo={metaItem.logo}

From 3fc1e2c19188a7b531cc49bed3c6b6953d8cd52d Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 10 Dec 2024 20:31:23 +0200
Subject: [PATCH 17/57] fix: action-buttons-container margin issue

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

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 085840128..b6da0d859 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -42,6 +42,7 @@
         .side-drawer-meta-preview {
             .action-buttons-container {
                 padding-top: 0;
+                margin-top: 0;
             }
         }
     }
@@ -79,6 +80,7 @@
         }
     }
 }
+
 @media screen and (max-width: @xxsmall) {
     .side-drawer {
         padding: calc(@padding / 2);

From de290823e63c57f4903f2455ed9b9741a4e7efc7 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 10 Dec 2024 20:31:38 +0200
Subject: [PATCH 18/57] fix: speed menu overflow issue

---
 src/routes/Player/SpeedMenu/styles.less | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/routes/Player/SpeedMenu/styles.less b/src/routes/Player/SpeedMenu/styles.less
index 12c3ea725..4305d5d01 100644
--- a/src/routes/Player/SpeedMenu/styles.less
+++ b/src/routes/Player/SpeedMenu/styles.less
@@ -1,10 +1,9 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
 .speed-menu-container {
     width: 14rem;
-    overflow: visible !important;
 
     .title {
         flex: none;
@@ -18,7 +17,6 @@
         flex: 0 1 auto;
         max-height: calc(3.2rem * 8);
         padding: 0 1rem 0.5rem;
-        overflow-y: auto;
         
         .option {
             height: 3.2rem;

From 483273aacd3015dd7cae0f79fcef4c4f35e769b0 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 10 Dec 2024 20:31:55 +0200
Subject: [PATCH 19/57] fix: menu-layer mobile issues

---
 src/routes/Player/ControlBar/styles.less |  6 ++++--
 src/routes/Player/styles.less            | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
index 147a3f0a2..bcfbbdaef 100644
--- a/src/routes/Player/ControlBar/styles.less
+++ b/src/routes/Player/ControlBar/styles.less
@@ -100,14 +100,16 @@
 
             .control-bar-buttons-menu-container {
                 position: absolute;
-                right: 0.15rem;
+                right: 0rem;
                 bottom: 4.5rem;
-                flex-direction: column;
                 padding: 0.5rem;
+                margin: 0.5rem;
+                max-width: calc(100dvw - 1rem);
                 border-radius: var(--border-radius);
                 background-color: var(--modal-background-color);
                 box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
                     0 1.1rem 0.85rem @color-background-dark5-20;
+                overflow-x: auto;
 
                 &:not(:global(.open)) {
                     display: none;
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 3cca50704..ef07fbe47 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -102,7 +102,7 @@ html:not(.active-slider-within) {
         &.menu-layer {
             top: initial;
             left: initial;
-            right: 2rem;
+            right: 4rem;
             bottom: 8rem;
             max-height: calc(100% - 13.5rem);
             max-width: calc(100% - 4rem);
@@ -188,4 +188,15 @@ html:not(.active-slider-within) {
             }
         }
     }
-}
\ No newline at end of file
+}
+
+@media (orientation: portrait) and (max-width: @minimum) {
+    .player-container {
+        .layer {
+            &.menu-layer {
+                right: 2.5rem;
+                bottom: 11rem;
+            }
+        }
+    }
+}

From 2a9bf425f8e062f65dbb8e6d1627567e4c42b90c Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 11 Dec 2024 17:42:01 +0200
Subject: [PATCH 20/57] chore (pkgs): update core to new release

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 428b3790f..1d2e8fd23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.16.0",
                 "@sentry/browser": "6.13.3",
                 "@stremio/stremio-colors": "5.0.1",
-                "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/feat/player-mark-video-as-watched/dev/stremio-stremio-core-web-0.48.1.tgz",
+                "@stremio/stremio-core-web": "0.48.2",
                 "@stremio/stremio-icons": "5.4.1",
                 "@stremio/stremio-video": "0.0.46",
                 "a-color-picker": "1.2.1",
@@ -3396,9 +3396,9 @@
             "integrity": "sha512-Dt3PYmy1DZ473QNs99KYXVWQPHtpIl37VUY0+gCEvvuCqE1fRrZIJtZ9KbysUKonvO7WwdQDztgcW0iGoc1dEA=="
         },
         "node_modules/@stremio/stremio-core-web": {
-            "version": "0.48.1",
-            "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/player-mark-video-as-watched/dev/stremio-stremio-core-web-0.48.1.tgz",
-            "integrity": "sha512-TLjzZuulB/fJ8FbOJq/hQ+K6WsF2Bas0GzHmUiIwJIKoBo8WqwrPc90JfAOmkyFEP90NtM/UtIxQ0cxXpAoagQ==",
+            "version": "0.48.2",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.2.tgz",
+            "integrity": "sha512-zkz4ftGMoK9RmIDlGLd/DYLtaXuf4HxnMEN1NduKNXDlYPSJ4Q/b1hCbXrVqVK/nx6s+8X4XyYr9IOwFLaT5ew==",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
             }
diff --git a/package.json b/package.json
index dc335a9ee..fc4f436c7 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@babel/runtime": "7.16.0",
         "@sentry/browser": "6.13.3",
         "@stremio/stremio-colors": "5.0.1",
-        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/feat/player-mark-video-as-watched/dev/stremio-stremio-core-web-0.48.1.tgz",
+        "@stremio/stremio-core-web": "0.48.2",
         "@stremio/stremio-icons": "5.4.1",
         "@stremio/stremio-video": "0.0.46",
         "a-color-picker": "1.2.1",

From fde708bdd2a61e4555c9b08e4cd485b708783e05 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 12:41:07 +0200
Subject: [PATCH 21/57] chore(pkgs): package-lock.json

---
 package-lock.json | 215 +++++++++++++++++-----------------------------
 1 file changed, 79 insertions(+), 136 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 44efe2d14..737707c93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.26.0",
                 "@sentry/browser": "8.42.0",
                 "@stremio/stremio-colors": "5.2.0",
-                "@stremio/stremio-core-web": "0.48.1",
+                "@stremio/stremio-core-web": "0.48.2",
                 "@stremio/stremio-icons": "5.4.0",
                 "@stremio/stremio-video": "0.0.46",
                 "a-color-picker": "1.2.1",
@@ -1866,16 +1866,21 @@
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.16.0",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
-            "integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
+            "version": "7.26.0",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+            "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
             "dependencies": {
-                "regenerator-runtime": "^0.13.4"
+                "regenerator-runtime": "^0.14.0"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+            "version": "0.14.1",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        },
         "node_modules/@babel/template": {
             "version": "7.25.9",
             "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
@@ -3250,106 +3255,75 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/@sentry/browser": {
-            "version": "6.13.3",
-            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.13.3.tgz",
-            "integrity": "sha512-jwlpsk2/u1cofvfYsjmqcnx50JJtf/T6HTgdW+ih8+rqWC5ABEZf4IiB/H+KAyjJ3wVzCOugMq5irL83XDCfqQ==",
+        "node_modules/@sentry-internal/browser-utils": {
+            "version": "8.42.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.42.0.tgz",
+            "integrity": "sha512-xzgRI0wglKYsPrna574w1t38aftuvo44gjOKFvPNGPnYfiW9y4m+64kUz3JFbtanvOrKPcaITpdYiB4DeJXEbA==",
             "dependencies": {
-                "@sentry/core": "6.13.3",
-                "@sentry/types": "6.13.3",
-                "@sentry/utils": "6.13.3",
-                "tslib": "^1.9.3"
+                "@sentry/core": "8.42.0"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">=14.18"
             }
         },
-        "node_modules/@sentry/browser/node_modules/tslib": {
-            "version": "1.14.1",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        "node_modules/@sentry-internal/feedback": {
+            "version": "8.42.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.42.0.tgz",
+            "integrity": "sha512-dkIw5Wdukwzngg5gNJ0QcK48LyJaMAnBspqTqZ3ItR01STi6Z+6+/Bt5XgmrvDgRD+FNBinflc5zMmfdFXXhvw==",
+            "dependencies": {
+                "@sentry/core": "8.42.0"
+            },
+            "engines": {
+                "node": ">=14.18"
+            }
+        },
+        "node_modules/@sentry-internal/replay": {
+            "version": "8.42.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.42.0.tgz",
+            "integrity": "sha512-oNcJEBlDfXnRFYC5Mxj5fairyZHNqlnU4g8kPuztB9G5zlsyLgWfPxzcn1ixVQunth2/WZRklDi4o1ZfyHww7w==",
+            "dependencies": {
+                "@sentry-internal/browser-utils": "8.42.0",
+                "@sentry/core": "8.42.0"
+            },
+            "engines": {
+                "node": ">=14.18"
+            }
+        },
+        "node_modules/@sentry-internal/replay-canvas": {
+            "version": "8.42.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.42.0.tgz",
+            "integrity": "sha512-XrPErqVhPsPh/oFLVKvz7Wb+Fi2J1zCPLeZCxWqFuPWI2agRyLVu0KvqJyzSpSrRAEJC/XFzuSVILlYlXXSfgA==",
+            "dependencies": {
+                "@sentry-internal/replay": "8.42.0",
+                "@sentry/core": "8.42.0"
+            },
+            "engines": {
+                "node": ">=14.18"
+            }
+        },
+        "node_modules/@sentry/browser": {
+            "version": "8.42.0",
+            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.42.0.tgz",
+            "integrity": "sha512-lStrEk609KJHwXfDrOgoYVVoFFExixHywxSExk7ZDtwj2YPv6r6Y1gogvgr7dAZj7jWzadHkxZ33l9EOSJBfug==",
+            "dependencies": {
+                "@sentry-internal/browser-utils": "8.42.0",
+                "@sentry-internal/feedback": "8.42.0",
+                "@sentry-internal/replay": "8.42.0",
+                "@sentry-internal/replay-canvas": "8.42.0",
+                "@sentry/core": "8.42.0"
+            },
+            "engines": {
+                "node": ">=14.18"
+            }
         },
         "node_modules/@sentry/core": {
-            "version": "6.13.3",
-            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.13.3.tgz",
-            "integrity": "sha512-obm3SjgCk8A7nB37b2AU1eq1q7gMoJRrGMv9VRIyfcG0Wlz/5lJ9O3ohUk+YZaaVfZMxXn6hFtsBiOWmlv7IIA==",
-            "dependencies": {
-                "@sentry/hub": "6.13.3",
-                "@sentry/minimal": "6.13.3",
-                "@sentry/types": "6.13.3",
-                "@sentry/utils": "6.13.3",
-                "tslib": "^1.9.3"
-            },
+            "version": "8.42.0",
+            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.42.0.tgz",
+            "integrity": "sha512-ac6O3pgoIbU6rpwz6LlwW0wp3/GAHuSI0C5IsTgIY6baN8rOBnlAtG6KrHDDkGmUQ2srxkDJu9n1O6Td3cBCqw==",
             "engines": {
-                "node": ">=6"
+                "node": ">=14.18"
             }
         },
-        "node_modules/@sentry/core/node_modules/tslib": {
-            "version": "1.14.1",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        },
-        "node_modules/@sentry/hub": {
-            "version": "6.13.3",
-            "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.13.3.tgz",
-            "integrity": "sha512-eYppBVqvhs5cvm33snW2sxfcw6G20/74RbBn+E4WDo15hozis89kU7ZCJDOPkXuag3v1h9igns/kM6PNBb41dw==",
-            "dependencies": {
-                "@sentry/types": "6.13.3",
-                "@sentry/utils": "6.13.3",
-                "tslib": "^1.9.3"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@sentry/hub/node_modules/tslib": {
-            "version": "1.14.1",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        },
-        "node_modules/@sentry/minimal": {
-            "version": "6.13.3",
-            "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.13.3.tgz",
-            "integrity": "sha512-63MlYYRni3fs5Bh8XBAfVZ+ctDdWg0fapSTP1ydIC37fKvbE+5zhyUqwrEKBIiclEApg1VKX7bkKxVdu/vsFdw==",
-            "dependencies": {
-                "@sentry/hub": "6.13.3",
-                "@sentry/types": "6.13.3",
-                "tslib": "^1.9.3"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@sentry/minimal/node_modules/tslib": {
-            "version": "1.14.1",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        },
-        "node_modules/@sentry/types": {
-            "version": "6.13.3",
-            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.13.3.tgz",
-            "integrity": "sha512-Vrz5CdhaTRSvCQjSyIFIaV9PodjAVFkzJkTRxyY7P77RcegMsRSsG1yzlvCtA99zG9+e6MfoJOgbOCwuZids5A==",
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@sentry/utils": {
-            "version": "6.13.3",
-            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.13.3.tgz",
-            "integrity": "sha512-zYFuFH3MaYtBZTeJ4Yajg7pDf0pM3MWs3+9k5my9Fd+eqNcl7dYQYJbT9gyC0HXK1QI4CAMNNlHNl4YXhF91ag==",
-            "dependencies": {
-                "@sentry/types": "6.13.3",
-                "tslib": "^1.9.3"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@sentry/utils/node_modules/tslib": {
-            "version": "1.14.1",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        },
         "node_modules/@sinclair/typebox": {
             "version": "0.27.8",
             "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -3391,14 +3365,14 @@
             }
         },
         "node_modules/@stremio/stremio-colors": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-colors/-/stremio-colors-5.0.1.tgz",
-            "integrity": "sha512-Dt3PYmy1DZ473QNs99KYXVWQPHtpIl37VUY0+gCEvvuCqE1fRrZIJtZ9KbysUKonvO7WwdQDztgcW0iGoc1dEA=="
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-colors/-/stremio-colors-5.2.0.tgz",
+            "integrity": "sha512-dYlPgu9W/H7c9s1zmW5tiDnRenaUa4Hg1QCyOg1lhOcgSfM/bVTi5nnqX+IfvGTTUNA0zgzh8hI3o3miwnZxTg=="
         },
         "node_modules/@stremio/stremio-core-web": {
-            "version": "0.48.1",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.1.tgz",
-            "integrity": "sha512-bdWxBuuOOC0NdG1Mg60lEhpK7Bw/Ea6D89bRcvIvM3WnJrUpGA4jbx4xWj3KQRM08PM3WWCY9/FzctlWCxFMRg==",
+            "version": "0.48.2",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.2.tgz",
+            "integrity": "sha512-zkz4ftGMoK9RmIDlGLd/DYLtaXuf4HxnMEN1NduKNXDlYPSJ4Q/b1hCbXrVqVK/nx6s+8X4XyYr9IOwFLaT5ew==",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
             }
@@ -3422,9 +3396,9 @@
             "license": "MIT"
         },
         "node_modules/@stremio/stremio-icons": {
-            "version": "5.4.1",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.1.tgz",
-            "integrity": "sha512-7g4JP7tPRT1UDZxbuH/Urq7fc6te3joy8qyx/NGWIW7wO169TTISO7ZWdejzESvUVgZ/7i6rzkRmXZ3wefWcBg==",
+            "version": "5.4.0",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.0.tgz",
+            "integrity": "sha512-rRWNER+wLgMjxd6sKT0MMq4lzXDOobY3GNdT3NDeeymBtB/CD0YmYqQuUOyYDjEZ1btIbNaniUOBoPW9d3ZQ8A==",
             "workspaces": [
                 "react",
                 "react-native",
@@ -8587,22 +8561,6 @@
                 }
             }
         },
-        "node_modules/i18next/node_modules/@babel/runtime": {
-            "version": "7.26.0",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
-            "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
-            "dependencies": {
-                "regenerator-runtime": "^0.14.0"
-            },
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
-        "node_modules/i18next/node_modules/regenerator-runtime": {
-            "version": "0.14.1",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
-        },
         "node_modules/iconv-lite": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -12480,22 +12438,6 @@
                 }
             }
         },
-        "node_modules/react-i18next/node_modules/@babel/runtime": {
-            "version": "7.26.0",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
-            "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
-            "dependencies": {
-                "regenerator-runtime": "^0.14.0"
-            },
-            "engines": {
-                "node": ">=6.9.0"
-            }
-        },
-        "node_modules/react-i18next/node_modules/regenerator-runtime": {
-            "version": "0.14.1",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
-        },
         "node_modules/react-is": {
             "version": "18.3.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -12601,6 +12543,7 @@
         },
         "node_modules/regenerator-runtime": {
             "version": "0.13.11",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/regenerator-transform": {

From f97b5f1d69ab215716ebcd44c436d487aa10eb32 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 18:51:33 +0200
Subject: [PATCH 22/57] refactor: import hooks on top of the file

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

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index df89746f5..16a7e1926 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
 import { CONSTANTS } from 'stremio/common';
 import MetaPreview from 'stremio/common/MetaPreview/MetaPreview';
 import Video from 'stremio/common/Video/Video';
@@ -8,7 +8,7 @@ import styles from './SideDrawer.less';
 import { useServices } from 'stremio/services';
 
 type Props = {
-    seriesInfo: any;
+    seriesInfo: { season: number, episode: number };
     metaItem: MetaItem;
     className?: string;
     closeSideBar: () => void;
@@ -17,8 +17,8 @@ type Props = {
 
 const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...props }: Props) => {
     const { core } = useServices();
-    const [season, setSeason] = React.useState<number>(seriesInfo?.season);
-    const metaItem = React.useMemo(() => {
+    const [season, setSeason] = useState<number>(seriesInfo?.season);
+    const metaItem = useMemo(() => {
         return seriesInfo ?
             {
                 ...props.metaItem,
@@ -27,13 +27,13 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             :
             props.metaItem;
     }, [props.metaItem]);
-    const videos = React.useMemo(() => {
+    const videos = useMemo(() => {
         return Array.isArray(metaItem.videos) ?
             metaItem.videos.filter((video) => video.season === season)
             :
             metaItem.videos;
     }, [metaItem, season]);
-    const seasons = React.useMemo(() => {
+    const seasons = useMemo(() => {
         return props.metaItem.videos
             .map(({ season }) => season)
             .filter((season, index, seasons) => {
@@ -42,11 +42,11 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
     }, [props.metaItem.videos]);
 
-    const seasonOnSelect = React.useCallback((event: { value: string }) => {
+    const seasonOnSelect = useCallback((event: { value: string }) => {
         setSeason(parseInt(event.value));
     }, []);
 
-    const onMarkVideoAsWatched = (video: Video, watched: boolean) => {
+    const onMarkVideoAsWatched = useCallback((video: Video, watched: boolean) => {
         core.transport.dispatch({
             action: 'Player',
             args: {
@@ -54,7 +54,7 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
                 args: [video, !watched]
             }
         });
-    };
+    }, []);
 
     return (
         <>

From 10838315d8267d87a914011d34e97738932e4865 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 19:10:40 +0200
Subject: [PATCH 23/57] fix: use dvw for width instead of %

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

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index b6da0d859..c3f61fe25 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -32,7 +32,7 @@
     justify-content: space-around;
     padding: @padding;
     height: 100dvh;
-    max-width: 30%;
+    max-width: 35rem;
     overflow-y: auto;
 
     .info {
@@ -60,19 +60,19 @@
 
 @media screen and (max-width: @small) {
     .side-drawer {
-        max-width: 40%;
+        max-width: 40dvw;
     }
 }
 
 @media (orientation: portrait) and (max-width: @xsmall) {
     .side-drawer {
-        max-width: 90%;
+        max-width: 90dvw;
     }
 }
 
 @media (orientation: landscape) and (max-width: @xsmall) {
     .side-drawer {
-        max-width: 50%;
+        max-width: 50dvw;
 
         .content {
             min-height: calc(@videos-height * 1.2);

From 6c34c6fd61bf1c1267b5e3badb9fdbd22d7e8ad4 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 19:14:56 +0200
Subject: [PATCH 24/57] fix: use flex instead of height attribute

---
 src/routes/Player/SideDrawer/SideDrawer.less | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index c3f61fe25..03c42aaaa 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -9,7 +9,6 @@
 
 @seasons-bar-height: 6rem;
 @padding: 1rem;
-@videos-height: 60%;
 
 .overlay {
     visibility: hidden;
@@ -38,6 +37,7 @@
     .info {
         padding: @padding;
         overflow-y: auto;
+        flex: 1;
 
         .side-drawer-meta-preview {
             .action-buttons-container {
@@ -48,8 +48,7 @@
     }
 
     .content {
-        min-height: @videos-height;
-        max-height: @videos-height;
+        flex: 2;
 
         .videos {
             overflow-y: auto;
@@ -73,11 +72,6 @@
 @media (orientation: landscape) and (max-width: @xsmall) {
     .side-drawer {
         max-width: 50dvw;
-
-        .content {
-            min-height: calc(@videos-height * 1.2);
-            max-height: calc(@videos-height * 1.2);
-        }
     }
 }
 

From 5eb0c01536cdb9c254b9292edf60e3dec0282c47 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 19:19:24 +0200
Subject: [PATCH 25/57] fix: videos height

---
 src/routes/Player/SideDrawer/SideDrawer.less | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 03c42aaaa..dfc1d56e3 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -37,7 +37,7 @@
     .info {
         padding: @padding;
         overflow-y: auto;
-        flex: 1;
+        flex: none;
 
         .side-drawer-meta-preview {
             .action-buttons-container {
@@ -49,10 +49,11 @@
 
     .content {
         flex: 2;
+        display: flex;
+        flex-direction: column;
 
         .videos {
             overflow-y: auto;
-            height: calc(100% - @seasons-bar-height);
         }
     }
 }

From 7a39c40a5472712f237d0c4007e14d8fe4c56346 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 13 Dec 2024 12:54:55 +0200
Subject: [PATCH 26/57] remove: unused var

---
 src/routes/Player/SideDrawer/SideDrawer.less | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index dfc1d56e3..b307038e6 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -6,8 +6,6 @@
     action-buttons-container: action-buttons-container;
 }
 
-
-@seasons-bar-height: 6rem;
 @padding: 1rem;
 
 .overlay {

From 47464ceed0d8582843db59cde1ad066795123284 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 13 Dec 2024 13:06:57 +0200
Subject: [PATCH 27/57] feat: add close button

---
 src/routes/Player/SideDrawer/SideDrawer.less | 30 ++++++++++++++++++++
 src/routes/Player/SideDrawer/SideDrawer.tsx  |  4 +++
 2 files changed, 34 insertions(+)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index b307038e6..5a3318c92 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -31,6 +31,36 @@
     height: 100dvh;
     max-width: 35rem;
     overflow-y: auto;
+    position: relative;
+
+    .close-button {
+        position: absolute;
+        top: 1.3rem;
+        left: 1.3rem;
+        padding: 0.5rem;
+        background-color: transparent;
+        cursor: pointer;
+        z-index: 2;
+        border-radius: var(--border-radius);
+        transition: 0.3s all ease-in-out;
+        -webkit-tap-highlight-color: transparent;
+
+        .icon {
+            color: var(--primary-foreground-color);
+            width: 2rem;
+            height: 2rem;
+            opacity: 0.6;
+            transition: 0.3s opacity ease-in-out;
+        }
+
+        &:hover {
+            background-color: var(--overlay-color);
+
+            .icon {
+                opacity: 1;
+            }
+        }
+    }
 
     .info {
         padding: @padding;
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 16a7e1926..4c9b24cc8 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -6,6 +6,7 @@ import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
 import classNames from 'classnames';
 import styles from './SideDrawer.less';
 import { useServices } from 'stremio/services';
+import Icon from '@stremio/stremio-icons/react';
 
 type Props = {
     seriesInfo: { season: number, episode: number };
@@ -61,6 +62,9 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
             <div className={classNames(styles['overlay'], { [styles['open']]: sideDrawerOpen })} onClick={closeSideBar} />
             {/* @ts-expect-error inert is not recognisable on div element; we need it to not focus the sideDrawer when closed */}
             <div className={classNames(styles['side-drawer'], className)} inert={!sideDrawerOpen ? '' : undefined}>
+                <div className={styles['close-button']} onClick={closeSideBar}>
+                    <Icon className={styles['icon']} name={'chevron-forward'} />
+                </div>
                 <div className={styles['info']}>
                     <MetaPreview
                         className={styles['side-drawer-meta-preview']}

From 1464324941ecc9a4af31517e100253e92c5ee8d2 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 13 Dec 2024 13:30:39 +0200
Subject: [PATCH 28/57] chore: update stremio-icons

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 737707c93..d8d1f2b31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
                 "@sentry/browser": "8.42.0",
                 "@stremio/stremio-colors": "5.2.0",
                 "@stremio/stremio-core-web": "0.48.2",
-                "@stremio/stremio-icons": "5.4.0",
+                "@stremio/stremio-icons": "5.4.1",
                 "@stremio/stremio-video": "0.0.46",
                 "a-color-picker": "1.2.1",
                 "bowser": "2.11.0",
@@ -3396,9 +3396,9 @@
             "license": "MIT"
         },
         "node_modules/@stremio/stremio-icons": {
-            "version": "5.4.0",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.0.tgz",
-            "integrity": "sha512-rRWNER+wLgMjxd6sKT0MMq4lzXDOobY3GNdT3NDeeymBtB/CD0YmYqQuUOyYDjEZ1btIbNaniUOBoPW9d3ZQ8A==",
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.1.tgz",
+            "integrity": "sha512-7g4JP7tPRT1UDZxbuH/Urq7fc6te3joy8qyx/NGWIW7wO169TTISO7ZWdejzESvUVgZ/7i6rzkRmXZ3wefWcBg==",
             "workspaces": [
                 "react",
                 "react-native",
diff --git a/package.json b/package.json
index 0fb7e8824..14e7dff48 100755
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.48.2",
-        "@stremio/stremio-icons": "5.4.0",
+        "@stremio/stremio-icons": "5.4.1",
         "@stremio/stremio-video": "0.0.46",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",

From 444152a09b572525003eb4bcb048c0f910e1f15e Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 13 Dec 2024 13:30:59 +0200
Subject: [PATCH 29/57] refactor: closer button logic and width on mobile

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

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 5a3318c92..7af991dce 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -34,6 +34,7 @@
     position: relative;
 
     .close-button {
+        display: none;
         position: absolute;
         top: 1.3rem;
         left: 1.3rem;
@@ -94,13 +95,21 @@
 
 @media (orientation: portrait) and (max-width: @xsmall) {
     .side-drawer {
-        max-width: 90dvw;
+        max-width: 100dvw;
+
+        .close-button {
+            display: block;
+        }
     }
 }
 
 @media (orientation: landscape) and (max-width: @xsmall) {
     .side-drawer {
         max-width: 50dvw;
+
+        .info {
+            max-height: 30dvh;
+        }
     }
 }
 

From b8a5e603745938f9cdf8636bdb7ed7d0243e5686 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 13 Dec 2024 16:33:43 +0200
Subject: [PATCH 30/57] refactor: button position moved to right

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

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 7af991dce..6f028bc64 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -37,7 +37,7 @@
         display: none;
         position: absolute;
         top: 1.3rem;
-        left: 1.3rem;
+        right: 1.3rem;
         padding: 0.5rem;
         background-color: transparent;
         cursor: pointer;

From 1788a95f24d576101ef3e639961afc173e186ff8 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 14:19:50 +0200
Subject: [PATCH 31/57] fix: strange positioning on movies

---
 src/routes/Player/SideDrawer/SideDrawer.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 6f028bc64..9ab9d8ef5 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -26,7 +26,6 @@
 .side-drawer {
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
     padding: @padding;
     height: 100dvh;
     max-width: 35rem;

From 297b8f172d8deb0a8e692ee8e7680aac855f31a3 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 16:32:03 +0200
Subject: [PATCH 32/57] refactor: keep the DOM organised

---
 src/routes/Player/Player.js                  |  28 +--
 src/routes/Player/SideDrawer/SideDrawer.less | 200 +++++++++++++------
 src/routes/Player/SideDrawer/SideDrawer.tsx  |  18 +-
 src/routes/Player/styles.less                |  69 +------
 4 files changed, 165 insertions(+), 150 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 07d678632..f37e19e13 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -25,7 +25,6 @@ const useVideo = require('./useVideo');
 const styles = require('./styles');
 const Video = require('./Video');
 const { default: SideDrawer } = require('./SideDrawer/SideDrawer');
-const { default: Icon } = require('@stremio/stremio-icons/react');
 
 const Player = ({ urlParams, queryParams }) => {
     const { t } = useTranslation();
@@ -408,13 +407,6 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [video.state.playbackSpeed]);
 
-    React.useEffect(() => {
-        if (sideDrawerOpen) {
-            closeMenus();
-            setImmersed(true);
-        }
-    }, [sideDrawerOpen]);
-
     React.useEffect(() => {
         const toastFilter = (item) => item?.dataset?.type === 'CoreEvent';
         toast.addFilter(toastFilter);
@@ -702,18 +694,14 @@ const Player = ({ urlParams, queryParams }) => {
             }
             {
                 player.metaItem !== null && player.metaItem.type === 'Ready' ?
-                    <React.Fragment>
-                        <div className={classnames(styles['layer'], styles['side-drawer-button-layer'], { [styles['open']]: sideDrawerOpen })} onClick={openSideDrawer}>
-                            <Icon name={'chevron-back'} className={styles['icon']} />
-                        </div>
-                        <SideDrawer
-                            metaItem={player.metaItem.content}
-                            seriesInfo={player.seriesInfo}
-                            className={classnames(styles['layer'], styles['side-drawer-layer'], { [styles['open']]: sideDrawerOpen })}
-                            closeSideBar={closeSideDrawer}
-                            sideDrawerOpen={sideDrawerOpen}
-                        />
-                    </React.Fragment>
+                    <SideDrawer
+                        metaItem={player.metaItem.content}
+                        seriesInfo={player.seriesInfo}
+                        className={classnames(styles['layer'], styles['side-drawer-layer'])}
+                        openSideDrawer={openSideDrawer}
+                        closeSideBar={closeSideDrawer}
+                        sideDrawerOpen={sideDrawerOpen}
+                    />
                     : null
             }
             {
diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index 9ab9d8ef5..b04c212b4 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -8,116 +8,204 @@
 
 @padding: 1rem;
 
-.overlay {
-    visibility: hidden;
-
-    &.open {
-        visibility: visible;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.2);
-        z-index: 1;
-    }
-}
-
 .side-drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
     display: flex;
-    flex-direction: column;
-    padding: @padding;
-    height: 100dvh;
-    max-width: 35rem;
-    overflow-y: auto;
+    justify-content: flex-end;
+    overflow: visible;
     position: relative;
 
-    .close-button {
-        display: none;
+    .overlay {
         position: absolute;
-        top: 1.3rem;
-        right: 1.3rem;
-        padding: 0.5rem;
-        background-color: transparent;
+        top: 0;
+        right: 0;
+        width: 100dvw;
+        height: 100dvh;
+        background-color: rgba(0, 0, 0, 0.2);
+        display: none;
+    }
+
+    .open-button {
+        position: absolute;
+        right: -4rem;
+        top: 50%;
+        height: 12.5rem;
+        width: 7.5rem;
+        transform: translateY(-50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--modal-background-color);
         cursor: pointer;
-        z-index: 2;
-        border-radius: var(--border-radius);
-        transition: 0.3s all ease-in-out;
+        border-radius: 50%;
         -webkit-tap-highlight-color: transparent;
+        vertical-align: middle;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        transition: opacity 0.3s ease-in-out, border-radius 0.3s ease-in-out;
+        will-change: transform, opacity;
+        opacity: 1;
 
         .icon {
+            width: 2.5rem;
+            height: 2.5rem;
             color: var(--primary-foreground-color);
-            width: 2rem;
-            height: 2rem;
             opacity: 0.6;
-            transition: 0.3s opacity ease-in-out;
+            margin-right: 4rem;
         }
 
         &:hover {
-            background-color: var(--overlay-color);
-
             .icon {
                 opacity: 1;
             }
         }
     }
 
-    .info {
+    .content {
+        display: flex;
+        flex-direction: column;
         padding: @padding;
+        height: 100dvh;
+        max-width: 35rem;
         overflow-y: auto;
-        flex: none;
+        position: relative;
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius: var(--border-radius);
+        background-color: var(--modal-background-color);
+        box-shadow: 0 1.35rem 2.7rem var(--color-background-dark5-40), 0 1.1rem 0.85rem var(--color-background-dark5-20);
+        backdrop-filter: blur(15px);
+        transition: transform 0.3s ease-in-out;
+        transform: translateX(100%);
+        pointer-events: none;
+        z-index: 1;
 
-        .side-drawer-meta-preview {
-            .action-buttons-container {
-                padding-top: 0;
-                margin-top: 0;
+        .close-button {
+            display: none;
+            position: absolute;
+            top: 1.3rem;
+            right: 1.3rem;
+            padding: 0.5rem;
+            background-color: transparent;
+            cursor: pointer;
+            z-index: 2;
+            border-radius: var(--border-radius);
+            transition: 0.3s all ease-in-out;
+            -webkit-tap-highlight-color: transparent;
+
+            .icon {
+                color: var(--primary-foreground-color);
+                width: 2rem;
+                height: 2rem;
+                opacity: 0.6;
+                transition: 0.3s opacity ease-in-out;
+            }
+
+            &:hover {
+                background-color: var(--overlay-color);
+
+                .icon {
+                    opacity: 1;
+                }
+            }
+        }
+
+        .info {
+            padding: @padding;
+            overflow-y: auto;
+            flex: none;
+
+            .side-drawer-meta-preview {
+                .action-buttons-container {
+                    padding-top: 0;
+                    margin-top: 0;
+                }
+            }
+        }
+
+        .series-content {
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+
+            .videos {
+                overflow-y: auto;
             }
         }
     }
 
-    .content {
-        flex: 2;
-        display: flex;
-        flex-direction: column;
+    &.open {
+        .overlay {
+            display: block;
+        }
 
-        .videos {
-            overflow-y: auto;
+        .content {
+            transform: translateX(0);
+            pointer-events: auto;
+
+            .open-button {
+                opacity: 0;
+            }
         }
     }
 }
 
 @media screen and (max-width: @small) {
     .side-drawer {
-        max-width: 40dvw;
+        .content {
+            max-width: 40dvw;
+        }
     }
 }
 
 @media (orientation: portrait) and (max-width: @xsmall) {
     .side-drawer {
-        max-width: 100dvw;
+        .content {
+            max-width: 100dvw;
 
-        .close-button {
-            display: block;
+            .close-button {
+                display: block;
+            }
         }
     }
 }
 
 @media (orientation: landscape) and (max-width: @xsmall) {
     .side-drawer {
-        max-width: 50dvw;
+        .content {
+            max-width: 50dvw;
 
-        .info {
-            max-height: 30dvh;
+            .close-button {
+                display: block;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: @xsmall) {
+    .side-drawer {
+        .open-button {
+            height: 8rem;
+            width: 4.5rem;
+            right: -2.5rem;
+
+            .icon {
+                width: 2rem;
+                height: 2rem;
+                margin-right: 2.5rem;
+            }
         }
     }
 }
 
 @media screen and (max-width: @xxsmall) {
     .side-drawer {
-        padding: calc(@padding / 2);
-
-        .info {
+        .content {
             padding: calc(@padding / 2);
+
+            .info {
+                padding: calc(@padding / 2);
+            }
         }
     }
 }
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 4c9b24cc8..9448ddb14 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -12,11 +12,13 @@ type Props = {
     seriesInfo: { season: number, episode: number };
     metaItem: MetaItem;
     className?: string;
+    openSideDrawer: () => void;
     closeSideBar: () => void;
+    toggleSideDrawer: () => void;
     sideDrawerOpen: boolean;
 };
 
-const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...props }: Props) => {
+const SideDrawer = ({ seriesInfo, className, openSideDrawer, closeSideBar, sideDrawerOpen, ...props }: Props) => {
     const { core } = useServices();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
     const metaItem = useMemo(() => {
@@ -58,10 +60,13 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
     }, []);
 
     return (
-        <>
-            <div className={classNames(styles['overlay'], { [styles['open']]: sideDrawerOpen })} onClick={closeSideBar} />
+        <div className={classNames(styles['side-drawer'], className, { [styles['open']]: sideDrawerOpen })}>
+            <div className={styles['overlay']} onClick={closeSideBar} />
+            <div className={styles['open-button']} onClick={openSideDrawer}>
+                <Icon name={'chevron-back'} className={styles['icon']} />
+            </div>
             {/* @ts-expect-error inert is not recognisable on div element; we need it to not focus the sideDrawer when closed */}
-            <div className={classNames(styles['side-drawer'], className)} inert={!sideDrawerOpen ? '' : undefined}>
+            <div className={styles['content']} inert={!sideDrawerOpen ? '' : undefined}>
                 <div className={styles['close-button']} onClick={closeSideBar}>
                     <Icon className={styles['icon']} name={'chevron-forward'} />
                 </div>
@@ -80,7 +85,7 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
                 </div>
                 {
                     seriesInfo ?
-                        <div className={styles['content']}>
+                        <div className={styles['series-content']}>
                             <SeasonsBar
                                 season={season}
                                 seasons={seasons}
@@ -110,7 +115,8 @@ const SideDrawer = ({ seriesInfo, className, closeSideBar, sideDrawerOpen, ...pr
                 }
 
             </div>
-        </>
+
+        </div>
     );
 };
 
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index ef07fbe47..b9708135c 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -19,7 +19,7 @@ html:not(.active-slider-within) {
     .player-container.overlayHidden {
         cursor: none;
 
-        .nav-bar-layer, .control-bar-layer, .menu-layer, .side-drawer-button-layer {
+        .nav-bar-layer, .control-bar-layer, .menu-layer, .side-drawer-layer {
             opacity: 0;
             transition: opacity 200ms;
         }
@@ -114,78 +114,11 @@ html:not(.active-slider-within) {
             overflow: auto;
         }
 
-        &.side-drawer-button-layer {
-            right: -4rem;
-            top: 50%;
-            left: initial;
-            bottom: initial;
-            height: 12.5rem;
-            width: 7.5rem;
-            transform: translateY(-50%);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: var(--modal-background-color);
-            cursor: pointer;
-            border-radius: 50%;
-            -webkit-tap-highlight-color: transparent;
-            vertical-align: middle;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            transition: opacity 0.3s ease-in-out, border-radius 0.3s ease-in-out;
-            will-change: transform, opacity;
-            opacity: 1;
-            
-            .icon {
-                width: 2.5rem;
-                height: 2.5rem;
-                color: var(--primary-foreground-color);
-                opacity: 0.6;
-                margin-right: 4rem;
-            }
-
-            &.open {
-                opacity: 0;
-            }
-
-            &:hover {
-                .icon {
-                    opacity: 1;
-                }
-            }
-
-            @media screen and (max-width: @xsmall) {
-                height: 8rem;
-                width: 4.5rem;
-                right: -2.5rem;
-
-                .icon {
-                    width: 2rem;
-                    height: 2rem;
-                    margin-right: 2.5rem;
-                }
-            }
-        }
-
         &.side-drawer-layer {
             top: 0;
             right: 0;
             left: initial;
             bottom: initial;
-            border-top-left-radius: var(--border-radius);
-            border-bottom-left-radius: var(--border-radius);
-            background-color: var(--modal-background-color);
-            box-shadow: 0 1.35rem 2.7rem var(--color-background-dark5-40),
-                        0 1.1rem 0.85rem var(--color-background-dark5-20);
-            backdrop-filter: blur(15px);
-            transition: transform 0.3s ease-in-out;
-            transform: translateX(100%);
-            pointer-events: none;
-            z-index: 1;
-
-            &.open {
-                transform: translateX(0);
-                pointer-events: all;
-            }
         }
     }
 }

From f8d9d0d8385c5217a3841b9664fbc2eaa99bde4e Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 16:37:10 +0200
Subject: [PATCH 33/57] fix(info container): height  in landscape mode

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

diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index b04c212b4..c87f0d5dd 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -175,8 +175,8 @@
         .content {
             max-width: 50dvw;
 
-            .close-button {
-                display: block;
+            .info {
+                max-height: 30dvh;
             }
         }
     }

From 9b4e3e83b1403d8e9b19d7fbade25513a0c072ff Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 16:38:24 +0200
Subject: [PATCH 34/57] remove: unused prop

---
 src/routes/Player/SideDrawer/SideDrawer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 9448ddb14..3768386ea 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -14,7 +14,6 @@ type Props = {
     className?: string;
     openSideDrawer: () => void;
     closeSideBar: () => void;
-    toggleSideDrawer: () => void;
     sideDrawerOpen: boolean;
 };
 

From 1555e05d6bcb2d427fa60e72e091a4d0dd6f7b1c Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 17:08:23 +0200
Subject: [PATCH 35/57] (revert): removal of useeffect | sidedrawer states

---
 src/routes/Player/Player.js                  | 7 +++++++
 src/routes/Player/SideDrawer/SideDrawer.less | 2 --
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index f37e19e13..ce6e6e1be 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -407,6 +407,13 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [video.state.playbackSpeed]);
 
+    React.useEffect(() => {
+        if (sideDrawerOpen) {
+            closeMenus();
+            setImmersed(true);
+        }
+    }, [sideDrawerOpen]);
+
     React.useEffect(() => {
         const toastFilter = (item) => item?.dataset?.type === 'CoreEvent';
         toast.addFilter(toastFilter);
diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index c87f0d5dd..dfcde350a 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -12,8 +12,6 @@
     position: fixed;
     top: 0;
     right: 0;
-    display: flex;
-    justify-content: flex-end;
     overflow: visible;
     position: relative;
 

From 72b7a370fcf5a2e57cd34e3c58eed8792d6aebaf Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 19:25:31 +0200
Subject: [PATCH 36/57] feat: rewrite sidedrawer to act like a menu

---
 src/routes/Player/Player.js                  |  16 +-
 src/routes/Player/SideDrawer/SideDrawer.less | 190 +++++--------------
 src/routes/Player/SideDrawer/SideDrawer.tsx  | 106 +++++------
 src/routes/Player/styles.less                |   2 +-
 4 files changed, 102 insertions(+), 212 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index ce6e6e1be..83effbfff 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -56,7 +56,7 @@ const Player = ({ urlParams, queryParams }) => {
     const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
     const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
     const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
-    const [sideDrawerOpen, openSideDrawer, closeSideDrawer, toggleSideDrawer] = useBinaryState(false);
+    const [sideDrawerOpen, , closeSideDrawer, toggleSideDrawer] = useBinaryState(false);
 
     const menusOpen = React.useMemo(() => {
         return optionsMenuOpen || subtitlesMenuOpen || speedMenuOpen || statisticsMenuOpen;
@@ -67,6 +67,7 @@ const Player = ({ urlParams, queryParams }) => {
         closeSubtitlesMenu();
         closeSpeedMenu();
         closeStatisticsMenu();
+        closeSideDrawer();
     }, []);
 
     const overlayHidden = React.useMemo(() => {
@@ -407,13 +408,6 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [video.state.playbackSpeed]);
 
-    React.useEffect(() => {
-        if (sideDrawerOpen) {
-            closeMenus();
-            setImmersed(true);
-        }
-    }, [sideDrawerOpen]);
-
     React.useEffect(() => {
         const toastFilter = (item) => item?.dataset?.type === 'CoreEvent';
         toast.addFilter(toastFilter);
@@ -700,14 +694,12 @@ const Player = ({ urlParams, queryParams }) => {
                     null
             }
             {
-                player.metaItem !== null && player.metaItem.type === 'Ready' ?
+                player.metaItem !== null && player.metaItem.type === 'Ready' && sideDrawerOpen ?
                     <SideDrawer
                         metaItem={player.metaItem.content}
                         seriesInfo={player.seriesInfo}
                         className={classnames(styles['layer'], styles['side-drawer-layer'])}
-                        openSideDrawer={openSideDrawer}
-                        closeSideBar={closeSideDrawer}
-                        sideDrawerOpen={sideDrawerOpen}
+                        closeSideDrawer={closeSideDrawer}
                     />
                     : null
             }
diff --git a/src/routes/Player/SideDrawer/SideDrawer.less b/src/routes/Player/SideDrawer/SideDrawer.less
index dfcde350a..575e3fbc4 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.less
+++ b/src/routes/Player/SideDrawer/SideDrawer.less
@@ -9,201 +9,107 @@
 @padding: 1rem;
 
 .side-drawer {
-    position: fixed;
-    top: 0;
-    right: 0;
-    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    padding: @padding;
+    height: 100dvh;
+    max-width: 35rem;
+    overflow-y: auto;
     position: relative;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    background-color: var(--modal-background-color);
+    box-shadow: 0 1.35rem 2.7rem var(--color-background-dark5-40), 0 1.1rem 0.85rem var(--color-background-dark5-20);
+    backdrop-filter: blur(15px);
+    transition: transform 0.3s ease-in-out;
+    z-index: 1;
 
-    .overlay {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 100dvw;
-        height: 100dvh;
-        background-color: rgba(0, 0, 0, 0.2);
+    .close-button {
         display: none;
-    }
-
-    .open-button {
         position: absolute;
-        right: -4rem;
-        top: 50%;
-        height: 12.5rem;
-        width: 7.5rem;
-        transform: translateY(-50%);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: var(--modal-background-color);
+        top: 1.3rem;
+        right: 1.3rem;
+        padding: 0.5rem;
+        background-color: transparent;
         cursor: pointer;
-        border-radius: 50%;
+        z-index: 2;
+        border-radius: var(--border-radius);
+        transition: 0.3s all ease-in-out;
         -webkit-tap-highlight-color: transparent;
-        vertical-align: middle;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        transition: opacity 0.3s ease-in-out, border-radius 0.3s ease-in-out;
-        will-change: transform, opacity;
-        opacity: 1;
 
         .icon {
-            width: 2.5rem;
-            height: 2.5rem;
             color: var(--primary-foreground-color);
+            width: 2rem;
+            height: 2rem;
             opacity: 0.6;
-            margin-right: 4rem;
+            transition: 0.3s opacity ease-in-out;
         }
 
         &:hover {
+            background-color: var(--overlay-color);
+
             .icon {
                 opacity: 1;
             }
         }
     }
 
-    .content {
-        display: flex;
-        flex-direction: column;
+    .info {
         padding: @padding;
-        height: 100dvh;
-        max-width: 35rem;
         overflow-y: auto;
-        position: relative;
-        border-top-left-radius: var(--border-radius);
-        border-bottom-left-radius: var(--border-radius);
-        background-color: var(--modal-background-color);
-        box-shadow: 0 1.35rem 2.7rem var(--color-background-dark5-40), 0 1.1rem 0.85rem var(--color-background-dark5-20);
-        backdrop-filter: blur(15px);
-        transition: transform 0.3s ease-in-out;
-        transform: translateX(100%);
-        pointer-events: none;
-        z-index: 1;
+        flex: none;
 
-        .close-button {
-            display: none;
-            position: absolute;
-            top: 1.3rem;
-            right: 1.3rem;
-            padding: 0.5rem;
-            background-color: transparent;
-            cursor: pointer;
-            z-index: 2;
-            border-radius: var(--border-radius);
-            transition: 0.3s all ease-in-out;
-            -webkit-tap-highlight-color: transparent;
-
-            .icon {
-                color: var(--primary-foreground-color);
-                width: 2rem;
-                height: 2rem;
-                opacity: 0.6;
-                transition: 0.3s opacity ease-in-out;
-            }
-
-            &:hover {
-                background-color: var(--overlay-color);
-
-                .icon {
-                    opacity: 1;
-                }
-            }
-        }
-
-        .info {
-            padding: @padding;
-            overflow-y: auto;
-            flex: none;
-
-            .side-drawer-meta-preview {
-                .action-buttons-container {
-                    padding-top: 0;
-                    margin-top: 0;
-                }
-            }
-        }
-
-        .series-content {
-            flex: 2;
-            display: flex;
-            flex-direction: column;
-
-            .videos {
-                overflow-y: auto;
+        .side-drawer-meta-preview {
+            .action-buttons-container {
+                padding-top: 0;
+                margin-top: 0;
             }
         }
     }
 
-    &.open {
-        .overlay {
-            display: block;
-        }
+    .series-content {
+        flex: 2;
+        display: flex;
+        flex-direction: column;
 
-        .content {
-            transform: translateX(0);
-            pointer-events: auto;
-
-            .open-button {
-                opacity: 0;
-            }
+        .videos {
+            overflow-y: auto;
         }
     }
 }
 
 @media screen and (max-width: @small) {
     .side-drawer {
-        .content {
-            max-width: 40dvw;
-        }
+        max-width: 40dvw;
     }
 }
 
 @media (orientation: portrait) and (max-width: @xsmall) {
     .side-drawer {
-        .content {
-            max-width: 100dvw;
+        max-width: 100dvw;
 
-            .close-button {
-                display: block;
-            }
+        .close-button {
+            display: block;
         }
     }
 }
 
 @media (orientation: landscape) and (max-width: @xsmall) {
     .side-drawer {
-        .content {
-            max-width: 50dvw;
+        max-width: 50dvw;
 
-            .info {
-                max-height: 30dvh;
-            }
-        }
-    }
-}
-
-@media screen and (max-width: @xsmall) {
-    .side-drawer {
-        .open-button {
-            height: 8rem;
-            width: 4.5rem;
-            right: -2.5rem;
-
-            .icon {
-                width: 2rem;
-                height: 2rem;
-                margin-right: 2.5rem;
-            }
+        .info {
+            max-height: 30dvh;
         }
     }
 }
 
 @media screen and (max-width: @xxsmall) {
     .side-drawer {
-        .content {
-            padding: calc(@padding / 2);
+        padding: calc(@padding / 2);
 
-            .info {
-                padding: calc(@padding / 2);
-            }
+        .info {
+            padding: calc(@padding / 2);
         }
     }
 }
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 3768386ea..d5578ef8d 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -7,19 +7,19 @@ import classNames from 'classnames';
 import styles from './SideDrawer.less';
 import { useServices } from 'stremio/services';
 import Icon from '@stremio/stremio-icons/react';
+import useOutsideClick from 'stremio/common/useOutsideClick';
 
 type Props = {
     seriesInfo: { season: number, episode: number };
     metaItem: MetaItem;
     className?: string;
-    openSideDrawer: () => void;
-    closeSideBar: () => void;
-    sideDrawerOpen: boolean;
+    closeSideDrawer: () => void;
 };
 
-const SideDrawer = ({ seriesInfo, className, openSideDrawer, closeSideBar, sideDrawerOpen, ...props }: Props) => {
+const SideDrawer = ({ seriesInfo, className, closeSideDrawer, ...props }: Props) => {
     const { core } = useServices();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
+    const sideDrawerRef = useOutsideClick(() => closeSideDrawer());
     const metaItem = useMemo(() => {
         return seriesInfo ?
             {
@@ -59,61 +59,53 @@ const SideDrawer = ({ seriesInfo, className, openSideDrawer, closeSideBar, sideD
     }, []);
 
     return (
-        <div className={classNames(styles['side-drawer'], className, { [styles['open']]: sideDrawerOpen })}>
-            <div className={styles['overlay']} onClick={closeSideBar} />
-            <div className={styles['open-button']} onClick={openSideDrawer}>
-                <Icon name={'chevron-back'} className={styles['icon']} />
+        <div className={classNames(styles['side-drawer'], className)} ref={sideDrawerRef}>
+            <div className={styles['close-button']} onClick={closeSideDrawer}>
+                <Icon className={styles['icon']} name={'chevron-forward'} />
             </div>
-            {/* @ts-expect-error inert is not recognisable on div element; we need it to not focus the sideDrawer when closed */}
-            <div className={styles['content']} inert={!sideDrawerOpen ? '' : undefined}>
-                <div className={styles['close-button']} onClick={closeSideBar}>
-                    <Icon className={styles['icon']} name={'chevron-forward'} />
-                </div>
-                <div className={styles['info']}>
-                    <MetaPreview
-                        className={styles['side-drawer-meta-preview']}
-                        compact={true}
-                        name={metaItem.name}
-                        logo={metaItem.logo}
-                        runtime={metaItem.runtime}
-                        releaseInfo={metaItem.releaseInfo}
-                        released={metaItem.released}
-                        description={metaItem.description}
-                        links={metaItem.links}
-                    />
-                </div>
-                {
-                    seriesInfo ?
-                        <div className={styles['series-content']}>
-                            <SeasonsBar
-                                season={season}
-                                seasons={seasons}
-                                onSelect={seasonOnSelect}
-                            />
-                            <div className={styles['videos']}>
-                                {videos.map((video, index) => (
-                                    <Video
-                                        key={index}
-                                        className={styles['video']}
-                                        id={video.id}
-                                        title={video.title}
-                                        thumbnail={video.thumbnail}
-                                        episode={video.episode}
-                                        released={video.released}
-                                        upcoming={video.upcoming}
-                                        watched={video.watched}
-                                        progress={video.progress}
-                                        deepLinks={video.deepLinks}
-                                        scheduled={video.scheduled}
-                                        onMarkVideoAsWatched={onMarkVideoAsWatched}
-                                    />
-                                ))}
-                            </div>
+            <div className={styles['info']}>
+                <MetaPreview
+                    className={styles['side-drawer-meta-preview']}
+                    compact={true}
+                    name={metaItem.name}
+                    logo={metaItem.logo}
+                    runtime={metaItem.runtime}
+                    releaseInfo={metaItem.releaseInfo}
+                    released={metaItem.released}
+                    description={metaItem.description}
+                    links={metaItem.links}
+                />
+            </div>
+            {
+                seriesInfo ?
+                    <div className={styles['series-content']}>
+                        <SeasonsBar
+                            season={season}
+                            seasons={seasons}
+                            onSelect={seasonOnSelect}
+                        />
+                        <div className={styles['videos']}>
+                            {videos.map((video, index) => (
+                                <Video
+                                    key={index}
+                                    className={styles['video']}
+                                    id={video.id}
+                                    title={video.title}
+                                    thumbnail={video.thumbnail}
+                                    episode={video.episode}
+                                    released={video.released}
+                                    upcoming={video.upcoming}
+                                    watched={video.watched}
+                                    progress={video.progress}
+                                    deepLinks={video.deepLinks}
+                                    scheduled={video.scheduled}
+                                    onMarkVideoAsWatched={onMarkVideoAsWatched}
+                                />
+                            ))}
                         </div>
-                        : null
-                }
-
-            </div>
+                    </div>
+                    : null
+            }
 
         </div>
     );
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index b9708135c..28d388777 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -115,7 +115,7 @@ html:not(.active-slider-within) {
         }
 
         &.side-drawer-layer {
-            top: 0;
+            bottom: 0;
             right: 0;
             left: initial;
             bottom: initial;

From f9cb1a5fd28944654844b7225848194f5647efe7 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 18 Dec 2024 09:32:36 +0100
Subject: [PATCH 37/57] refactor(Player): make SideDrawer act like a menu

---
 src/routes/Player/Player.js                   | 35 +++++++++++++------
 src/routes/Player/SideDrawer/SideDrawer.tsx   | 18 +++++-----
 src/routes/Player/SideDrawer/index.ts         |  2 ++
 .../SideDrawerButton/SideDrawerButton.less    | 31 ++++++++++++++++
 .../SideDrawerButton/SideDrawerButton.tsx     | 19 ++++++++++
 src/routes/Player/SideDrawerButton/index.ts   |  2 ++
 src/routes/Player/styles.less                 |  7 ++++
 src/types/models/Player.d.ts                  | 10 +++---
 8 files changed, 101 insertions(+), 23 deletions(-)
 create mode 100644 src/routes/Player/SideDrawer/index.ts
 create mode 100644 src/routes/Player/SideDrawerButton/SideDrawerButton.less
 create mode 100644 src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
 create mode 100644 src/routes/Player/SideDrawerButton/index.ts

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 83effbfff..0f3bb0bad 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -18,13 +18,14 @@ const StatisticsMenu = require('./StatisticsMenu');
 const OptionsMenu = require('./OptionsMenu');
 const SubtitlesMenu = require('./SubtitlesMenu');
 const SpeedMenu = require('./SpeedMenu');
+const { default: SideDrawerButton } = require('./SideDrawerButton');
+const { default: SideDrawer } = require('./SideDrawer');
 const usePlayer = require('./usePlayer');
 const useSettings = require('./useSettings');
 const useStatistics = require('./useStatistics');
 const useVideo = require('./useVideo');
 const styles = require('./styles');
 const Video = require('./Video');
-const { default: SideDrawer } = require('./SideDrawer/SideDrawer');
 
 const Player = ({ urlParams, queryParams }) => {
     const { t } = useTranslation();
@@ -59,8 +60,8 @@ const Player = ({ urlParams, queryParams }) => {
     const [sideDrawerOpen, , closeSideDrawer, toggleSideDrawer] = useBinaryState(false);
 
     const menusOpen = React.useMemo(() => {
-        return optionsMenuOpen || subtitlesMenuOpen || speedMenuOpen || statisticsMenuOpen;
-    }, [optionsMenuOpen, subtitlesMenuOpen, speedMenuOpen, statisticsMenuOpen]);
+        return optionsMenuOpen || subtitlesMenuOpen || speedMenuOpen || statisticsMenuOpen || sideDrawerOpen;
+    }, [optionsMenuOpen, subtitlesMenuOpen, speedMenuOpen, statisticsMenuOpen, sideDrawerOpen]);
 
     const closeMenus = React.useCallback(() => {
         closeOptionsMenu();
@@ -240,6 +241,8 @@ const Player = ({ urlParams, queryParams }) => {
         if (!event.nativeEvent.statisticsMenuClosePrevented) {
             closeStatisticsMenu();
         }
+
+        closeSideDrawer();
     }, []);
 
     const onContainerMouseMove = React.useCallback((event) => {
@@ -478,14 +481,14 @@ const Player = ({ urlParams, queryParams }) => {
                     break;
                 }
                 case 'ArrowUp': {
-                    if (!menusOpen && !nextVideoPopupOpen && !sideDrawerOpen && video.state.volume !== null) {
+                    if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
                         onVolumeChangeRequested(video.state.volume + 5);
                     }
 
                     break;
                 }
                 case 'ArrowDown': {
-                    if (!menusOpen && !nextVideoPopupOpen && !sideDrawerOpen && video.state.volume !== null) {
+                    if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
                         onVolumeChangeRequested(video.state.volume - 5);
                     }
 
@@ -538,11 +541,11 @@ const Player = ({ urlParams, queryParams }) => {
         };
         const onWheel = ({ deltaY }) => {
             if (deltaY > 0) {
-                if (!menusOpen && !sideDrawerOpen && video.state.volume !== null) {
+                if (!menusOpen && video.state.volume !== null) {
                     onVolumeChangeRequested(video.state.volume - 5);
                 }
             } else {
-                if (!menusOpen && !sideDrawerOpen && video.state.volume !== null) {
+                if (!menusOpen && video.state.volume !== null) {
                     onVolumeChangeRequested(video.state.volume + 5);
                 }
             }
@@ -642,6 +645,15 @@ const Player = ({ urlParams, queryParams }) => {
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
             />
+            {
+                player.metaItem?.type === 'Ready' ?
+                    <SideDrawerButton
+                        className={classnames(styles['layer'], styles['side-drawer-button-layer'])}
+                        onClick={toggleSideDrawer}
+                    />
+                    :
+                    null
+            }
             <ControlBar
                 className={classnames(styles['layer'], styles['control-bar-layer'])}
                 paused={video.state.paused}
@@ -694,14 +706,15 @@ const Player = ({ urlParams, queryParams }) => {
                     null
             }
             {
-                player.metaItem !== null && player.metaItem.type === 'Ready' && sideDrawerOpen ?
+                sideDrawerOpen ?
                     <SideDrawer
-                        metaItem={player.metaItem.content}
-                        seriesInfo={player.seriesInfo}
                         className={classnames(styles['layer'], styles['side-drawer-layer'])}
+                        metaItem={player.metaItem?.content}
+                        seriesInfo={player.seriesInfo}
                         closeSideDrawer={closeSideDrawer}
                     />
-                    : null
+                    :
+                    null
             }
             {
                 subtitlesMenuOpen ?
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index d5578ef8d..78aa53af0 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,25 +1,23 @@
 import React, { useMemo, useCallback, useState } 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 from 'stremio/common/MetaPreview/MetaPreview';
 import Video from 'stremio/common/Video/Video';
 import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
-import classNames from 'classnames';
 import styles from './SideDrawer.less';
-import { useServices } from 'stremio/services';
-import Icon from '@stremio/stremio-icons/react';
-import useOutsideClick from 'stremio/common/useOutsideClick';
 
 type Props = {
-    seriesInfo: { season: number, episode: number };
-    metaItem: MetaItem;
     className?: string;
+    seriesInfo: SeriesInfo;
+    metaItem: MetaItem;
     closeSideDrawer: () => void;
 };
 
 const SideDrawer = ({ seriesInfo, className, closeSideDrawer, ...props }: Props) => {
     const { core } = useServices();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
-    const sideDrawerRef = useOutsideClick(() => closeSideDrawer());
     const metaItem = useMemo(() => {
         return seriesInfo ?
             {
@@ -58,8 +56,12 @@ const SideDrawer = ({ seriesInfo, className, closeSideDrawer, ...props }: Props)
         });
     }, []);
 
+    const onMouseDown = (event: React.MouseEvent) => {
+        event.stopPropagation();
+    };
+
     return (
-        <div className={classNames(styles['side-drawer'], className)} ref={sideDrawerRef}>
+        <div className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
             <div className={styles['close-button']} onClick={closeSideDrawer}>
                 <Icon className={styles['icon']} name={'chevron-forward'} />
             </div>
diff --git a/src/routes/Player/SideDrawer/index.ts b/src/routes/Player/SideDrawer/index.ts
new file mode 100644
index 000000000..e19e268d3
--- /dev/null
+++ b/src/routes/Player/SideDrawer/index.ts
@@ -0,0 +1,2 @@
+import SideDrawer from './SideDrawer';
+export default SideDrawer;
diff --git a/src/routes/Player/SideDrawerButton/SideDrawerButton.less b/src/routes/Player/SideDrawerButton/SideDrawerButton.less
new file mode 100644
index 000000000..37afd68f1
--- /dev/null
+++ b/src/routes/Player/SideDrawerButton/SideDrawerButton.less
@@ -0,0 +1,31 @@
+.side-drawer-button {
+    height: 12.5rem;
+    width: 7.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    padding-left: 0.5rem;
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    background-color: var(--modal-background-color);
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+    opacity: 1;
+    will-change: opacity;
+    transition: opacity 0.3s ease-in-out, border-radius 0.3s ease-in-out;
+
+    .icon {
+        position: relative;
+        width: 2.5rem;
+        height: 2.5rem;
+        color: var(--primary-foreground-color);
+        opacity: 0.6;
+        transition: 0.3s opacity ease-in-out;
+    }
+
+    &:hover {
+        .icon {
+            opacity: 1;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
new file mode 100644
index 000000000..fb53dc5b4
--- /dev/null
+++ b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+import Icon from '@stremio/stremio-icons/react';
+import styles from './SideDrawerButton.less';
+
+type Props = {
+    className: string,
+    onClick: () => void,
+};
+
+const SideDrawerButton = ({ className, onClick }: Props) => {
+    return (
+        <div className={classNames(className, styles['side-drawer-button'])} onClick={onClick}>
+            <Icon name={'chevron-back'} className={styles['icon']} />
+        </div>
+    );
+};
+
+export default SideDrawerButton;
diff --git a/src/routes/Player/SideDrawerButton/index.ts b/src/routes/Player/SideDrawerButton/index.ts
new file mode 100644
index 000000000..73585e555
--- /dev/null
+++ b/src/routes/Player/SideDrawerButton/index.ts
@@ -0,0 +1,2 @@
+import SideDrawerButton from './SideDrawerButton';
+export default SideDrawerButton;
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 28d388777..2579f930f 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -84,6 +84,13 @@ html:not(.active-slider-within) {
             }
         }
 
+        &.side-drawer-button-layer {
+            top: 50%;
+            right: -4rem;
+            left: initial;
+            transform: translateY(-50%);
+        }
+
         &.control-bar-layer {
             top: initial;
             overflow: visible;
diff --git a/src/types/models/Player.d.ts b/src/types/models/Player.d.ts
index 6664e83f5..2add1456b 100644
--- a/src/types/models/Player.d.ts
+++ b/src/types/models/Player.d.ts
@@ -25,6 +25,11 @@ type Subtitle = {
     url: string,
 };
 
+type SeriesInfo = {
+    episode: number,
+    season: number,
+};
+
 type Player = {
     addon: Addon | null,
     libraryItem: LibraryItemPlayer | null,
@@ -36,10 +41,7 @@ type Player = {
         streamRequest: ResourceRequest,
         subtitlesPath: ResourceRequestPath,
     } | null,
-    seriesInfo: {
-        season: number,
-        episode: number,
-    } | null,
+    seriesInfo: SeriesInfo | null,
     subtitles: Subtitle[],
     title: string | null,
 };

From f6ed54f2f9f193765635e769bf1a0886f2f11311 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 18 Dec 2024 09:38:38 +0100
Subject: [PATCH 38/57] feat: add transition to side drawer

---
 src/common/Transition/Transition.tsx        | 60 +++++++++++++++++++++
 src/common/Transition/index.ts              |  2 +
 src/common/animations.less                  | 13 +++++
 src/common/index.js                         |  2 +
 src/routes/Player/Player.js                 | 21 ++++----
 src/routes/Player/SideDrawer/SideDrawer.tsx |  8 +--
 6 files changed, 90 insertions(+), 16 deletions(-)
 create mode 100644 src/common/Transition/Transition.tsx
 create mode 100644 src/common/Transition/index.ts

diff --git a/src/common/Transition/Transition.tsx b/src/common/Transition/Transition.tsx
new file mode 100644
index 000000000..e12b2a42b
--- /dev/null
+++ b/src/common/Transition/Transition.tsx
@@ -0,0 +1,60 @@
+import { cloneElement, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    children: JSX.Element,
+    when: boolean,
+    name: string,
+};
+
+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 callbackRef = useCallback((element: HTMLElement | null) => {
+        setElement(element);
+    }, []);
+
+    const className = useMemo(() => {
+        const animationClass = `${name}-${state}`;
+        const activeClass = active ? `${name}-active` : null;
+
+        return children && classNames(
+            children.props.className,
+            animationClass,
+            activeClass,
+        );
+    }, [name, state, active, children]);
+
+    const onTransitionEnd = useCallback(() => {
+        state === 'exit' && setMounted(false);
+    }, [state]);
+
+    useEffect(() => {
+        setState(when ? 'enter' : 'exit');
+        when && setMounted(true);
+    }, [when]);
+
+    useEffect(() => {
+        requestAnimationFrame(() => {
+            setActive(!!element);
+        });
+    }, [element]);
+
+    useEffect(() => {
+        element?.addEventListener('transitionend', onTransitionEnd);
+        return () => element?.removeEventListener('transitionend', onTransitionEnd);
+    }, [element, onTransitionEnd]);
+
+    return (
+        mounted && cloneElement(children, {
+            ref: callbackRef,
+            className,
+        })
+    );
+};
+
+export default Transition;
diff --git a/src/common/Transition/index.ts b/src/common/Transition/index.ts
new file mode 100644
index 000000000..dd0f32cda
--- /dev/null
+++ b/src/common/Transition/index.ts
@@ -0,0 +1,2 @@
+import Transition from './Transition';
+export default Transition;
diff --git a/src/common/animations.less b/src/common/animations.less
index 4b0776d16..7f8432954 100644
--- a/src/common/animations.less
+++ b/src/common/animations.less
@@ -38,4 +38,17 @@
     100% {
         transform: translateY(0%);
     }
+}
+
+.slide-left-enter {
+    transform: translateX(100%);
+}
+
+.slide-left-active {
+    transform: translateX(0%);
+    transition: transform 0.3s ease-out;
+}
+
+.slide-left-exit {
+    transform: translateX(100%);
 }
\ No newline at end of file
diff --git a/src/common/index.js b/src/common/index.js
index 45eb0ef41..3690cfae5 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -29,6 +29,7 @@ const Slider = require('./Slider');
 const { default: TextInput } = require('./TextInput');
 const { ToastProvider, useToast } = require('./Toast');
 const { TooltipProvider, Tooltip } = require('./Tooltips');
+const { default: Transition } = require('./Transition');
 const Video = require('./Video');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
@@ -84,6 +85,7 @@ module.exports = {
     useToast,
     TooltipProvider,
     Tooltip,
+    Transition,
     Video,
     comparatorWithPriorities,
     CONSTANTS,
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 0f3bb0bad..b086d1706 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -8,7 +8,7 @@ const langs = require('langs');
 const { useTranslation } = require('react-i18next');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { HorizontalNavBar, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
+const { HorizontalNavBar, Transition, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
 const BufferingLoader = require('./BufferingLoader');
 const VolumeChangeIndicator = require('./VolumeChangeIndicator');
 const Error = require('./Error');
@@ -705,17 +705,14 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
-            {
-                sideDrawerOpen ?
-                    <SideDrawer
-                        className={classnames(styles['layer'], styles['side-drawer-layer'])}
-                        metaItem={player.metaItem?.content}
-                        seriesInfo={player.seriesInfo}
-                        closeSideDrawer={closeSideDrawer}
-                    />
-                    :
-                    null
-            }
+            <Transition when={sideDrawerOpen} name={'slide-left'}>
+                <SideDrawer
+                    className={classnames(styles['layer'], styles['side-drawer-layer'])}
+                    metaItem={player.metaItem?.content}
+                    seriesInfo={player.seriesInfo}
+                    closeSideDrawer={closeSideDrawer}
+                />
+            </Transition>
             {
                 subtitlesMenuOpen ?
                     <SubtitlesMenu
diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index 78aa53af0..a26f21a50 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import { useServices } from 'stremio/services';
@@ -15,7 +15,7 @@ type Props = {
     closeSideDrawer: () => void;
 };
 
-const SideDrawer = ({ seriesInfo, className, closeSideDrawer, ...props }: Props) => {
+const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, ...props }: Props, ref) => {
     const { core } = useServices();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
     const metaItem = useMemo(() => {
@@ -61,7 +61,7 @@ const SideDrawer = ({ seriesInfo, className, closeSideDrawer, ...props }: Props)
     };
 
     return (
-        <div className={classNames(styles['side-drawer'], className)} 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>
@@ -111,6 +111,6 @@ const SideDrawer = ({ seriesInfo, className, closeSideDrawer, ...props }: Props)
 
         </div>
     );
-};
+}));
 
 export default SideDrawer;

From 429dfc2f29dc912fb317c5de73c89b8c448bfc09 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 18 Dec 2024 10:53:20 +0200
Subject: [PATCH 39/57] refactor: use cubic bezier easing

---
 src/common/animations.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/animations.less b/src/common/animations.less
index 7f8432954..6ca879343 100644
--- a/src/common/animations.less
+++ b/src/common/animations.less
@@ -46,7 +46,7 @@
 
 .slide-left-active {
     transform: translateX(0%);
-    transition: transform 0.3s ease-out;
+    transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0);
 }
 
 .slide-left-exit {

From c45cc8afe2be697012a802e4d396222eb34c12fb Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 18 Dec 2024 10:22:15 +0100
Subject: [PATCH 40/57] fix(Player): remove side-drawer-layer from
 overlayHidden

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

diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 2579f930f..71af5641d 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -19,7 +19,7 @@ html:not(.active-slider-within) {
     .player-container.overlayHidden {
         cursor: none;
 
-        .nav-bar-layer, .control-bar-layer, .menu-layer, .side-drawer-layer {
+        .nav-bar-layer, .control-bar-layer, .menu-layer {
             opacity: 0;
             transition: opacity 200ms;
         }

From 609e40791468b92373836b0682f6003edec7dcd6 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 18 Dec 2024 10:24:01 +0100
Subject: [PATCH 41/57] fix(Player): hide side drawer button when overlay
 hidden

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

diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 71af5641d..5dec30bba 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -19,7 +19,7 @@ html:not(.active-slider-within) {
     .player-container.overlayHidden {
         cursor: none;
 
-        .nav-bar-layer, .control-bar-layer, .menu-layer {
+        .nav-bar-layer, .control-bar-layer, .menu-layer, .side-drawer-button-layer {
             opacity: 0;
             transition: opacity 200ms;
         }

From f1cb4c145a72ce6242ec7163c1d116ee191aebc8 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 18 Dec 2024 11:30:01 +0200
Subject: [PATCH 42/57] feat: add copyright + button mobile styles

---
 src/routes/Player/SideDrawer/SideDrawer.tsx     |  2 ++
 .../SideDrawerButton/SideDrawerButton.less      | 17 +++++++++++++++++
 .../SideDrawerButton/SideDrawerButton.tsx       |  2 ++
 3 files changed, 21 insertions(+)

diff --git a/src/routes/Player/SideDrawer/SideDrawer.tsx b/src/routes/Player/SideDrawer/SideDrawer.tsx
index a26f21a50..e40dd3d86 100644
--- a/src/routes/Player/SideDrawer/SideDrawer.tsx
+++ b/src/routes/Player/SideDrawer/SideDrawer.tsx
@@ -1,3 +1,5 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
 import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
diff --git a/src/routes/Player/SideDrawerButton/SideDrawerButton.less b/src/routes/Player/SideDrawerButton/SideDrawerButton.less
index 37afd68f1..a4706e685 100644
--- a/src/routes/Player/SideDrawerButton/SideDrawerButton.less
+++ b/src/routes/Player/SideDrawerButton/SideDrawerButton.less
@@ -1,3 +1,7 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
 .side-drawer-button {
     height: 12.5rem;
     width: 7.5rem;
@@ -28,4 +32,17 @@
             opacity: 1;
         }
     }
+}
+
+@media screen and (max-width: @xsmall) {
+    .side-drawer-button {
+        height: 8rem;
+        width: 4.5rem;
+
+        .icon {
+            width: 2rem;
+            height: 2rem;
+            margin-right: 2.5rem;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
index fb53dc5b4..81409f434 100644
--- a/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
+++ b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
@@ -1,3 +1,5 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
 import React from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';

From 5249d1855f086535815acbed6ccf541cf3e3bd8f Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 18 Dec 2024 11:35:19 +0200
Subject: [PATCH 43/57] refactor(SideDrawerButton): styles

---
 .../Player/SideDrawerButton/SideDrawerButton.less      |  1 -
 src/routes/Player/styles.less                          | 10 ++++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/routes/Player/SideDrawerButton/SideDrawerButton.less b/src/routes/Player/SideDrawerButton/SideDrawerButton.less
index a4706e685..e7e86027f 100644
--- a/src/routes/Player/SideDrawerButton/SideDrawerButton.less
+++ b/src/routes/Player/SideDrawerButton/SideDrawerButton.less
@@ -42,7 +42,6 @@
         .icon {
             width: 2rem;
             height: 2rem;
-            margin-right: 2.5rem;
         }
     }
 }
\ No newline at end of file
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 5dec30bba..e74604294 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -130,6 +130,16 @@ html:not(.active-slider-within) {
     }
 }
 
+@media screen and (max-width: @xsmall) {
+    .player-container {
+        .layer {
+            &.side-drawer-button-layer {
+                right: -2rem;
+            }
+        }
+    }
+}
+
 @media (orientation: portrait) and (max-width: @minimum) {
     .player-container {
         .layer {

From da22bc090aab68a3c0a6912b3a96fe8af326d7d2 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Sat, 21 Dec 2024 15:18:03 +0200
Subject: [PATCH 44/57] fix: modal image was not visible on some macbooks

---
 src/common/EventModal/styles.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 24c1d053d..675429df6 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -102,7 +102,7 @@
     }
 }
 
-@media (orientation: landscape) and (max-height: @xsmall) {
+@media (orientation: landscape) and (max-height: @xxsmall) {
     .event-modal {
         .modal-dialog-container {
             .modal-dialog-content {

From 8e4fcc1a6ea25d565a1dcfcc8ea9ecb3b8c4a26a Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Sat, 21 Dec 2024 18:02:29 +0200
Subject: [PATCH 45/57] fix: image was not visible on some iPads

---
 src/common/EventModal/styles.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 675429df6..b251175e5 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -102,7 +102,7 @@
     }
 }
 
-@media (orientation: landscape) and (max-height: @xxsmall) {
+@media (orientation: landscape) and (max-height: @minimum) {
     .event-modal {
         .modal-dialog-container {
             .modal-dialog-content {

From 734c384efa81e22f681c4b872c128474fa660762 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Sun, 22 Dec 2024 14:19:07 +0100
Subject: [PATCH 46/57] chore: improve webpack build time

---
 package-lock.json | 31 ++++++++++++++++++++++++++++
 package.json      |  1 +
 webpack.config.js | 51 ++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2ac27cb5a..a39f38c98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,6 +67,7 @@
                 "postcss-loader": "8.1.1",
                 "readdirp": "4.0.2",
                 "terser-webpack-plugin": "5.3.10",
+                "thread-loader": "^4.0.4",
                 "ts-loader": "^9.5.1",
                 "typescript": "^5.7.2",
                 "typescript-eslint": "^8.17.0",
@@ -10162,6 +10163,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/json-parse-better-errors": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+            "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/json-parse-even-better-errors": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -13939,6 +13947,29 @@
                 "node": ">=0.2.6"
             }
         },
+        "node_modules/thread-loader": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/thread-loader/-/thread-loader-4.0.4.tgz",
+            "integrity": "sha512-tXagu6Hivd03wB2tiS1bqvw345sc7mKei32EgpYpq31ZLes9FN0mEK2nKzXLRFgwt3PsBB0E/MZDp159rDoqwg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "json-parse-better-errors": "^1.0.2",
+                "loader-runner": "^4.1.0",
+                "neo-async": "^2.6.2",
+                "schema-utils": "^4.2.0"
+            },
+            "engines": {
+                "node": ">= 16.10.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            },
+            "peerDependencies": {
+                "webpack": "^5.0.0"
+            }
+        },
         "node_modules/thunky": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
diff --git a/package.json b/package.json
index bec340a54..801842d55 100755
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
         "postcss-loader": "8.1.1",
         "readdirp": "4.0.2",
         "terser-webpack-plugin": "5.3.10",
+        "thread-loader": "^4.0.4",
         "ts-loader": "^9.5.1",
         "typescript": "^5.7.2",
         "typescript-eslint": "^8.17.0",
diff --git a/webpack.config.js b/webpack.config.js
index 1b6c6601b..b23ee4c15 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,8 +1,10 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const path = require('path');
+const os = require('os');
 const { execSync } = require('child_process');
 const webpack = require('webpack');
+const threadLoader = require('thread-loader');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
@@ -14,6 +16,25 @@ const pachageJson = require('./package.json');
 
 const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
 
+const THREAD_LOADER = {
+    loader: 'thread-loader',
+    options: {
+        name: 'shared-pool',
+        workers: os.cpus().length,
+    },
+};
+
+threadLoader.warmup(
+    THREAD_LOADER.options,
+    [
+        'babel-loader',
+        'ts-loader',
+        'css-loader',
+        'postcss-loader',
+        'less-loader',
+    ],
+);
+
 module.exports = (env, argv) => ({
     mode: argv.mode,
     devtool: argv.mode === 'production' ? 'source-map' : 'eval-source-map',
@@ -30,20 +51,31 @@ module.exports = (env, argv) => ({
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: [
-                            '@babel/preset-env',
-                            '@babel/preset-react'
-                        ],
+                use: [
+                    THREAD_LOADER,
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: [
+                                '@babel/preset-env',
+                                '@babel/preset-react'
+                            ],
+                        }
                     }
-                }
+                ]
             },
             {
                 test: /\.(ts|tsx)$/,
                 exclude: /node_modules/,
-                use: 'ts-loader',
+                use: [
+                    THREAD_LOADER,
+                    {
+                        loader: 'ts-loader',
+                        options: {
+                            happyPackMode: true,
+                        }
+                    }
+                ]
             },
             {
                 test: /\.less$/,
@@ -55,6 +87,7 @@ module.exports = (env, argv) => ({
                             esModule: false
                         }
                     },
+                    THREAD_LOADER,
                     {
                         loader: 'css-loader',
                         options: {

From 09ff695f03170750839961ffa6cf9f8d44dfd919 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 23 Dec 2024 10:56:23 +0100
Subject: [PATCH 47/57] chore: update stremio-video

---
 package-lock.json | 9 +++++----
 package.json      | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a39f38c98..fa88e201c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
                 "@stremio/stremio-colors": "5.2.0",
                 "@stremio/stremio-core-web": "0.48.2",
                 "@stremio/stremio-icons": "5.4.0",
-                "@stremio/stremio-video": "0.0.46",
+                "@stremio/stremio-video": "0.0.47",
                 "a-color-picker": "1.2.1",
                 "bowser": "2.11.0",
                 "buffer": "6.0.3",
@@ -3418,9 +3418,10 @@
             ]
         },
         "node_modules/@stremio/stremio-video": {
-            "version": "0.0.46",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-video/-/stremio-video-0.0.46.tgz",
-            "integrity": "sha512-U15CGB6CrUZKq3IKcEouAEH2RQoLy2+BI/hDStEYEACxlRlFaavKPI2opl37muh9TY089RnZVBYAM3yDidBZdg==",
+            "version": "0.0.47",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-video/-/stremio-video-0.0.47.tgz",
+            "integrity": "sha512-+s0vrtk0DZXc4s73Uq06aUZuUoHwxIYSd6OrzCjMm5XxLKuS8G2pMAVplXwY9VP3mQitQ2B2AVKbNYVDQXwdDA==",
+            "license": "MIT",
             "dependencies": {
                 "buffer": "6.0.3",
                 "color": "4.2.3",
diff --git a/package.json b/package.json
index 801842d55..b2a841a44 100755
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.48.2",
         "@stremio/stremio-icons": "5.4.0",
-        "@stremio/stremio-video": "0.0.46",
+        "@stremio/stremio-video": "0.0.47",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",

From 22b877f2f637b1a6003a0ef7258913ec68aa194b Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 23 Dec 2024 12:00:37 +0100
Subject: [PATCH 48/57] chore: update stremio-video

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fa88e201c..873b9f26c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
                 "@stremio/stremio-colors": "5.2.0",
                 "@stremio/stremio-core-web": "0.48.2",
                 "@stremio/stremio-icons": "5.4.0",
-                "@stremio/stremio-video": "0.0.47",
+                "@stremio/stremio-video": "0.0.48",
                 "a-color-picker": "1.2.1",
                 "bowser": "2.11.0",
                 "buffer": "6.0.3",
@@ -3418,9 +3418,9 @@
             ]
         },
         "node_modules/@stremio/stremio-video": {
-            "version": "0.0.47",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-video/-/stremio-video-0.0.47.tgz",
-            "integrity": "sha512-+s0vrtk0DZXc4s73Uq06aUZuUoHwxIYSd6OrzCjMm5XxLKuS8G2pMAVplXwY9VP3mQitQ2B2AVKbNYVDQXwdDA==",
+            "version": "0.0.48",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-video/-/stremio-video-0.0.48.tgz",
+            "integrity": "sha512-6ALGXCZC4NPsfhPcrwFWQzvH6UMMRsgSkHetnOhv9WmZ5ubiyUdbBzj9atGiGuuQz8pRcze66ztrub+dsaQbpw==",
             "license": "MIT",
             "dependencies": {
                 "buffer": "6.0.3",
diff --git a/package.json b/package.json
index b2a841a44..52627e81d 100755
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.48.2",
         "@stremio/stremio-icons": "5.4.0",
-        "@stremio/stremio-video": "0.0.47",
+        "@stremio/stremio-video": "0.0.48",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",

From 30b75882367cb4df349b5ae66dbd980927fc12a8 Mon Sep 17 00:00:00 2001
From: Alexandru Branza <branza.alex@gmail.com>
Date: Mon, 23 Dec 2024 14:26:51 +0200
Subject: [PATCH 49/57] Fix Poster Sharpness

Chrome (on Windows only) was showing the posters with high sharpness, this made it hard to read text on some posters (including the title), this one css style seems to fix it, and I didn't notice it impacting other cases yet.
---
 src/common/MetaItem/styles.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index c2d094ac9..17c7c4884 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -166,6 +166,7 @@
                 object-position: center;
                 object-fit: cover;
                 opacity: 0.9;
+                overflow-clip-margin: unset;
             }
 
             .placeholder-icon {

From b41a8f740f044fdbf74b550967b0dace1cb0ad48 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 23 Dec 2024 15:39:22 +0100
Subject: [PATCH 50/57] chore: update stremio-core-web

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 873b9f26c..e2124fbbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.26.0",
                 "@sentry/browser": "8.42.0",
                 "@stremio/stremio-colors": "5.2.0",
-                "@stremio/stremio-core-web": "0.48.2",
+                "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/fix/player-library-item-time-offset/dev/stremio-stremio-core-web-0.48.2.tgz",
                 "@stremio/stremio-icons": "5.4.0",
                 "@stremio/stremio-video": "0.0.48",
                 "a-color-picker": "1.2.1",
@@ -3381,8 +3381,8 @@
         },
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.48.2",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.2.tgz",
-            "integrity": "sha512-zkz4ftGMoK9RmIDlGLd/DYLtaXuf4HxnMEN1NduKNXDlYPSJ4Q/b1hCbXrVqVK/nx6s+8X4XyYr9IOwFLaT5ew==",
+            "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/fix/player-library-item-time-offset/dev/stremio-stremio-core-web-0.48.2.tgz",
+            "integrity": "sha512-3Po3H9bXDB50XGnvaUHZFTNjCNrAP08ODAy4X+sYE20u1UpMPGvjzYo/1sr8gLh/XqidfQDne+kKlDzi8tbtTA==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
diff --git a/package.json b/package.json
index 52627e81d..1489adf65 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "0.48.2",
+        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/fix/player-library-item-time-offset/dev/stremio-stremio-core-web-0.48.2.tgz",
         "@stremio/stremio-icons": "5.4.0",
         "@stremio/stremio-video": "0.0.48",
         "a-color-picker": "1.2.1",

From 87a07f28dbbb9cc4f91b1c3f90c65ec28bf42b7c Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 23 Dec 2024 17:21:06 +0200
Subject: [PATCH 51/57] fix(StreamsList): streams-container scroll position

---
 src/routes/MetaDetails/StreamsList/StreamsList.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 840664c8b..39ca6da4a 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -15,8 +15,10 @@ const ALL_ADDONS_KEY = 'ALL';
 const StreamsList = ({ className, video, ...props }) => {
     const { t } = useTranslation();
     const { core } = useServices();
+    const streamContainerRef = React.useRef(null);
     const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
     const onAddonSelected = React.useCallback((event) => {
+        streamContainerRef.current.scrollTo({ top: 0 });
         setSelectedAddon(event.value);
     }, []);
     const backButtonOnClick = React.useCallback(() => {
@@ -142,7 +144,7 @@ const StreamsList = ({ className, video, ...props }) => {
                                         :
                                         null
                                 }
-                                <div className={styles['streams-container']}>
+                                <div className={styles['streams-container']} ref={streamContainerRef}>
                                     {filteredStreams.map((stream, index) => (
                                         <Stream
                                             key={index}

From b3b072f70f5a112081ec75f021f73f890b805481 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 23 Dec 2024 16:22:26 +0100
Subject: [PATCH 52/57] chore: update core-web

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e2124fbbf..de6156bc3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.26.0",
                 "@sentry/browser": "8.42.0",
                 "@stremio/stremio-colors": "5.2.0",
-                "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/fix/player-library-item-time-offset/dev/stremio-stremio-core-web-0.48.2.tgz",
+                "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/fix/meta-details-stream-progress/dev/stremio-stremio-core-web-0.48.2.tgz",
                 "@stremio/stremio-icons": "5.4.0",
                 "@stremio/stremio-video": "0.0.48",
                 "a-color-picker": "1.2.1",
@@ -3381,8 +3381,8 @@
         },
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.48.2",
-            "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/fix/player-library-item-time-offset/dev/stremio-stremio-core-web-0.48.2.tgz",
-            "integrity": "sha512-3Po3H9bXDB50XGnvaUHZFTNjCNrAP08ODAy4X+sYE20u1UpMPGvjzYo/1sr8gLh/XqidfQDne+kKlDzi8tbtTA==",
+            "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/fix/meta-details-stream-progress/dev/stremio-stremio-core-web-0.48.2.tgz",
+            "integrity": "sha512-d8/OjtfPmY3YVByKDWLSlBAzsQx0a+W4zse0o+UTWSiwFwdGPjxupim6NT1vWj/OLf22qg17yQLmrpXkbGeMBw==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
diff --git a/package.json b/package.json
index 1489adf65..707d3109e 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/fix/player-library-item-time-offset/dev/stremio-stremio-core-web-0.48.2.tgz",
+        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/fix/meta-details-stream-progress/dev/stremio-stremio-core-web-0.48.2.tgz",
         "@stremio/stremio-icons": "5.4.0",
         "@stremio/stremio-video": "0.0.48",
         "a-color-picker": "1.2.1",

From 91a92a0a32d727aa1b7b819b0e145d1c66f357c3 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 23 Dec 2024 17:24:29 +0200
Subject: [PATCH 53/57] rename(StreamsList): ref name

---
 src/routes/MetaDetails/StreamsList/StreamsList.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 39ca6da4a..77fbf00df 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -15,10 +15,10 @@ const ALL_ADDONS_KEY = 'ALL';
 const StreamsList = ({ className, video, ...props }) => {
     const { t } = useTranslation();
     const { core } = useServices();
-    const streamContainerRef = React.useRef(null);
+    const streamsContainerRef = React.useRef(null);
     const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
     const onAddonSelected = React.useCallback((event) => {
-        streamContainerRef.current.scrollTo({ top: 0 });
+        streamsContainerRef.current.scrollTo({ top: 0 });
         setSelectedAddon(event.value);
     }, []);
     const backButtonOnClick = React.useCallback(() => {
@@ -144,7 +144,7 @@ const StreamsList = ({ className, video, ...props }) => {
                                         :
                                         null
                                 }
-                                <div className={styles['streams-container']} ref={streamContainerRef}>
+                                <div className={styles['streams-container']} ref={streamsContainerRef}>
                                     {filteredStreams.map((stream, index) => (
                                         <Stream
                                             key={index}

From 8b29dd4e0235b9961034e3bc60d4e5535f1dc45f Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 23 Dec 2024 16:57:27 +0100
Subject: [PATCH 54/57] chore: update stremio-core-web

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index de6156bc3..27b031088 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.26.0",
                 "@sentry/browser": "8.42.0",
                 "@stremio/stremio-colors": "5.2.0",
-                "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/fix/meta-details-stream-progress/dev/stremio-stremio-core-web-0.48.2.tgz",
+                "@stremio/stremio-core-web": "0.48.3",
                 "@stremio/stremio-icons": "5.4.0",
                 "@stremio/stremio-video": "0.0.48",
                 "a-color-picker": "1.2.1",
@@ -3380,9 +3380,9 @@
             "license": "MIT"
         },
         "node_modules/@stremio/stremio-core-web": {
-            "version": "0.48.2",
-            "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/fix/meta-details-stream-progress/dev/stremio-stremio-core-web-0.48.2.tgz",
-            "integrity": "sha512-d8/OjtfPmY3YVByKDWLSlBAzsQx0a+W4zse0o+UTWSiwFwdGPjxupim6NT1vWj/OLf22qg17yQLmrpXkbGeMBw==",
+            "version": "0.48.3",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.3.tgz",
+            "integrity": "sha512-JL8pOLOEVACYG+33Dtp/mrB2/vuc7RoYZdxX1BQa5MPR8EzsODjpvL5uETmdxo/swgtMZyx2A6/e1B53eKA4oQ==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
diff --git a/package.json b/package.json
index 707d3109e..5309100bd 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/fix/meta-details-stream-progress/dev/stremio-stremio-core-web-0.48.2.tgz",
+        "@stremio/stremio-core-web": "0.48.3",
         "@stremio/stremio-icons": "5.4.0",
         "@stremio/stremio-video": "0.0.48",
         "a-color-picker": "1.2.1",

From 7b930f439a5a171f4084b65e1a17851e6fe6572f Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 23 Dec 2024 18:06:17 +0200
Subject: [PATCH 55/57] fix: scroll top safari issues

---
 src/routes/MetaDetails/StreamsList/StreamsList.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 77fbf00df..56f9c0d08 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -9,18 +9,20 @@ const { Button, Image, Multiselect } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const Stream = require('./Stream');
 const styles = require('./styles');
+const { usePlatform } = require('stremio/common');
 
 const ALL_ADDONS_KEY = 'ALL';
 
 const StreamsList = ({ className, video, ...props }) => {
     const { t } = useTranslation();
     const { core } = useServices();
+    const platform = usePlatform();
     const streamsContainerRef = React.useRef(null);
     const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
     const onAddonSelected = React.useCallback((event) => {
-        streamsContainerRef.current.scrollTo({ top: 0 });
+        streamsContainerRef.current.scrollTo({ top: 0, left: 0, behavior: platform.name === 'ios' ? 'smooth' : 'instant' });
         setSelectedAddon(event.value);
-    }, []);
+    }, [platform]);
     const backButtonOnClick = React.useCallback(() => {
         if (video.deepLinks && typeof video.deepLinks.metaDetailsVideos === 'string') {
             window.location.replace(video.deepLinks.metaDetailsVideos + (

From dc7de13a2c3ced832aeade24495c73b8fec1f893 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 23 Dec 2024 17:15:32 +0100
Subject: [PATCH 56/57] 5.0.0-beta.15

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 27b031088..93cc28399 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "stremio",
-    "version": "5.0.0-beta.14",
+    "version": "5.0.0-beta.15",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "stremio",
-            "version": "5.0.0-beta.14",
+            "version": "5.0.0-beta.15",
             "license": "gpl-2.0",
             "dependencies": {
                 "@babel/runtime": "7.26.0",
diff --git a/package.json b/package.json
index 5309100bd..996288198 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "stremio",
     "displayName": "Stremio",
-    "version": "5.0.0-beta.14",
+    "version": "5.0.0-beta.15",
     "author": "Smart Code OOD",
     "private": true,
     "license": "gpl-2.0",

From cd1cdf2172b5feb011edcc5d563f59e265ff6cd5 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 24 Dec 2024 12:28:02 +0100
Subject: [PATCH 57/57] fix: external subtitles offset with shell

---
 src/routes/Player/SubtitlesMenu/SubtitlesMenu.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
index c65cb9c9e..24cccb7fc 100644
--- a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
+++ b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
@@ -129,19 +129,19 @@ const SubtitlesMenu = React.memo((props) => {
     const onSubtitlesOffsetChanged = React.useCallback((event) => {
         const delta = event.value === 'increment' ? 1 : -1;
         if (typeof props.selectedSubtitlesTrackId === 'string') {
-            if (props.extraSubtitlesOffset !== null && !isNaN(props.extraSubtitlesOffset)) {
-                const offset = Math.max(0, Math.min(100, Math.floor(props.extraSubtitlesOffset + delta)));
-                if (typeof props.onExtraSubtitlesOffsetChanged === 'function') {
-                    props.onExtraSubtitlesOffsetChanged(offset);
-                }
-            }
-        } else if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
             if (props.subtitlesOffset !== null && !isNaN(props.subtitlesOffset)) {
                 const offset = Math.max(0, Math.min(100, Math.floor(props.subtitlesOffset + delta)));
                 if (typeof props.onSubtitlesOffsetChanged === 'function') {
                     props.onSubtitlesOffsetChanged(offset);
                 }
             }
+        } else if (typeof props.selectedExtraSubtitlesTrackId === 'string') {
+            if (props.extraSubtitlesOffset !== null && !isNaN(props.extraSubtitlesOffset)) {
+                const offset = Math.max(0, Math.min(100, Math.floor(props.extraSubtitlesOffset + delta)));
+                if (typeof props.onExtraSubtitlesOffsetChanged === 'function') {
+                    props.onExtraSubtitlesOffsetChanged(offset);
+                }
+            }
         }
     }, [props.selectedSubtitlesTrackId, props.selectedExtraSubtitlesTrackId, props.subtitlesOffset, props.extraSubtitlesOffset, props.onSubtitlesOffsetChanged, props.onExtraSubtitlesOffsetChanged]);
     const audioTrackOnClick = React.useCallback((event) => {