From 9a3be29a3906cb78298c8a7d93c8aa49a4da25e4 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Wed, 29 Jan 2025 15:15:29 +0200
Subject: [PATCH 01/19] feat(context menu): enable context menu on right click
 on video

---
 src/routes/Player/OptionsMenu/OptionsMenu.js |  7 ++-
 src/routes/Player/Player.js                  | 65 +++++++++++++++++---
 src/routes/Player/Video/Video.js             |  2 +-
 3 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/src/routes/Player/OptionsMenu/OptionsMenu.js b/src/routes/Player/OptionsMenu/OptionsMenu.js
index 11738cb3e..89d2d605b 100644
--- a/src/routes/Player/OptionsMenu/OptionsMenu.js
+++ b/src/routes/Player/OptionsMenu/OptionsMenu.js
@@ -9,7 +9,7 @@ const { useServices } = require('stremio/services');
 const Option = require('./Option');
 const styles = require('./styles');
 
-const OptionsMenu = ({ className, stream, playbackDevices }) => {
+const OptionsMenu = ({ className, stream, playbackDevices, style }) => {
     const { t } = useTranslation();
     const { core } = useServices();
     const platform = usePlatform();
@@ -70,7 +70,7 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
         event.nativeEvent.optionsMenuClosePrevented = true;
     }, []);
     return (
-        <div className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
+        <div style={style} className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
             {
                 streamingUrl || downloadUrl ?
                     <Option
@@ -112,7 +112,8 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
 OptionsMenu.propTypes = {
     className: PropTypes.string,
     stream: PropTypes.object,
-    playbackDevices: PropTypes.array
+    playbackDevices: PropTypes.array,
+    style: PropTypes.object,
 };
 
 module.exports = OptionsMenu;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index c76a8dcae..6a546364f 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -61,9 +61,14 @@ const Player = ({ urlParams, queryParams }) => {
     const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
     const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
     const [sideDrawerOpen, , closeSideDrawer, toggleSideDrawer] = useBinaryState(false);
+    const [contextMenuOpen, openContextMenu, closeContextMenu] = useBinaryState(false);
+    const [contextCoords, setContextCoords] = React.useState({
+        x: 0,
+        y: 0,
+    });
 
     const menusOpen = React.useMemo(() => {
-        return optionsMenuOpen || subtitlesMenuOpen || audioMenuOpen || speedMenuOpen || statisticsMenuOpen || sideDrawerOpen;
+        return optionsMenuOpen || subtitlesMenuOpen || audioMenuOpen || speedMenuOpen || statisticsMenuOpen || sideDrawerOpen || contextMenuOpen;
     }, [optionsMenuOpen, subtitlesMenuOpen, audioMenuOpen, speedMenuOpen, statisticsMenuOpen, sideDrawerOpen]);
 
     const closeMenus = React.useCallback(() => {
@@ -73,6 +78,7 @@ const Player = ({ urlParams, queryParams }) => {
         closeSpeedMenu();
         closeStatisticsMenu();
         closeSideDrawer();
+        closeContextMenu();
     }, []);
 
     const overlayHidden = React.useMemo(() => {
@@ -216,13 +222,17 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [player.nextVideo]);
 
-    const onVideoClick = React.useCallback(() => {
-        if (video.state.paused !== null) {
-            if (video.state.paused) {
-                onPlayRequestedDebounced();
-            } else {
-                onPauseRequestedDebounced();
+    const onVideoClick = React.useCallback((e) => {
+        if (e.type === 'click') {
+            if (video.state.paused !== null) {
+                if (video.state.paused) {
+                    onPlayRequestedDebounced();
+                } else {
+                    onPauseRequestedDebounced();
+                }
             }
+        } else if (e.type === 'contextmenu') {
+            onContextMenu(e);
         }
     }, [video.state.paused]);
 
@@ -232,6 +242,28 @@ const Player = ({ urlParams, queryParams }) => {
         toggleFullscreen();
     }, [toggleFullscreen]);
 
+    const onContextMenu = React.useCallback((e) => {
+        e.preventDefault();
+        let baseFontSize = 14;
+        const { clientX, clientY } = event;
+        const { innerWidth, innerHeight } = window;
+
+        if (innerWidth > 1600) baseFontSize = 15;
+        if (innerWidth > 2200) baseFontSize = 16;
+
+        const menuWidth = 16 * baseFontSize;
+        const minMenuHeight = 9 * baseFontSize;
+
+        const adjustedX = clientX + menuWidth > innerWidth ? clientX - menuWidth : clientX;
+        const adjustedY = clientY + minMenuHeight > innerHeight ? clientY - minMenuHeight : clientY;
+
+        setContextCoords({
+            x: adjustedX,
+            y: adjustedY,
+        });
+        openContextMenu();
+    }, []);
+
     const onContainerMouseDown = React.useCallback((event) => {
         if (!event.nativeEvent.optionsMenuClosePrevented) {
             closeOptionsMenu();
@@ -250,6 +282,7 @@ const Player = ({ urlParams, queryParams }) => {
         }
 
         closeSideDrawer();
+        closeContextMenu();
     }, []);
 
     const onContainerMouseMove = React.useCallback((event) => {
@@ -656,6 +689,24 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
+            {
+                contextMenuOpen ?
+                    <OptionsMenu
+                        style={
+                            {
+                                top: `${contextCoords.y}px`,
+                                left: `${contextCoords.x}px`,
+                                right: 'auto',
+                                bottom: 'auto'
+                            }
+                        }
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                        stream={player.selected.stream}
+                        playbackDevices={streamingServer.playbackDevices !== null && streamingServer.playbackDevices.type === 'Ready' ? streamingServer.playbackDevices.content : []}
+                    />
+                    :
+                    null
+            }
             <HorizontalNavBar
                 className={classnames(styles['layer'], styles['nav-bar-layer'])}
                 title={player.title !== null ? player.title : ''}
diff --git a/src/routes/Player/Video/Video.js b/src/routes/Player/Video/Video.js
index 78cc5c08e..774a845fd 100644
--- a/src/routes/Player/Video/Video.js
+++ b/src/routes/Player/Video/Video.js
@@ -7,7 +7,7 @@ const styles = require('./styles');
 
 const Video = React.forwardRef(({ className, onClick, onDoubleClick }, ref) => {
     return (
-        <div className={classnames(className, styles['video-container'])} onClick={onClick} onDoubleClick={onDoubleClick}>
+        <div className={classnames(className, styles['video-container'])} onClick={onClick} onContextMenu={onClick} onDoubleClick={onDoubleClick}>
             <div ref={ref} className={styles['video']} />
         </div>
     );

From 0eca23873fae36433f967f7fc0b80948884c5071 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Wed, 29 Jan 2025 15:16:39 +0200
Subject: [PATCH 02/19] feat(context menu): enable context menu on right click
 while loading/buffering

---
 src/routes/Player/BufferingLoader/BufferingLoader.js | 7 ++++---
 src/routes/Player/Player.js                          | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/routes/Player/BufferingLoader/BufferingLoader.js b/src/routes/Player/BufferingLoader/BufferingLoader.js
index 2fea2f4a0..042aaea38 100644
--- a/src/routes/Player/BufferingLoader/BufferingLoader.js
+++ b/src/routes/Player/BufferingLoader/BufferingLoader.js
@@ -6,9 +6,9 @@ const classnames = require('classnames');
 const { Image } = require('stremio/components');
 const styles = require('./styles');
 
-const BufferingLoader = ({ className, logo }) => {
+const BufferingLoader = ({ className, logo, onContextMenu }) => {
     return (
-        <div className={classnames(className, styles['buffering-loader-container'])}>
+        <div className={classnames(className, styles['buffering-loader-container'])} onContextMenu={onContextMenu}>
             <Image
                 className={styles['buffering-loader']}
                 src={logo}
@@ -21,7 +21,8 @@ const BufferingLoader = ({ className, logo }) => {
 
 BufferingLoader.propTypes = {
     className: PropTypes.string,
-    logo: PropTypes.string
+    logo: PropTypes.string,
+    onContextMenu: PropTypes.func
 };
 
 module.exports = BufferingLoader;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 6a546364f..9830260c0 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -652,7 +652,7 @@ const Player = ({ urlParams, queryParams }) => {
             />
             {
                 !video.state.loaded ?
-                    <div className={classnames(styles['layer'], styles['background-layer'])}>
+                    <div className={classnames(styles['layer'], styles['background-layer'])} onContextMenu={onContextMenu}>
                         <img className={styles['image']} src={player?.metaItem?.content?.background} />
                     </div>
                     :
@@ -660,7 +660,7 @@ const Player = ({ urlParams, queryParams }) => {
             }
             {
                 (video.state.buffering || !video.state.loaded) && !error ?
-                    <BufferingLoader className={classnames(styles['layer'], styles['buffering-layer'])} logo={player?.metaItem?.content?.logo} />
+                    <BufferingLoader className={classnames(styles['layer'], styles['buffering-layer'])} logo={player?.metaItem?.content?.logo} onContextMenu={onContextMenu} />
                     :
                     null
             }

From dcff82ff45f612d2451b3d42e54dcdad1ac21b16 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Wed, 29 Jan 2025 17:54:20 +0200
Subject: [PATCH 03/19] refactor(useOutsideClick): update event handlers to
 combine with onContextMenu handler

---
 src/common/useOutsideClick.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/common/useOutsideClick.ts b/src/common/useOutsideClick.ts
index 182cf8e37..0bdb48d71 100644
--- a/src/common/useOutsideClick.ts
+++ b/src/common/useOutsideClick.ts
@@ -12,12 +12,12 @@ const useOutsideClick = (callback: () => void) => {
             }
         };
 
-        document.addEventListener('mouseup', handleClickOutside);
-        document.addEventListener('touchend', handleClickOutside);
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('touchstart', handleClickOutside);
 
         return () => {
-            document.removeEventListener('mouseup', handleClickOutside);
-            document.removeEventListener('touchend', handleClickOutside);
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('touchstart', handleClickOutside);
         };
     }, [callback]);
 

From a15ce0ea52b1cc2d8cf204614a2f641733f16cc9 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Wed, 29 Jan 2025 17:55:32 +0200
Subject: [PATCH 04/19] fix(Context Menu): handle click inside and outside
 context menu

---
 src/routes/Player/OptionsMenu/OptionsMenu.js | 9 +++++++--
 src/routes/Player/Player.js                  | 7 ++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/routes/Player/OptionsMenu/OptionsMenu.js b/src/routes/Player/OptionsMenu/OptionsMenu.js
index 89d2d605b..f428ccd04 100644
--- a/src/routes/Player/OptionsMenu/OptionsMenu.js
+++ b/src/routes/Player/OptionsMenu/OptionsMenu.js
@@ -5,11 +5,15 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const { usePlatform, useToast } = require('stremio/common');
+const { default: useOutsideClick } = require('stremio/common/useOutsideClick');
 const { useServices } = require('stremio/services');
 const Option = require('./Option');
 const styles = require('./styles');
 
-const OptionsMenu = ({ className, stream, playbackDevices, style }) => {
+const OptionsMenu = ({ className, stream, playbackDevices, style, onOutsideClick }) => {
+    const ref = useOutsideClick(() => {
+        if (typeof onOutsideClick === 'function') onOutsideClick();
+    });
     const { t } = useTranslation();
     const { core } = useServices();
     const platform = usePlatform();
@@ -70,7 +74,7 @@ const OptionsMenu = ({ className, stream, playbackDevices, style }) => {
         event.nativeEvent.optionsMenuClosePrevented = true;
     }, []);
     return (
-        <div style={style} className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
+        <div ref={ref} style={style} className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
             {
                 streamingUrl || downloadUrl ?
                     <Option
@@ -114,6 +118,7 @@ OptionsMenu.propTypes = {
     stream: PropTypes.object,
     playbackDevices: PropTypes.array,
     style: PropTypes.object,
+    onOutsideClick: PropTypes.func
 };
 
 module.exports = OptionsMenu;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 9830260c0..f81609673 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -49,6 +49,7 @@ const Player = ({ urlParams, queryParams }) => {
     const [casting, setCasting] = React.useState(() => {
         return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED;
     });
+    const playbackDevices = React.useMemo(() => streamingServer.playbackDevices !== null && streamingServer.playbackDevices.type === 'Ready' ? streamingServer.playbackDevices.content : [], [streamingServer]);
 
     const [immersed, setImmersed] = React.useState(true);
     const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
@@ -282,7 +283,6 @@ const Player = ({ urlParams, queryParams }) => {
         }
 
         closeSideDrawer();
-        closeContextMenu();
     }, []);
 
     const onContainerMouseMove = React.useCallback((event) => {
@@ -702,7 +702,8 @@ const Player = ({ urlParams, queryParams }) => {
                         }
                         className={classnames(styles['layer'], styles['menu-layer'])}
                         stream={player.selected.stream}
-                        playbackDevices={streamingServer.playbackDevices !== null && streamingServer.playbackDevices.type === 'Ready' ? streamingServer.playbackDevices.content : []}
+                        playbackDevices={playbackDevices}
+                        onOutsideClick={closeContextMenu}
                     />
                     :
                     null
@@ -834,7 +835,7 @@ const Player = ({ urlParams, queryParams }) => {
                     <OptionsMenu
                         className={classnames(styles['layer'], styles['menu-layer'])}
                         stream={player.selected.stream}
-                        playbackDevices={streamingServer.playbackDevices !== null && streamingServer.playbackDevices.type === 'Ready' ? streamingServer.playbackDevices.content : []}
+                        playbackDevices={playbackDevices}
                     />
                     :
                     null

From e87048799ff82d1470cb20752fa0c48b9a9671f1 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Thu, 30 Jan 2025 13:31:14 +0200
Subject: [PATCH 05/19] refactor(useOutsideClick): pass ref as hook param, use
 ref to calculate context menu offset

---
 src/common/useOutsideClick.ts                 | 12 +++----
 .../MultiselectMenu/MultiselectMenu.tsx       |  6 ++--
 src/routes/Player/OptionsMenu/OptionsMenu.js  | 16 ++++++---
 src/routes/Player/Player.js                   | 35 +++++++++++--------
 4 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/common/useOutsideClick.ts b/src/common/useOutsideClick.ts
index 0bdb48d71..f7445c9fe 100644
--- a/src/common/useOutsideClick.ts
+++ b/src/common/useOutsideClick.ts
@@ -1,11 +1,11 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import { useEffect, useRef } from 'react';
-
-const useOutsideClick = (callback: () => void) => {
-    const ref = useRef<HTMLDivElement>(null);
+import { RefObject, useEffect } from 'react';
 
+const useOutsideClick = (ref: RefObject<HTMLDivElement>, callback: () => void) => {
     useEffect(() => {
+        if (!ref?.current) return;
+
         const handleClickOutside = (event: MouseEvent | TouchEvent) => {
             if (ref.current && !ref.current.contains(event.target as Node)) {
                 callback();
@@ -19,9 +19,7 @@ const useOutsideClick = (callback: () => void) => {
             document.removeEventListener('mousedown', handleClickOutside);
             document.removeEventListener('touchstart', handleClickOutside);
         };
-    }, [callback]);
-
-    return ref;
+    }, [ref, callback]);
 };
 
 export default useOutsideClick;
diff --git a/src/components/MultiselectMenu/MultiselectMenu.tsx b/src/components/MultiselectMenu/MultiselectMenu.tsx
index 35be107c9..e3fbffcf4 100644
--- a/src/components/MultiselectMenu/MultiselectMenu.tsx
+++ b/src/components/MultiselectMenu/MultiselectMenu.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { Button } from 'stremio/components';
 import useBinaryState from 'stremio/common/useBinaryState';
 import Dropdown from './Dropdown';
@@ -19,13 +19,15 @@ type Props = {
 
 const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
-    const multiselectMenuRef = useOutsideClick(() => closeMenu());
+    const multiselectMenuRef = useRef(null);
     const [level, setLevel] = React.useState<number>(0);
 
     const onOptionSelect = (value: number) => {
         level ? setLevel(level + 1) : onSelect(value), closeMenu();
     };
 
+    useOutsideClick(multiselectMenuRef, closeMenu);
+
     return (
         <div className={classNames(styles['multiselect-menu'], className)} ref={multiselectMenuRef}>
             <Button
diff --git a/src/routes/Player/OptionsMenu/OptionsMenu.js b/src/routes/Player/OptionsMenu/OptionsMenu.js
index f428ccd04..a279a711a 100644
--- a/src/routes/Player/OptionsMenu/OptionsMenu.js
+++ b/src/routes/Player/OptionsMenu/OptionsMenu.js
@@ -10,10 +10,7 @@ const { useServices } = require('stremio/services');
 const Option = require('./Option');
 const styles = require('./styles');
 
-const OptionsMenu = ({ className, stream, playbackDevices, style, onOutsideClick }) => {
-    const ref = useOutsideClick(() => {
-        if (typeof onOutsideClick === 'function') onOutsideClick();
-    });
+const OptionsMenu = ({ menuRef, className, stream, playbackDevices, style, onOutsideClick }) => {
     const { t } = useTranslation();
     const { core } = useServices();
     const platform = usePlatform();
@@ -73,8 +70,13 @@ const OptionsMenu = ({ className, stream, playbackDevices, style, onOutsideClick
     const onMouseDown = React.useCallback((event) => {
         event.nativeEvent.optionsMenuClosePrevented = true;
     }, []);
+
+    useOutsideClick(menuRef, () => {
+        if (typeof onOutsideClick === 'function') onOutsideClick();
+    });
+
     return (
-        <div ref={ref} style={style} className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
+        <div ref={menuRef} style={style} className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
             {
                 streamingUrl || downloadUrl ?
                     <Option
@@ -114,6 +116,10 @@ const OptionsMenu = ({ className, stream, playbackDevices, style, onOutsideClick
 };
 
 OptionsMenu.propTypes = {
+    menuRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({ current: PropTypes.any })
+    ]),
     className: PropTypes.string,
     stream: PropTypes.object,
     playbackDevices: PropTypes.array,
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index f81609673..b0f715b6c 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -54,6 +54,7 @@ const Player = ({ urlParams, queryParams }) => {
     const [immersed, setImmersed] = React.useState(true);
     const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
     const [, , , toggleFullscreen] = useFullscreen();
+    const [screenWidth, screenHeight] = React.useMemo(() => [window.innerWidth, window.innerHeight], [window]);
 
     const [optionsMenuOpen, , closeOptionsMenu, toggleOptionsMenu] = useBinaryState(false);
     const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
@@ -64,9 +65,10 @@ const Player = ({ urlParams, queryParams }) => {
     const [sideDrawerOpen, , closeSideDrawer, toggleSideDrawer] = useBinaryState(false);
     const [contextMenuOpen, openContextMenu, closeContextMenu] = useBinaryState(false);
     const [contextCoords, setContextCoords] = React.useState({
-        x: 0,
-        y: 0,
+        x: screenWidth,
+        y: screenHeight,
     });
+    const contextMenuRef = React.useRef(null);
 
     const menusOpen = React.useMemo(() => {
         return optionsMenuOpen || subtitlesMenuOpen || audioMenuOpen || speedMenuOpen || statisticsMenuOpen || sideDrawerOpen || contextMenuOpen;
@@ -245,25 +247,27 @@ const Player = ({ urlParams, queryParams }) => {
 
     const onContextMenu = React.useCallback((e) => {
         e.preventDefault();
-        let baseFontSize = 14;
-        const { clientX, clientY } = event;
-        const { innerWidth, innerHeight } = window;
+        const { clientX, clientY } = e;
 
-        if (innerWidth > 1600) baseFontSize = 15;
-        if (innerWidth > 2200) baseFontSize = 16;
-
-        const menuWidth = 16 * baseFontSize;
-        const minMenuHeight = 9 * baseFontSize;
-
-        const adjustedX = clientX + menuWidth > innerWidth ? clientX - menuWidth : clientX;
-        const adjustedY = clientY + minMenuHeight > innerHeight ? clientY - minMenuHeight : clientY;
+        const menuSize = contextMenuRef?.current?.getBoundingClientRect();
+        const adjustedX = clientX + menuSize.width > screenWidth ? clientX - menuSize.width : clientX;
+        const adjustedY = clientY + menuSize.height > screenHeight ? clientY - menuSize.height : clientY;
 
         setContextCoords({
             x: adjustedX,
             y: adjustedY,
         });
         openContextMenu();
-    }, []);
+    }, [window, contextMenuRef]);
+
+    React.useEffect(() => {
+        if (!contextMenuOpen) {
+            setContextCoords({
+                x: screenWidth,
+                y: screenHeight
+            });
+        }
+    }, [contextMenuOpen]);
 
     const onContainerMouseDown = React.useCallback((event) => {
         if (!event.nativeEvent.optionsMenuClosePrevented) {
@@ -690,8 +694,9 @@ const Player = ({ urlParams, queryParams }) => {
                     null
             }
             {
-                contextMenuOpen ?
+                player.selected?.stream ?
                     <OptionsMenu
+                        menuRef={contextMenuRef}
                         style={
                             {
                                 top: `${contextCoords.y}px`,

From 56d750c9609aee7e260fabe6c8c09de9fad20563 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Thu, 30 Jan 2025 13:53:01 +0200
Subject: [PATCH 06/19] feat(Context menu): Add context menu over nav, control
 bar and side drawer button

---
 src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js | 7 ++++---
 src/routes/Player/ControlBar/ControlBar.js                 | 4 +++-
 src/routes/Player/Player.js                                | 4 ++++
 src/routes/Player/SideDrawerButton/SideDrawerButton.tsx    | 5 +++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
index 0cedd8638..9f741c603 100644
--- a/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -12,7 +12,7 @@ const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 const { t } = require('i18next');
 
-const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, onContextMenu, ...props }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -25,7 +25,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
         </Button>
     ), []);
     return (
-        <nav {...props} className={classnames(className, styles['horizontal-nav-bar-container'])}>
+        <nav {...props} className={classnames(className, styles['horizontal-nav-bar-container'])} onContextMenu={onContextMenu}>
             {
                 backButton ?
                     <Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
@@ -82,7 +82,8 @@ HorizontalNavBar.propTypes = {
     backButton: PropTypes.bool,
     searchBar: PropTypes.bool,
     fullscreenButton: PropTypes.bool,
-    navMenu: PropTypes.bool
+    navMenu: PropTypes.bool,
+    onContextMenu: PropTypes.func,
 };
 
 module.exports = HorizontalNavBar;
diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 0fa6de1a4..13886b9f8 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -40,6 +40,7 @@ const ControlBar = ({
     onToggleSideDrawer,
     onToggleOptionsMenu,
     onToggleStatisticsMenu,
+    onContextMenu,
     ...props
 }) => {
     const { chromecast } = useServices();
@@ -103,7 +104,7 @@ const ControlBar = ({
         };
     }, []);
     return (
-        <div {...props} className={classnames(className, styles['control-bar-container'])}>
+        <div {...props} className={classnames(className, styles['control-bar-container'])} onContextMenu={onContextMenu}>
             <SeekBar
                 className={styles['seek-bar']}
                 time={time}
@@ -205,6 +206,7 @@ ControlBar.propTypes = {
     onToggleSideDrawer: PropTypes.func,
     onToggleOptionsMenu: PropTypes.func,
     onToggleStatisticsMenu: PropTypes.func,
+    onContextMenu: PropTypes.func,
 };
 
 module.exports = ControlBar;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index b0f715b6c..1c4029aa0 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -699,6 +699,7 @@ const Player = ({ urlParams, queryParams }) => {
                         menuRef={contextMenuRef}
                         style={
                             {
+                                zIndex: 1,
                                 top: `${contextCoords.y}px`,
                                 left: `${contextCoords.x}px`,
                                 right: 'auto',
@@ -720,12 +721,14 @@ const Player = ({ urlParams, queryParams }) => {
                 fullscreenButton={true}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
+                onContextMenu={onContextMenu}
             />
             {
                 player.metaItem?.type === 'Ready' ?
                     <SideDrawerButton
                         className={classnames(styles['layer'], styles['side-drawer-button-layer'])}
                         onClick={toggleSideDrawer}
+                        onContextMenu={onContextMenu}
                     />
                     :
                     null
@@ -760,6 +763,7 @@ const Player = ({ urlParams, queryParams }) => {
                 onToggleSideDrawer={toggleSideDrawer}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
+                onContextMenu={onContextMenu}
             />
             {
                 nextVideoPopupOpen ?
diff --git a/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
index 81409f434..5f5590476 100644
--- a/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
+++ b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
@@ -8,11 +8,12 @@ import styles from './SideDrawerButton.less';
 type Props = {
     className: string,
     onClick: () => void,
+    onContextMenu: () => void,
 };
 
-const SideDrawerButton = ({ className, onClick }: Props) => {
+const SideDrawerButton = ({ className, onClick, onContextMenu }: Props) => {
     return (
-        <div className={classNames(className, styles['side-drawer-button'])} onClick={onClick}>
+        <div className={classNames(className, styles['side-drawer-button'])} onClick={onClick} onContextMenu={onContextMenu}>
             <Icon name={'chevron-back'} className={styles['icon']} />
         </div>
     );

From ce8ce7404cbc6c09bb693733af466c3670cf0c54 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Thu, 30 Jan 2025 14:44:14 +0200
Subject: [PATCH 07/19] fix(season select): propagate the event on mousedown to
 close the multiselect

---
 src/common/useOutsideClick.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/useOutsideClick.ts b/src/common/useOutsideClick.ts
index f7445c9fe..618803e3e 100644
--- a/src/common/useOutsideClick.ts
+++ b/src/common/useOutsideClick.ts
@@ -12,8 +12,8 @@ const useOutsideClick = (ref: RefObject<HTMLDivElement>, callback: () => void) =
             }
         };
 
-        document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('touchstart', handleClickOutside);
+        document.addEventListener('mousedown', handleClickOutside, true);
+        document.addEventListener('touchstart', handleClickOutside, true);
 
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);

From 62b8a6a5ccafcfb63ec6282e6108d02c805cb159 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Thu, 30 Jan 2025 14:46:18 +0200
Subject: [PATCH 08/19] fix(season select): key for dropdown options ID is
 undefined, use value

---
 src/components/MultiselectMenu/Dropdown/Dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index 3da75619b..438ced13c 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -63,7 +63,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
                 .filter((option: MultiselectMenuOption) => !option.hidden)
                 .map((option: MultiselectMenuOption) => (
                     <Option
-                        key={option.id}
+                        key={option.value}
                         ref={handleSetOptionRef(option.value)}
                         option={option}
                         onSelect={onSelect}

From 4648aef21b488b5aecc8900be247d6339c83b7c9 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Fri, 31 Jan 2025 14:04:36 +0200
Subject: [PATCH 09/19] fix(context menu): calculate menu position inside safe
 area

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

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 1c4029aa0..43ec5e094 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -248,10 +248,27 @@ const Player = ({ urlParams, queryParams }) => {
     const onContextMenu = React.useCallback((e) => {
         e.preventDefault();
         const { clientX, clientY } = e;
+        const safeAreaTop = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')) || 0;
+        const safeAreaRight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-right)')) || 0;
+        const safeAreaBottom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')) || 0;
+        const safeAreaLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-left)')) || 0;
+
+        const maxX = screenWidth - safeAreaRight;
+        const maxY = screenHeight - safeAreaBottom;
+        const menuX = clientX < safeAreaLeft
+            ? safeAreaLeft
+            : clientX > maxX
+                ? maxX
+                : clientX;
+        const menuY = clientY < safeAreaTop
+            ? safeAreaTop
+            : clientY > maxY
+                ? maxY
+                : clientY;
 
         const menuSize = contextMenuRef?.current?.getBoundingClientRect();
-        const adjustedX = clientX + menuSize.width > screenWidth ? clientX - menuSize.width : clientX;
-        const adjustedY = clientY + menuSize.height > screenHeight ? clientY - menuSize.height : clientY;
+        const adjustedX = menuX + menuSize.width > maxX ? menuX - menuSize.width : menuX;
+        const adjustedY = menuY + menuSize.height > maxY ? menuY - menuSize.height : menuY;
 
         setContextCoords({
             x: adjustedX,
@@ -699,7 +716,7 @@ const Player = ({ urlParams, queryParams }) => {
                         menuRef={contextMenuRef}
                         style={
                             {
-                                zIndex: 1,
+                                zIndex: contextMenuOpen ? 1 : -1,
                                 top: `${contextCoords.y}px`,
                                 left: `${contextCoords.x}px`,
                                 right: 'auto',

From a4054c80b8c2a8afd3bda4c3f82478fc35b82e10 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Mon, 3 Feb 2025 17:28:52 +0200
Subject: [PATCH 10/19] fix(context menu): positioning when resizing/entering
 fullscreen

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

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 43ec5e094..8b000fa04 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -54,7 +54,6 @@ const Player = ({ urlParams, queryParams }) => {
     const [immersed, setImmersed] = React.useState(true);
     const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
     const [, , , toggleFullscreen] = useFullscreen();
-    const [screenWidth, screenHeight] = React.useMemo(() => [window.innerWidth, window.innerHeight], [window]);
 
     const [optionsMenuOpen, , closeOptionsMenu, toggleOptionsMenu] = useBinaryState(false);
     const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
@@ -65,8 +64,8 @@ const Player = ({ urlParams, queryParams }) => {
     const [sideDrawerOpen, , closeSideDrawer, toggleSideDrawer] = useBinaryState(false);
     const [contextMenuOpen, openContextMenu, closeContextMenu] = useBinaryState(false);
     const [contextCoords, setContextCoords] = React.useState({
-        x: screenWidth,
-        y: screenHeight,
+        x: -document.documentElement.clientWidth,
+        y: -document.documentElement.clientHeight,
     });
     const contextMenuRef = React.useRef(null);
 
@@ -253,8 +252,8 @@ const Player = ({ urlParams, queryParams }) => {
         const safeAreaBottom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')) || 0;
         const safeAreaLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-left)')) || 0;
 
-        const maxX = screenWidth - safeAreaRight;
-        const maxY = screenHeight - safeAreaBottom;
+        const maxX = document.documentElement.clientWidth - safeAreaRight;
+        const maxY = document.documentElement.clientHeight - safeAreaBottom;
         const menuX = clientX < safeAreaLeft
             ? safeAreaLeft
             : clientX > maxX
@@ -275,14 +274,17 @@ const Player = ({ urlParams, queryParams }) => {
             y: adjustedY,
         });
         openContextMenu();
-    }, [window, contextMenuRef]);
+    }, [contextMenuRef]);
 
     React.useEffect(() => {
         if (!contextMenuOpen) {
-            setContextCoords({
-                x: screenWidth,
-                y: screenHeight
-            });
+            const menuSize = contextMenuRef?.current?.getBoundingClientRect();
+            if (menuSize?.width && menuSize?.height) {
+                setContextCoords({
+                    x: -menuSize.width,
+                    y: -menuSize.height,
+                });
+            }
         }
     }, [contextMenuOpen]);
 

From 1b70268b40772dac08172830cd7accaaa506b190 Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Mon, 10 Mar 2025 17:52:02 +0200
Subject: [PATCH 11/19] fix(Player): handle touch events for context menu

---
 src/routes/Player/ControlBar/ControlBar.js    |  6 +++-
 src/routes/Player/Player.js                   | 29 +++++++++++++++----
 .../SideDrawerButton/SideDrawerButton.tsx     |  8 +++--
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 60e3157a0..c81d0e38e 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -41,6 +41,8 @@ const ControlBar = ({
     onToggleOptionsMenu,
     onToggleStatisticsMenu,
     onContextMenu,
+    onTouchStart,
+    onTouchEnd,
     ...props
 }) => {
     const { chromecast } = useServices();
@@ -104,7 +106,7 @@ const ControlBar = ({
         };
     }, []);
     return (
-        <div {...props} className={classnames(className, styles['control-bar-container'])} onContextMenu={onContextMenu}>
+        <div {...props} className={classnames(className, styles['control-bar-container'])} onContextMenu={onContextMenu} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
             <SeekBar
                 className={styles['seek-bar']}
                 time={time}
@@ -208,6 +210,8 @@ ControlBar.propTypes = {
     onToggleOptionsMenu: PropTypes.func,
     onToggleStatisticsMenu: PropTypes.func,
     onContextMenu: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    onTouchEnd: PropTypes.func,
 };
 
 module.exports = ControlBar;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 84de59bf5..dfb2a78b7 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -251,9 +251,7 @@ const Player = ({ urlParams, queryParams }) => {
         toggleFullscreen();
     }, [toggleFullscreen]);
 
-    const onContextMenu = React.useCallback((e) => {
-        e.preventDefault();
-        const { clientX, clientY } = e;
+    const handleContextMenuPosition = (clientX, clientY) => {
         const safeAreaTop = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')) || 0;
         const safeAreaRight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-right)')) || 0;
         const safeAreaBottom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')) || 0;
@@ -280,9 +278,24 @@ const Player = ({ urlParams, queryParams }) => {
             x: adjustedX,
             y: adjustedY,
         });
+    };
+
+    const onContextMenu = React.useCallback((e) => {
+        e.preventDefault();
+        const { clientX, clientY } = e;
+        handleContextMenuPosition(clientX, clientY);
         openContextMenu();
     }, [contextMenuRef]);
 
+    const onTouchStart = (event) => {
+        const touch = event.touches[0];
+        handleContextMenuPosition(touch.clientX, touch.clientY);
+    };
+
+    const onTouchEnd = () => {
+        openContextMenu();
+    };
+
     React.useEffect(() => {
         if (!contextMenuOpen) {
             const menuSize = contextMenuRef?.current?.getBoundingClientRect();
@@ -689,7 +702,7 @@ const Player = ({ urlParams, queryParams }) => {
             />
             {
                 !video.state.loaded ?
-                    <div className={classnames(styles['layer'], styles['background-layer'])} onContextMenu={onContextMenu}>
+                    <div className={classnames(styles['layer'], styles['background-layer'])} onContextMenu={onContextMenu} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
                         <img className={styles['image']} src={player?.metaItem?.content?.background} />
                     </div>
                     :
@@ -697,7 +710,7 @@ const Player = ({ urlParams, queryParams }) => {
             }
             {
                 (video.state.buffering || !video.state.loaded) && !error ?
-                    <BufferingLoader className={classnames(styles['layer'], styles['buffering-layer'])} logo={player?.metaItem?.content?.logo} onContextMenu={onContextMenu} />
+                    <BufferingLoader className={classnames(styles['layer'], styles['buffering-layer'])} logo={player?.metaItem?.content?.logo} onContextMenu={onContextMenu} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} />
                     :
                     null
             }
@@ -755,6 +768,8 @@ const Player = ({ urlParams, queryParams }) => {
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
                 onContextMenu={onContextMenu}
+                onTouchStart={onTouchStart}
+                onTouchEnd={onTouchEnd}
             />
             {
                 player.metaItem?.type === 'Ready' ?
@@ -762,6 +777,8 @@ const Player = ({ urlParams, queryParams }) => {
                         className={classnames(styles['layer'], styles['side-drawer-button-layer'])}
                         onClick={toggleSideDrawer}
                         onContextMenu={onContextMenu}
+                        onTouchStart={onTouchStart}
+                        onTouchEnd={onTouchEnd}
                     />
                     :
                     null
@@ -797,6 +814,8 @@ const Player = ({ urlParams, queryParams }) => {
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
                 onContextMenu={onContextMenu}
+                onTouchStart={onTouchStart}
+                onTouchEnd={onTouchEnd}
             />
             {
                 nextVideoPopupOpen ?
diff --git a/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
index 5f5590476..9d5897548 100644
--- a/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
+++ b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React from 'react';
+import React, { BaseSyntheticEvent } from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import styles from './SideDrawerButton.less';
@@ -9,11 +9,13 @@ type Props = {
     className: string,
     onClick: () => void,
     onContextMenu: () => void,
+    onTouchStart: (event: BaseSyntheticEvent) => void,
+    onTouchEnd: () => void,
 };
 
-const SideDrawerButton = ({ className, onClick, onContextMenu }: Props) => {
+const SideDrawerButton = ({ className, onClick, onContextMenu, onTouchStart, onTouchEnd }: Props) => {
     return (
-        <div className={classNames(className, styles['side-drawer-button'])} onClick={onClick} onContextMenu={onContextMenu}>
+        <div className={classNames(className, styles['side-drawer-button'])} onClick={onClick} onContextMenu={onContextMenu} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
             <Icon name={'chevron-back'} className={styles['icon']} />
         </div>
     );

From ef730ae61a87c83132d392ab8998e42dc9a52a73 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 19 Mar 2025 18:30:08 +0100
Subject: [PATCH 12/19] refactor: use dedicated component for context menu

---
 src/components/ContextMenu/ContextMenu.less   |  17 +++
 src/components/ContextMenu/ContextMenu.tsx    |  89 ++++++++++++++
 src/components/ContextMenu/index.ts           |   2 +
 src/components/index.ts                       |   2 +
 .../Player/BufferingLoader/BufferingLoader.js |   7 +-
 src/routes/Player/Error/Error.js              |   6 +-
 src/routes/Player/OptionsMenu/OptionsMenu.js  |  10 +-
 src/routes/Player/Player.js                   | 116 ++++--------------
 src/routes/Player/Video/Video.js              |   2 +-
 src/routes/Player/useVideo.js                 |   8 +-
 10 files changed, 149 insertions(+), 110 deletions(-)
 create mode 100644 src/components/ContextMenu/ContextMenu.less
 create mode 100644 src/components/ContextMenu/ContextMenu.tsx
 create mode 100644 src/components/ContextMenu/index.ts

diff --git a/src/components/ContextMenu/ContextMenu.less b/src/components/ContextMenu/ContextMenu.less
new file mode 100644
index 000000000..e38b7bad2
--- /dev/null
+++ b/src/components/ContextMenu/ContextMenu.less
@@ -0,0 +1,17 @@
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+
+.context-menu-container {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    .context-menu {
+        position: fixed;
+        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;
+    }
+}
\ No newline at end of file
diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
new file mode 100644
index 000000000..28b1a94fc
--- /dev/null
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -0,0 +1,89 @@
+import React, { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styles from './ContextMenu.less';
+
+type Props = {
+    children: React.ReactNode,
+    on: RefObject<HTMLElement>[],
+    autoClose: boolean,
+};
+
+const ContextMenu = ({ children, on, autoClose }: Props) => {
+    const [active, setActive] = useState(false);
+    const [position, setPosition] = useState([0, 0]);
+    const [containerSize, setContainerSize] = useState([0, 0]);
+
+    const ref = useCallback((element: HTMLDivElement) => {
+        element && setContainerSize([element.offsetWidth, element.offsetHeight]);
+    }, []);
+
+    const style = useMemo(() => {
+        const [viewportWidth, viewportHeight] = [window.innerWidth, window.innerHeight];
+        const [containerWidth, containerHeight] = containerSize;
+        const [x, y] = position;
+
+        const left = (x + containerWidth) > viewportWidth ? x - containerWidth : x;
+        const top = (y + containerHeight) > viewportHeight ? y - containerHeight : y;
+
+        return { top, left };
+    }, [position, containerSize]);
+
+    const close = () => {
+        setPosition([0, 0]);
+        setActive(false);
+    };
+
+    const onContextMenu = (event: MouseEvent) => {
+        event.preventDefault();
+        const { clientX, clientY } = event;
+
+        setPosition([clientX, clientY]);
+        setActive(true);
+    };
+
+    const onClickOutside = () => {
+        close();
+    };
+
+    const onClick = useCallback(() => {
+        autoClose && close();
+    }, [autoClose]);
+
+    const onMouseDown = (event: React.MouseEvent) => {
+        event.stopPropagation();
+    };
+
+    const onTouchStart = (event: React.TouchEvent) => {
+        event.stopPropagation();
+    };
+
+    useEffect(() => {
+        const containers = on.map((ref) => ref.current).filter((element) => !!element);
+        containers.forEach((container) => container.addEventListener('contextmenu', onContextMenu));
+
+        return () => {
+            containers.forEach((container) => container.removeEventListener('contextmenu', onContextMenu));
+        };
+    }, [on]);
+
+    return active && createPortal((
+        <div
+            className={styles['context-menu-container']}
+            onMouseDown={onClickOutside}
+            onTouchStart={onClickOutside}
+        >
+            <div
+                ref={ref}
+                className={styles['context-menu']}
+                style={style}
+                onMouseDown={onMouseDown}
+                onTouchStart={onTouchStart}
+                onClick={onClick}
+            >
+                {children}
+            </div>
+        </div>
+    ), document.body);
+};
+
+export default ContextMenu;
diff --git a/src/components/ContextMenu/index.ts b/src/components/ContextMenu/index.ts
new file mode 100644
index 000000000..10ae5e5d7
--- /dev/null
+++ b/src/components/ContextMenu/index.ts
@@ -0,0 +1,2 @@
+import ContextMenu from './ContextMenu';
+export default ContextMenu;
diff --git a/src/components/index.ts b/src/components/index.ts
index f65d66f81..db5210685 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,7 @@ import BottomSheet from './BottomSheet';
 import Button from './Button';
 import Chips from './Chips';
 import ColorInput from './ColorInput';
+import ContextMenu from './ContextMenu';
 import ContinueWatchingItem from './ContinueWatchingItem';
 import DelayedRenderer from './DelayedRenderer';
 import EventModal from './EventModal';
@@ -33,6 +34,7 @@ export {
     Button,
     Chips,
     ColorInput,
+    ContextMenu,
     ContinueWatchingItem,
     DelayedRenderer,
     EventModal,
diff --git a/src/routes/Player/BufferingLoader/BufferingLoader.js b/src/routes/Player/BufferingLoader/BufferingLoader.js
index 042aaea38..3d5664ae4 100644
--- a/src/routes/Player/BufferingLoader/BufferingLoader.js
+++ b/src/routes/Player/BufferingLoader/BufferingLoader.js
@@ -6,9 +6,9 @@ const classnames = require('classnames');
 const { Image } = require('stremio/components');
 const styles = require('./styles');
 
-const BufferingLoader = ({ className, logo, onContextMenu }) => {
+const BufferingLoader = React.forwardRef(({ className, logo }, ref) => {
     return (
-        <div className={classnames(className, styles['buffering-loader-container'])} onContextMenu={onContextMenu}>
+        <div ref={ref} className={classnames(className, styles['buffering-loader-container'])}>
             <Image
                 className={styles['buffering-loader']}
                 src={logo}
@@ -17,12 +17,11 @@ const BufferingLoader = ({ className, logo, onContextMenu }) => {
             />
         </div>
     );
-};
+});
 
 BufferingLoader.propTypes = {
     className: PropTypes.string,
     logo: PropTypes.string,
-    onContextMenu: PropTypes.func
 };
 
 module.exports = BufferingLoader;
diff --git a/src/routes/Player/Error/Error.js b/src/routes/Player/Error/Error.js
index c9a7c3bef..61db0e45f 100644
--- a/src/routes/Player/Error/Error.js
+++ b/src/routes/Player/Error/Error.js
@@ -8,7 +8,7 @@ const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Button } = require('stremio/components');
 const styles = require('./styles');
 
-const Error = ({ className, code, message, stream }) => {
+const Error = React.forwardRef(({ className, code, message, stream }, ref) => {
     const { t } = useTranslation();
 
     const [playlist, fileName] = React.useMemo(() => {
@@ -19,7 +19,7 @@ const Error = ({ className, code, message, stream }) => {
     }, [stream]);
 
     return (
-        <div className={classNames(className, styles['error'])}>
+        <div ref={ref} className={classNames(className, styles['error'])}>
             <div className={styles['error-label']} title={message}>{message}</div>
             {
                 code === 2 ?
@@ -44,7 +44,7 @@ const Error = ({ className, code, message, stream }) => {
             }
         </div>
     );
-};
+});
 
 Error.propTypes = {
     className: PropTypes.string,
diff --git a/src/routes/Player/OptionsMenu/OptionsMenu.js b/src/routes/Player/OptionsMenu/OptionsMenu.js
index a279a711a..0065d9b55 100644
--- a/src/routes/Player/OptionsMenu/OptionsMenu.js
+++ b/src/routes/Player/OptionsMenu/OptionsMenu.js
@@ -5,12 +5,11 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const { usePlatform, useToast } = require('stremio/common');
-const { default: useOutsideClick } = require('stremio/common/useOutsideClick');
 const { useServices } = require('stremio/services');
 const Option = require('./Option');
 const styles = require('./styles');
 
-const OptionsMenu = ({ menuRef, className, stream, playbackDevices, style, onOutsideClick }) => {
+const OptionsMenu = ({ className, stream, playbackDevices, style }) => {
     const { t } = useTranslation();
     const { core } = useServices();
     const platform = usePlatform();
@@ -71,12 +70,8 @@ const OptionsMenu = ({ menuRef, className, stream, playbackDevices, style, onOut
         event.nativeEvent.optionsMenuClosePrevented = true;
     }, []);
 
-    useOutsideClick(menuRef, () => {
-        if (typeof onOutsideClick === 'function') onOutsideClick();
-    });
-
     return (
-        <div ref={menuRef} style={style} className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
+        <div style={style} className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
             {
                 streamingUrl || downloadUrl ?
                     <Option
@@ -124,7 +119,6 @@ OptionsMenu.propTypes = {
     stream: PropTypes.object,
     playbackDevices: PropTypes.array,
     style: PropTypes.object,
-    onOutsideClick: PropTypes.func
 };
 
 module.exports = OptionsMenu;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 8b000fa04..d41e1687f 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -9,7 +9,7 @@ const { useTranslation } = require('react-i18next');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
 const { useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
-const { HorizontalNavBar, Transition } = require('stremio/components');
+const { HorizontalNavBar, Transition, ContextMenu } = require('stremio/components');
 const BufferingLoader = require('./BufferingLoader');
 const VolumeChangeIndicator = require('./VolumeChangeIndicator');
 const Error = require('./Error');
@@ -51,6 +51,9 @@ const Player = ({ urlParams, queryParams }) => {
     });
     const playbackDevices = React.useMemo(() => streamingServer.playbackDevices !== null && streamingServer.playbackDevices.type === 'Ready' ? streamingServer.playbackDevices.content : [], [streamingServer]);
 
+    const bufferingRef = React.useRef();
+    const errorRef = React.useRef();
+
     const [immersed, setImmersed] = React.useState(true);
     const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
     const [, , , toggleFullscreen] = useFullscreen();
@@ -62,15 +65,9 @@ const Player = ({ urlParams, queryParams }) => {
     const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
     const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
     const [sideDrawerOpen, , closeSideDrawer, toggleSideDrawer] = useBinaryState(false);
-    const [contextMenuOpen, openContextMenu, closeContextMenu] = useBinaryState(false);
-    const [contextCoords, setContextCoords] = React.useState({
-        x: -document.documentElement.clientWidth,
-        y: -document.documentElement.clientHeight,
-    });
-    const contextMenuRef = React.useRef(null);
 
     const menusOpen = React.useMemo(() => {
-        return optionsMenuOpen || subtitlesMenuOpen || audioMenuOpen || speedMenuOpen || statisticsMenuOpen || sideDrawerOpen || contextMenuOpen;
+        return optionsMenuOpen || subtitlesMenuOpen || audioMenuOpen || speedMenuOpen || statisticsMenuOpen || sideDrawerOpen;
     }, [optionsMenuOpen, subtitlesMenuOpen, audioMenuOpen, speedMenuOpen, statisticsMenuOpen, sideDrawerOpen]);
 
     const closeMenus = React.useCallback(() => {
@@ -80,7 +77,6 @@ const Player = ({ urlParams, queryParams }) => {
         closeSpeedMenu();
         closeStatisticsMenu();
         closeSideDrawer();
-        closeContextMenu();
     }, []);
 
     const overlayHidden = React.useMemo(() => {
@@ -224,17 +220,13 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [player.nextVideo]);
 
-    const onVideoClick = React.useCallback((e) => {
-        if (e.type === 'click') {
-            if (video.state.paused !== null) {
-                if (video.state.paused) {
-                    onPlayRequestedDebounced();
-                } else {
-                    onPauseRequestedDebounced();
-                }
+    const onVideoClick = React.useCallback(() => {
+        if (video.state.paused !== null) {
+            if (video.state.paused) {
+                onPlayRequestedDebounced();
+            } else {
+                onPauseRequestedDebounced();
             }
-        } else if (e.type === 'contextmenu') {
-            onContextMenu(e);
         }
     }, [video.state.paused]);
 
@@ -244,50 +236,6 @@ const Player = ({ urlParams, queryParams }) => {
         toggleFullscreen();
     }, [toggleFullscreen]);
 
-    const onContextMenu = React.useCallback((e) => {
-        e.preventDefault();
-        const { clientX, clientY } = e;
-        const safeAreaTop = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')) || 0;
-        const safeAreaRight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-right)')) || 0;
-        const safeAreaBottom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')) || 0;
-        const safeAreaLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-left)')) || 0;
-
-        const maxX = document.documentElement.clientWidth - safeAreaRight;
-        const maxY = document.documentElement.clientHeight - safeAreaBottom;
-        const menuX = clientX < safeAreaLeft
-            ? safeAreaLeft
-            : clientX > maxX
-                ? maxX
-                : clientX;
-        const menuY = clientY < safeAreaTop
-            ? safeAreaTop
-            : clientY > maxY
-                ? maxY
-                : clientY;
-
-        const menuSize = contextMenuRef?.current?.getBoundingClientRect();
-        const adjustedX = menuX + menuSize.width > maxX ? menuX - menuSize.width : menuX;
-        const adjustedY = menuY + menuSize.height > maxY ? menuY - menuSize.height : menuY;
-
-        setContextCoords({
-            x: adjustedX,
-            y: adjustedY,
-        });
-        openContextMenu();
-    }, [contextMenuRef]);
-
-    React.useEffect(() => {
-        if (!contextMenuOpen) {
-            const menuSize = contextMenuRef?.current?.getBoundingClientRect();
-            if (menuSize?.width && menuSize?.height) {
-                setContextCoords({
-                    x: -menuSize.width,
-                    y: -menuSize.height,
-                });
-            }
-        }
-    }, [contextMenuOpen]);
-
     const onContainerMouseDown = React.useCallback((event) => {
         if (!event.nativeEvent.optionsMenuClosePrevented) {
             closeOptionsMenu();
@@ -668,14 +616,14 @@ const Player = ({ urlParams, queryParams }) => {
             onMouseOver={onContainerMouseMove}
             onMouseLeave={onContainerMouseLeave}>
             <Video
-                ref={video.containerElement}
+                ref={video.containerRef}
                 className={styles['layer']}
                 onClick={onVideoClick}
                 onDoubleClick={onVideoDoubleClick}
             />
             {
                 !video.state.loaded ?
-                    <div className={classnames(styles['layer'], styles['background-layer'])} onContextMenu={onContextMenu}>
+                    <div className={classnames(styles['layer'], styles['background-layer'])}>
                         <img className={styles['image']} src={player?.metaItem?.content?.background} />
                     </div>
                     :
@@ -683,13 +631,18 @@ const Player = ({ urlParams, queryParams }) => {
             }
             {
                 (video.state.buffering || !video.state.loaded) && !error ?
-                    <BufferingLoader className={classnames(styles['layer'], styles['buffering-layer'])} logo={player?.metaItem?.content?.logo} onContextMenu={onContextMenu} />
+                    <BufferingLoader
+                        ref={bufferingRef}
+                        className={classnames(styles['layer'], styles['buffering-layer'])}
+                        logo={player?.metaItem?.content?.logo}
+                    />
                     :
                     null
             }
             {
                 error !== null ?
                     <Error
+                        ref={errorRef}
                         className={classnames(styles['layer'], styles['error-layer'])}
                         stream={video.state.stream}
                         {...error}
@@ -712,27 +665,13 @@ const Player = ({ urlParams, queryParams }) => {
                     :
                     null
             }
-            {
-                player.selected?.stream ?
-                    <OptionsMenu
-                        menuRef={contextMenuRef}
-                        style={
-                            {
-                                zIndex: contextMenuOpen ? 1 : -1,
-                                top: `${contextCoords.y}px`,
-                                left: `${contextCoords.x}px`,
-                                right: 'auto',
-                                bottom: 'auto'
-                            }
-                        }
-                        className={classnames(styles['layer'], styles['menu-layer'])}
-                        stream={player.selected.stream}
-                        playbackDevices={playbackDevices}
-                        onOutsideClick={closeContextMenu}
-                    />
-                    :
-                    null
-            }
+            <ContextMenu on={[video.containerRef, bufferingRef, errorRef]} autoClose>
+                <OptionsMenu
+                    className={classnames(styles['layer'], styles['menu-layer'])}
+                    stream={player?.selected?.stream}
+                    playbackDevices={playbackDevices}
+                />
+            </ContextMenu>
             <HorizontalNavBar
                 className={classnames(styles['layer'], styles['nav-bar-layer'])}
                 title={player.title !== null ? player.title : ''}
@@ -740,14 +679,12 @@ const Player = ({ urlParams, queryParams }) => {
                 fullscreenButton={true}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
-                onContextMenu={onContextMenu}
             />
             {
                 player.metaItem?.type === 'Ready' ?
                     <SideDrawerButton
                         className={classnames(styles['layer'], styles['side-drawer-button-layer'])}
                         onClick={toggleSideDrawer}
-                        onContextMenu={onContextMenu}
                     />
                     :
                     null
@@ -782,7 +719,6 @@ const Player = ({ urlParams, queryParams }) => {
                 onToggleSideDrawer={toggleSideDrawer}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
-                onContextMenu={onContextMenu}
             />
             {
                 nextVideoPopupOpen ?
diff --git a/src/routes/Player/Video/Video.js b/src/routes/Player/Video/Video.js
index 774a845fd..78cc5c08e 100644
--- a/src/routes/Player/Video/Video.js
+++ b/src/routes/Player/Video/Video.js
@@ -7,7 +7,7 @@ const styles = require('./styles');
 
 const Video = React.forwardRef(({ className, onClick, onDoubleClick }, ref) => {
     return (
-        <div className={classnames(className, styles['video-container'])} onClick={onClick} onContextMenu={onClick} onDoubleClick={onDoubleClick}>
+        <div className={classnames(className, styles['video-container'])} onClick={onClick} onDoubleClick={onDoubleClick}>
             <div ref={ref} className={styles['video']} />
         </div>
     );
diff --git a/src/routes/Player/useVideo.js b/src/routes/Player/useVideo.js
index 6a59a12fb..ef292bce6 100644
--- a/src/routes/Player/useVideo.js
+++ b/src/routes/Player/useVideo.js
@@ -8,7 +8,7 @@ const events = new EventEmitter();
 
 const useVideo = () => {
     const video = React.useRef(null);
-    const containerElement = React.useRef(null);
+    const containerRef = React.useRef(null);
 
     const [state, setState] = React.useState({
         manifest: null,
@@ -42,11 +42,11 @@ const useVideo = () => {
     });
 
     const dispatch = (action, options) => {
-        if (video.current && containerElement.current) {
+        if (video.current && containerRef.current) {
             try {
                 video.current.dispatch(action, {
                     ...options,
-                    containerElement: containerElement.current,
+                    containerElement: containerRef.current,
                 });
             } catch (error) {
                 console.error('Video:', error);
@@ -131,7 +131,7 @@ const useVideo = () => {
 
     return {
         events,
-        containerElement,
+        containerRef,
         state,
         load,
         unload,

From 16e6a3cf4dda63f156228a135f1ac541efed07b6 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 19 Mar 2025 19:23:40 +0100
Subject: [PATCH 13/19] refactor: remove unecessary props

---
 .../NavBar/HorizontalNavBar/HorizontalNavBar.js          | 7 +++----
 src/routes/Player/ControlBar/ControlBar.js               | 8 +-------
 src/routes/Player/OptionsMenu/OptionsMenu.js             | 9 ++-------
 src/routes/Player/SideDrawerButton/SideDrawerButton.tsx  | 9 +++------
 4 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
index 9f741c603..0cedd8638 100644
--- a/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -12,7 +12,7 @@ const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 const { t } = require('i18next');
 
-const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, onContextMenu, ...props }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -25,7 +25,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
         </Button>
     ), []);
     return (
-        <nav {...props} className={classnames(className, styles['horizontal-nav-bar-container'])} onContextMenu={onContextMenu}>
+        <nav {...props} className={classnames(className, styles['horizontal-nav-bar-container'])}>
             {
                 backButton ?
                     <Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
@@ -82,8 +82,7 @@ HorizontalNavBar.propTypes = {
     backButton: PropTypes.bool,
     searchBar: PropTypes.bool,
     fullscreenButton: PropTypes.bool,
-    navMenu: PropTypes.bool,
-    onContextMenu: PropTypes.func,
+    navMenu: PropTypes.bool
 };
 
 module.exports = HorizontalNavBar;
diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index c81d0e38e..745e2bd49 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -40,9 +40,6 @@ const ControlBar = ({
     onToggleSideDrawer,
     onToggleOptionsMenu,
     onToggleStatisticsMenu,
-    onContextMenu,
-    onTouchStart,
-    onTouchEnd,
     ...props
 }) => {
     const { chromecast } = useServices();
@@ -106,7 +103,7 @@ const ControlBar = ({
         };
     }, []);
     return (
-        <div {...props} className={classnames(className, styles['control-bar-container'])} onContextMenu={onContextMenu} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
+        <div {...props} className={classnames(className, styles['control-bar-container'])}>
             <SeekBar
                 className={styles['seek-bar']}
                 time={time}
@@ -209,9 +206,6 @@ ControlBar.propTypes = {
     onToggleSideDrawer: PropTypes.func,
     onToggleOptionsMenu: PropTypes.func,
     onToggleStatisticsMenu: PropTypes.func,
-    onContextMenu: PropTypes.func,
-    onTouchStart: PropTypes.func,
-    onTouchEnd: PropTypes.func,
 };
 
 module.exports = ControlBar;
diff --git a/src/routes/Player/OptionsMenu/OptionsMenu.js b/src/routes/Player/OptionsMenu/OptionsMenu.js
index 0065d9b55..56241e009 100644
--- a/src/routes/Player/OptionsMenu/OptionsMenu.js
+++ b/src/routes/Player/OptionsMenu/OptionsMenu.js
@@ -9,7 +9,7 @@ const { useServices } = require('stremio/services');
 const Option = require('./Option');
 const styles = require('./styles');
 
-const OptionsMenu = ({ className, stream, playbackDevices, style }) => {
+const OptionsMenu = ({ className, stream, playbackDevices }) => {
     const { t } = useTranslation();
     const { core } = useServices();
     const platform = usePlatform();
@@ -71,7 +71,7 @@ const OptionsMenu = ({ className, stream, playbackDevices, style }) => {
     }, []);
 
     return (
-        <div style={style} className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
+        <div className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
             {
                 streamingUrl || downloadUrl ?
                     <Option
@@ -111,14 +111,9 @@ const OptionsMenu = ({ className, stream, playbackDevices, style }) => {
 };
 
 OptionsMenu.propTypes = {
-    menuRef: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.shape({ current: PropTypes.any })
-    ]),
     className: PropTypes.string,
     stream: PropTypes.object,
     playbackDevices: PropTypes.array,
-    style: PropTypes.object,
 };
 
 module.exports = OptionsMenu;
diff --git a/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
index 9d5897548..81409f434 100644
--- a/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
+++ b/src/routes/Player/SideDrawerButton/SideDrawerButton.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { BaseSyntheticEvent } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import styles from './SideDrawerButton.less';
@@ -8,14 +8,11 @@ import styles from './SideDrawerButton.less';
 type Props = {
     className: string,
     onClick: () => void,
-    onContextMenu: () => void,
-    onTouchStart: (event: BaseSyntheticEvent) => void,
-    onTouchEnd: () => void,
 };
 
-const SideDrawerButton = ({ className, onClick, onContextMenu, onTouchStart, onTouchEnd }: Props) => {
+const SideDrawerButton = ({ className, onClick }: Props) => {
     return (
-        <div className={classNames(className, styles['side-drawer-button'])} onClick={onClick} onContextMenu={onContextMenu} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
+        <div className={classNames(className, styles['side-drawer-button'])} onClick={onClick}>
             <Icon name={'chevron-back'} className={styles['icon']} />
         </div>
     );

From d8be6085b285994bbcc25ce77091b1bc55c5babb Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 19 Mar 2025 19:30:38 +0100
Subject: [PATCH 14/19] refactor: remove unrelated changes

---
 src/common/useOutsideClick.ts                 | 20 ++++++++++---------
 .../MultiselectMenu/Dropdown/Dropdown.tsx     |  2 +-
 .../MultiselectMenu/MultiselectMenu.tsx       |  6 ++----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/common/useOutsideClick.ts b/src/common/useOutsideClick.ts
index 618803e3e..182cf8e37 100644
--- a/src/common/useOutsideClick.ts
+++ b/src/common/useOutsideClick.ts
@@ -1,25 +1,27 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import { RefObject, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+
+const useOutsideClick = (callback: () => void) => {
+    const ref = useRef<HTMLDivElement>(null);
 
-const useOutsideClick = (ref: RefObject<HTMLDivElement>, callback: () => void) => {
     useEffect(() => {
-        if (!ref?.current) return;
-
         const handleClickOutside = (event: MouseEvent | TouchEvent) => {
             if (ref.current && !ref.current.contains(event.target as Node)) {
                 callback();
             }
         };
 
-        document.addEventListener('mousedown', handleClickOutside, true);
-        document.addEventListener('touchstart', handleClickOutside, true);
+        document.addEventListener('mouseup', handleClickOutside);
+        document.addEventListener('touchend', handleClickOutside);
 
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('touchstart', handleClickOutside);
+            document.removeEventListener('mouseup', handleClickOutside);
+            document.removeEventListener('touchend', handleClickOutside);
         };
-    }, [ref, callback]);
+    }, [callback]);
+
+    return ref;
 };
 
 export default useOutsideClick;
diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index 438ced13c..3da75619b 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -63,7 +63,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
                 .filter((option: MultiselectMenuOption) => !option.hidden)
                 .map((option: MultiselectMenuOption) => (
                     <Option
-                        key={option.value}
+                        key={option.id}
                         ref={handleSetOptionRef(option.value)}
                         option={option}
                         onSelect={onSelect}
diff --git a/src/components/MultiselectMenu/MultiselectMenu.tsx b/src/components/MultiselectMenu/MultiselectMenu.tsx
index e3fbffcf4..35be107c9 100644
--- a/src/components/MultiselectMenu/MultiselectMenu.tsx
+++ b/src/components/MultiselectMenu/MultiselectMenu.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useRef } from 'react';
+import React from 'react';
 import { Button } from 'stremio/components';
 import useBinaryState from 'stremio/common/useBinaryState';
 import Dropdown from './Dropdown';
@@ -19,15 +19,13 @@ type Props = {
 
 const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
-    const multiselectMenuRef = useRef(null);
+    const multiselectMenuRef = useOutsideClick(() => closeMenu());
     const [level, setLevel] = React.useState<number>(0);
 
     const onOptionSelect = (value: number) => {
         level ? setLevel(level + 1) : onSelect(value), closeMenu();
     };
 
-    useOutsideClick(multiselectMenuRef, closeMenu);
-
     return (
         <div className={classNames(styles['multiselect-menu'], className)} ref={multiselectMenuRef}>
             <Button

From 43a7e8d856d60c183325a05c1386d39f4acc616f Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 20 Mar 2025 15:23:15 +0100
Subject: [PATCH 15/19] refactor(ContextMenu): wrap inside memo

---
 src/components/ContextMenu/ContextMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index 28b1a94fc..f9d125f2c 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { memo, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './ContextMenu.less';
 
@@ -86,4 +86,4 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
     ), document.body);
 };
 
-export default ContextMenu;
+export default memo(ContextMenu);

From 6a2054372f5d29ed67e29e5e4e912e8065f623a4 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 20 Mar 2025 15:30:13 +0100
Subject: [PATCH 16/19] refactor(ContextMenu): simplify useEffect

---
 src/components/ContextMenu/ContextMenu.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index f9d125f2c..18368fbb7 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -58,12 +58,8 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
     };
 
     useEffect(() => {
-        const containers = on.map((ref) => ref.current).filter((element) => !!element);
-        containers.forEach((container) => container.addEventListener('contextmenu', onContextMenu));
-
-        return () => {
-            containers.forEach((container) => container.removeEventListener('contextmenu', onContextMenu));
-        };
+        on.forEach((ref) => ref.current && ref.current.addEventListener('contextmenu', onContextMenu));
+        return () => on.forEach((ref) => ref.current && ref.current.removeEventListener('contextmenu', onContextMenu));
     }, [on]);
 
     return active && createPortal((

From 68cff0362cd897bba2ab23bf98456b4249ea4355 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 20 Mar 2025 16:06:25 +0100
Subject: [PATCH 17/19] refactor(ContextMenu): remove unecessary functions

---
 src/components/ContextMenu/ContextMenu.tsx | 24 ++++++++--------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index 18368fbb7..3fa923915 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -33,6 +33,10 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
         setActive(false);
     };
 
+    const stopPropagation = (event: React.MouseEvent | React.TouchEvent) => {
+        event.stopPropagation();
+    };
+
     const onContextMenu = (event: MouseEvent) => {
         event.preventDefault();
         const { clientX, clientY } = event;
@@ -41,22 +45,10 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
         setActive(true);
     };
 
-    const onClickOutside = () => {
-        close();
-    };
-
     const onClick = useCallback(() => {
         autoClose && close();
     }, [autoClose]);
 
-    const onMouseDown = (event: React.MouseEvent) => {
-        event.stopPropagation();
-    };
-
-    const onTouchStart = (event: React.TouchEvent) => {
-        event.stopPropagation();
-    };
-
     useEffect(() => {
         on.forEach((ref) => ref.current && ref.current.addEventListener('contextmenu', onContextMenu));
         return () => on.forEach((ref) => ref.current && ref.current.removeEventListener('contextmenu', onContextMenu));
@@ -65,15 +57,15 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
     return active && createPortal((
         <div
             className={styles['context-menu-container']}
-            onMouseDown={onClickOutside}
-            onTouchStart={onClickOutside}
+            onMouseDown={close}
+            onTouchStart={close}
         >
             <div
                 ref={ref}
                 className={styles['context-menu']}
                 style={style}
-                onMouseDown={onMouseDown}
-                onTouchStart={onTouchStart}
+                onMouseDown={stopPropagation}
+                onTouchStart={stopPropagation}
                 onClick={onClick}
             >
                 {children}

From c1d317acf714596485c9b1f0f10ee2d89a8fbf13 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 25 Mar 2025 16:53:15 +0200
Subject: [PATCH 18/19] feat(ContextMenu): add padding + on esc close

---
 src/components/ContextMenu/ContextMenu.tsx | 38 ++++++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index 3fa923915..4156fdd74 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -2,6 +2,11 @@ import React, { memo, RefObject, useCallback, useEffect, useMemo, useState } fro
 import { createPortal } from 'react-dom';
 import styles from './ContextMenu.less';
 
+const PADDING = 8;
+
+type Coordinates = [number, number];
+type Size = [number, number];
+
 type Props = {
     children: React.ReactNode,
     on: RefObject<HTMLElement>[],
@@ -10,8 +15,8 @@ type Props = {
 
 const ContextMenu = ({ children, on, autoClose }: Props) => {
     const [active, setActive] = useState(false);
-    const [position, setPosition] = useState([0, 0]);
-    const [containerSize, setContainerSize] = useState([0, 0]);
+    const [position, setPosition] = useState<Coordinates>([0, 0]);
+    const [containerSize, setContainerSize] = useState<Size>([0, 0]);
 
     const ref = useCallback((element: HTMLDivElement) => {
         element && setContainerSize([element.offsetWidth, element.offsetHeight]);
@@ -22,8 +27,21 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
         const [containerWidth, containerHeight] = containerSize;
         const [x, y] = position;
 
-        const left = (x + containerWidth) > viewportWidth ? x - containerWidth : x;
-        const top = (y + containerHeight) > viewportHeight ? y - containerHeight : y;
+        const left = Math.max(
+            PADDING,
+            Math.min(
+                x + containerWidth > viewportWidth - PADDING ? x - containerWidth : x,
+                viewportWidth - containerWidth - PADDING
+            )
+        );
+
+        const top = Math.max(
+            PADDING,
+            Math.min(
+                y + containerHeight > viewportHeight - PADDING ? y - containerHeight : y,
+                viewportHeight - containerHeight - PADDING
+            )
+        );
 
         return { top, left };
     }, [position, containerSize]);
@@ -39,19 +57,25 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
 
     const onContextMenu = (event: MouseEvent) => {
         event.preventDefault();
-        const { clientX, clientY } = event;
 
-        setPosition([clientX, clientY]);
+        setPosition([event.clientX, event.clientY]);
         setActive(true);
     };
 
+    const handleKeyDown = useCallback((event: KeyboardEvent) => event.key === 'Escape' && close(), []);
+
     const onClick = useCallback(() => {
         autoClose && close();
     }, [autoClose]);
 
     useEffect(() => {
         on.forEach((ref) => ref.current && ref.current.addEventListener('contextmenu', onContextMenu));
-        return () => on.forEach((ref) => ref.current && ref.current.removeEventListener('contextmenu', onContextMenu));
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            on.forEach((ref) => ref.current && ref.current.removeEventListener('contextmenu', onContextMenu));
+            document.removeEventListener('keydown', handleKeyDown);
+        }
     }, [on]);
 
     return active && createPortal((

From cd65f77d60e72963e522d4ff1502e66512b40850 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 25 Mar 2025 17:01:57 +0200
Subject: [PATCH 19/19] fix(ContextMenu): missing semi

---
 src/components/ContextMenu/ContextMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index 4156fdd74..0f78454e8 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -75,7 +75,7 @@ const ContextMenu = ({ children, on, autoClose }: Props) => {
         return () => {
             on.forEach((ref) => ref.current && ref.current.removeEventListener('contextmenu', onContextMenu));
             document.removeEventListener('keydown', handleKeyDown);
-        }
+        };
     }, [on]);
 
     return active && createPortal((