Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-18 04:42:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(Context Menu): handle click inside and outside context menu

Browse source
This commit is contained in:
Botzy 2025-01-29 17:55:32 +02:00
parent dcff82ff45
commit a15ce0ea52
2 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/routes/Player/OptionsMenu/OptionsMenu.js
View file

@ -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;

7
src/routes/Player/Player.js
View file

@ -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