diff --git a/src/routes/Player/AudioMenu/AudioMenu.tsx b/src/routes/Player/AudioMenu/AudioMenu.tsx index 1a84b28da..71bdb68ed 100644 --- a/src/routes/Player/AudioMenu/AudioMenu.tsx +++ b/src/routes/Player/AudioMenu/AudioMenu.tsx @@ -14,15 +14,16 @@ type Props = { const AudioMenu = ({ className, selectedAudioTrackId, audioTracks, onAudioTrackSelected }: Props) => { const { t } = useTranslation(); - const onMouseDown = (event: MouseEvent) => { - event.stopPropagation(); - }; - const onAudioTrackClick = useCallback(({ currentTarget }: MouseEvent) => { const id = currentTarget.getAttribute('data-id')!; onAudioTrackSelected && onAudioTrackSelected(id); }, [onAudioTrackSelected]); + const onMouseDown = (event: MouseEvent) => { + // @ts-expect-error: Property 'audioMenuClosePrevented' does not exist on type 'MouseEvent'. + event.nativeEvent.audioMenuClosePrevented = true; + }; + return (
diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index 77b483f9b..ca9498320 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -50,7 +50,7 @@ const ControlBar = ({ event.nativeEvent.subtitlesMenuClosePrevented = true; }, []); const onAudioButtonMouseDown = React.useCallback((event) => { - event.stopPropagation(); + event.nativeEvent.audioMenuClosePrevented = true; }, []); const onInfoButtonMouseDown = React.useCallback((event) => { event.nativeEvent.infoMenuClosePrevented = true; diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 26194a9b0..d201af0fa 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -240,7 +240,9 @@ const Player = ({ urlParams, queryParams }) => { if (!event.nativeEvent.subtitlesMenuClosePrevented) { closeSubtitlesMenu(); } - closeAudioMenu(); + if (!event.nativeEvent.audioMenuClosePrevented) { + closeAudioMenu(); + } if (!event.nativeEvent.infoMenuClosePrevented) { closeInfoMenu(); }