feat: double tap screen to play/pause

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}