1 files changed, 39 insertions, 9 deletions

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 27412486..07b697d0 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -4,14 +4,14 @@ import {RouteProp} from '@react-navigation/core';
 import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {createRef, useCallback, useEffect, useState} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native';
 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_WIDTH} from '../../utils';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {showGIFFailureAlert, takePicture, takeVideo} from '../../utils/camera';
 
 type CameraScreenRouteProps = RouteProp<MainStackParams, 'CameraScreen'>;
@@ -37,6 +37,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       navigation.dangerouslyGetParent()?.setOptions({
         tabBarVisible: false,
       });
+      return () => setIsRecording(false);
     }, [navigation]),
   );
 
@@ -84,6 +85,11 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
 
   return (
     <View style={styles.container}>
+      <Modal
+        transparent={true}
+        visible={isRecording && cameraType === 'front' && flashMode === 'on'}>
+        <View style={styles.flashView} />
+      </Modal>
       <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
         <CloseIcon height={25} width={25} color={'white'} />
       </TouchableOpacity>
@@ -92,7 +98,11 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
         ref={cameraRef}
         style={styles.camera}
         type={cameraType}
-        flashMode={flashMode}
+        flashMode={
+          flashMode === 'on' && isRecording && cameraType === 'back'
+            ? 'torch'
+            : flashMode
+        }
         onDoubleTap={() => {
           setCameraType(cameraType === 'front' ? 'back' : 'front');
         }}
@@ -111,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));
@@ -127,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'}
@@ -164,6 +188,12 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     backgroundColor: 'black',
   },
+  flashView: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: '#fff',
+    opacity: 0.5,
+  },
   captureButtonVideoContainer: {
     alignSelf: 'center',
     backgroundColor: 'transparent',