From c3d418bc7ad3c702ed52fa522c1225dc4816c092 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 16 Jul 2021 17:46:15 -0400 Subject: Refactor ZoomInCropper to be EditMedia --- src/screens/moments/CameraScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/screens/moments') diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 18e04261..cb5cd411 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -65,7 +65,7 @@ const CameraScreen: React.FC = ({route, navigation}) => { }, [mediaFromGallery]); const navigateToCropper = (uri: string) => { - navigation.navigate('ZoomInCropper', { + navigation.navigate('EditMedia', { screenType, media: { uri, -- cgit v1.2.3-70-g09d2 From af63a23020b64c9b20428ff14fc7a50c557b038c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 16 Jul 2021 17:54:09 -0400 Subject: Remove photo preview in camera screen --- src/screens/moments/CameraScreen.tsx | 150 +++++++++++------------------------ 1 file changed, 46 insertions(+), 104 deletions(-) (limited to 'src/screens/moments') diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index cb5cd411..3c28ca22 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -8,16 +8,10 @@ import {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, - SaveButton, - TaggSquareButton, -} from '../../components'; +import {FlashButton, FlipButton, GalleryIcon} from '../../components'; import {TAGG_PURPLE} from '../../constants'; import {MainStackParams} from '../../routes'; -import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils'; +import {HeaderHeight, SCREEN_WIDTH} from '../../utils'; import {showGIFFailureAlert, takePicture, takeVideo} from '../../utils/camera'; type CameraScreenRouteProps = RouteProp; @@ -35,9 +29,7 @@ const CameraScreen: React.FC = ({route, navigation}) => { const tabBarHeight = useBottomTabBarHeight(); const [cameraType, setCameraType] = useState('front'); const [flashMode, setFlashMode] = useState('off'); - const [mediaFromGallery, setMediaFromGallery] = useState(''); const [mostRecentPhoto, setMostRecentPhoto] = useState(''); - const [showSaveButton, setShowSaveButton] = useState(false); const [isRecording, setIsRecording] = useState(false); useFocusEffect( @@ -62,9 +54,9 @@ const CameraScreen: React.FC = ({route, navigation}) => { .catch((_err) => console.log('Unable to fetch preview photo for gallery'), ); - }, [mediaFromGallery]); + }, []); - const navigateToCropper = (uri: string) => { + const navigateToEditMedia = (uri: string) => { navigation.navigate('EditMedia', { screenType, media: { @@ -85,21 +77,11 @@ const CameraScreen: React.FC = ({route, navigation}) => { }); }; - /* - * If picture is not taken yet, exists from camera screen to profile view - * If picture is taken, exists from captured image's preview to camera - * */ const handleClose = () => { - if (showSaveButton) { - cameraRef.current?.resumePreview(); - setShowSaveButton(false); - setMediaFromGallery(''); - } else { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: true, - }); - navigation.goBack(); - } + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: true, + }); + navigation.goBack(); }; return ( @@ -118,42 +100,31 @@ const CameraScreen: React.FC = ({route, navigation}) => { }} /> - {showSaveButton ? ( - - ) : ( - - )} - {!showSaveButton ? ( - + { + takeVideo(cameraRef, (vid) => { + navigateToCaptionScreen(true, vid.uri); + }); + setIsRecording(true); + }} + onPressOut={async () => { + if (await cameraRef.current?.isRecording()) { + cameraRef.current?.stopRecording(); + setIsRecording(false); } - activeOpacity={1} - onLongPress={() => { - takeVideo(cameraRef, (vid) => { - navigateToCaptionScreen(true, vid.uri); - }); - setIsRecording(true); - }} - onPressOut={async () => { - if (await cameraRef.current?.isRecording()) { - cameraRef.current?.stopRecording(); - setIsRecording(false); - } - }} - onPress={() => { - takePicture(cameraRef, (pic) => { - setShowSaveButton(true); - setMediaFromGallery(pic.uri); - }); - }}> - - - ) : ( - - )} + }} + onPress={() => { + takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri)); + }}> + + {isRecording && ( = ({route, navigation}) => { /> )} - {mediaFromGallery ? ( - navigateToCaptionScreen(false, mediaFromGallery)} - title={'Next'} - buttonStyle={'large'} - buttonColor={'blue'} - labelColor={'white'} - style={styles.nextButton} - labelStyle={styles.nextButtonLabel} - /> - ) : ( - { - const filename = media.filename; - if ( - filename && - (filename.endsWith('gif') || filename.endsWith('GIF')) - ) { - showGIFFailureAlert(() => navigateToCropper(media.path)); - } else { - navigateToCropper(media.path); - } - }} - /> - )} + { + const filename = media.filename; + if ( + filename && + (filename.endsWith('gif') || filename.endsWith('GIF')) + ) { + showGIFFailureAlert(() => navigateToEditMedia(media.path)); + } else { + navigateToEditMedia(media.path); + } + }} + /> @@ -221,10 +180,6 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, - captureButtonPlaceholder: { - width: 93, - height: 93, - }, captureButtonContainer: { alignSelf: 'center', backgroundColor: 'transparent', @@ -262,19 +217,6 @@ const styles = StyleSheet.create({ alignItems: 'center', width: (SCREEN_WIDTH - 100) / 2, }, - nextButton: { - zIndex: 1, - width: normalize(100), - height: normalize(37), - borderRadius: 10, - }, - nextButtonLabel: { - fontWeight: '700', - fontSize: normalize(15), - lineHeight: normalize(17.8), - letterSpacing: normalize(1.3), - textAlign: 'center', - }, }); export default CameraScreen; -- cgit v1.2.3-70-g09d2 From bd6a926099b57cc2f9cda95a344ee65e7e693f24 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 16 Jul 2021 18:40:42 -0400 Subject: Clean up media.isVideo --- src/screens/moments/CameraScreen.tsx | 9 +++- src/screens/upload/EditMedia.tsx | 87 ++++++++++++++++-------------------- 2 files changed, 46 insertions(+), 50 deletions(-) (limited to 'src/screens/moments') diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 3c28ca22..33ee2347 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -61,7 +61,14 @@ const CameraScreen: React.FC = ({route, navigation}) => { screenType, media: { uri, - isVideo: false, + isVideo: !( + uri.endsWith('jpg') || + uri.endsWith('JPG') || + uri.endsWith('PNG') || + uri.endsWith('png') || + uri.endsWith('GIF') || + uri.endsWith('gif') + ), }, selectedCategory, }); diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx index 0f1062cf..92b93888 100644 --- a/src/screens/upload/EditMedia.tsx +++ b/src/screens/upload/EditMedia.tsx @@ -62,20 +62,9 @@ export const EditMedia: React.FC = ({route, navigation}) => { start: 0, }); - const checkIfUriImage = (uri: string) => { - return ( - uri.endsWith('jpg') || - uri.endsWith('JPG') || - uri.endsWith('PNG') || - uri.endsWith('png') || - uri.endsWith('GIF') || - uri.endsWith('gif') - ); - }; - // Setting original aspect ratio of image useEffect(() => { - if (media.uri && checkIfUriImage(media.uri)) { + if (media.uri && !media.isVideo) { Image.getSize( media.uri, (w, h) => { @@ -83,7 +72,7 @@ export const EditMedia: React.FC = ({route, navigation}) => { }, (err) => console.log(err), ); - } else if (media.uri && !checkIfUriImage(media.uri)) { + } else if (media.uri && media.isVideo) { setVideoCrop((prevState) => ({ ...prevState, cropWidth: origDimensions[0], @@ -94,7 +83,7 @@ export const EditMedia: React.FC = ({route, navigation}) => { // Possible need to delay setting aspect ratio of video until loaded useEffect(() => { - if (media.uri && !checkIfUriImage(media.uri)) { + if (media.uri && media.isVideo) { setVideoCrop((prevState) => ({ ...prevState, cropWidth: origDimensions[0], @@ -105,7 +94,7 @@ export const EditMedia: React.FC = ({route, navigation}) => { // Crops original image based of (x0, y0) and (x1, y1) coordinates const processVideo = (callback: (finalUri: string) => void) => { - if (checkIfUriImage(media.uri)) { + if (!media.isVideo) { if ( x0 !== undefined && x1 !== undefined && @@ -119,13 +108,8 @@ export const EditMedia: React.FC = ({route, navigation}) => { height: Math.abs(y0 - y1), }) .then((croppedURL) => { - navigation.navigate('CaptionScreen', { - screenType, - media: { - uri: croppedURL, - isVideo: false, - }, - }); + // Pass the cropped image + callback(croppedURL); }) .catch((err) => console.log('err: ', err)); } else if ( @@ -134,10 +118,8 @@ export const EditMedia: React.FC = ({route, navigation}) => { y0 === undefined && y1 === undefined ) { - navigation.navigate('CaptionScreen', { - screenType, - media, - }); + // If no crop coordinates are set, then we will just pass the original image + callback(media.uri); } } else { if (!videoCrop.cropHeight || !videoCrop.cropWidth) { @@ -155,6 +137,7 @@ export const EditMedia: React.FC = ({route, navigation}) => { trimmedURL, (croppedURL: string) => { setCropLoading(false); + // Pass the trimmed/cropped video callback(croppedURL); }, videoCrop, @@ -272,7 +255,7 @@ export const EditMedia: React.FC = ({route, navigation}) => { onPress={() => navigation.goBack()}> - {checkIfUriImage(media.uri) ? ( + {!media.isVideo ? ( = ({route, navigation}) => { )} - {!checkIfUriImage(media.uri) && ( + {media.isVideo && ( = ({route, navigation}) => { )} - processVideo(saveImageToGallery)} /> - - processVideo((uri) => - navigation.navigate('CaptionScreen', { - screenType, - media: { - uri: uri, - isVideo: true, - }, - selectedCategory, - }), - ) - } - title={'Next'} - buttonStyle={'normal'} - buttonColor={'blue'} - labelColor={'white'} - style={styles.button} - labelStyle={styles.buttonLabel} - /> + + processVideo(saveImageToGallery)} /> + + processVideo((uri) => + navigation.navigate('CaptionScreen', { + screenType, + media: { + uri: uri, + isVideo: media.isVideo, + }, + selectedCategory, + }), + ) + } + title={'Next'} + buttonStyle={'normal'} + buttonColor={'blue'} + labelColor={'white'} + style={styles.button} + labelStyle={styles.buttonLabel} + /> + ); }; @@ -447,6 +432,10 @@ const styles = StyleSheet.create({ width: 25, height: 25, }, + bottomContainer: { + width: SCREEN_WIDTH * 0.7, + justifyContent: 'space-between', + }, }); export default EditMedia; -- cgit v1.2.3-70-g09d2