Merge pull request #468 from grusuTagg/tma926-video-upload

[TMA-926] Video Upload

1 files changed, 51 insertions, 1 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index cde5b2e0..34b2c7ea 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -7,11 +7,15 @@ import ImagePicker from 'react-native-image-crop-picker';
 import LinearGradient from 'react-native-linear-gradient';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
 import DownIcon from '../../assets/icons/down_icon.svg';
-import PlusIcon from '../../assets/icons/plus-icon.svg';
 import BigPlusIcon from '../../assets/icons/plus-icon-white.svg';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
 import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_UPLOAD} from '../../constants/strings';
+import {
+  handlePresignedURL,
+  handleVideoUpload,
+} from '../../services/MomentService';
 import {MomentType, ScreenType} from '../../types';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 import MomentTile from './MomentTile';
@@ -42,6 +46,45 @@ const Moment: React.FC<MomentProps> = ({
   externalStyles,
 }) => {
   const navigation = useNavigation();
+  /**
+   * This function opens the ImagePicker, only lets you select video files,
+   * formats the file extension, then makes a call to the server to get the presigned URL,
+   * after which it makes a POST request to the returned URL to upload the file directly to S3.
+   * params: none
+   * @returns: none
+   */
+  const navigateToVideoPicker = () => {
+    ImagePicker.openPicker({
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
+      width: 580,
+      height: 580,
+      cropping: false,
+      cropperToolbarTitle: 'select a video',
+      mediaType: 'video',
+    })
+      .then(async (vid) => {
+        if ('path' in vid) {
+          let fileName = vid.filename || '';
+          if (fileName.endsWith('.heic') || fileName.endsWith('.HEIC')) {
+            fileName = fileName.split('.')[0] + '.jpg';
+          }
+          let presignedURL = await handlePresignedURL(fileName, title);
+          console.log('presigned' + JSON.stringify(presignedURL));
+          handleVideoUpload(vid, presignedURL);
+        }
+      })
+      .catch((err) => {
+        if (err.code && err.code !== 'E_PICKER_CANCELLED') {
+          Alert.alert(ERROR_UPLOAD);
+        }
+      });
+  };
 
   const navigateToImagePicker = () => {
     ImagePicker.openPicker({
@@ -110,6 +153,13 @@ const Moment: React.FC<MomentProps> = ({
               <PlusIcon
                 width={23}
                 height={23}
+                onPress={() => navigateToVideoPicker()}
+                color={'black'}
+                style={styles.horizontalMargin}
+              />
+              <PlusIcon
+                width={23}
+                height={23}
                 onPress={() => navigateToImagePicker()}
                 color={TAGG_LIGHT_BLUE}
                 style={styles.horizontalMargin}