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/94] 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/94] 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/94] 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/94] 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 8098bc5c33e23344e488b1d56cb9c34bb5a7dce2 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Sun, 8 Dec 2024 13:57:40 +0100
Subject: [PATCH 05/94] fix: mark video as watched on player

---
 .../VideosList => common}/Video/Video.js      | 20 +++++--------
 .../VideoPlaceholder/VideoPlaceholder.js      |  0
 .../Video/VideoPlaceholder/index.js           |  0
 .../Video/VideoPlaceholder/styles.less        |  0
 .../VideosList => common}/Video/index.js      |  0
 .../VideosList => common}/Video/styles.less   |  0
 src/common/index.js                           |  2 ++
 .../MetaDetails/VideosList/VideosList.js      | 28 ++++++++++--------
 src/routes/Player/Player.js                   |  9 +++---
 src/routes/Player/VideosMenu/VideosMenu.js    | 29 ++++++++++++-------
 10 files changed, 48 insertions(+), 40 deletions(-)
 rename src/{routes/MetaDetails/VideosList => common}/Video/Video.js (94%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/VideoPlaceholder/VideoPlaceholder.js (100%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/VideoPlaceholder/index.js (100%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/VideoPlaceholder/styles.less (100%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/index.js (100%)
 rename src/{routes/MetaDetails/VideosList => common}/Video/styles.less (100%)

diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/common/Video/Video.js
similarity index 94%
rename from src/routes/MetaDetails/VideosList/Video/Video.js
rename to src/common/Video/Video.js
index 25b67aae9..f74b994eb 100644
--- a/src/routes/MetaDetails/VideosList/Video/Video.js
+++ b/src/common/Video/Video.js
@@ -4,15 +4,16 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { t } = require('i18next');
-const { useServices } = require('stremio/services');
 const { useRouteFocused } = require('stremio-router');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button, Image, Popup, useBinaryState } = require('stremio/common');
+const Button = require('stremio/common/Button');
+const Image = require('stremio/common/Image');
+const Popup = require('stremio/common/Popup');
+const useBinaryState = require('stremio/common/useBinaryState');
 const VideoPlaceholder = require('./VideoPlaceholder');
 const styles = require('./styles');
 
-const Video = ({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, deepLinks, ...props }) => {
-    const { core } = useServices();
+const Video = ({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, deepLinks, onMarkVideoAsWatched, ...props }) => {
     const routeFocused = useRouteFocused();
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
     const popupLabelOnMouseUp = React.useCallback((event) => {
@@ -49,13 +50,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
         event.preventDefault();
         event.stopPropagation();
         closeMenu();
-        core.transport.dispatch({
-            action: 'MetaDetails',
-            args: {
-                action: 'MarkVideoAsWatched',
-                args: [{ id, released }, !watched]
-            }
-        });
+        onMarkVideoAsWatched({ id, released }, watched);
     }, [id, released, watched]);
     const videoButtonOnClick = React.useCallback(() => {
         if (deepLinks) {
@@ -198,7 +193,8 @@ Video.propTypes = {
     deepLinks: PropTypes.shape({
         metaDetailsStreams: PropTypes.string,
         player: PropTypes.string
-    })
+    }),
+    onMarkVideoAsWatched: PropTypes.func,
 };
 
 module.exports = Video;
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js b/src/common/Video/VideoPlaceholder/VideoPlaceholder.js
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js
rename to src/common/Video/VideoPlaceholder/VideoPlaceholder.js
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/index.js b/src/common/Video/VideoPlaceholder/index.js
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/index.js
rename to src/common/Video/VideoPlaceholder/index.js
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less b/src/common/Video/VideoPlaceholder/styles.less
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
rename to src/common/Video/VideoPlaceholder/styles.less
diff --git a/src/routes/MetaDetails/VideosList/Video/index.js b/src/common/Video/index.js
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/index.js
rename to src/common/Video/index.js
diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/common/Video/styles.less
similarity index 100%
rename from src/routes/MetaDetails/VideosList/Video/styles.less
rename to src/common/Video/styles.less
diff --git a/src/common/index.js b/src/common/index.js
index 0605a3f9b..45eb0ef41 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 Video = require('./Video');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
 const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender');
@@ -83,6 +84,7 @@ module.exports = {
     useToast,
     TooltipProvider,
     Tooltip,
+    Video,
     comparatorWithPriorities,
     CONSTANTS,
     withCoreSuspender,
diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 6013e4f01..3a446b44f 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -4,12 +4,13 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { t } = require('i18next');
-const { Image, SearchBar, Toggle } = require('stremio/common');
+const { useServices } = require('stremio/services');
+const { Image, SearchBar, Toggle, Video } = require('stremio/common');
 const SeasonsBar = require('./SeasonsBar');
-const Video = require('./Video');
 const styles = require('./styles');
 
 const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, toggleNotifications }) => {
+    const { core } = useServices();
     const showNotificationsToggle = React.useMemo(() => {
         return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length;
     }, [metaItem]);
@@ -59,6 +60,17 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
     const searchInputOnChange = React.useCallback((event) => {
         setSearch(event.currentTarget.value);
     }, []);
+
+    const onMarkVideoAsWatched = (video, watched) => {
+        core.transport.dispatch({
+            action: 'MetaDetails',
+            args: {
+                action: 'MarkVideoAsWatched',
+                args: [video, !watched]
+            }
+        });
+    };
+
     return (
         <div className={classnames(className, styles['videos-list-container'])}>
             {
@@ -120,16 +132,8 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                                         .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}
+                                                {...video}
+                                                onMarkVideoAsWatched={onMarkVideoAsWatched}
                                             />
                                         ))
                                 }
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 5ace96f77..cdde60474 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -271,10 +271,9 @@ const Player = ({ urlParams, queryParams }) => {
 
     React.useEffect(() => {
         setError(null);
-        if (player.selected === null) {
-            video.unload();
-        } else if (streamingServer.settings !== null && streamingServer.settings.type !== 'Loading' &&
-            (player.selected.metaRequest === null || (player.metaItem !== null && player.metaItem.type !== 'Loading'))) {
+        video.unload();
+
+        if (player.selected && streamingServer.settings?.type !== 'Loading') {
             video.load({
                 stream: {
                     ...player.selected.stream,
@@ -309,7 +308,7 @@ const Player = ({ urlParams, queryParams }) => {
                 shellTransport: shell.active ? shell.transport : null,
             });
         }
-    }, [streamingServer.baseUrl, player.selected, player.metaItem, forceTranscoding, casting]);
+    }, [streamingServer.baseUrl, player.selected, forceTranscoding, casting]);
     React.useEffect(() => {
         if (video.state.stream !== null) {
             const tracks = player.subtitles.map((subtitles) => ({
diff --git a/src/routes/Player/VideosMenu/VideosMenu.js b/src/routes/Player/VideosMenu/VideosMenu.js
index 9d5819db7..6e065d5f9 100644
--- a/src/routes/Player/VideosMenu/VideosMenu.js
+++ b/src/routes/Player/VideosMenu/VideosMenu.js
@@ -3,35 +3,42 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Video = require('../../MetaDetails/VideosList/Video');
+const { useServices } = require('stremio/services');
+const { Video } = require('stremio/common');
 const styles = require('./styles');
 
 const VideosMenu = ({ className, metaItem, seriesInfo }) => {
+    const { core } = useServices();
+
     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]);
+
+    const onMarkVideoAsWatched = (video, watched) => {
+        core.transport.dispatch({
+            action: 'Player',
+            args: {
+                action: 'MarkVideoAsWatched',
+                args: [video, !watched]
+            }
+        });
+    };
+
     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}
+                        {...video}
+                        onMarkVideoAsWatched={onMarkVideoAsWatched}
                     />
                 ))
             }

From 41be4528ff831f296f9b7c2417fe4386dada7551 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 9 Dec 2024 09:06:03 +0100
Subject: [PATCH 06/94] fix: don't spread Video component props

---
 src/routes/MetaDetails/VideosList/VideosList.js | 11 ++++++++++-
 src/routes/Player/VideosMenu/VideosMenu.js      | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 3a446b44f..14a390b8b 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -132,7 +132,16 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                                         .map((video, index) => (
                                             <Video
                                                 key={index}
-                                                {...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}
                                             />
                                         ))
diff --git a/src/routes/Player/VideosMenu/VideosMenu.js b/src/routes/Player/VideosMenu/VideosMenu.js
index 6e065d5f9..d418b3f31 100644
--- a/src/routes/Player/VideosMenu/VideosMenu.js
+++ b/src/routes/Player/VideosMenu/VideosMenu.js
@@ -37,7 +37,16 @@ const VideosMenu = ({ className, metaItem, seriesInfo }) => {
                 videos.map((video, index) => (
                     <Video
                         key={index}
-                        {...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}
                     />
                 ))

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 07/94] 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 08/94] 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 09/94] 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 10/94] 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 11/94] 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 12/94] 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 13/94] 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 14/94] 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 15/94] 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 16/94] chore: update & sync pkgs

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

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

