Add long press to take video

2 files changed, 42 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'}
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 3937129a..7fa18b7c 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -2,6 +2,8 @@ import CameraRoll from '@react-native-community/cameraroll';
 import {RefObject} from 'react';
 import {Alert} from 'react-native';
 import {
+  RecordOptions,
+  RecordResponse,
   RNCamera,
   TakePictureOptions,
   TakePictureResponse,
@@ -29,6 +31,21 @@ export const takePicture = (
   }
 };
 
+export const takeVideo = (
+  cameraRef: RefObject<RNCamera>,
+  callback: (vid: RecordResponse) => void,
+) => {
+  if (cameraRef !== null) {
+    const options: RecordOptions = {
+      orientation: 'portrait',
+      maxDuration: 10,
+    };
+    cameraRef.current?.recordAsync(options).then((vid) => {
+      callback(vid);
+    });
+  }
+};
+
 export const saveImageToGallery = (capturedImageURI: string) => {
   CameraRoll.save(capturedImageURI, {album: 'Recents', type: 'photo'})
     .then((_res) => Alert.alert('Saved to device!'))