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

playback toggle debounced for clicks on video overlay

Browse source
This commit is contained in:
nklhrstv 2020-03-31 16:20:01 +03:00
parent 2bdd7eb35f
commit 1ccca352d6
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -106,9 +106,11 @@ const Player = ({ urlParams }) => {
const onPlayRequested = React.useCallback(() => { const onPlayRequested = React.useCallback(() => {
dispatch({ propName: 'paused', propValue: false }); dispatch({ propName: 'paused', propValue: false });
}, []); }, []);
const onPlayRequestedDebounced = React.useCallback(debounce(onPlayRequested, 200), []);
const onPauseRequested = React.useCallback(() => { const onPauseRequested = React.useCallback(() => {
dispatch({ propName: 'paused', propValue: true }); dispatch({ propName: 'paused', propValue: true });
}, []); }, []);
const onPauseRequestedDebounced = React.useCallback(debounce(onPauseRequested, 200), []);
const onMuteRequested = React.useCallback(() => { const onMuteRequested = React.useCallback(() => {
dispatch({ propName: 'muted', propValue: true }); dispatch({ propName: 'muted', propValue: true });
}, []); }, []);
@ -136,12 +138,17 @@ const Player = ({ urlParams }) => {
const onVideoClick = React.useCallback(() => { const onVideoClick = React.useCallback(() => {
if (videoState.paused !== null) { if (videoState.paused !== null) {
if (videoState.paused) { if (videoState.paused) {
onPlayRequested(); onPlayRequestedDebounced();
} else { } else {
onPauseRequested(); onPauseRequestedDebounced();
} }
} }
}, [videoState.paused]); }, [videoState.paused]);
const onVideoDoubleClick = React.useCallback(() => {
onPlayRequestedDebounced.cancel();
onPauseRequestedDebounced.cancel();
toggleFullscreen();
}, [toggleFullscreen]);
const onContainerMouseDown = React.useCallback((event) => { const onContainerMouseDown = React.useCallback((event) => {
if (!event.nativeEvent.subtitlesPickerClosePrevented) { if (!event.nativeEvent.subtitlesPickerClosePrevented) {
closeSubtitlesPicker(); closeSubtitlesPicker();
@ -299,6 +306,8 @@ const Player = ({ urlParams }) => {
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
return () => { return () => {
setImmersedDebounced.cancel(); setImmersedDebounced.cancel();
onPlayRequestedDebounced.cancel();
onPauseRequestedDebounced.cancel();
}; };
}, []); }, []);
return ( return (
@ -331,7 +340,7 @@ const Player = ({ urlParams }) => {
<div <div
className={styles['layer']} className={styles['layer']}
onClick={onVideoClick} onClick={onVideoClick}
onDoubleClick={toggleFullscreen} onDoubleClick={onVideoDoubleClick}
/> />
{ {
subtitlesPickerOpen || infoMenuOpen ? subtitlesPickerOpen || infoMenuOpen ?