Add save button

2 files changed, 20 insertions, 19 deletions

diff --git a/src/components/camera/SaveButton.tsx b/src/components/camera/SaveButton.tsx
index 0e220497..104e7c30 100644
--- a/src/components/camera/SaveButton.tsx
+++ b/src/components/camera/SaveButton.tsx
@@ -1,23 +1,18 @@
 import React from 'react';
 import {Text, TouchableOpacity} from 'react-native';
 import SaveIcon from '../../assets/icons/camera/save.svg';
-import {saveImageToGallery} from '../../utils/camera';
 import {styles} from './styles';
 
 interface SaveButtonProps {
-  capturedImageURI: string;
+  onPress: () => void;
 }
 
 /*
  * Appears when a picture has been taken,
  * On click, saves the captured image to "Recents" album on device gallery
  */
-export const SaveButton: React.FC<SaveButtonProps> = ({capturedImageURI}) => (
-  <TouchableOpacity
-    onPress={() => {
-      saveImageToGallery(capturedImageURI);
-    }}
-    style={styles.saveButton}>
+export const SaveButton: React.FC<SaveButtonProps> = ({onPress}) => (
+  <TouchableOpacity onPress={onPress} style={styles.saveButton}>
     <SaveIcon width={40} height={40} />
     <Text style={styles.saveButtonLabel}>Save</Text>
   </TouchableOpacity>
diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx
index 0494375c..0f1062cf 100644
--- a/src/screens/upload/EditMedia.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -7,13 +7,14 @@ import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
 import PhotoManipulator from 'react-native-photo-manipulator';
 import TrimIcon from '../../assets/icons/trim.svg';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
-import {TrimmerPlayer} from '../../components';
+import {SaveButton, TrimmerPlayer} from '../../components';
 import {TaggLoadingIndicator, TaggSquareButton} from '../../components/common';
 import {MainStackParams} from '../../routes';
 import {
   cropVideo,
   HeaderHeight,
   normalize,
+  saveImageToGallery,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
   trimVideo,
@@ -103,7 +104,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
   }, [origDimensions]);
 
   // Crops original image based of (x0, y0) and (x1, y1) coordinates
-  const handleNext = () => {
+  const processVideo = (callback: (finalUri: string) => void) => {
     if (checkIfUriImage(media.uri)) {
       if (
         x0 !== undefined &&
@@ -154,14 +155,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
             trimmedURL,
             (croppedURL: string) => {
               setCropLoading(false);
-              navigation.navigate('CaptionScreen', {
-                screenType,
-                media: {
-                  uri: croppedURL,
-                  isVideo: true,
-                },
-                selectedCategory,
-              });
+              callback(croppedURL);
             },
             videoCrop,
           ),
@@ -362,8 +356,20 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           </TouchableOpacity>
         </View>
       )}
+      <SaveButton onPress={() => processVideo(saveImageToGallery)} />
       <TaggSquareButton
-        onPress={handleNext}
+        onPress={() =>
+          processVideo((uri) =>
+            navigation.navigate('CaptionScreen', {
+              screenType,
+              media: {
+                uri: uri,
+                isVideo: true,
+              },
+              selectedCategory,
+            }),
+          )
+        }
         title={'Next'}
         buttonStyle={'normal'}
         buttonColor={'blue'}