diff options
Diffstat (limited to 'src/screens')
| -rw-r--r-- | src/screens/moments/CameraScreen.tsx | 171 |
1 files changed, 88 insertions, 83 deletions
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 07b697d0..bd94bf63 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -3,7 +3,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; 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 React, {useCallback, useEffect, useRef, useState} from 'react'; import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native'; import {CameraType, FlashMode, RNCamera} from 'react-native-camera'; import {AnimatedCircularProgress} from 'react-native-circular-progress'; @@ -25,19 +25,35 @@ interface CameraScreenProps { } const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => { const {screenType, selectedCategory} = route.params; - const cameraRef = createRef<RNCamera>(); + const cameraRef = useRef<RNCamera>(null); const tabBarHeight = useBottomTabBarHeight(); const [cameraType, setCameraType] = useState<keyof CameraType>('back'); const [flashMode, setFlashMode] = useState<keyof FlashMode>('off'); const [mostRecentPhoto, setMostRecentPhoto] = useState<string>(''); - const [isRecording, setIsRecording] = useState<boolean>(false); + const [recordingStarted, setRecordingStarted] = useState<boolean>(false); + const [showCaptureButtons, setShowCaptureButtons] = useState<boolean>(false); + const [showCamera, setShowCamera] = useState<boolean>(true); + const [videoUri, setVideoUri] = useState<string | undefined>(); + + useEffect(() => { + if (recordingStarted && videoUri) { + navigateToEditMedia(videoUri); + } + }, [videoUri]); useFocusEffect( useCallback(() => { navigation.dangerouslyGetParent()?.setOptions({ tabBarVisible: false, }); - return () => setIsRecording(false); + setRecordingStarted(false); + setShowCaptureButtons(true); + setShowCamera(true); + return () => { + setTimeout(() => { + setShowCamera(false); + }, 500); + }; }, [navigation]), ); @@ -58,7 +74,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => { }, []); const navigateToEditMedia = (uri: string) => { - cameraRef.current?.resumePreview(); navigation.navigate('EditMedia', { screenType, media: { @@ -87,93 +102,83 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => { <View style={styles.container}> <Modal transparent={true} - visible={isRecording && cameraType === 'front' && flashMode === 'on'}> + visible={ + recordingStarted && cameraType === 'front' && flashMode === 'on' + }> <View style={styles.flashView} /> </Modal> <TouchableOpacity style={styles.closeButton} onPress={handleClose}> <CloseIcon height={25} width={25} color={'white'} /> </TouchableOpacity> <FlashButton flashMode={flashMode} setFlashMode={setFlashMode} /> - <RNCamera - ref={cameraRef} - style={styles.camera} - type={cameraType} - flashMode={ - flashMode === 'on' && isRecording && cameraType === 'back' - ? 'torch' - : flashMode - } - onDoubleTap={() => { - setCameraType(cameraType === 'front' ? 'back' : 'front'); - }} - /> - <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}> - <FlipButton cameraType={cameraType} setCameraType={setCameraType} /> - <TouchableOpacity - style={ - isRecording - ? styles.captureButtonVideoContainer - : styles.captureButtonContainer + {showCamera && ( + <RNCamera + ref={cameraRef} + style={styles.camera} + type={cameraType} + flashMode={ + flashMode === 'on' && recordingStarted && cameraType === 'back' + ? 'torch' + : flashMode } - activeOpacity={1} - onLongPress={() => { - takeVideo(cameraRef, (vid) => navigateToEditMedia(vid.uri)); - setIsRecording(true); - }} - onPressOut={async () => { - 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); + onDoubleTap={() => { + if (showCaptureButtons) { + setCameraType(cameraType === 'front' ? 'back' : 'front'); + } }} - onPress={() => { - takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri)); - }}> - <View style={styles.captureButton} /> - </TouchableOpacity> - {isRecording && ( - <AnimatedCircularProgress - size={95} - width={6} - fill={100} - rotation={0} - duration={(MAX_VIDEO_RECORDING_DURATION + 1) * 1000} // an extra second for UI to load - tintColor={TAGG_PURPLE} - style={styles.bottomContainer} - lineCap={'round'} - /> - )} - <View style={styles.bottomRightContainer}> - <GalleryIcon - mostRecentPhotoUri={mostRecentPhoto} - callback={(media) => { - const filename = media.filename; - if ( - filename && - (filename.endsWith('gif') || filename.endsWith('GIF')) - ) { - showGIFFailureAlert(() => navigateToEditMedia(media.path)); - } else { - navigateToEditMedia(media.path); - } - }} - /> + onRecordingStart={() => setRecordingStarted(true)} + /> + )} + {showCaptureButtons && ( + <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}> + <FlipButton cameraType={cameraType} setCameraType={setCameraType} /> + <TouchableOpacity + style={ + recordingStarted + ? styles.captureButtonVideoContainer + : styles.captureButtonContainer + } + activeOpacity={1} + onLongPress={() => + takeVideo(cameraRef, (vid) => setVideoUri(vid.uri)) + } + onPressOut={() => cameraRef.current?.stopRecording()} + onPress={() => { + setShowCaptureButtons(false); + takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri)); + }}> + <View style={styles.captureButton} /> + </TouchableOpacity> + {recordingStarted && ( + <AnimatedCircularProgress + size={95} + width={6} + fill={100} + rotation={0} + duration={(MAX_VIDEO_RECORDING_DURATION + 1) * 1000} // an extra second for UI to load + tintColor={TAGG_PURPLE} + style={styles.bottomContainer} + lineCap={'round'} + /> + )} + <View style={styles.bottomRightContainer}> + <GalleryIcon + mostRecentPhotoUri={mostRecentPhoto} + callback={(media) => { + const filename = media.filename; + if ( + filename && + (filename.endsWith('gif') || filename.endsWith('GIF')) + ) { + showGIFFailureAlert(() => navigateToEditMedia(media.path)); + } else { + navigateToEditMedia(media.path); + } + }} + /> + </View> </View> - </View> + )} </View> ); }; |