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