From 8771e71489660c1ddcb5975dcf3aba24f20b5c51 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 27 Jul 2021 19:26:29 -0700 Subject: Change progress bar style --- src/components/moments/MomentPost.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index c232986d..57c42654 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -14,14 +14,14 @@ 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 {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'; @@ -262,14 +262,14 @@ const MomentPost: React.FC = ({ const ProgressBar = () => ( - - ); -- cgit v1.2.3-70-g09d2 From 330aebbfa0aba3bd4cc3e0b6a4714ba2f0bb7c98 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 27 Jul 2021 19:41:18 -0700 Subject: Remove comment box --- src/components/moments/MomentPost.tsx | 45 ++++++++++------------------------- 1 file changed, 13 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 57c42654..62758865 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -260,20 +260,6 @@ const MomentPost: React.FC = ({ /> ); - const ProgressBar = () => ( - - - - ); - return ( <> @@ -374,22 +360,20 @@ const MomentPost: React.FC = ({ ), })} - { - setCommentCount(commentCount + 1); - }} - onFocus={() => { - setHideText(true); - }} - isKeyboardAvoiding={false} - theme={'dark'} - /> - {isVideo && } {getTimePosted(moment.date_created)} + {isVideo && ( + + )} @@ -409,7 +393,8 @@ const styles = StyleSheet.create({ color: 'white', fontWeight: '500', textAlign: 'right', - marginTop: 18, + marginTop: 10, + marginBottom: 10, }, captionText: { position: 'relative', @@ -516,10 +501,6 @@ const styles = StyleSheet.create({ position: 'absolute', top: -2.5, }, - progressBaContainer: { - position: 'absolute', - top: isIPhoneX() ? 75 : 70, - }, profilePreviewContainer: {paddingHorizontal: '3%'}, }); -- cgit v1.2.3-70-g09d2 From f1a0adafa0bbff400081349b17f95d0625778319 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 28 Jul 2021 10:47:28 -0700 Subject: Resolve lint errors --- src/components/moments/MomentPost.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 62758865..aa5a710c 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -30,14 +30,12 @@ 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 {MomentMoreInfoDrawer, TaggAvatar} from '../profile'; @@ -75,7 +73,7 @@ const MomentPost: React.FC = ({ const [fadeValue, setFadeValue] = useState>( new Animated.Value(0), ); - const [commentCount, setCommentCount] = useState( + const [commentCount, _setCommentCount] = useState( moment.comments_count, ); const [aspectRatio, setAspectRatio] = useState(1); -- cgit v1.2.3-70-g09d2 From f62f18884b2b1388e9dda4b2a4e01ad6136627c6 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 28 Jul 2021 11:42:04 -0700 Subject: Remove unused variable --- src/components/moments/MomentPost.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index aa5a710c..f18fec01 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -73,9 +73,6 @@ const MomentPost: React.FC = ({ const [fadeValue, setFadeValue] = useState>( new Animated.Value(0), ); - const [commentCount, _setCommentCount] = useState( - moment.comments_count, - ); const [aspectRatio, setAspectRatio] = useState(1); const [momentTagId, setMomentTagId] = useState(''); @@ -337,7 +334,7 @@ const MomentPost: React.FC = ({ -- cgit v1.2.3-70-g09d2 From 4c0ba1d16005271da9d675d087f18dafe9891366 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 29 Jul 2021 02:17:41 -0700 Subject: Add extra props to progress bar, Update usage --- src/components/common/GradientProgressBar.tsx | 25 +++++++++++++++------- src/components/moments/MomentUploadProgressBar.tsx | 13 ++++++++++- 2 files changed, 29 insertions(+), 9 deletions(-) (limited to 'src') 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; + toColor: string; + fromColor: string; + unfilledColor: string; } const GradientProgressBar: FC = ({ style, progress, + toColor, + fromColor, + unfilledColor, }) => { const animatedProgressStyle = useAnimatedStyle(() => ({ width: `${(1 - progress.value) * 100}%`, @@ -24,8 +25,16 @@ const GradientProgressBar: FC = ({ - + colors={[fromColor, toColor]}> + ); }; @@ -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/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx index d56a8337..82f46c58 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'; @@ -143,7 +148,13 @@ const MomentUploadProgressBar: React.FC = {showLoading && ( <> Uploading Moment... - + )} {momentUploadProgressBar.status === MomentUploadStatusType.Done && ( -- cgit v1.2.3-70-g09d2 From e2d777f2f53ca7c465e2915f96c5d6d02f5ef719 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 29 Jul 2021 02:18:32 -0700 Subject: Use updated bar, Use shared value progress --- src/components/moments/MomentPost.tsx | 41 ++++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 17 deletions(-) (limited to 'src') 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 = ({ ); const mediaHeight = SCREEN_WIDTH / aspectRatio; const [isVideoPaused, setIsVideoPaused] = useState(false); - const [videoProgress, setVideoProgress] = useState(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 = ({ 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 && ( = ({ {getTimePosted(moment.date_created)} {isVideo && ( - )} @@ -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', -- cgit v1.2.3-70-g09d2