Merge pull request #472 from TaggiD-Inc/poc-video

[POC] PoC Video

1 files changed, 46 insertions, 6 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 9449271b..1e1cadce 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,6 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
@@ -12,6 +12,8 @@ import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {MomentType, ScreenType} from '../../types';
 import {normalize, SCREEN_WIDTH} from '../../utils';
+import {navigateToVideoPicker} from '../../utils/camera';
+import ImagePicker from 'react-native-image-crop-picker';
 import MomentTile from './MomentTile';
 
 interface MomentProps {
@@ -41,6 +43,17 @@ const Moment: React.FC<MomentProps> = ({
 }) => {
   const navigation = useNavigation();
 
+  const navigateToCaptionScreenForVideo = (uri: string) => {
+    navigation.navigate('CaptionScreen', {
+      screenType,
+      title,
+      media: {
+        uri,
+        isVideo: true,
+      },
+    });
+  };
+
   const navigateToCameraScreen = () => {
     navigation.navigate('CameraScreen', {
       title,
@@ -84,7 +97,37 @@ const Moment: React.FC<MomentProps> = ({
               <PlusIcon
                 width={23}
                 height={23}
-                onPress={() => navigateToCameraScreen()}
+                onPress={() =>
+                  Alert.alert('Video Upload', 'pick one', [
+                    {
+                      text: 'gallery',
+                      onPress: () =>
+                        navigateToVideoPicker((vid) =>
+                          navigateToCaptionScreenForVideo(vid.path),
+                        ),
+                    },
+                    {
+                      text: 'camera (simulator will not work)',
+                      onPress: () =>
+                        ImagePicker.openCamera({
+                          mediaType: 'video',
+                        })
+                          .then((vid) => {
+                            if (vid.path) {
+                              navigateToCaptionScreenForVideo(vid.path);
+                            }
+                          })
+                          .catch((err) => console.error(err)),
+                    },
+                  ])
+                }
+                color={'black'}
+                style={styles.horizontalMargin}
+              />
+              <PlusIcon
+                width={23}
+                height={23}
+                onPress={navigateToCameraScreen}
                 color={TAGG_LIGHT_BLUE}
                 style={styles.horizontalMargin}
               />
@@ -114,7 +157,7 @@ const Moment: React.FC<MomentProps> = ({
             />
           ))}
         {(images === undefined || images.length === 0) && !userXId && (
-          <TouchableOpacity onPress={() => navigateToCameraScreen()}>
+          <TouchableOpacity onPress={navigateToCameraScreen}>
             <LinearGradient
               colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
               <View style={styles.defaultImage}>
@@ -150,9 +193,6 @@ const styles = StyleSheet.create({
     color: TAGG_LIGHT_BLUE,
     maxWidth: '70%',
   },
-  flexer: {
-    flex: 1,
-  },
   scrollContainer: {
     height: SCREEN_WIDTH / 3.25,
     backgroundColor: '#eee',