From cc046ce48afb160e98415423e72a1e1d557b712d Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 10 Dec 2024 19:12:41 +0200
Subject: [PATCH 17/94] 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 18/94] 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 19/94] 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 20/94] 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 21/94] 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 58ff80f4f248102d831ae51f1dd9d5045c01b006 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 11 Dec 2024 11:23:55 +0200
Subject: [PATCH 22/94] fix: nav-menu height

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

diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
index aa9d175a0..5d1b71b93 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
@@ -14,7 +14,7 @@
 }
 .nav-menu-container {
     width: 22rem;
-    max-height: calc(100vh - var(--horizontal-nav-bar-size));
+    max-height: calc(100vh - var(--horizontal-nav-bar-size) - 1rem);
     overflow-y: auto;
     border-radius: var(--border-radius);
     background-color: var(--modal-background-color);

From bad210810e3995fb5f741a98287b56619f247567 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 11 Dec 2024 12:08:51 +0200
Subject: [PATCH 23/94] fix: multiselectMenu and Multiselect height

---
 src/common/Multiselect/styles.less                   |  4 ++++
 src/common/MultiselectMenu/Dropdown/Dropdown.less    | 12 +++---------
 src/routes/MetaDetails/StreamsList/styles.less       |  1 -
 .../MetaDetails/VideosList/SeasonsBar/styles.less    |  7 -------
 4 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less
index b82fd06c5..4de3d7e25 100644
--- a/src/common/Multiselect/styles.less
+++ b/src/common/Multiselect/styles.less
@@ -7,6 +7,8 @@
     popup-menu-container: menu-container;
 }
 
+@parent-height: 6rem;
+
 .label-container {
     display: flex;
     flex-direction: row;
@@ -48,6 +50,8 @@
 
 .modal-container, .popup-menu-container {
     .menu-container {
+        max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+
         .option-container {
             display: flex;
             flex-direction: row;
diff --git a/src/common/MultiselectMenu/Dropdown/Dropdown.less b/src/common/MultiselectMenu/Dropdown/Dropdown.less
index 57840ca22..2eea0449b 100644
--- a/src/common/MultiselectMenu/Dropdown/Dropdown.less
+++ b/src/common/MultiselectMenu/Dropdown/Dropdown.less
@@ -2,6 +2,8 @@
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
+@parent-height: 6rem;
+
 .dropdown {
     background: var(--modal-background-color);
     display: none;
@@ -16,7 +18,7 @@
 
     &.open {
         display: block;
-        max-height: calc(3.2rem * 10);
+        max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
         overflow: auto;
     }
 
@@ -31,12 +33,4 @@
             width: 1.5rem;
         }
     }
-}
-
-@media only screen and (max-width: @minimum) {
-    .dropdown {
-        &.open {
-            max-height: calc(3.2rem * 7);
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index c22b14071..7ada03719 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -124,7 +124,6 @@
             }
     
             .multiselect-menu-container {
-                max-height: calc(3.2rem * 7);
                 overflow: auto;
             }
         }
diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
index f030385b4..20f6f05ab 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
@@ -77,7 +77,6 @@
         }
 
         .multiselect-menu-container {
-            max-height: calc(3.2rem * 7);
             overflow: auto;
         }
     }
@@ -86,11 +85,5 @@
 @media only screen and (max-width: @minimum) {
     .seasons-bar-container {
         height: 6rem;
-
-        .seasons-popup-label-container {
-            .multiselect-menu-container {
-                max-height: calc(3.2rem * 3);
-            }
-        }
     }
 }
\ No newline at end of file

From df07ca51b0bb59cc6164792f0b032a37852621a9 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 11 Dec 2024 12:26:40 +0200
Subject: [PATCH 24/94] refactor: sizes of the menu-container

---
 src/common/Multiselect/styles.less                | 12 ++++++++++--
 src/common/MultiselectMenu/Dropdown/Dropdown.less | 12 ++++++++++--
 src/routes/Addons/styles.less                     |  1 -
 src/routes/Discover/styles.less                   |  3 +--
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less
index 4de3d7e25..cfb0c3234 100644
--- a/src/common/Multiselect/styles.less
+++ b/src/common/Multiselect/styles.less
@@ -7,7 +7,7 @@
     popup-menu-container: menu-container;
 }
 
