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/IndividualMomentTitleBar.tsx53
-rw-r--r--src/components/moments/MomentPost.tsx131
-rw-r--r--src/components/moments/MomentUploadProgressBar.tsx17
-rw-r--r--src/components/moments/index.ts1
-rw-r--r--src/components/profile/Content.tsx2
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} />
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:04:42 +0000