Merge branch 'master' into tma936-pause-video

1 files changed, 37 insertions, 16 deletions

diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx
index f8e7692d..338634b8 100644
--- a/src/screens/upload/EditMedia.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -2,14 +2,24 @@ import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/R
 import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {
+  Alert,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
 import PhotoManipulator from 'react-native-photo-manipulator';
+import {useSelector} from 'react-redux';
 import TrimIcon from '../../assets/icons/trim.svg';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {SaveButton, TrimmerPlayer} from '../../components';
 import {TaggLoadingIndicator, TaggSquareButton} from '../../components/common';
+import {ERROR_MOMENT_UPLOAD_IN_PROGRESS} from '../../constants/strings';
 import {MainStackParams} from '../../routes';
+import {RootState} from '../../store/rootReducer';
 import {
   cropVideo,
   HeaderHeight,
@@ -36,6 +46,9 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
     selectedCategory,
     media: {isVideo},
   } = route.params;
+  const {momentUploadProgressBar} = useSelector(
+    (state: RootState) => state.user,
+  );
   const [aspectRatio, setAspectRatio] = useState<number>(1);
   // width and height of video, if video
   const [origDimensions, setOrigDimensions] = useState<number[]>([0, 0]);
@@ -43,6 +56,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
   const vidRef = useRef<View>(null);
   const [cropLoading, setCropLoading] = useState<boolean>(false);
   const [hideTrimmer, setHideTrimmer] = useState<boolean>(true);
+  const [videoDuration, setVideoDuration] = useState<number | undefined>();
 
   // Stores the coordinates of the cropped image
   const [x0, setX0] = useState<number>();
@@ -142,7 +156,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
         mediaUri,
         (croppedURL: string) => {
           setCropLoading(false);
-          // Pass the trimmed/cropped video
+          // Pass the cropped video
           callback(croppedURL);
         },
         videoCrop,
@@ -251,6 +265,24 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
     );
   };
 
+  const handleNext = () => {
+    if (momentUploadProgressBar) {
+      Alert.alert(ERROR_MOMENT_UPLOAD_IN_PROGRESS);
+    } else {
+      processVideo((uri) =>
+        navigation.navigate('CaptionScreen', {
+          screenType,
+          media: {
+            uri,
+            isVideo,
+            videoDuration,
+          },
+          selectedCategory,
+        }),
+      );
+    }
+  };
+
   return (
     <View style={styles.container}>
       {cropLoading && <TaggLoadingIndicator fullscreen />}
@@ -338,8 +370,8 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
                   height: SCREEN_WIDTH / aspectRatio,
                 },
               ]}
-              handleLoad={(response: {width: number; height: number}) => {
-                const {width, height} = response;
+              handleLoad={(width: number, height: number, duration: number) => {
+                setVideoDuration(duration);
                 setOrigDimensions([width, height]);
                 setAspectRatio(width / height);
               }}
@@ -386,18 +418,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           />
           <TaggSquareButton
             style={styles.button}
-            onPress={() =>
-              processVideo((uri) =>
-                navigation.navigate('CaptionScreen', {
-                  screenType,
-                  media: {
-                    uri: uri,
-                    isVideo: isVideo,
-                  },
-                  selectedCategory,
-                }),
-              )
-            }
+            onPress={handleNext}
             title={'Next'}
             buttonStyle={'large'}
             buttonColor={'blue'}