diff options
| -rw-r--r-- | src/components/moments/MomentPost.tsx | 41 |
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', |