aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/GradientProgressBar.tsx25
-rw-r--r--src/components/moments/MomentPost.tsx81
-rw-r--r--src/components/moments/MomentUploadProgressBar.tsx13
3 files changed, 61 insertions, 58 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/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index c232986d..921f7693 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -14,14 +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 {TAGG_PURPLE} from '../../constants/constants';
import {headerBarOptions} from '../../routes';
import {MomentContext} from '../../screens/profile/IndividualMoment';
import {deleteMomentTag, loadMomentTags} from '../../services';
@@ -30,16 +34,14 @@ 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 {
@@ -75,9 +77,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 +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
*/
@@ -233,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
@@ -260,20 +265,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'} />
@@ -353,7 +344,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 +365,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 +396,8 @@ const styles = StyleSheet.create({
color: 'white',
fontWeight: '500',
textAlign: 'right',
- marginTop: 18,
+ marginTop: 10,
+ marginBottom: 10,
},
captionText: {
position: 'relative',
@@ -501,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',
@@ -516,10 +503,6 @@ const styles = StyleSheet.create({
position: 'absolute',
top: -2.5,
},
- progressBaContainer: {
- position: 'absolute',
- top: isIPhoneX() ? 75 : 70,
- },
profilePreviewContainer: {paddingHorizontal: '3%'},
});
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index 65b03a09..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';
@@ -145,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 && (
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 11:17:09 +0000