Pause video, Add progressbar, Add pause icon

1 files changed, 84 insertions, 20 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 29b82cec..42caea34 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,
@@ -87,7 +91,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
    */
@@ -215,7 +220,13 @@ 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);
+          }
+        }}
       />
     </View>
   ) : (
@@ -228,6 +239,39 @@ const MomentPost: React.FC<MomentPostProps> = ({
     />
   );
 
+  const ProgressBar = () => (
+    <View
+      style={{
+        position: 'absolute',
+        top: isIPhoneX() ? 75 : 70,
+      }}>
+      <SimpleGradientProgressbarView
+        progress={videoProgress}
+        style={{
+          position: 'absolute',
+          top: 0,
+          width: SCREEN_WIDTH,
+          height: 5,
+        }}
+        fromColor={TAGG_PURPLE}
+        toColor={TAGG_LIGHT_BLUE_2}
+      />
+      <View
+        style={{
+          backgroundColor: '#fff',
+          width: 10,
+          height: 10,
+          borderRadius: 10,
+          borderWidth: 0.3,
+          borderColor: TAGG_PURPLE,
+          position: 'absolute',
+          top: -2.5,
+          left: videoProgress * SCREEN_WIDTH - 5,
+        }}
+      />
+    </View>
+  );
+
   return (
     <>
       <StatusBar barStyle={'light-content'} />
@@ -255,12 +299,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>
@@ -282,6 +332,17 @@ const MomentPost: React.FC<MomentPostProps> = ({
           )}
         </TouchableWithoutFeedback>
         <View style={styles.bottomContainer} pointerEvents={'box-none'}>
+          {isVideoPaused && (
+            <Animated.View
+              style={{
+                opacity: fadeValue,
+                position: 'absolute',
+                left: '40%',
+                top: '50%',
+              }}>
+              <PauseIcon width={100} height={100} />
+            </Animated.View>
+          )}
           <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
             keyboardVerticalOffset={-20}>
@@ -321,21 +382,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>
@@ -354,7 +418,7 @@ const styles = StyleSheet.create({
     color: 'white',
     fontWeight: '500',
     textAlign: 'right',
-    marginTop: 5,
+    marginTop: 18,
   },
   captionText: {
     position: 'relative',