1 files changed, 90 insertions, 20 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 0504052b..c232986d 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -16,9 +16,12 @@ import {
 import Pinchable from 'react-native-pinchable';
 import Animated, {EasingNode} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
+import SimpleGradientProgressbarView from 'react-native-simple-gradient-progressbar-view';
 import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TaggedUsersDrawer} from '.';
+import PauseIcon from '../../assets/icons/pause-icon.svg';
+import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants/constants';
 import {headerBarOptions} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {deleteMomentTag, loadMomentTags} from '../../services';
@@ -27,6 +30,7 @@ import {RootState} from '../../store/rootReducer';
 import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
 import {
   getTimePosted,
+  isIPhoneX,
   navigateToProfile,
   normalize,
   SCREEN_HEIGHT,
@@ -89,7 +93,8 @@ const MomentPost: React.FC<MomentPostProps> = ({
     moment.moment_url.endsWith('gif')
   );
   const mediaHeight = SCREEN_WIDTH / aspectRatio;
-
+  const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false);
+  const [videoProgress, setVideoProgress] = useState<number>(0);
   /*
    * Load tags on initial render to pass tags data to moment header and content
    */
@@ -224,9 +229,26 @@ const MomentPost: React.FC<MomentPostProps> = ({
           const {width, height} = response.naturalSize;
           setAspectRatio(width / height);
         }}
-        paused={moment.moment_id !== currentVisibleMomentId}
+        paused={moment.moment_id !== currentVisibleMomentId || isVideoPaused}
+        onProgress={({currentTime, seekableDuration}) => {
+          const localProgress = currentTime / seekableDuration;
+          if (!isNaN(localProgress)) {
+            setVideoProgress(localProgress);
+          }
+        }}
         onEnd={updateMomentViewCount}
       />
+      {isVideoPaused && (
+        <Animated.View
+          style={[
+            styles.pauseContainer,
+            {
+              opacity: fadeValue,
+            },
+          ]}>
+          <PauseIcon width={100} height={100} />
+        </Animated.View>
+      )}
     </View>
   ) : (
     <Image
@@ -238,6 +260,20 @@ const MomentPost: React.FC<MomentPostProps> = ({
     />
   );
 
+  const ProgressBar = () => (
+    <View style={styles.progressBaContainer}>
+      <SimpleGradientProgressbarView
+        progress={videoProgress}
+        style={styles.progressBar}
+        fromColor={TAGG_PURPLE}
+        toColor={TAGG_LIGHT_BLUE_2}
+      />
+      <View
+        style={[styles.progressDot, {left: videoProgress * SCREEN_WIDTH - 5}]}
+      />
+    </View>
+  );
+
   return (
     <>
       <StatusBar barStyle={'light-content'} />
@@ -265,12 +301,18 @@ const MomentPost: React.FC<MomentPostProps> = ({
       <View style={styles.background}>
         <TouchableWithoutFeedback
           onPress={() => {
-            if (keyboardVisible) {
-              Keyboard.dismiss();
+            if (isVideo) {
+              setIsVideoPaused(!isVideoPaused);
+              isVideoPaused
+                ? setFadeValue(new Animated.Value(0))
+                : setFadeValue(new Animated.Value(1));
             } else {
               setTagsVisible(!tagsVisible);
               setFadeValue(new Animated.Value(0));
             }
+            if (keyboardVisible) {
+              Keyboard.dismiss();
+            }
           }}>
           {isVideo ? (
             <View style={styles.mediaContainer}>{momentMedia}</View>
@@ -331,21 +373,24 @@ const MomentPost: React.FC<MomentPostProps> = ({
                     userLocal,
                   ),
               })}
-            <AddComment
-              placeholderText={'Add a comment here!'}
-              momentId={moment.moment_id}
-              callback={() => {
-                setCommentCount(commentCount + 1);
-              }}
-              onFocus={() => {
-                setHideText(true);
-              }}
-              isKeyboardAvoiding={false}
-              theme={'dark'}
-            />
-            <Text style={styles.text}>
-              {getTimePosted(moment.date_created)}
-            </Text>
+            <View>
+              <AddComment
+                placeholderText={'Add a comment here!'}
+                momentId={moment.moment_id}
+                callback={() => {
+                  setCommentCount(commentCount + 1);
+                }}
+                onFocus={() => {
+                  setHideText(true);
+                }}
+                isKeyboardAvoiding={false}
+                theme={'dark'}
+              />
+              {isVideo && <ProgressBar />}
+              <Text style={styles.text}>
+                {getTimePosted(moment.date_created)}
+              </Text>
+            </View>
           </KeyboardAvoidingView>
         </View>
       </View>
@@ -364,7 +409,7 @@ const styles = StyleSheet.create({
     color: 'white',
     fontWeight: '500',
     textAlign: 'right',
-    marginTop: 5,
+    marginTop: 18,
   },
   captionText: {
     position: 'relative',
@@ -450,6 +495,31 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT,
   },
+  pauseContainer: {
+    position: 'absolute',
+    left: '40%',
+    top: '40%',
+  },
+  progressBar: {
+    position: 'absolute',
+    top: 0,
+    width: SCREEN_WIDTH,
+    height: 5,
+  },
+  progressDot: {
+    backgroundColor: '#fff',
+    width: 10,
+    height: 10,
+    borderRadius: 10,
+    borderWidth: 0.3,
+    borderColor: TAGG_PURPLE,
+    position: 'absolute',
+    top: -2.5,
+  },
+  progressBaContainer: {
+    position: 'absolute',
+    top: isIPhoneX() ? 75 : 70,
+  },
   profilePreviewContainer: {paddingHorizontal: '3%'},
 });