Add long press to take video

1 files changed, 25 insertions, 14 deletions

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 37b37264..0f2e3b5d 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -16,7 +16,7 @@ import {
 } from '../../components';
 import {MainStackParams} from '../../routes';
 import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils';
-import {showGIFFailureAlert, takePicture} from '../../utils/camera';
+import {showGIFFailureAlert, takePicture, takeVideo} from '../../utils/camera';
 
 type CameraScreenRouteProps = RouteProp<MainStackParams, 'CameraScreen'>;
 export type CameraScreenNavigationProps = StackNavigationProp<
@@ -33,7 +33,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const tabBarHeight = useBottomTabBarHeight();
   const [cameraType, setCameraType] = useState<keyof CameraType>('front');
   const [flashMode, setFlashMode] = useState<keyof FlashMode>('off');
-  const [capturedImage, setCapturedImage] = useState<string>('');
+  const [mediaFromGallery, setMediaFromGallery] = useState<string>('');
   const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
   const [showSaveButton, setShowSaveButton] = useState<boolean>(false);
 
@@ -64,7 +64,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       .catch((_err) =>
         console.log('Unable to fetch preview photo for gallery'),
       );
-  }, [capturedImage]);
+  }, [mediaFromGallery]);
 
   const navigateToCropper = (uri: string) => {
     navigation.navigate('ZoomInCropper', {
@@ -77,13 +77,13 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
     });
   };
 
-  const navigateToCaptionScreen = () => {
+  const navigateToCaptionScreen = (isVideo: boolean, uri: string) => {
     navigation.navigate('CaptionScreen', {
       screenType,
       title,
       media: {
-        uri: capturedImage,
-        isVideo: false,
+        uri,
+        isVideo,
       },
     });
   };
@@ -96,7 +96,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
     if (showSaveButton) {
       cameraRef.current?.resumePreview();
       setShowSaveButton(false);
-      setCapturedImage('');
+      setMediaFromGallery('');
     } else {
       navigation.goBack();
     }
@@ -116,24 +116,35 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       />
       <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}>
         {showSaveButton ? (
-          <SaveButton capturedImageURI={capturedImage} />
+          <SaveButton capturedImageURI={mediaFromGallery} />
         ) : (
           <FlipButton cameraType={cameraType} setCameraType={setCameraType} />
         )}
         <TouchableOpacity
-          onPress={() =>
+          onLongPress={() => {
+            takeVideo(cameraRef, (vid) => {
+              navigateToCaptionScreen(true, vid.uri);
+            });
+          }}
+          onPressOut={async () => {
+            if (await cameraRef.current?.isRecording()) {
+              cameraRef.current?.stopRecording();
+            } else {
+            }
+          }}
+          onPress={() => {
             takePicture(cameraRef, (pic) => {
               setShowSaveButton(true);
-              setCapturedImage(pic.uri);
-            })
-          }
+              setMediaFromGallery(pic.uri);
+            });
+          }}
           style={styles.captureButtonContainer}>
           <View style={styles.captureButton} />
         </TouchableOpacity>
         <View style={styles.bottomRightContainer}>
-          {capturedImage ? (
+          {mediaFromGallery ? (
             <TaggSquareButton
-              onPress={navigateToCaptionScreen}
+              onPress={() => navigateToCaptionScreen(false, mediaFromGallery)}
               title={'Next'}
               buttonStyle={'large'}
               buttonColor={'blue'}