From 649a94844a47dbf3d112956dfb488b7b36e84906 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Tue, 13 Feb 2024 21:08:24 +0100
Subject: [PATCH] feat: double tap screen to play/pause

---
 apps/expo/src/app/videoPlayer/index.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/expo/src/app/videoPlayer/index.tsx b/apps/expo/src/app/videoPlayer/index.tsx
index 23e607a..1e2617f 100644
--- a/apps/expo/src/app/videoPlayer/index.tsx
+++ b/apps/expo/src/app/videoPlayer/index.tsx
@@ -40,6 +40,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [headerData, setHeaderData] = useState<HeaderData>();
   const [resizeMode, setResizeMode] = useState(ResizeMode.CONTAIN);
+  const [shouldPlay, setShouldPlay] = useState(true);
   const router = useRouter();
   const scale = useSharedValue(1);
   const setVideoRef = usePlayerStore((state) => state.setVideoRef);
@@ -65,6 +66,18 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
     }
   });
 
+  const togglePlayback = () => {
+    setShouldPlay(!shouldPlay);
+  };
+
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      runOnJS(togglePlayback)();
+    });
+
+  const composedGesture = Gesture.Exclusive(pinchGesture, doubleTapGesture);
+
   useEffect(() => {
     const initializePlayer = async () => {
       StatusBar.setStatusBarHidden(true);
@@ -139,12 +152,12 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
   };
 
   return (
-    <GestureDetector gesture={pinchGesture}>
+    <GestureDetector gesture={composedGesture}>
       <View className="flex-1 items-center justify-center bg-black">
         <Video
           ref={setVideoRef}
           source={videoSrc}
-          shouldPlay
+          shouldPlay={shouldPlay}
           resizeMode={resizeMode}
           onLoadStart={onVideoLoadStart}
           onReadyForDisplay={onReadyForDisplay}