From abf6bf12722845218f0947ca119f848c41dd12f4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 16:50:14 -0400 Subject: Minor change in load moment logic --- src/components/moments/MomentUploadProgressBar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx index d56a8337..65b03a09 100644 --- a/src/components/moments/MomentUploadProgressBar.tsx +++ b/src/components/moments/MomentUploadProgressBar.tsx @@ -51,7 +51,6 @@ const MomentUploadProgressBar: React.FC = }); // change status to Done 1s after the progress bar animation is done setTimeout(() => { - dispatch(loadUserMoments(loggedInUserId)); dispatch({ type: setMomentUploadProgressBar.type, payload: { @@ -110,6 +109,9 @@ const MomentUploadProgressBar: React.FC = }, [momentUploadProgressBar?.status]); useEffect(() => { + if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) { + dispatch(loadUserMoments(loggedInUserId)); + } if ( momentUploadProgressBar?.status === MomentUploadStatusType.Done || momentUploadProgressBar?.status === MomentUploadStatusType.Error -- cgit v1.2.3-70-g09d2 From 3f9082dbd76179627a2be36318e1b68a1337454e Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 17:40:59 -0400 Subject: Update sticky header index --- src/components/profile/Content.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') 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 = ({userXId, screenType}) => { onScroll={scrollHandler} showsVerticalScrollIndicator={false} scrollEventThrottle={1} - stickyHeaderIndices={[4]} + stickyHeaderIndices={[5]} scrollEnabled={scrollEnabled} refreshControl={ -- cgit v1.2.3-70-g09d2 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(-) (limited to 'src/components') 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(-) (limited to 'src/components') 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/components') 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/components') 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/components') 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/components') 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 ad98ad617d78c7b68ffc37327f21a8769fcaab57 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 14:49:58 -0400 Subject: Fix styling, Cleanup imports --- .../moments/IndividualMomentTitleBar.tsx | 53 ---------------------- src/components/moments/MomentPost.tsx | 5 +- src/components/moments/index.ts | 1 - src/routes/main/MainStackScreen.tsx | 19 +++++--- src/screens/suggestedPeople/index.ts | 1 + 5 files changed, 14 insertions(+), 65 deletions(-) delete mode 100644 src/components/moments/IndividualMomentTitleBar.tsx (limited to 'src/components') 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 = ({ - title, -}) => { - return ( - - - 18 ? normalize(14) : normalize(16), - }, - ]}> - {title} - - - - ); -}; - -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 921f7693..2257f8ac 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -134,10 +134,7 @@ const MomentPost: React.FC = ({ useEffect( () => navigation.setOptions({ - ...headerBarOptions('white', ''), - headerTitle: () => ( - - ), + ...headerBarOptions('white', moment.moment_category), }), [moment.moment_id], ); 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/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 064e9725..ccfc4cbd 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -2,25 +2,28 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; import {StyleSheet, Text} from 'react-native'; -import {normalize} from 'react-native-elements'; import BackIcon from '../../assets/icons/back-arrow.svg'; import { AccountType, AnimatedTutorial, BadgeSelection, + CameraScreen, CaptionScreen, CategorySelection, ChatListScreen, ChatScreen, + ChoosingCategoryScreen, CommentReactionScreen, CreateCustomCategory, DiscoverUsers, + EditMedia, EditProfile, FriendsListScreen, IndividualMoment, InviteFriendsScreen, MomentCommentsScreen, MomentUploadPromptScreen, + MutualBadgeHolders, NewChatModal, NotificationsScreen, PrivacyScreen, @@ -31,16 +34,17 @@ import { SuggestedPeopleScreen, SuggestedPeopleUploadPictureScreen, SuggestedPeopleWelcomeScreen, - TagSelectionScreen, TagFriendsScreen, - CameraScreen, - EditMedia, + TagSelectionScreen, } from '../../screens'; -import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; -import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils'; +import { + AvatarHeaderHeight, + ChatHeaderHeight, + normalize, + SCREEN_WIDTH, +} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; -import ChoosingCategoryScreen from '../../screens/profile/ChoosingCategoryScreen'; /** * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited. @@ -413,6 +417,7 @@ const styles = StyleSheet.create({ shadowOffset: {width: 0, height: 0}, }, headerTitle: { + textAlign: 'center', letterSpacing: normalize(1.3), fontWeight: '700', }, diff --git a/src/screens/suggestedPeople/index.ts b/src/screens/suggestedPeople/index.ts index 8c06d81e..be2393b5 100644 --- a/src/screens/suggestedPeople/index.ts +++ b/src/screens/suggestedPeople/index.ts @@ -1,2 +1,3 @@ export {default as SuggestedPeopleScreen} from './SuggestedPeopleScreen'; export {default as AnimatedTutorial} from './AnimatedTutorial'; +export {default as MutualBadgeHolders} from './MutualBadgeHolders'; -- cgit v1.2.3-70-g09d2 From fbaa7d6ee05d1486152175471ef21e8b4638754d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 14:52:02 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 2257f8ac..123ee5f4 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -43,7 +43,6 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import CommentsCount from '../comments/CommentsCount'; import {GradientProgressBar, MomentTags} from '../common'; import {MomentMoreInfoDrawer, TaggAvatar} from '../profile'; -import IndividualMomentTitleBar from './IndividualMomentTitleBar'; interface MomentPostProps { moment: MomentPostType; userXId: string | undefined; -- cgit v1.2.3-70-g09d2 From 4cd0910e9b20b10b0a5ef46945b139e711eec252 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:02:59 -0400 Subject: Fix header styling --- src/components/moments/MomentPost.tsx | 36 +++++++++++++++++++++++++++++++++-- src/routes/main/MainStackScreen.tsx | 3 +++ 2 files changed, 37 insertions(+), 2 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 123ee5f4..ecd2e66f 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -34,6 +34,7 @@ import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, + isIPhoneX, navigateToProfile, normalize, SCREEN_HEIGHT, @@ -133,7 +134,22 @@ const MomentPost: React.FC = ({ useEffect( () => navigation.setOptions({ - ...headerBarOptions('white', moment.moment_category), + ...headerBarOptions('white', ''), + headerTitle: () => ( + 18 + ? normalize(14) + : normalize(16), + }, + ]}> + {moment.moment_category} + + ), }), [moment.moment_id], ); @@ -499,7 +515,23 @@ const styles = StyleSheet.create({ position: 'absolute', top: -2.5, }, - profilePreviewContainer: {paddingHorizontal: '3%'}, + progressBaContainer: { + position: 'absolute', + top: isIPhoneX() ? 75 : 70, + }, + profilePreviewContainer: { + paddingHorizontal: '3%', + }, + multilineHeaderTitle: { + width: SCREEN_WIDTH * 0.7, + height: normalize(70), + marginTop: normalize(90) / 2, + textAlign: 'center', + lineHeight: normalize(21.48), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'white', + }, }); export default MomentPost; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index ccfc4cbd..35e1f8e0 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -382,6 +382,7 @@ export const headerBarOptions: ( ), headerTitle: () => ( Date: Thu, 29 Jul 2021 14:05:41 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 14 -------------- 1 file changed, 14 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index ecd2e66f..19d25739 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -505,20 +505,6 @@ const styles = StyleSheet.create({ 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%', }, -- cgit v1.2.3-70-g09d2 From 2947fb74da4f990ac9c15cb352ef254592a3c6ab Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:09:34 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 19d25739..eae95fe2 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -25,7 +25,6 @@ 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_PURPLE} from '../../constants/constants'; import {headerBarOptions} from '../../routes'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; @@ -34,7 +33,6 @@ import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, - isIPhoneX, navigateToProfile, normalize, SCREEN_HEIGHT, -- cgit v1.2.3-70-g09d2 From 7c33718ecf68982b362f0756fe3df793ce97f6fd Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:27:45 -0400 Subject: Cleaned up logic, Add logic to check if long title --- src/components/moments/MomentPost.tsx | 42 +++++++++-------------------------- src/routes/main/MainStackScreen.tsx | 27 ++++++++++++++++++++++ 2 files changed, 38 insertions(+), 31 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index eae95fe2..d95d6f3a 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -25,7 +25,7 @@ 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 {headerBarOptions} from '../../routes'; +import {headerBarOptions, multilineHeaderTitle} from '../../routes'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; import {loadUserMoments} from '../../store/actions'; @@ -129,28 +129,18 @@ const MomentPost: React.FC = ({ } }; - useEffect( - () => + useEffect(() => { + if (moment.moment_category.length > 20) { navigation.setOptions({ ...headerBarOptions('white', ''), - headerTitle: () => ( - 18 - ? normalize(14) - : normalize(16), - }, - ]}> - {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 @@ -506,16 +496,6 @@ const styles = StyleSheet.create({ profilePreviewContainer: { paddingHorizontal: '3%', }, - multilineHeaderTitle: { - width: SCREEN_WIDTH * 0.7, - height: normalize(70), - marginTop: normalize(90) / 2, - textAlign: 'center', - lineHeight: normalize(21.48), - letterSpacing: normalize(1.3), - fontWeight: '700', - color: 'white', - }, }); export default MomentPost; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 35e1f8e0..64060554 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -393,6 +393,23 @@ export const headerBarOptions: ( ), }); +export const multilineHeaderTitle: (title: string) => StackNavigationOptions = ( + title, +) => ({ + headerTitle: () => ( + 18 ? normalize(14) : normalize(16), + }, + ]}> + {title} + + ), +}); + export const modalStyle: StackNavigationOptions = { cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'}, gestureDirection: 'vertical', @@ -424,6 +441,16 @@ const styles = StyleSheet.create({ letterSpacing: normalize(1.3), fontWeight: '700', }, + multilineHeaderTitle: { + width: SCREEN_WIDTH * 0.7, + height: normalize(70), + marginTop: normalize(90) / 2, + textAlign: 'center', + lineHeight: normalize(21.48), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'white', + }, }); export default MainStackScreen; -- cgit v1.2.3-70-g09d2 From d14a1933276d82f68581be6236e1bc47e69611e6 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 16:14:14 -0400 Subject: Pause video when out of focus --- src/components/moments/MomentPost.tsx | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 921f7693..5b71c64b 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,5 +1,12 @@ -import {useNavigation} from '@react-navigation/native'; -import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'; +import {useFocusEffect, useNavigation} from '@react-navigation/native'; +import React, { + useCallback, + useContext, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; import { Image, Keyboard, @@ -94,6 +101,19 @@ const MomentPost: React.FC = ({ const mediaHeight = SCREEN_WIDTH / aspectRatio; const [isVideoPaused, setIsVideoPaused] = useState(false); const videoProgress = useSharedValue(0); + + // pause video when out of focus + useFocusEffect( + useCallback(() => { + return () => setIsVideoPaused(true); + }, []), + ); + + // 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 */ @@ -294,9 +314,6 @@ const MomentPost: React.FC = ({ onPress={() => { if (isVideo) { setIsVideoPaused(!isVideoPaused); - isVideoPaused - ? setFadeValue(new Animated.Value(0)) - : setFadeValue(new Animated.Value(1)); } else { setTagsVisible(!tagsVisible); setFadeValue(new Animated.Value(0)); -- cgit v1.2.3-70-g09d2 From 9c5dd791bb2fdd8197c6d0f34b7030dff839429d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:39:55 -0400 Subject: Use useIsFocused --- src/components/moments/MomentPost.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 5b71c64b..f4970f1e 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,4 +1,8 @@ -import {useFocusEffect, useNavigation} from '@react-navigation/native'; +import { + useFocusEffect, + useIsFocused, + useNavigation, +} from '@react-navigation/native'; import React, { useCallback, useContext, @@ -100,15 +104,9 @@ const MomentPost: React.FC = ({ ); const mediaHeight = SCREEN_WIDTH / aspectRatio; const [isVideoPaused, setIsVideoPaused] = useState(false); + const screenIsFocused = useIsFocused(); const videoProgress = useSharedValue(0); - // pause video when out of focus - useFocusEffect( - useCallback(() => { - return () => setIsVideoPaused(true); - }, []), - ); - // update play/pause icon based on video pause state useEffect(() => { setFadeValue(new Animated.Value(isVideoPaused ? 1 : 0)); @@ -248,7 +246,11 @@ const MomentPost: React.FC = ({ 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)) { -- cgit v1.2.3-70-g09d2 From 8974d48777d46aa8edb8857d892773c85dcd5efe Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:40:17 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index f4970f1e..52b99d58 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,16 +1,5 @@ -import { - useFocusEffect, - useIsFocused, - useNavigation, -} from '@react-navigation/native'; -import React, { - useCallback, - useContext, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import {useIsFocused, useNavigation} from '@react-navigation/native'; +import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'; import { Image, Keyboard, -- cgit v1.2.3-70-g09d2