Merge pull request #539 from IvanIFChen/tma1035-bugfix-camera-timer-animation

[TMA-1035] [BUGFIX] Record Video Animation Issues

4 files changed, 38 insertions, 8 deletions

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 476e7af4..d25a5953 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -246,3 +246,5 @@ export const SETTINGS_DATA = {
     },
   ],
 };
+
+export const MAX_VIDEO_RECORDING_DURATION = 60;
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 450d7e5c..47ad2464 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -56,6 +56,7 @@ export const ERROR_UNABLE_TO_FIND_PROFILE = 'We were unable to find this profile
 export const ERROR_UNABLE_TO_VIEW_PROFILE = 'Unable to view this profile';
 export const ERROR_UPLOAD = 'An error occurred while uploading. Please try again!';
 export const ERROR_UPLOAD_BADGES = 'Unable to upload your badges. Please retry!';
+export const ERROR_UPLOAD_EXCEED_MAX_VIDEO_DURATION = 'Video can\'t be longer than 60 seconds!';
 export const ERROR_UPLOAD_LARGE_PROFILE_PIC = "Can't have the first image seen on the profile be blank, please upload a large picture";
 export const ERROR_UPLOAD_MOMENT = 'Unable to upload moment. Please retry';
 export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pic to represent you, please upload a small profile picture";
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 40db1191..07b697d0 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -9,7 +9,7 @@ import {CameraType, FlashMode, RNCamera} from 'react-native-camera';
 import {AnimatedCircularProgress} from 'react-native-circular-progress';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {FlashButton, FlipButton, GalleryIcon} from '../../components';
-import {TAGG_PURPLE} from '../../constants';
+import {MAX_VIDEO_RECORDING_DURATION, TAGG_PURPLE} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {showGIFFailureAlert, takePicture, takeVideo} from '../../utils/camera';
@@ -37,6 +37,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       navigation.dangerouslyGetParent()?.setOptions({
         tabBarVisible: false,
       });
+      return () => setIsRecording(false);
     }, [navigation]),
   );
 
@@ -120,10 +121,24 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
             setIsRecording(true);
           }}
           onPressOut={async () => {
-            if (await cameraRef.current?.isRecording()) {
-              cameraRef.current?.stopRecording();
-              setIsRecording(false);
-            }
+            const cancelRecording = async () => {
+              if (await cameraRef.current?.isRecording()) {
+                cameraRef.current?.stopRecording();
+                setIsRecording(false);
+              }
+            };
+            cancelRecording();
+            // tmp fix for when the animation glitches during the beginning of
+            // recording causing onPressOut to not be detected.
+            setTimeout(() => {
+              cancelRecording();
+            }, 500);
+            setTimeout(() => {
+              cancelRecording();
+            }, 1000);
+            setTimeout(() => {
+              cancelRecording();
+            }, 1500);
           }}
           onPress={() => {
             takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
@@ -136,7 +151,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
             width={6}
             fill={100}
             rotation={0}
-            duration={60000 + 1000} // an extra second for UI to load
+            duration={(MAX_VIDEO_RECORDING_DURATION + 1) * 1000} // an extra second for UI to load
             tintColor={TAGG_PURPLE}
             style={styles.bottomContainer}
             lineCap={'round'}
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index f21ef133..ec2615de 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -10,7 +10,11 @@ import {
 } from 'react-native-camera';
 import {ProcessingManager} from 'react-native-video-processing';
 import ImagePicker, {ImageOrVideo} from 'react-native-image-crop-picker';
-import {ERROR_UPLOAD} from '../constants/strings';
+import {
+  ERROR_UPLOAD,
+  ERROR_UPLOAD_EXCEED_MAX_VIDEO_DURATION,
+} from '../constants/strings';
+import {MAX_VIDEO_RECORDING_DURATION} from '../constants';
 
 /*
  * Captures a photo and pauses to show the preview of the picture taken
@@ -39,7 +43,7 @@ export const takeVideo = (
   if (cameraRef !== null) {
     const options: RecordOptions = {
       orientation: 'portrait',
-      maxDuration: 60,
+      maxDuration: MAX_VIDEO_RECORDING_DURATION,
       quality: '1080p',
     };
     cameraRef.current?.recordAsync(options).then((vid) => {
@@ -73,6 +77,14 @@ export const navigateToMediaPicker = (
     compressVideoPreset: 'Passthrough',
   })
     .then((media) => {
+      if (
+        'duration' in media &&
+        media.duration !== null &&
+        media.duration > MAX_VIDEO_RECORDING_DURATION * 1000
+      ) {
+        Alert.alert(ERROR_UPLOAD_EXCEED_MAX_VIDEO_DURATION);
+        return;
+      }
       callback(media);
     })
     .catch((err) => {