From 506c00960fece67d5ba67c106a5ca6ae147ccba3 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sun, 12 Mar 2023 22:51:27 +0100
Subject: [PATCH] Fix backdrop tap not working properly on mobile

---
 .../components/actions/BackdropAction.tsx     | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/video/components/actions/BackdropAction.tsx b/src/video/components/actions/BackdropAction.tsx
index 55599df5..d7e75605 100644
--- a/src/video/components/actions/BackdropAction.tsx
+++ b/src/video/components/actions/BackdropAction.tsx
@@ -19,8 +19,20 @@ export function BackdropAction(props: BackdropActionProps) {
   const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   const clickareaRef = useRef<HTMLDivElement>(null);
 
+  const lastTouchEnd = useRef<number>(0);
+
   const handleMouseMove = useCallback(() => {
-    if (!moved) setMoved(true);
+    if (!moved) {
+      setTimeout(() => {
+        const isTouch = Date.now() - lastTouchEnd.current < 200;
+        if (!isTouch) {
+          setMoved(true);
+        }
+      }, 20);
+      return;
+    }
+
+    // remove after all
     if (timeout.current) clearTimeout(timeout.current);
     timeout.current = setTimeout(() => {
       if (moved) setMoved(false);
@@ -32,8 +44,6 @@ export function BackdropAction(props: BackdropActionProps) {
     setMoved(false);
   }, [setMoved]);
 
-  const [lastTouchEnd, setLastTouchEnd] = useState(0);
-
   const handleClick = useCallback(
     (
       e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
@@ -43,7 +53,7 @@ export function BackdropAction(props: BackdropActionProps) {
       if (videoInterface.popout !== null) return;
 
       if ((e as React.TouchEvent).type === "touchend") {
-        setLastTouchEnd(Date.now());
+        lastTouchEnd.current = Date.now();
         return;
       }
 
@@ -52,8 +62,8 @@ export function BackdropAction(props: BackdropActionProps) {
       }
 
       setTimeout(() => {
-        if (Date.now() - lastTouchEnd < 200) {
-          setMoved(!moved);
+        if (Date.now() - lastTouchEnd.current < 200) {
+          setMoved((v) => !v);
           return;
         }
 
@@ -61,7 +71,7 @@ export function BackdropAction(props: BackdropActionProps) {
         else controls.play();
       }, 20);
     },
-    [controls, mediaPlaying, videoInterface, lastTouchEnd, moved]
+    [controls, mediaPlaying, videoInterface]
   );
   const handleDoubleClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {