Clean up media.isVideo

2 files changed, 46 insertions, 50 deletions

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<CameraScreenProps> = ({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<EditMediaProps> = ({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<EditMediaProps> = ({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<EditMediaProps> = ({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<EditMediaProps> = ({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<EditMediaProps> = ({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<EditMediaProps> = ({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<EditMediaProps> = ({route, navigation}) => {
             trimmedURL,
             (croppedURL: string) => {
               setCropLoading(false);
+              // Pass the trimmed/cropped video
               callback(croppedURL);
             },
             videoCrop,
@@ -272,7 +255,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
         onPress={() => navigation.goBack()}>
         <CloseIcon height={25} width={25} color={'white'} />
       </TouchableOpacity>
-      {checkIfUriImage(media.uri) ? (
+      {!media.isVideo ? (
         <ImageZoom
           style={styles.zoomView}
           cropWidth={SCREEN_WIDTH}
@@ -336,7 +319,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           </View>
         </ReactNativeZoomableView>
       )}
-      {!checkIfUriImage(media.uri) && (
+      {media.isVideo && (
         <View style={styles.iconCarrier}>
           <TouchableOpacity
             style={styles.iconContainer}
@@ -356,27 +339,29 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           </TouchableOpacity>
         </View>
       )}
-      <SaveButton onPress={() => processVideo(saveImageToGallery)} />
-      <TaggSquareButton
-        onPress={() =>
-          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}
-      />
+      <View style={styles.bottomContainer}>
+        <SaveButton onPress={() => processVideo(saveImageToGallery)} />
+        <TaggSquareButton
+          onPress={() =>
+            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}
+        />
+      </View>
     </View>
   );
 };
@@ -447,6 +432,10 @@ const styles = StyleSheet.create({
     width: 25,
     height: 25,
   },
+  bottomContainer: {
+    width: SCREEN_WIDTH * 0.7,
+    justifyContent: 'space-between',
+  },
 });
 
 export default EditMedia;