Pull from master

1 files changed, 57 insertions, 74 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index c232986d..939c0cf6 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,4 +1,4 @@
-import {useNavigation} from '@react-navigation/native';
+import {useIsFocused, useNavigation} from '@react-navigation/native';
 import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
   Image,
@@ -14,15 +14,18 @@ import {
 } from 'react-native';
 // @ts-ignore
 import Pinchable from 'react-native-pinchable';
-import Animated, {EasingNode} from 'react-native-reanimated';
+import Animated, {
+  Easing,
+  EasingNode,
+  useSharedValue,
+  withTiming,
+} 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 {headerBarOptions, multilineHeaderTitle} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {deleteMomentTag, loadMomentTags} from '../../services';
 import {loadUserMoments} from '../../store/actions';
@@ -30,18 +33,15 @@ import {RootState} from '../../store/rootReducer';
 import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
 import {
   getTimePosted,
-  isIPhoneX,
   navigateToProfile,
   normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
-import {AddComment} from '../comments';
 import CommentsCount from '../comments/CommentsCount';
-import {MomentTags} from '../common';
+import {GradientProgressBar, MomentTags} from '../common';
 import {MomentMoreInfoDrawer, TaggAvatar} from '../profile';
-import IndividualMomentTitleBar from './IndividualMomentTitleBar';
 interface MomentPostProps {
   moment: MomentPostType;
   userXId: string | undefined;
@@ -75,9 +75,6 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
   );
-  const [commentCount, setCommentCount] = useState<number>(
-    moment.comments_count,
-  );
   const [aspectRatio, setAspectRatio] = useState<number>(1);
   const [momentTagId, setMomentTagId] = useState<string>('');
 
@@ -94,7 +91,14 @@ const MomentPost: React.FC<MomentPostProps> = ({
   );
   const mediaHeight = SCREEN_WIDTH / aspectRatio;
   const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false);
-  const [videoProgress, setVideoProgress] = useState<number>(0);
+  const screenIsFocused = useIsFocused();
+  const videoProgress = useSharedValue(0);
+
+  // update play/pause icon based on video pause state
+  useEffect(() => {
+    setFadeValue(new Animated.Value(isVideoPaused ? 1 : 0));
+  }, [isVideoPaused]);
+
   /*
    * Load tags on initial render to pass tags data to moment header and content
    */
@@ -132,16 +136,18 @@ const MomentPost: React.FC<MomentPostProps> = ({
     }
   };
 
-  useEffect(
-    () =>
+  useEffect(() => {
+    if (moment.moment_category.length > 20) {
       navigation.setOptions({
         ...headerBarOptions('white', ''),
-        headerTitle: () => (
-          <IndividualMomentTitleBar title={moment.moment_category} />
-        ),
-      }),
-    [moment.moment_id],
-  );
+        ...multilineHeaderTitle(moment.moment_category),
+      });
+    } else {
+      navigation.setOptions({
+        ...headerBarOptions('white', moment.moment_category),
+      });
+    }
+  }, [moment.moment_id]);
 
   /*
    *  Determines if an image is 9:16 to set aspect ratio of current image and
@@ -229,14 +235,24 @@ const MomentPost: React.FC<MomentPostProps> = ({
           const {width, height} = response.naturalSize;
           setAspectRatio(width / height);
         }}
-        paused={moment.moment_id !== currentVisibleMomentId || isVideoPaused}
+        paused={
+          moment.moment_id !== currentVisibleMomentId ||
+          isVideoPaused ||
+          !screenIsFocused
+        }
         onProgress={({currentTime, seekableDuration}) => {
           const localProgress = currentTime / seekableDuration;
           if (!isNaN(localProgress)) {
-            setVideoProgress(localProgress);
+            videoProgress.value = withTiming(localProgress, {
+              duration: 250,
+              easing: Easing.linear,
+            });
           }
         }}
-        onEnd={updateMomentViewCount}
+        onEnd={() => {
+          updateMomentViewCount();
+          videoProgress.value = 0;
+        }}
       />
       {isVideoPaused && (
         <Animated.View
@@ -260,20 +276,6 @@ 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'} />
@@ -303,9 +305,6 @@ const MomentPost: React.FC<MomentPostProps> = ({
           onPress={() => {
             if (isVideo) {
               setIsVideoPaused(!isVideoPaused);
-              isVideoPaused
-                ? setFadeValue(new Animated.Value(0))
-                : setFadeValue(new Animated.Value(1));
             } else {
               setTagsVisible(!tagsVisible);
               setFadeValue(new Animated.Value(0));
@@ -353,7 +352,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
             <View style={styles.commentsCountContainer}>
               <CommentsCount
                 momentId={moment.moment_id}
-                count={commentCount}
+                count={moment.comments_count}
                 screenType={screenType}
               />
             </View>
@@ -374,22 +373,18 @@ const MomentPost: React.FC<MomentPostProps> = ({
                   ),
               })}
             <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>
+              {isVideo && (
+                <GradientProgressBar
+                  style={styles.progressBar}
+                  progress={videoProgress}
+                  toColor={'#fff'}
+                  fromColor={'#fff'}
+                  unfilledColor={'#808080'}
+                />
+              )}
             </View>
           </KeyboardAvoidingView>
         </View>
@@ -409,7 +404,8 @@ const styles = StyleSheet.create({
     color: 'white',
     fontWeight: '500',
     textAlign: 'right',
-    marginTop: 18,
+    marginTop: 10,
+    marginBottom: 10,
   },
   captionText: {
     position: 'relative',
@@ -501,26 +497,13 @@ const styles = StyleSheet.create({
     top: '40%',
   },
   progressBar: {
-    position: 'absolute',
-    top: 0,
-    width: SCREEN_WIDTH,
-    height: 5,
+    width: SCREEN_WIDTH * 0.99,
+    height: 3,
+    marginHorizontal: 2,
   },
-  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%',
   },
-  profilePreviewContainer: {paddingHorizontal: '3%'},
 });
 
 export default MomentPost;