diff options
| -rw-r--r-- | src/constants/constants.ts | 2 | ||||
| -rw-r--r-- | src/constants/strings.ts | 1 | ||||
| -rw-r--r-- | src/screens/moments/CameraScreen.tsx | 27 | ||||
| -rw-r--r-- | src/utils/camera.ts | 16 |
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) => { |