-@parent-height: 6rem;
+@parent-height: 10rem;
 
 .label-container {
     display: flex;
@@ -50,7 +50,7 @@
 
 .modal-container, .popup-menu-container {
     .menu-container {
-        max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+        max-height: calc(3.2rem * 7);
 
         .option-container {
             display: flex;
@@ -105,4 +105,12 @@
             }
         }
     }
+}
+
+@media (orientation: landscape) and (max-width: @xsmall) {
+    .modal-container, .popup-menu-container {
+        .menu-container {
+            max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/common/MultiselectMenu/Dropdown/Dropdown.less b/src/common/MultiselectMenu/Dropdown/Dropdown.less
index 2eea0449b..3bea17d22 100644
--- a/src/common/MultiselectMenu/Dropdown/Dropdown.less
+++ b/src/common/MultiselectMenu/Dropdown/Dropdown.less
@@ -2,7 +2,7 @@
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
-@parent-height: 6rem;
+@parent-height: 10rem;
 
 .dropdown {
     background: var(--modal-background-color);
@@ -18,7 +18,7 @@
 
     &.open {
         display: block;
-        max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+        max-height: calc(3.3rem * 7);
         overflow: auto;
     }
 
@@ -33,4 +33,12 @@
             width: 1.5rem;
         }
     }
+}
+
+@media (orientation: landscape) and (max-width: @xsmall) {
+    .dropdown {
+        &.open {
+            max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 10df2eb41..1145ad16a 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -89,7 +89,6 @@
                 margin-right: 1.5rem;
 
                 .multiselect-menu-container {
-                    max-height: calc(3.2rem * 7);
                     overflow: auto;
                 }
             }
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index 3af4ddce9..9f7969702 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -57,7 +57,6 @@
                     }
 
                     .multiselect-menu-container {
-                        max-height: calc(3.2rem * 7);
                         overflow: auto;
                     }
                 }
@@ -220,7 +219,7 @@
                 }
 
                 .multiselect-menu-container {
-                    max-height: calc(3.2rem * 4);
+                    max-height: calc(3.2rem * 3);
                     overflow: auto;
                 }
             }

From 2097b0c5d419e21d2b36ab6ac59e487af923a8fe Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 11 Dec 2024 12:33:56 +0200
Subject: [PATCH 25/94] fix: dropdowns were not visible in pop-up

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

diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index bde17932d..ce03cfa84 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -82,7 +82,7 @@
             .body-container {
                 flex: 1;
                 align-self: stretch;
-                overflow-y: auto;
+                overflow: visible;
                 padding: 2rem 0;
 
                 &:last-child {

From eb4c326aca1b8a3d348d5968f610f2844c0da740 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 11 Dec 2024 16:24:19 +0100
Subject: [PATCH 26/94] chore: update core-web

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

diff --git a/package-lock.json b/package-lock.json
index 15a9be2f5..f718128ff 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",
@@ -3379,9 +3379,10 @@
             "license": "MIT"
         },
         "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==",
+            "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
             }
diff --git a/package.json b/package.json
index f44b53702..0fb7e8824 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "0.48.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",

From 200bb62de60b21654a7e02831b04ead9308faf65 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 11 Dec 2024 16:39:16 +0100
Subject: [PATCH 27/94] fix(Calendar): prevent keyboard nav on cell items

---
 src/routes/Calendar/Table/Cell/Cell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Calendar/Table/Cell/Cell.tsx b/src/routes/Calendar/Table/Cell/Cell.tsx
index b5e78464c..d1e8e13ae 100644
--- a/src/routes/Calendar/Table/Cell/Cell.tsx
+++ b/src/routes/Calendar/Table/Cell/Cell.tsx
@@ -37,7 +37,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
             <HorizontalScroll className={styles['items']}>
                 {
                     items.map(({ id, name, poster, deepLinks }) => (
-                        <Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams}>
+                        <Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams} tabIndex={-1}>
                             <Icon className={styles['icon']} name={'play'} />
                             <Image
                                 className={styles['poster']}

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 28/94] 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 0baec6535b671bc736e96c5454715e4ff7bbea87 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 11 Dec 2024 17:07:01 +0100
Subject: [PATCH 29/94] fix: tooltips style position issue

---
 src/common/Tooltips/TooltipItem/TooltipItem.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/common/Tooltips/TooltipItem/TooltipItem.js b/src/common/Tooltips/TooltipItem/TooltipItem.js
