Pull from master

6 files changed, 90 insertions, 139 deletions

diff --git a/src/components/common/GradientProgressBar.tsx b/src/components/common/GradientProgressBar.tsx
index fc62bd3c..066295d0 100644
--- a/src/components/common/GradientProgressBar.tsx
+++ b/src/components/common/GradientProgressBar.tsx
@@ -2,20 +2,21 @@ import React, {FC} from 'react';
 import {StyleSheet, ViewProps, ViewStyle} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated, {useAnimatedStyle} from 'react-native-reanimated';
-import {
-  TAGG_LIGHT_BLUE_2,
-  TAGG_LIGHT_BLUE_3,
-  TAGG_PURPLE,
-} from '../../constants';
 import {normalize} from '../../utils';
 
 interface GradientProgressBarProps extends ViewProps {
   progress: Animated.SharedValue<number>;
+  toColor: string;
+  fromColor: string;
+  unfilledColor: string;
 }
 
 const GradientProgressBar: FC<GradientProgressBarProps> = ({
   style,
   progress,
+  toColor,
+  fromColor,
+  unfilledColor,
 }) => {
   const animatedProgressStyle = useAnimatedStyle<ViewStyle>(() => ({
     width: `${(1 - progress.value) * 100}%`,
@@ -24,8 +25,16 @@ const GradientProgressBar: FC<GradientProgressBarProps> = ({
     <LinearGradient
       style={[styles.bar, style]}
       useAngle={true}
-      colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}>
-      <Animated.View style={[styles.blank, animatedProgressStyle]} />
+      colors={[fromColor, toColor]}>
+      <Animated.View
+        style={[
+          styles.blank,
+          animatedProgressStyle,
+          {
+            backgroundColor: unfilledColor,
+          },
+        ]}
+      />
     </LinearGradient>
   );
 };
@@ -36,12 +45,12 @@ const styles = StyleSheet.create({
   bar: {
     height: normalize(10),
     borderRadius: 6.5,
+    opacity: 1,
   },
   blank: {
     alignSelf: 'flex-end',
     height: normalize(10),
     width: '80%',
-    backgroundColor: TAGG_LIGHT_BLUE_3,
   },
 });
 
diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
deleted file mode 100644
index c6bf1423..00000000
--- a/src/components/moments/IndividualMomentTitleBar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import {StyleSheet, Text, View, ViewProps} from 'react-native';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-
-interface IndividualMomentTitleBarProps extends ViewProps {
-  title: string;
-}
-const IndividualMomentTitleBar: React.FC<IndividualMomentTitleBarProps> = ({
-  title,
-}) => {
-  return (
-    <View style={styles.mainContainer}>
-      <View style={styles.titleContainer}>
-        <Text
-          style={[
-            styles.title,
-            {
-              fontSize: title.length > 18 ? normalize(14) : normalize(16),
-            },
-          ]}>
-          {title}
-        </Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  title: {
-    textAlign: 'center',
-    color: 'white',
-    fontSize: normalize(18),
-    fontWeight: '700',
-    lineHeight: normalize(21.48),
-    letterSpacing: normalize(1.3),
-  },
-  titleContainer: {
-    width: '80%',
-    position: 'absolute',
-    left: '10%',
-    right: '10%',
-    height: normalize(70),
-  },
-  mainContainer: {
-    flex: 1,
-    width: SCREEN_WIDTH * 0.6,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    marginVertical: '2%',
-  },
-});
-
-export default IndividualMomentTitleBar;
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;
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index d56a8337..96f9fa27 100644
--- a/src/components/moments/MomentUploadProgressBar.tsx
+++ b/src/components/moments/MomentUploadProgressBar.tsx
@@ -8,6 +8,11 @@ import {
   withTiming,
 } from 'react-native-reanimated';
 import {useDispatch, useSelector} from 'react-redux';
+import {
+  TAGG_LIGHT_BLUE_2,
+  TAGG_LIGHT_BLUE_3,
+  TAGG_PURPLE,
+} from '../../constants';
 import {checkMomentDoneProcessing} from '../../services';
 import {loadUserMoments} from '../../store/actions';
 import {setMomentUploadProgressBar} from '../../store/reducers';
@@ -51,7 +56,6 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
           });
           // change status to Done 1s after the progress bar animation is done
           setTimeout(() => {
-            dispatch(loadUserMoments(loggedInUserId));
             dispatch({
               type: setMomentUploadProgressBar.type,
               payload: {
@@ -110,6 +114,9 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
     }, [momentUploadProgressBar?.status]);
 
     useEffect(() => {
+      if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) {
+        dispatch(loadUserMoments(loggedInUserId));
+      }
       if (
         momentUploadProgressBar?.status === MomentUploadStatusType.Done ||
         momentUploadProgressBar?.status === MomentUploadStatusType.Error
@@ -143,7 +150,13 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
           {showLoading && (
             <>
               <Text style={styles.text}>Uploading Moment...</Text>
-              <GradientProgressBar style={styles.bar} progress={progress} />
+              <GradientProgressBar
+                style={styles.bar}
+                progress={progress}
+                toColor={TAGG_LIGHT_BLUE_2}
+                fromColor={TAGG_PURPLE}
+                unfilledColor={TAGG_LIGHT_BLUE_3}
+              />
             </>
           )}
           {momentUploadProgressBar.status === MomentUploadStatusType.Done && (
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index 3f33ec53..4c1c509e 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -1,4 +1,3 @@
-export {default as IndividualMomentTitleBar} from './IndividualMomentTitleBar';
 export {default as CaptionScreenHeader} from './CaptionScreenHeader';
 export {default as Moment} from './Moment';
 export {default as TagFriendsFooter} from './TagFriendsFoooter';
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 9edd890d..df692a3f 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -136,7 +136,7 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
       onScroll={scrollHandler}
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={1}
-      stickyHeaderIndices={[4]}
+      stickyHeaderIndices={[5]}
       scrollEnabled={scrollEnabled}
       refreshControl={
         <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />