Use updated bar, Use shared value progress

1 files changed, 24 insertions, 17 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index f18fec01..921f7693 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -14,8 +14,12 @@ import {
 } from 'react-native';
 // @ts-ignore
 import Pinchable from 'react-native-pinchable';
-import * as Progress from 'react-native-progress';
-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 Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
@@ -37,7 +41,7 @@ import {
 } from '../../utils';
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/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 {
@@ -89,7 +93,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   );
   const mediaHeight = SCREEN_WIDTH / aspectRatio;
   const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false);
-  const [videoProgress, setVideoProgress] = useState<number>(0);
+  const videoProgress = useSharedValue(0);
   /*
    * Load tags on initial render to pass tags data to moment header and content
    */
@@ -228,10 +232,16 @@ const MomentPost: React.FC<MomentPostProps> = ({
         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
@@ -359,14 +369,12 @@ const MomentPost: React.FC<MomentPostProps> = ({
                 {getTimePosted(moment.date_created)}
               </Text>
               {isVideo && (
-                <Progress.Bar
+                <GradientProgressBar
+                  style={styles.progressBar}
                   progress={videoProgress}
-                  width={SCREEN_WIDTH}
-                  color={'white'}
-                  borderRadius={0}
-                  borderWidth={0}
-                  height={3}
-                  unfilledColor={'rgba(255,255,255,0.4)'}
+                  toColor={'#fff'}
+                  fromColor={'#fff'}
+                  unfilledColor={'#808080'}
                 />
               )}
             </View>
@@ -481,10 +489,9 @@ 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',