From a14198be7ee5f3ba8dbd98a787b5208e13befb63 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 12 Mar 2024 11:06:11 -0600
Subject: [PATCH] Fix touch controls for mobile

---
 .../components/player/DynamicVideoPlayer.tsx  | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/web/src/components/player/DynamicVideoPlayer.tsx b/web/src/components/player/DynamicVideoPlayer.tsx
index d3ef4f9e0..23f25a85e 100644
--- a/web/src/components/player/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/DynamicVideoPlayer.tsx
@@ -152,6 +152,19 @@ export default function DynamicVideoPlayer({
     onKeyboardShortcut,
   );
 
+  // mobile tap controls
+
+  useEffect(() => {
+    if (isDesktop || !playerRef) {
+      return;
+    }
+
+    const callback = () => setControls(!controls);
+    playerRef.on("touchstart", callback);
+
+    return () => playerRef.off("touchstart", callback);
+  }, [controls, playerRef]);
+
   // initial state
 
   const initialPlaybackSource = useMemo(() => {
@@ -238,14 +251,6 @@ export default function DynamicVideoPlayer({
             }
           : undefined
       }
-      onClick={
-        isMobile
-          ? (e) => {
-              e.stopPropagation();
-              setControls(!controls);
-            }
-          : undefined
-      }
     >
       <div className={`w-full relative ${isScrubbing ? "hidden" : "visible"}`}>
         <VideoPlayer
@@ -255,9 +260,8 @@ export default function DynamicVideoPlayer({
             sources: [initialPlaybackSource],
             aspectRatio: wideVideo ? undefined : "16:9",
             controls: false,
-            nativeControlsForTouch: true,
+            nativeControlsForTouch: false,
           }}
-          seekOptions={{ forward: 10, backward: 5 }}
           onReady={(player) => {
             setPlayerRef(player);
           }}