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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] chore: update & sync pkgs

---
 package-lock.json | 178 +++++++++++++++++++++++++++++-----------------
 1 file changed, 113 insertions(+), 65 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",
+        "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==",
             "dependencies": {
-                "@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-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",
+        "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": "6.13.3",
+            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.13.3.tgz",
+            "integrity": "sha512-obm3SjgCk8A7nB37b2AU1eq1q7gMoJRrGMv9VRIyfcG0Wlz/5lJ9O3ohUk+YZaaVfZMxXn6hFtsBiOWmlv7IIA==",
             "dependencies": {
-                "@sentry/core": "8.42.0"
+                "@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-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",
+        "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-internal/browser-utils": "8.42.0",
-                "@sentry/core": "8.42.0"
+                "@sentry/types": "6.13.3",
+                "@sentry/utils": "6.13.3",
+                "tslib": "^1.9.3"
             },
             "engines": {
-                "node": ">=14.18"
+                "node": ">=6"
             }
         },
-        "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",
+        "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-internal/replay": "8.42.0",
-                "@sentry/core": "8.42.0"
+                "@sentry/hub": "6.13.3",
+                "@sentry/types": "6.13.3",
+                "tslib": "^1.9.3"
             },
             "engines": {
-                "node": ">=14.18"
+                "node": ">=6"
             }
         },
-        "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",
-            "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"
-            },
+        "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": ">=14.18"
+                "node": ">=6"
             }
         },
-        "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",
+        "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": ">=14.18"
+                "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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] chore(pkgs): package-lock.json

---
 package-lock.json | 183 ++++++++++++++++------------------------------
 1 file changed, 63 insertions(+), 120 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,105 +3255,74 @@
             "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/core": {
-            "version": "6.13.3",
-            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.13.3.tgz",
-            "integrity": "sha512-obm3SjgCk8A7nB37b2AU1eq1q7gMoJRrGMv9VRIyfcG0Wlz/5lJ9O3ohUk+YZaaVfZMxXn6hFtsBiOWmlv7IIA==",
+        "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/hub": "6.13.3",
-                "@sentry/minimal": "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/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==",
+        "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/types": "6.13.3",
-                "@sentry/utils": "6.13.3",
-                "tslib": "^1.9.3"
+                "@sentry-internal/browser-utils": "8.42.0",
+                "@sentry/core": "8.42.0"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">=14.18"
             }
         },
-        "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==",
+        "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/hub": "6.13.3",
-                "@sentry/types": "6.13.3",
-                "tslib": "^1.9.3"
+                "@sentry-internal/replay": "8.42.0",
+                "@sentry/core": "8.42.0"
             },
             "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": ">=14.18"
             }
         },
-        "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==",
+        "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/types": "6.13.3",
-                "tslib": "^1.9.3"
+                "@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": ">=6"
+                "node": ">=14.18"
             }
         },
-        "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/@sentry/core": {
+            "version": "8.42.0",
+            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.42.0.tgz",
+            "integrity": "sha512-ac6O3pgoIbU6rpwz6LlwW0wp3/GAHuSI0C5IsTgIY6baN8rOBnlAtG6KrHDDkGmUQ2srxkDJu9n1O6Td3cBCqw==",
+            "engines": {
+                "node": ">=14.18"
+            }
         },
         "node_modules/@sinclair/typebox": {
             "version": "0.27.8",
@@ -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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] refactor: keep the DOM organised

---
 src/routes/Player/Player.js                  |  28 +--
 src/routes/Player/SideDrawer/SideDrawer.less | 198 +++++++++++++------
 src/routes/Player/SideDrawer/SideDrawer.tsx  |  18 +-
 src/routes/Player/styles.less                |  69 +------
 4 files changed, 164 insertions(+), 149 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 {
+    .overlay {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100dvw;
+        height: 100dvh;
+        background-color: rgba(0, 0, 0, 0.2);
         display: none;
+    }
+
+    .open-button {
         position: absolute;
-        top: 1.3rem;
-        right: 1.3rem;
-        padding: 0.5rem;
-        background-color: transparent;
+        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;
+
+        .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;
+            .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: @xxsmall) {
+@media screen and (max-width: @xsmall) {
     .side-drawer {
-        padding: calc(@padding / 2);
+        .open-button {
+            height: 8rem;
+            width: 4.5rem;
+            right: -2.5rem;
 
-        .info {
+            .icon {
+                width: 2rem;
+                height: 2rem;
+                margin-right: 2.5rem;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: @xxsmall) {
+    .side-drawer {
+        .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/43] 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/43] 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/43] (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/43] feat: rewrite sidedrawer to act like a menu

---
 src/routes/Player/Player.js                  |  16 +-
 src/routes/Player/SideDrawer/SideDrawer.less | 192 +++++--------------
 src/routes/Player/SideDrawer/SideDrawer.tsx  | 106 +++++-----
 src/routes/Player/styles.less                |   2 +-
 4 files changed, 103 insertions(+), 213 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;
-
-    .overlay {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 100dvw;
-        height: 100dvh;
-        background-color: rgba(0, 0, 0, 0.2);
+    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;
+
+    .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;
-
-        .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;
+        flex: none;
 
-            .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;
-        }
-
-        .content {
-            transform: translateX(0);
-            pointer-events: auto;
+    .series-content {
+        flex: 2;
+        display: flex;
+        flex-direction: column;
 
-            .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;
-
-            .info {
-                max-height: 30dvh;
-            }
-        }
-    }
-}
-
-@media screen and (max-width: @xsmall) {
-    .side-drawer {
-        .open-button {
-            height: 8rem;
-            width: 4.5rem;
-            right: -2.5rem;
+        max-width: 50dvw;
 
-            .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>
-                        : null
-                }
-
+            <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>
+                    : 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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/43] 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 {