From 18a1188a2a411e4bb042c922741fea1a5a3aa946 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 16:34:50 -0400 Subject: Add max duration constant, Add check for picking video duration, Add logic to cancel recording state --- src/constants/constants.ts | 2 ++ src/constants/strings.ts | 1 + src/screens/moments/CameraScreen.tsx | 5 +++-- src/utils/camera.ts | 16 ++++++++++++++-- 4 files changed, 20 insertions(+), 4 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..82ee66c0 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 = ({route, navigation}) => { navigation.dangerouslyGetParent()?.setOptions({ tabBarVisible: false, }); + return () => setIsRecording(false); }, [navigation]), ); @@ -136,7 +137,7 @@ const CameraScreen: React.FC = ({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) => { -- cgit v1.2.3-70-g09d2