From 1ccca352d6792550269ed9f7105e5af688cd4c73 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 16:20:01 +0300
Subject: [PATCH] playback toggle debounced for clicks on video overlay

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

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