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 --- package.json | 1 + src/components/moments/MomentPost.tsx | 18 +++++++++--------- yarn.lock | 7 +++++++ 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index fea5aa11..0977914d 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "react-native-photo-manipulator": "^1.2.4", "react-native-picker-select": "^7.0.0", "react-native-pinchable": "^0.2.1", + "react-native-progress": "^5.0.0", "react-native-push-notification": "^7.4.0", "react-native-push-notifications": "^3.0.10", "react-native-reanimated": "2.0.0-rc.0", 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 = () => ( - - ); diff --git a/yarn.lock b/yarn.lock index 040ea980..e2c27786 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7388,6 +7388,13 @@ react-native-pinchable@^0.2.1: resolved "https://registry.yarnpkg.com/react-native-pinchable/-/react-native-pinchable-0.2.1.tgz#93cf6ce78f65cef2f1364187320e363170d2e212" integrity sha512-LRSLCrizUX/XtYwwBxyuYL4xDLUhyPbBvD/tUpzns0PX2Zs0pR0fd/LsFm/n6tEigCLL/0KlDrOVhOdW3wtz+Q== +react-native-progress@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-5.0.0.tgz#f5ac6ceaeee27f184c660b00f29419e82a9d0ab0" + integrity sha512-KjnGIt3r9i5Kn2biOD9fXLJocf0bwxPRxOyAgXEnZTJQU2O+HyzgGFRCbM5h3izm9kKIkSc1txh8aGmMafCD9A== + dependencies: + prop-types "^15.7.2" + react-native-push-notification@^7.4.0: version "7.4.0" resolved "https://registry.yarnpkg.com/react-native-push-notification/-/react-native-push-notification-7.4.0.tgz#81192356eddfee8eeaf72a9a696c7c90bf5b0ece" -- 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(-) 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(-) 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(-) 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(-) 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(-) 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 From a6a08cc875583265a60ea81e14974aeb0f01d0b9 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 29 Jul 2021 02:18:45 -0700 Subject: Remove unused packages --- package.json | 2 -- yarn.lock | 12 ------------ 2 files changed, 14 deletions(-) diff --git a/package.json b/package.json index 0977914d..2023f78a 100644 --- a/package.json +++ b/package.json @@ -58,14 +58,12 @@ "react-native-photo-manipulator": "^1.2.4", "react-native-picker-select": "^7.0.0", "react-native-pinchable": "^0.2.1", - "react-native-progress": "^5.0.0", "react-native-push-notification": "^7.4.0", "react-native-push-notifications": "^3.0.10", "react-native-reanimated": "2.0.0-rc.0", "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^2.9.0", "react-native-share": "^5.1.7", - "react-native-simple-gradient-progressbar-view": "^0.2.0", "react-native-snap-carousel": "^3.9.1", "react-native-splash-screen": "^3.2.0", "react-native-svg": "^12.1.1", diff --git a/yarn.lock b/yarn.lock index e2c27786..89ee74f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7388,13 +7388,6 @@ react-native-pinchable@^0.2.1: resolved "https://registry.yarnpkg.com/react-native-pinchable/-/react-native-pinchable-0.2.1.tgz#93cf6ce78f65cef2f1364187320e363170d2e212" integrity sha512-LRSLCrizUX/XtYwwBxyuYL4xDLUhyPbBvD/tUpzns0PX2Zs0pR0fd/LsFm/n6tEigCLL/0KlDrOVhOdW3wtz+Q== -react-native-progress@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-5.0.0.tgz#f5ac6ceaeee27f184c660b00f29419e82a9d0ab0" - integrity sha512-KjnGIt3r9i5Kn2biOD9fXLJocf0bwxPRxOyAgXEnZTJQU2O+HyzgGFRCbM5h3izm9kKIkSc1txh8aGmMafCD9A== - dependencies: - prop-types "^15.7.2" - react-native-push-notification@^7.4.0: version "7.4.0" resolved "https://registry.yarnpkg.com/react-native-push-notification/-/react-native-push-notification-7.4.0.tgz#81192356eddfee8eeaf72a9a696c7c90bf5b0ece" @@ -7446,11 +7439,6 @@ react-native-share@^5.1.7: resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-5.3.0.tgz#e501f974f2c0e12f8c78aa744dfc5bdf6bc54978" integrity sha512-VHRVxCyENhKThfap2Y7eXawuCqMpSvKYsvANZUfeTKrTlZ86hVi9h0+ITXKTLIj8gOB8qmSYUzKG7o6Kj4wKJg== -react-native-simple-gradient-progressbar-view@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/react-native-simple-gradient-progressbar-view/-/react-native-simple-gradient-progressbar-view-0.2.0.tgz#77dbce7555fca836d815f6644e1f23d35ed3908b" - integrity sha512-mqavQMhdTtb/StG/zsB844GhTNKQr3Bp+u1LTV9bU68mB/bS6VQiHh6WLfM1VPPXiAKTE1bI8i8RfKvOwrIp/A== - react-native-snap-carousel@^3.9.1: version "3.9.1" resolved "https://registry.yarnpkg.com/react-native-snap-carousel/-/react-native-snap-carousel-3.9.1.tgz#6fd9bd8839546c2c6043a41d2035afbc6fe0443e" -- cgit v1.2.3-70-g09d2