index d74e51973..acf14f224 100644
--- a/src/common/Tooltips/TooltipItem/TooltipItem.js
+++ b/src/common/Tooltips/TooltipItem/TooltipItem.js
@@ -10,14 +10,8 @@ const TooltipItem = React.memo(({ className, active, label, position, margin, pa
 
     const [style, setStyle] = React.useState(null);
 
-    const onTransitionEnd = React.useCallback(() => {
-        if (!active) {
-            setStyle(null);
-        }
-    }, [active]);
-
     React.useEffect(() => {
-        if (!ref.current) return setStyle(null);
+        if (!ref.current || !active) return setStyle(null);
 
         const tooltipBounds = ref.current.getBoundingClientRect();
         const parentBounds = parent.getBoundingClientRect();
@@ -47,7 +41,7 @@ const TooltipItem = React.memo(({ className, active, label, position, margin, pa
     }, [active, position, margin, parent, label]);
 
     return (
-        <div ref={ref} className={classNames(className, styles['tooltip-item'], { 'active': active })} style={style} onTransitionEnd={onTransitionEnd}>
+        <div ref={ref} className={classNames(className, styles['tooltip-item'], { 'active': active })} style={style}>
             { label }
         </div>
     );

From 937366cb316583e5f44bd8110cf5abaae5985051 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 11 Dec 2024 18:36:46 +0100
Subject: [PATCH 30/94] fix(Settings): reset server url only if it was selected
 after deleting

---
 src/routes/Settings/URLsManager/Item/Item.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/Settings/URLsManager/Item/Item.tsx b/src/routes/Settings/URLsManager/Item/Item.tsx
index 7f840686c..319592f02 100644
--- a/src/routes/Settings/URLsManager/Item/Item.tsx
+++ b/src/routes/Settings/URLsManager/Item/Item.tsx
@@ -27,8 +27,8 @@ const Item = ({ url }: Props) => {
 
     const handleDelete = useCallback(() => {
         deleteServerUrl(url);
-        selectServerUrl(DEFAULT_STREAMING_SERVER_URL);
-    }, [url]);
+        selected && selectServerUrl(DEFAULT_STREAMING_SERVER_URL);
+    }, [url, selected]);
 
     const handleSelect = useCallback(() => {
         selectServerUrl(url);

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 31/94] chore(pkgs): package-lock.json

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

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

From 303d26e49b4195831993a5deb90eee941a32d145 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 13:15:24 +0200
Subject: [PATCH 32/94] fix: library bug

---
 src/routes/Library/styles.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 811d97197..9bdd49d4a 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -42,7 +42,6 @@
                 }
 
                 .multiselect-menu-container {
-                    max-height: calc(3.2rem * 7);
                     overflow: auto;
                 }
             }

From c2dc38177696dd833814c1d1e5e445282b45f449 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 13:20:44 +0200
Subject: [PATCH 33/94] fix: overflow on the container filter addons

---
 src/routes/Addons/styles.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 1145ad16a..8060e23b8 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -155,6 +155,10 @@
             .select-input-container {
                 height: 3rem;
 
+                .multiselect-menu-container {
+                    overflow: auto;
+                }
+
                 &:not(:last-child) {
                     margin-bottom: 1rem;
                 }

From e92d9ca0d90ae4d79a9f48c98209077ed97a5304 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 15:26:50 +0200
Subject: [PATCH 34/94] refactor (URLsmanager): styles

---
 src/routes/Settings/URLsManager/Item/Item.less   | 14 ++++++--------
 src/routes/Settings/URLsManager/URLsManager.less |  7 ++++++-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/routes/Settings/URLsManager/Item/Item.less b/src/routes/Settings/URLsManager/Item/Item.less
index 81c6d6c17..f92fd621e 100644
--- a/src/routes/Settings/URLsManager/Item/Item.less
+++ b/src/routes/Settings/URLsManager/Item/Item.less
@@ -4,10 +4,10 @@
 
 .item {
     display: flex;
-    padding: 1rem 1.5rem;
-    border-radius: var(--border-radius);
+    padding: 0.7rem 1.5rem;
+    border-radius: 2.5rem;
     transition: 0.3s all ease-in-out;
-    background-color: transparent;
+    background-color: var(--overlay-color);
     border: 2px solid transparent;
     justify-content: space-between;
     position: relative;
@@ -100,7 +100,7 @@
     }
 
     &:hover {
-        background-color: var(--overlay-color);
+        border: 2px solid var(--overlay-color);
     
         .actions {
             .delete {
@@ -114,13 +114,11 @@
 
 @media only screen and (max-width: @minimum) {
     .item {
-        padding: 1rem 0.5rem;
+        padding: 0.7rem 1rem;
 
         .actions {
-            margin-right: 4rem;
-
             .delete {
-                right: 0.5rem;
+                right: 1rem;
 
                 .icon {
                     opacity: 0.6;
diff --git a/src/routes/Settings/URLsManager/URLsManager.less b/src/routes/Settings/URLsManager/URLsManager.less
index 440ec39b3..683ac029e 100644
--- a/src/routes/Settings/URLsManager/URLsManager.less
+++ b/src/routes/Settings/URLsManager/URLsManager.less
@@ -8,7 +8,8 @@
 
     .header {
         display: flex;
-        justify-content: space-around;
+        justify-content: space-between;
+        margin: 0 3rem;
         align-items: center;
         
         .label {
@@ -16,6 +17,10 @@
             color: var(--primary-foreground-color);
             font-weight: 400;
             opacity: 0.6;
+
+            &:last-of-type {
+                margin-right: 4rem;
+            }
         }
     }
 

From e23b7614681ff1a1b7bf9aba1064355f72245452 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 18:38:31 +0200
Subject: [PATCH 35/94] refactor(RadioButton): remove margin

---
 src/common/RadioButton/RadioButton.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common/RadioButton/RadioButton.less b/src/common/RadioButton/RadioButton.less
index 42e91b004..7e414a521 100644
--- a/src/common/RadioButton/RadioButton.less
+++ b/src/common/RadioButton/RadioButton.less
@@ -21,7 +21,6 @@
         cursor: pointer;
         outline: none;
         user-select: none;
-        margin-right: 0.75rem;
         outline-width: var(--focus-outline-size);
         outline-color: @color-surface-light5;
         outline-offset: calc(-1 * var(--focus-outline-size));

From 73f685621e1b5a3355c9a77866dbc7e443d85dea Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Dec 2024 18:42:29 +0200
Subject: [PATCH 36/94] refactor: use padding instead of margin

---
 src/routes/Settings/URLsManager/Item/Item.less   | 2 +-
 src/routes/Settings/URLsManager/URLsManager.less | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/Settings/URLsManager/Item/Item.less b/src/routes/Settings/URLsManager/Item/Item.less
index f92fd621e..1205555cc 100644
--- a/src/routes/Settings/URLsManager/Item/Item.less
+++ b/src/routes/Settings/URLsManager/Item/Item.less
@@ -34,7 +34,7 @@
     .actions {
         display: flex;
         gap: 1rem;
-        margin-right: 5rem;
+        padding-right: 4rem;
 
         .status {
             display: flex;
diff --git a/src/routes/Settings/URLsManager/URLsManager.less b/src/routes/Settings/URLsManager/URLsManager.less
index 683ac029e..fd0055d1c 100644
--- a/src/routes/Settings/URLsManager/URLsManager.less
+++ b/src/routes/Settings/URLsManager/URLsManager.less
@@ -9,7 +9,7 @@
     .header {
         display: flex;
         justify-content: space-between;
-        margin: 0 3rem;
+        padding: 0 3rem;
         align-items: center;
         
         .label {
@@ -19,7 +19,7 @@
             opacity: 0.6;
 
             &:last-of-type {
-                margin-right: 4rem;
+                padding-right: 3rem;
             }
         }
     }

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 37/94] 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 38/94] 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 39/94] 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 40/94] 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 41/94] 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 42/94] 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 43/94] 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 44/94] 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 45/94] 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 678c7550034b38b162f4ab81491ca4d80da1c330 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Sun, 15 Dec 2024 21:22:15 +0200
Subject: [PATCH 46/94] refactor: remove addons button horizontal navbar

---
 src/common/MainNavBars/MainNavBars.js                 |  1 -
 .../NavBar/HorizontalNavBar/HorizontalNavBar.js       | 11 +----------
 src/routes/MetaDetails/MetaDetails.js                 |  2 --
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/common/MainNavBars/MainNavBars.js b/src/common/MainNavBars/MainNavBars.js
index 3ccf200ec..6bcde9031 100644
--- a/src/common/MainNavBars/MainNavBars.js
+++ b/src/common/MainNavBars/MainNavBars.js
@@ -24,7 +24,6 @@ const MainNavBars = React.memo(({ className, route, query, children }) => {
                 query={query}
                 backButton={false}
                 searchBar={true}
-                addonsButton={true}
                 fullscreenButton={true}
                 navMenu={true}
             />
diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
index 7a992fb45..0df4e833f 100644
--- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -13,7 +13,7 @@ const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 const { t } = require('i18next');
 
-const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, navMenu, ...props }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -54,14 +54,6 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
                     null
             }
             <div className={styles['buttons-container']}>
-                {
-                    addonsButton ?
-                        <Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
-                            <Icon className={styles['icon']} name={'addons-outline'} />
-                        </Button>
-                        :
-                        null
-                }
                 {
                     !isIOSPWA && fullscreenButton ?
                         <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
@@ -90,7 +82,6 @@ HorizontalNavBar.propTypes = {
     title: PropTypes.string,
     backButton: PropTypes.bool,
     searchBar: PropTypes.bool,
-    addonsButton: PropTypes.bool,
     fullscreenButton: PropTypes.bool,
     navMenu: PropTypes.bool
 };
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 084ca3f58..acbe03517 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -81,7 +81,6 @@ const MetaDetails = ({ urlParams, queryParams }) => {
             <HorizontalNavBar
                 className={styles['nav-bar']}
                 backButton={true}
-                addonsButton={true}
                 fullscreenButton={true}
                 navMenu={true}
             />
@@ -210,7 +209,6 @@ const MetaDetailsFallback = () => (
         <HorizontalNavBar
             className={styles['nav-bar']}
             backButton={true}
-            addonsButton={true}
             fullscreenButton={true}
             navMenu={true}
         />

From dbb1a79219b58e7f503dad23dca34b1f0e7faace Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 16 Dec 2024 10:17:20 +0100
Subject: [PATCH 47/94] fix(TextInput): submit not triggering

---
 src/common/TextInput/TextInput.tsx | 33 ++++++++++++------------------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/common/TextInput/TextInput.tsx b/src/common/TextInput/TextInput.tsx
index b409f229c..573f69c7d 100644
--- a/src/common/TextInput/TextInput.tsx
+++ b/src/common/TextInput/TextInput.tsx
@@ -1,32 +1,25 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React from 'react';
+import React, { forwardRef, useCallback } from 'react';
+import { type KeyboardEvent, type InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
 import styles from './styles.less';
 
-type Props = React.InputHTMLAttributes<HTMLInputElement> & {
+type Props = InputHTMLAttributes<HTMLInputElement> & {
     className?: string;
     disabled?: boolean;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onSubmit?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onSubmit?: (event: KeyboardEvent<HTMLInputElement>) => void;
 };
 
-const TextInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
-    const { onSubmit, className, disabled, ...rest } = props;
+const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
+    const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
+        props.onKeyDown && props.onKeyDown(event);
 
-    const onKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (typeof props.onKeyDown === 'function') {
-            props.onKeyDown(event);
+        if (event.key === 'Enter' ) {
+            props.onSubmit && props.onSubmit(event);
         }
-
-        if (
-            event.key === 'Enter' &&
-            !(event.nativeEvent as any).submitPrevented &&
-            typeof onSubmit === 'function'
-        ) {
-            onSubmit(event);
-        }
-    }, [props.onKeyDown, onSubmit]);
+    }, [props.onKeyDown, props.onSubmit]);
 
     return (
         <input
@@ -36,10 +29,10 @@ const TextInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             autoComplete={'off'}
             spellCheck={false}
             tabIndex={0}
+            {...props}
             ref={ref}
-            className={classnames(className, styles['text-input'], { disabled })}
+            className={classnames(props.className, styles['text-input'], { 'disabled': props.disabled })}
             onKeyDown={onKeyDown}
-            {...rest}
         />
     );
 });

From b45a99296eb53859b1ae69e22c97d3ddfae946dd Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 10 Dec 2024 20:31:38 +0200
Subject: [PATCH 48/94] 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 07570f99b672339953cd96e9a04ad69b2c5dae07 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 12:40:03 +0200
Subject: [PATCH 49/94] fix: remove blue select box from the buttons

---
 src/common/Button/styles.less           | 1 +
 src/common/RadioButton/RadioButton.less | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less
index 6a26b3b7f..6baf8b7aa 100644
--- a/src/common/Button/styles.less
+++ b/src/common/Button/styles.less
@@ -6,6 +6,7 @@
     outline-width: var(--focus-outline-size);
     outline-color: @color-surface-light5;
     outline-offset: calc(-1 * var(--focus-outline-size));
+    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
 
     &:focus {
diff --git a/src/common/RadioButton/RadioButton.less b/src/common/RadioButton/RadioButton.less
index 7e414a521..4f3380147 100644
--- a/src/common/RadioButton/RadioButton.less
+++ b/src/common/RadioButton/RadioButton.less
@@ -24,6 +24,7 @@
         outline-width: var(--focus-outline-size);
         outline-color: @color-surface-light5;
         outline-offset: calc(-1 * var(--focus-outline-size));
+        -webkit-tap-highlight-color: transparent;
 
         input[type='radio'] {
             opacity: 0;

From 5f3a9204b9351ce4f447d154f6b01e106cdcf7f4 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 13:00:09 +0200
Subject: [PATCH 50/94] fix: colorInput component styles

---
 src/common/ColorInput/styles.less | 1 -
 src/routes/Settings/styles.less   | 9 ++++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/common/ColorInput/styles.less b/src/common/ColorInput/styles.less
index 7ed494061..56bd1f601 100644
--- a/src/common/ColorInput/styles.less
+++ b/src/common/ColorInput/styles.less
@@ -17,7 +17,6 @@
         align-items: center;
         justify-content: center;
         padding: 0 0.5rem;
-        border: thin solid @color-surface-light5-20;
         pointer-events: none;
 
         .transparent-label {
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index a8dd1a990..dc0c2f2ef 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -316,7 +316,14 @@
                         }
 
                         &.color-input-container {
-                            padding: 1.75rem 1rem;
+                            padding: 1.3rem 1rem;
+                            border-radius: 3rem;
+                            border: 2px solid transparent;
+                            transition: 0.3s all ease-in-out;
+
+                            &:hover {
+                                border-color: var(--overlay-color);
+                            }
                         }
 
                         &.info-container {

From 6b9be4367164cf57378406f2218c62a6aab75a10 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 13:05:29 +0200
Subject: [PATCH 51/94] fix: use the default height set in the component

MutliSelect
---
 src/routes/Settings/styles.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index a8dd1a990..87defe996 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -286,7 +286,6 @@
                             }
 
                             .multiselect-menu-container {
-                                max-height: calc(3.2rem * 7);
                                 overflow: auto;
                             }
                         }

From 976992b28efdcfa9745b7c798e3dd26975c3406c Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 16 Dec 2024 12:10:29 +0100
Subject: [PATCH 52/94] fix(BottomSheet): was hidden on ipad pro in portait
 mode

---
 src/common/BottomSheet/BottomSheet.less | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/common/BottomSheet/BottomSheet.less b/src/common/BottomSheet/BottomSheet.less
index e0d756477..4ac68ead6 100644
--- a/src/common/BottomSheet/BottomSheet.less
+++ b/src/common/BottomSheet/BottomSheet.less
@@ -87,7 +87,13 @@
     }
 }
 
-@media only screen and (min-width: @xsmall) {
+@media only screen and (min-width: @small) and (orientation: portait) {
+    .bottom-sheet {
+        display: none;
+    }
+}
+
+@media only screen and (min-width: @xsmall) and (orientation: landscape) {
     .bottom-sheet {
         display: none;
     }

From aba6c48281e4e4d25ecc304af66c40020f5c2fae Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 16 Dec 2024 12:34:57 +0100
Subject: [PATCH 53/94] fix(Calendar): hover only on pointer fine

---
 src/routes/Calendar/Table/Cell/Cell.less | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
index 1d54855bc..1a0f16d7e 100644
--- a/src/routes/Calendar/Table/Cell/Cell.less
+++ b/src/routes/Calendar/Table/Cell/Cell.less
@@ -128,8 +128,10 @@
         border-color: var(--primary-foreground-color);
     }
 
-    &:not(.active):hover {
-        border-color: var(--overlay-color);
+    @media (pointer: fine) {
+        &:not(.active):hover {
+            border-color: var(--overlay-color);
+        }
     }
 }
 

From afe21186e35e1d0285c894d02b2f360fe7ae955c Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 16 Dec 2024 12:41:14 +0100
Subject: [PATCH 54/94] 5.0.0-beta.14

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

diff --git a/package-lock.json b/package-lock.json
index f718128ff..2ac27cb5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "stremio",
-    "version": "5.0.0-beta.13",
+    "version": "5.0.0-beta.14",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "stremio",
-            "version": "5.0.0-beta.13",
+            "version": "5.0.0-beta.14",
             "license": "gpl-2.0",
             "dependencies": {
                 "@babel/runtime": "7.26.0",
diff --git a/package.json b/package.json
index 0fb7e8824..bec340a54 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "stremio",
     "displayName": "Stremio",
-    "version": "5.0.0-beta.13",
+    "version": "5.0.0-beta.14",
     "author": "Smart Code OOD",
     "private": true,
     "license": "gpl-2.0",

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 55/94] 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 56/94] refactor: keep the DOM organised

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

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

From f8d9d0d8385c5217a3841b9664fbc2eaa99bde4e Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 16 Dec 2024 16:37:10 +0200
Subject: [PATCH 57/94] 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 58/94] 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 59/94] (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 60/94] feat: rewrite sidedrawer to act like a menu

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

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

From d9a9fb2d4fec540bff5eefb61a3e53c5578e2345 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 15:20:26 +0200
Subject: [PATCH 61/94] fix: styles on event modal

---
 src/common/EventModal/styles.less | 48 ++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 67cfabb34..001c252ee 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -23,13 +23,13 @@
             .modal-dialog-content {
                 overflow-y: visible;
             }
-    
+
             .image {
                 width: 100%;
                 height: 100%;
                 margin-top: -10rem;
             }
-        
+
             .info-container {
                 display: flex;
                 flex-direction: column;
@@ -38,7 +38,7 @@
                 gap: 2.5rem;
                 padding: 1rem 4rem;
                 margin-top: -7rem;
-        
+
                 .title-container {
                     display: flex;
                     flex-direction: column;
@@ -50,7 +50,7 @@
                         text-align: center;
                         padding: 0 6rem;
                     }
-        
+
                     .label {
                         color: var(--primary-foreground-color);
                         font-size: 1rem;
@@ -58,7 +58,7 @@
                         opacity: 0.5;
                     }
                 }
-        
+
                 .addon-container {
                     display: flex;
                     align-items: center;
@@ -76,19 +76,19 @@
                         color: var(--primary-foreground-color);
                     }
                 }
-        
+
                 .action-button {
                     background-color: var(--primary-foreground-color);
                     border: 2px solid var(--primary-foreground-color);
                     padding: 0.8rem 2rem;
                     border-radius: 2rem;
-        
+
                     .button-label {
                         color: var(--primary-accent-color);
                         font-size: 1rem;
                         font-weight: 700;
                     }
-        
+
                     &:hover {
                         background-color: transparent;
                     }
@@ -96,15 +96,37 @@
             }
         }
     }
+}
 
-    @media only screen and (max-width: @minimum) {
+@media (orientation: landscape) and (max-height: @xsmall) {
+    .event-modal {
         .modal-dialog-container {
             .modal-dialog-content {
-                .image {
-                    height: 125%;
-                    width: 125%;
+                overflow-y: auto;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .modal-dialog-content {
+                    overflow-y: auto;
                 }
 
+                .image {
+                    margin-top: -5rem;
+                }
+
+                .info {
+                    margin-top: 0rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .event-modal {
+        .modal-dialog-container {
+            .modal-dialog-content {
                 .info-container {
                     .title-container {
                         .title {
@@ -120,4 +142,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}

From c2a4fb87bdce118a2f20c420992019890b302158 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 15:32:45 +0200
Subject: [PATCH 62/94] fix: rename old class to align to new impl

---
 src/common/EventModal/styles.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 001c252ee..6d8591493 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -20,7 +20,7 @@
             align-items: center;
             overflow: visible;
 
-            .modal-dialog-content {
+            .body-container {
                 overflow-y: visible;
             }
 
@@ -107,7 +107,7 @@
                 flex-direction: column;
                 align-items: center;
 
-                .modal-dialog-content {
+                .body-container {
                     overflow-y: auto;
                 }
 

From 99921c0db8ccb00024e9457e9b7d2e5122239668 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 15:33:46 +0200
Subject: [PATCH 63/94] remove: uneccesary flex declaration

---
 src/common/EventModal/styles.less | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 6d8591493..a6710cf64 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -103,9 +103,6 @@
         .modal-dialog-container {
             .modal-dialog-content {
                 overflow-y: auto;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
 
                 .body-container {
                     overflow-y: auto;

From 7875e4ba995d11e6ecea46d547bdfe25ad9ebf0d Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 16:44:31 +0200
Subject: [PATCH 64/94] fix: modal image sizing

---
 src/common/EventModal/styles.less | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index a6710cf64..bd4718abb 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -19,15 +19,20 @@
             flex-direction: column;
             align-items: center;
             overflow: visible;
+            position: relative;
 
             .body-container {
                 overflow-y: visible;
             }
 
             .image {
-                width: 100%;
-                height: 100%;
-                margin-top: -10rem;
+                position: absolute;
+                top: -10rem;
+                left: 50%;
+                transform: translateX(-50%);
+                object-fit: cover;
+                width: 30rem;
+                height: 30rem;
             }
 
             .info-container {
@@ -36,8 +41,7 @@
                 align-items: center;
                 justify-content: center;
                 gap: 2.5rem;
-                padding: 1rem 4rem;
-                margin-top: -7rem;
+                padding: 10rem 4rem 0;
 
                 .title-container {
                     display: flex;
@@ -109,11 +113,12 @@
                 }
 
                 .image {
-                    margin-top: -5rem;
+                    position: relative;
+                    top: 0;
                 }
 
-                .info {
-                    margin-top: 0rem;
+                .info-container {
+                    padding: 1rem 4rem 0;
                 }
             }
         }

From d3533054282d344fde1a4e928d6160d7ddb134ef Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 17 Dec 2024 16:56:20 +0200
Subject: [PATCH 65/94] remove: image on mobile landscape

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

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index bd4718abb..24c1d053d 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -113,8 +113,7 @@
                 }
 
                 .image {
-                    position: relative;
-                    top: 0;
+                    display: none;
                 }
 
                 .info-container {

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 66/94] 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 67/94] 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 68/94] 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 69/94] 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 70/94] 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 71/94] 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 72/94] refactor(SideDrawerButton): styles

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

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

From 1d9f0fcb15b780b4616765cc68dba8e0990733c0 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 18 Dec 2024 12:00:19 +0200
Subject: [PATCH 73/94] fix: toats outer glow problem with overflow

---
 src/App/styles.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App/styles.less b/src/App/styles.less
index 6210a8bdf..edff6e66d 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -38,7 +38,7 @@
     --quaternary-accent-color: rgba(18, 69, 166, 1);
     --overlay-color: rgba(255, 255, 255, 0.05);
     --modal-background-color: rgba(15, 13, 32, 1);
-    --outer-glow: 0px 0px 30px rgba(123, 91, 245, 0.37);
+    --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37);
     --border-radius: 0.75rem;
 }
 
@@ -112,7 +112,7 @@ html {
                 left: auto;
                 z-index: 1;
                 padding: 0 calc(0.5 * var(--horizontal-nav-bar-size));
-                overflow-y: auto;
+                overflow: visible;
                 scrollbar-width: none;
                 pointer-events: none;
 

From 4b22bda09c5656cea9ac91cc8ea61bca5a3413ba Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 18 Dec 2024 17:07:19 +0200
Subject: [PATCH 74/94] feat: addon placeholder

---
 .../AddonPlaceholder/AddonPlaceholder.less    | 122 ++++++++++++++++++
 .../AddonPlaceholder/AddonPlaceholder.tsx     |  33 +++++
 src/routes/Addons/AddonPlaceholder/index.ts   |   7 +
 src/routes/Addons/Addons.js                   |  17 ++-
 4 files changed, 173 insertions(+), 6 deletions(-)
 create mode 100644 src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
 create mode 100644 src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx
 create mode 100644 src/routes/Addons/AddonPlaceholder/index.ts

diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
new file mode 100644
index 000000000..1dac49285
--- /dev/null
+++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
@@ -0,0 +1,122 @@
+/* Copyright (C) 2017-2024 Smart code 203358507 */
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+@placeholder-opacity: 0.1;
+@padding: 1.5rem;
+@small-padding: 1rem;
+@logo-size: 8rem;
+
+.placeholder-pill(@width: 100%, @height: 1.3rem) {
+    background-color: var(--primary-foreground-color);
+    border-radius: var(--border-radius);
+    opacity: @placeholder-opacity;
+    width: @width;
+    height: @height;
+}
+
+.placeholder-logo(@size: @logo-size) {
+    width: @size;
+    height: @size;
+    border-radius: 50%;
+    background-color: var(--primary-foreground-color);
+    opacity: @placeholder-opacity;
+}
+
+.addon-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: @padding;
+    border-radius: var(--border-radius);
+    background-color: var(--overlay-color);
+    cursor: inherit;
+
+    .content {
+        display: flex;
+        flex: 1;
+
+        .logo-container {
+            flex: none;
+            .placeholder-logo(@logo-size);
+        }
+
+        .info-container {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            padding: @small-padding;
+            flex: 1;
+
+            .placeholder-pill:nth-child(1) {
+                .placeholder-pill(40%);
+            }
+            .placeholder-pill:nth-child(2) {
+                .placeholder-pill(60%);
+            }
+            .placeholder-pill:nth-child(3) {
+                .placeholder-pill(80%);
+            }
+        }
+    }
+
+    .buttons-container {
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        gap: @small-padding;
+        width: 30%;
+        max-width: 18rem;
+
+        .action-buttons-container {
+            display: flex;
+            flex-direction: row;
+            gap: @small-padding;
+
+            .placeholder-pill:nth-child(1), .placeholder-pill:nth-child(2) {
+                .placeholder-pill(50%, 3.5rem);
+            }
+        }
+
+        .placeholder-pill:last-child {
+            .placeholder-pill(100%, 3.5rem);
+        }
+    }
+}
+
+@media screen and (max-width: @minimum) {
+    .addon-container {
+        flex-direction: column;
+        align-items: stretch;
+        padding: 1rem;
+        width: 100%;
+        gap: 1rem;
+
+        .content {
+            flex-direction: row;
+            width: 100%;
+
+            .logo-container {
+                .placeholder-logo(6rem);
+                margin: 0 auto;
+            }
+
+            .info-container {
+                padding: 0.5rem;
+                width: 100%;
+            }
+        }
+
+        .buttons-container {
+            flex-direction: column;
+            align-items: stretch;
+            width: 100%;
+            gap: 0.5rem;
+            max-width: none;
+
+            .action-buttons-container {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx
new file mode 100644
index 000000000..d51f1336f
--- /dev/null
+++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx
@@ -0,0 +1,33 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React from 'react';
+import classnames from 'classnames';
+import styles from './AddonPlaceholder.less';
+
+type Props = {
+    className?: string;
+};
+
+export const AddonPlaceholder = ({ className }: Props) => {
+    return (
+        <div className={classnames(className, styles['addon-container'])}>
+            <div className={styles['content']}>
+                <div className={styles['logo-container']}>
+                    <div className={styles['placeholder-logo']} />
+                </div>
+                <div className={styles['info-container']}>
+                    <div className={styles['placeholder-pill']} />
+                    <div className={styles['placeholder-pill']} />
+                    <div className={styles['placeholder-pill']} />
+                </div>
+            </div>
+            <div className={styles['buttons-container']}>
+                <div className={styles['action-buttons-container']}>
+                    <div className={styles['placeholder-pill']} />
+                    <div className={styles['placeholder-pill']} />
+                </div>
+                <div className={styles['placeholder-pill']} />
+            </div>
+        </div>
+    );
+};
diff --git a/src/routes/Addons/AddonPlaceholder/index.ts b/src/routes/Addons/AddonPlaceholder/index.ts
new file mode 100644
index 000000000..065f99010
--- /dev/null
+++ b/src/routes/Addons/AddonPlaceholder/index.ts
@@ -0,0 +1,7 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import { AddonPlaceholder } from './AddonPlaceholder';
+
+export {
+    AddonPlaceholder
+};
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 0de34ad4a..1c410b819 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -12,6 +12,7 @@ const useRemoteAddons = require('./useRemoteAddons');
 const useAddonDetailsTransportUrl = require('./useAddonDetailsTransportUrl');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
+const { AddonPlaceholder } = require('./AddonPlaceholder');
 
 const Addons = ({ urlParams, queryParams }) => {
     const { t } = useTranslation();
@@ -94,7 +95,7 @@ const Addons = ({ urlParams, queryParams }) => {
                     <div className={styles['spacing']} />
                     <Button className={styles['add-button-container']} title={t('ADD_ADDON')} onClick={openAddAddonModal}>
                         <Icon className={styles['icon']} name={'add'} />
-                        <div className={styles['add-button-label']}>{ t('ADD_ADDON') }</div>
+                        <div className={styles['add-button-label']}>{t('ADD_ADDON')}</div>
                     </Button>
                     <SearchBar
                         className={styles['search-bar']}
@@ -150,8 +151,10 @@ const Addons = ({ urlParams, queryParams }) => {
                                 </div>
                                 :
                                 remoteAddons.catalog.content.type === 'Loading' ?
-                                    <div className={styles['message-container']}>
-                                        Loading!
+                                    <div className={styles['addons-list-container']}>
+                                        {Array.from({ length: 6 }).map((_, index) => (
+                                            <AddonPlaceholder key={index} className={styles['addon']} />
+                                        ))}
                                     </div>
                                     :
                                     <div className={styles['addons-list-container']}>
@@ -179,8 +182,10 @@ const Addons = ({ urlParams, queryParams }) => {
                                         }
                                     </div>
                             :
-                            <div className={styles['message-container']}>
-                                No select
+                            <div className={styles['addons-list-container']}>
+                                {Array.from({ length: 6 }).map((_, index) => (
+                                    <AddonPlaceholder key={index} className={styles['addon']} />
+                                ))}
                             </div>
                 }
             </div>
@@ -205,7 +210,7 @@ const Addons = ({ urlParams, queryParams }) => {
                         title={t('ADD_ADDON')}
                         buttons={addAddonModalButtons}
                         onCloseRequest={closeAddAddonModal}>
-                        <div className={styles['notice']}>{ t('ADD_ADDON_DESCRIPTION') }</div>
+                        <div className={styles['notice']}>{t('ADD_ADDON_DESCRIPTION')}</div>
                         <TextInput
                             ref={addAddonUrlInputRef}
                             className={styles['addon-url-input']}

From fbb9c45460432dfc8aa9d638ca0b35bc360e7c1d Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 18 Dec 2024 17:15:43 +0200
Subject: [PATCH 75/94] fix: copyright comment

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

diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
index 1dac49285..be129c65f 100644
--- a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
+++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
@@ -1,4 +1,4 @@
-/* Copyright (C) 2017-2024 Smart code 203358507 */
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~stremio/common/screen-sizes.less';
 

From f9fb161292b444ac7f87f31f57e489c125a9d973 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 18 Dec 2024 17:34:19 +0200
Subject: [PATCH 76/94] refactor: align mobile view size with real addon

---
 .../AddonPlaceholder/AddonPlaceholder.less    | 28 ++++++++++++++++---
 .../AddonPlaceholder/AddonPlaceholder.tsx     |  1 +
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
index be129c65f..8cbc1f0f0 100644
--- a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
+++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
@@ -51,12 +51,18 @@
             .placeholder-pill:nth-child(1) {
                 .placeholder-pill(40%);
             }
+
             .placeholder-pill:nth-child(2) {
                 .placeholder-pill(60%);
             }
+
             .placeholder-pill:nth-child(3) {
                 .placeholder-pill(80%);
             }
+
+            .placeholder-pill:nth-child(4) {
+                display: none;
+            }
         }
     }
 
@@ -88,22 +94,36 @@
     .addon-container {
         flex-direction: column;
         align-items: stretch;
-        padding: 1rem;
         width: 100%;
-        gap: 1rem;
 
         .content {
             flex-direction: row;
             width: 100%;
 
             .logo-container {
-                .placeholder-logo(6rem);
                 margin: 0 auto;
             }
 
             .info-container {
-                padding: 0.5rem;
+                padding: 1rem;
                 width: 100%;
+
+                .placeholder-pill:nth-child(1) {
+                    .placeholder-pill(60%);
+                }
+
+                .placeholder-pill:nth-child(2) {
+                    .placeholder-pill(40%);
+                }
+
+                .placeholder-pill:nth-child(3) {
+                    .placeholder-pill(80%, 0.8rem);
+                }
+
+                .placeholder-pill:nth-child(4) {
+                    display: block;
+                    .placeholder-pill(20%, 0.8rem);
+                }
             }
         }
 
diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx
index d51f1336f..c6927d275 100644
--- a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx
+++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.tsx
@@ -19,6 +19,7 @@ export const AddonPlaceholder = ({ className }: Props) => {
                     <div className={styles['placeholder-pill']} />
                     <div className={styles['placeholder-pill']} />
                     <div className={styles['placeholder-pill']} />
+                    <div className={styles['placeholder-pill']} />
                 </div>
             </div>
             <div className={styles['buttons-container']}>

From 8a7e07f833fd40822e1326084896aafcc038bb18 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 18 Dec 2024 17:36:17 +0200
Subject: [PATCH 77/94] refactor: add back the gap to the placeholder

---
 src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
index 8cbc1f0f0..34271d391 100644
--- a/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
+++ b/src/routes/Addons/AddonPlaceholder/AddonPlaceholder.less
@@ -95,6 +95,7 @@
         flex-direction: column;
         align-items: stretch;
         width: 100%;
+        gap: 1rem;
 
         .content {
             flex-direction: row;

From befc1d6eeccf8d658cf7f0fbe5df7d9a48556be5 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 19 Dec 2024 21:23:56 +0200
Subject: [PATCH 78/94] fix: streaming server url item styles

---
 src/routes/Settings/URLsManager/AddItem/AddItem.less | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/routes/Settings/URLsManager/AddItem/AddItem.less b/src/routes/Settings/URLsManager/AddItem/AddItem.less
index b31ce9ac8..cb7a63b95 100644
--- a/src/routes/Settings/URLsManager/AddItem/AddItem.less
+++ b/src/routes/Settings/URLsManager/AddItem/AddItem.less
@@ -4,11 +4,10 @@
 
 .add-item {
     display: flex;
-    padding: 0.5rem 1.5rem;
-    gap: 1rem;
-    border-radius: var(--border-radius);
+    padding: 0.35rem 1.5rem;
+    border-radius: 2.5rem;
     transition: 0.3s all ease-in-out;
-    background-color: transparent;
+    background-color: var(--overlay-color);
     border: 2px solid transparent;
     justify-content: space-between;
     position: relative;
@@ -77,8 +76,7 @@
     }
 
     &:hover {
-        border: 2px solid transparent;
-        background-color: var(--overlay-color);
+        border: 2px solid var(--overlay-color);
     }
 }
 

From 082df3a253af974a6caabffe4e90ba0bb6d8038e Mon Sep 17 00:00:00 2001
From: Abhishek Panwar <imabhishek612@gmail.com>
Date: Fri, 20 Dec 2024 02:01:32 +0530
Subject: [PATCH 79/94] Fix: Correct URL Encoding in SearchBar Component

Changes Made:
Used encodeURIComponent in the SearchBar component to ensure special characters and spaces in search queries are correctly encoded.

Example:
Before: Searching Alexa & Katie could break the query, returning incomplete results.
After: The query is now encoded as Alexa%20%26%20Katie, ensuring accurate results.
---
 src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
index 40cfbed06..f9e4176bd 100644
--- a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
@@ -61,7 +61,7 @@ const SearchBar = React.memo(({ className, query, active }) => {
 
     const queryInputOnSubmit = React.useCallback((event) => {
         event.preventDefault();
-        const searchValue = `/search?search=${event.target.value}`;
+        const searchValue = `/search?search=${encodeURIComponent(event.target.value)}`;
         setCurrentQuery(searchValue);
         if (searchInputRef.current && searchValue) {
             window.location.hash = searchValue;

From 07412f0b7edbe5f24c5f27f24bbff134dc463694 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 20 Dec 2024 12:00:51 +0200
Subject: [PATCH 80/94] fix: mobile additem styles

---
 src/routes/Settings/URLsManager/AddItem/AddItem.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Settings/URLsManager/AddItem/AddItem.less b/src/routes/Settings/URLsManager/AddItem/AddItem.less
index cb7a63b95..e8de1ecf6 100644
--- a/src/routes/Settings/URLsManager/AddItem/AddItem.less
+++ b/src/routes/Settings/URLsManager/AddItem/AddItem.less
@@ -82,6 +82,6 @@
 
 @media only screen and (max-width: @minimum) {
     .add-item {
-        padding: 0.5rem;
+        padding: 0.35rem 0.5rem;
     }
 }
\ No newline at end of file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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