From cf544e175ae6715c71031ccbc4d123c035febe61 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 27 Jul 2021 08:01:03 -0700 Subject: Create front flash for videos --- src/screens/moments/CameraScreen.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 27412486..f7820f58 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -4,14 +4,14 @@ import {RouteProp} from '@react-navigation/core'; import {useFocusEffect} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {createRef, useCallback, useEffect, useState} from 'react'; -import {StyleSheet, TouchableOpacity, View} from 'react-native'; +import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native'; import {CameraType, FlashMode, RNCamera} from 'react-native-camera'; import {AnimatedCircularProgress} from 'react-native-circular-progress'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {FlashButton, FlipButton, GalleryIcon} from '../../components'; import {TAGG_PURPLE} from '../../constants'; import {MainStackParams} from '../../routes'; -import {HeaderHeight, SCREEN_WIDTH} from '../../utils'; +import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {showGIFFailureAlert, takePicture, takeVideo} from '../../utils/camera'; type CameraScreenRouteProps = RouteProp; @@ -84,6 +84,16 @@ const CameraScreen: React.FC = ({route, navigation}) => { return ( + + + -- cgit v1.2.3-70-g09d2 From be860f27c915bcfb1be2cddc812dddea1dfc555a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 27 Jul 2021 08:21:06 -0700 Subject: Missed condition --- src/screens/moments/CameraScreen.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index f7820f58..e1ae25e9 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -84,7 +84,9 @@ const CameraScreen: React.FC = ({route, navigation}) => { return ( - + Date: Tue, 27 Jul 2021 08:33:12 -0700 Subject: Add back camera flash for videos --- src/screens/moments/CameraScreen.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index e1ae25e9..ef0ddd11 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -104,7 +104,11 @@ const CameraScreen: React.FC = ({route, navigation}) => { ref={cameraRef} style={styles.camera} type={cameraType} - flashMode={flashMode} + flashMode={ + flashMode === 'on' && isRecording && cameraType === 'back' + ? 'torch' + : flashMode + } onDoubleTap={() => { setCameraType(cameraType === 'front' ? 'back' : 'front'); }} -- cgit v1.2.3-70-g09d2 From 611a3a545aa11880481bf4ae1a21aaf370cdb090 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 15:58:13 -0400 Subject: Remove prompt --- src/screens/main/NotificationsScreen.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index b19107a7..34888e5b 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -299,7 +299,6 @@ const NotificationsScreen: React.FC = () => { renderItem={renderNotification} renderSectionHeader={renderSectionHeader} renderSectionFooter={renderSectionFooter} - ListHeaderComponent={} refreshControl={ } -- cgit v1.2.3-70-g09d2 From c0770f5fbc8f4a276d45f4336c3733748ed460f4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 16:16:59 -0400 Subject: Lint --- src/screens/main/NotificationsScreen.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 34888e5b..55dd9051 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -1,4 +1,5 @@ import AsyncStorage from '@react-native-community/async-storage'; +import PushNotificationIOS from '@react-native-community/push-notification-ios'; import {useFocusEffect, useNavigation} from '@react-navigation/native'; import moment from 'moment'; import React, {useCallback, useEffect, useState} from 'react'; @@ -21,7 +22,6 @@ import FindFriendsBlueIcon from '../../assets/icons/findFriends/find-friends-blu import {TabsGradient} from '../../components'; import EmptyContentView from '../../components/common/EmptyContentView'; import {Notification} from '../../components/notifications'; -import {NewChatPrompt} from '../../components/notifications/NotificationPrompts'; import { loadUserNotifications, updateNewNotificationReceived, @@ -29,7 +29,6 @@ import { import {RootState} from '../../store/rootReducer'; import {NotificationType, ScreenType} from '../../types'; import {getDateAge, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; -import PushNotificationIOS from '@react-native-community/push-notification-ios'; const NotificationsScreen: React.FC = () => { const {newNotificationReceived} = useSelector( -- cgit v1.2.3-70-g09d2 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(-) 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 ee8ccd2b48dee19c5526c1fccb613b718c0cf759 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 16:52:32 -0400 Subject: Add image moment upload action --- src/screens/profile/CaptionScreen.tsx | 68 +++++++++------------------- src/store/actions/user.ts | 84 +++++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+), 48 deletions(-) diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 3ee0bd5b..f3b8788b 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -36,6 +36,7 @@ import * as RootNavigation from '../../RootNavigation'; import {MainStackParams} from '../../routes'; import {patchMoment, postMoment, postMomentTags} from '../../services'; import { + handleImageMomentUpload, handleVideoMomentUpload, loadUserMoments, updateProfileCompletionStage, @@ -138,11 +139,6 @@ const CaptionScreen: React.FC = ({route, navigation}) => { // then switch to the profile tab navigation.popToTop(); RootNavigation.navigate('ProfileTab'); - setTimeout(() => { - if (!isMediaAVideo) { - Alert.alert(SUCCESS_PIC_UPLOAD); - } - }, 500); } else { // if editing, simply go back to profile screen navigation.navigate('Profile', { @@ -167,53 +163,29 @@ const CaptionScreen: React.FC = ({route, navigation}) => { handleFailed(true); return; } - let profileCompletionStage; - // separate upload logic for image/video if (isMediaAVideo) { - if (videoDuration) { - dispatch( - handleVideoMomentUpload( - mediaUri, - videoDuration, - momentCategory, - formattedTags(), - ), - ); - } else { - handleFailed(); - return; - } - } else { - const momentResponse = await postMoment( - mediaUri, - caption, - momentCategory, - userId, + dispatch( + handleVideoMomentUpload( + mediaUri, + videoDuration ?? 30, + momentCategory, + formattedTags(), + ), ); - if (!momentResponse) { - handleFailed(); - return; - } - profileCompletionStage = momentResponse.profile_completion_stage; - const momentId = momentResponse.moment_id; - if (momentId) { - const momentTagResponse = await postMomentTags( - momentId, + } else { + dispatch( + handleImageMomentUpload( + mediaUri, + caption, + momentCategory, + userId, formattedTags(), - ); - if (!momentTagResponse) { - handleFailed(); - return; - } - } - } - if (!isMediaAVideo) { - dispatch(loadUserMoments(userId)); - } - if (profileCompletionStage) { - dispatch(updateProfileCompletionStage(profileCompletionStage)); + ), + ); } - handleSuccess(); + setTimeout(() => { + handleSuccess(); + }, 500); }; const handleSubmitEditChanges = async () => { diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 1acbb519..14865f25 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -6,6 +6,7 @@ import { handlePresignedURL, handleVideoUpload, loadProfileInfo, + postMoment, postMomentTags, removeBadgesService, sendSuggestedPeopleLinked, @@ -285,6 +286,89 @@ export const suggestedPeopleAnimatedTutorialFinished = } }; +export const handleImageMomentUpload = + ( + imageUri: string, + caption: string, + momentCategory: string, + userId: string, + formattedTags: { + x: number; + y: number; + z: number; + user_id: string; + }[], + ): ThunkAction, RootState, unknown, Action> => + async (dispatch) => { + try { + const handleError = (reason: string) => { + console.error('Moment video upload failed,', reason); + dispatch({ + type: setMomentUploadProgressBar.type, + payload: { + momentUploadProgressBar: { + ...momentUploadProgressBar, + status: MomentUploadStatusType.Error, + }, + }, + }); + }; + let momentUploadProgressBar: MomentUploadProgressBarType = { + status: MomentUploadStatusType.UploadingToS3, + momentId: '', + originalVideoDuration: 1, // assume upload time for an image is same as a 1s video + }; + // set progress bar as loading + dispatch({ + type: setMomentUploadProgressBar.type, + payload: {momentUploadProgressBar}, + }); + // upload image moment + const momentPostResponse = await postMoment( + imageUri, + caption, + momentCategory, + userId, + ); + if (!momentPostResponse) { + handleError('Moment post failed'); + return; + } + const profileCompletionStage = + momentPostResponse.profile_completion_stage; + const momentId = momentPostResponse.moment_id; + if (!momentId) { + handleError('Unable to parse moment id from moment post response'); + return; + } + // upload moment tags + const momentTagResponse = await postMomentTags(momentId, formattedTags); + if (!momentTagResponse) { + handleError('Moment tag post failed'); + return; + } + if (profileCompletionStage) { + dispatch(updateProfileCompletionStage(profileCompletionStage)); + } else { + console.error( + 'failed to parse profile complete stage from moment post response', + ); + } + // mark progress bar state as done + dispatch({ + type: setMomentUploadProgressBar.type, + payload: { + momentUploadProgressBar: { + ...momentUploadProgressBar, + status: MomentUploadStatusType.Done, + }, + }, + }); + } catch (error) { + console.log(error); + } + }; + /** * state is now UploadingToS3: * - get presigned url (backend creates the moment object) -- 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(-) 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 23afcca0adfb4d0023ed73f489a4874898851971 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 17:43:31 -0400 Subject: Lint --- src/screens/profile/CaptionScreen.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index f3b8788b..66106a6f 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -30,16 +30,14 @@ import { ERROR_NO_MOMENT_CATEGORY, ERROR_SOMETHING_WENT_WRONG_REFRESH, ERROR_UPLOAD, - SUCCESS_PIC_UPLOAD, } from '../../constants/strings'; import * as RootNavigation from '../../RootNavigation'; import {MainStackParams} from '../../routes'; -import {patchMoment, postMoment, postMomentTags} from '../../services'; +import {patchMoment} from '../../services'; import { handleImageMomentUpload, handleVideoMomentUpload, loadUserMoments, - updateProfileCompletionStage, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {MomentTagType} from '../../types'; -- 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(-) 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 From 901a70f5b61a409e96b741505af44b6f7e6fcd7d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 29 Jul 2021 07:57:02 -0700 Subject: Fix inline style --- src/screens/moments/CameraScreen.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index ef0ddd11..40db1191 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -87,14 +87,7 @@ const CameraScreen: React.FC = ({route, navigation}) => { - + @@ -180,6 +173,12 @@ const styles = StyleSheet.create({ flexDirection: 'column', backgroundColor: 'black', }, + flashView: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + backgroundColor: '#fff', + opacity: 0.5, + }, captureButtonVideoContainer: { alignSelf: 'center', backgroundColor: 'transparent', -- cgit v1.2.3-70-g09d2 From 4170b75030ff07339a5d59a32206dc6e2d843ed7 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 15:51:17 -0400 Subject: Accept caption --- src/screens/profile/CaptionScreen.tsx | 1 + src/services/MomentService.ts | 6 +++++- src/store/actions/user.ts | 6 +++++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 66106a6f..d329c589 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -166,6 +166,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { handleVideoMomentUpload( mediaUri, videoDuration ?? 30, + caption, momentCategory, formattedTags(), ), diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts index 3a677ccc..0292f9ea 100644 --- a/src/services/MomentService.ts +++ b/src/services/MomentService.ts @@ -223,7 +223,10 @@ export const deleteMomentTag = async (moment_tag_id: string) => { * @param value: string | undefined * @returns a PresignedURLResponse object */ -export const handlePresignedURL = async (momentCategory: string) => { +export const handlePresignedURL = async ( + caption: string, + momentCategory: string, +) => { try { // TODO: just a random filename for video poc, we should not need to once complete const randHash = Math.random().toString(36).substring(7); @@ -236,6 +239,7 @@ export const handlePresignedURL = async (momentCategory: string) => { }, body: JSON.stringify({ filename, + caption: caption, category: momentCategory, }), }); diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 14865f25..f01e2bac 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -380,6 +380,7 @@ export const handleVideoMomentUpload = ( videoUri: string, videoLength: number, + caption: string, momentCategory: string, formattedTags: { x: number; @@ -413,7 +414,10 @@ export const handleVideoMomentUpload = payload: {momentUploadProgressBar}, }); // get a presigned url for the video - const presignedURLResponse = await handlePresignedURL(momentCategory); + const presignedURLResponse = await handlePresignedURL( + caption, + momentCategory, + ); if (!presignedURLResponse) { handleError('Presigned URL failed'); return; -- 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 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(-) 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 97b7c29fe22f0d31a1a6b095de0ea76a3067e115 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 15:15:46 -0400 Subject: Clean up styling in tagg friends screen --- src/screens/moments/TagFriendsScreen.tsx | 85 +++++++++++++------------------- 1 file changed, 34 insertions(+), 51 deletions(-) diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index d11f8049..677ceefa 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -10,15 +10,13 @@ import { View, } from 'react-native'; import Video from 'react-native-video'; -import {MainStackParams} from 'src/routes'; -import BackArrow from '../../assets/icons/back-arrow.svg'; import {MomentTags} from '../../components'; import {TagFriendsFooter} from '../../components/moments'; +import {headerBarOptions, MainStackParams} from '../../routes'; import {MomentTagType} from '../../types'; import { HeaderHeight, isIPhoneX, - normalize, SCREEN_HEIGHT, SCREEN_WIDTH, } from '../../utils'; @@ -48,6 +46,36 @@ const TagFriendsScreen: React.FC = ({route}) => { setTags(selectedTags ? selectedTags : []); }, [selectedTags]); + useEffect(() => { + const title = media.isVideo + ? '' + : tags.length === 0 + ? 'Tap on photo to tag friends!' + : 'Press and drag to move'; + navigation.setOptions({ + ...headerBarOptions('white', title), + headerRight: () => ( + + + Done + + + ), + }); + }, [tags]); + /* * Navigate back to Tag Users Screen, send selected users */ @@ -174,49 +202,8 @@ const TagFriendsScreen: React.FC = ({route}) => { onLayout={(event) => { const {y, height} = event.nativeEvent.layout; setTopHeight(y + height); - }}> - { - navigation.goBack(); - }} - style={styles.backArrow}> - - - - - {!media.isVideo ? ( - - {tags.length === 0 ? ( - Tap on photo to tag friends! - ) : ( - Press and drag to move - )} - - ) : ( - - )} - - - Done - - - + }} + /> {tags.length !== 0 && !media.isVideo && ( 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(-) 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(-) 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 5c99a5a581dd93f89db248d853d9785e83e608ae Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 29 Jul 2021 11:01:44 -0700 Subject: Remove unused styles --- src/screens/moments/TagFriendsScreen.tsx | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 677ceefa..c55721ed 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -231,31 +231,12 @@ const styles = StyleSheet.create({ height: SCREEN_HEIGHT, alignContent: 'center', }, - backArrow: { - marginTop: isIPhoneX() ? HeaderHeight : '10%', - zIndex: 9999, - }, - backArrowContainer: { - flex: 1, - flexDirection: 'column', - justifyContent: 'center', - alignContent: 'center', - }, button: { zIndex: 9999, }, buttonContainer: { right: 20, }, - headerContainer: { - width: SCREEN_WIDTH, - flexDirection: 'row', - justifyContent: 'center', - zIndex: 9999, - }, - headerPlaceholder: { - width: SCREEN_WIDTH * 0.5, - }, shareButtonTitle: { fontWeight: 'bold', fontSize: 18, -- 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(-) 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(-) 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(-) 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(-) 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(-) 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 From 18a1188a2a411e4bb042c922741fea1a5a3aa946 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 16:34:50 -0400 Subject: Add max duration constant, Add check for picking video duration, Add logic to cancel recording state --- src/constants/constants.ts | 2 ++ src/constants/strings.ts | 1 + src/screens/moments/CameraScreen.tsx | 5 +++-- src/utils/camera.ts | 16 ++++++++++++++-- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 476e7af4..d25a5953 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -246,3 +246,5 @@ export const SETTINGS_DATA = { }, ], }; + +export const MAX_VIDEO_RECORDING_DURATION = 60; diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 450d7e5c..47ad2464 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -56,6 +56,7 @@ export const ERROR_UNABLE_TO_FIND_PROFILE = 'We were unable to find this profile export const ERROR_UNABLE_TO_VIEW_PROFILE = 'Unable to view this profile'; export const ERROR_UPLOAD = 'An error occurred while uploading. Please try again!'; export const ERROR_UPLOAD_BADGES = 'Unable to upload your badges. Please retry!'; +export const ERROR_UPLOAD_EXCEED_MAX_VIDEO_DURATION = 'Video can\'t be longer than 60 seconds!'; export const ERROR_UPLOAD_LARGE_PROFILE_PIC = "Can't have the first image seen on the profile be blank, please upload a large picture"; export const ERROR_UPLOAD_MOMENT = 'Unable to upload moment. Please retry'; export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pic to represent you, please upload a small profile picture"; diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 40db1191..82ee66c0 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -9,7 +9,7 @@ import {CameraType, FlashMode, RNCamera} from 'react-native-camera'; import {AnimatedCircularProgress} from 'react-native-circular-progress'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {FlashButton, FlipButton, GalleryIcon} from '../../components'; -import {TAGG_PURPLE} from '../../constants'; +import {MAX_VIDEO_RECORDING_DURATION, TAGG_PURPLE} from '../../constants'; import {MainStackParams} from '../../routes'; import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {showGIFFailureAlert, takePicture, takeVideo} from '../../utils/camera'; @@ -37,6 +37,7 @@ const CameraScreen: React.FC = ({route, navigation}) => { navigation.dangerouslyGetParent()?.setOptions({ tabBarVisible: false, }); + return () => setIsRecording(false); }, [navigation]), ); @@ -136,7 +137,7 @@ const CameraScreen: React.FC = ({route, navigation}) => { width={6} fill={100} rotation={0} - duration={60000 + 1000} // an extra second for UI to load + duration={(MAX_VIDEO_RECORDING_DURATION + 1) * 1000} // an extra second for UI to load tintColor={TAGG_PURPLE} style={styles.bottomContainer} lineCap={'round'} diff --git a/src/utils/camera.ts b/src/utils/camera.ts index f21ef133..ec2615de 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -10,7 +10,11 @@ import { } from 'react-native-camera'; import {ProcessingManager} from 'react-native-video-processing'; import ImagePicker, {ImageOrVideo} from 'react-native-image-crop-picker'; -import {ERROR_UPLOAD} from '../constants/strings'; +import { + ERROR_UPLOAD, + ERROR_UPLOAD_EXCEED_MAX_VIDEO_DURATION, +} from '../constants/strings'; +import {MAX_VIDEO_RECORDING_DURATION} from '../constants'; /* * Captures a photo and pauses to show the preview of the picture taken @@ -39,7 +43,7 @@ export const takeVideo = ( if (cameraRef !== null) { const options: RecordOptions = { orientation: 'portrait', - maxDuration: 60, + maxDuration: MAX_VIDEO_RECORDING_DURATION, quality: '1080p', }; cameraRef.current?.recordAsync(options).then((vid) => { @@ -73,6 +77,14 @@ export const navigateToMediaPicker = ( compressVideoPreset: 'Passthrough', }) .then((media) => { + if ( + 'duration' in media && + media.duration !== null && + media.duration > MAX_VIDEO_RECORDING_DURATION * 1000 + ) { + Alert.alert(ERROR_UPLOAD_EXCEED_MAX_VIDEO_DURATION); + return; + } callback(media); }) .catch((err) => { -- cgit v1.2.3-70-g09d2 From e50a0321d73df5169b79dded7a57cfa3a9b62adc Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 16:42:39 -0400 Subject: Add hacky solution for pausing video --- src/screens/moments/CameraScreen.tsx | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 82ee66c0..07b697d0 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -121,10 +121,24 @@ const CameraScreen: React.FC = ({route, navigation}) => { setIsRecording(true); }} onPressOut={async () => { - if (await cameraRef.current?.isRecording()) { - cameraRef.current?.stopRecording(); - setIsRecording(false); - } + const cancelRecording = async () => { + if (await cameraRef.current?.isRecording()) { + cameraRef.current?.stopRecording(); + setIsRecording(false); + } + }; + cancelRecording(); + // tmp fix for when the animation glitches during the beginning of + // recording causing onPressOut to not be detected. + setTimeout(() => { + cancelRecording(); + }, 500); + setTimeout(() => { + cancelRecording(); + }, 1000); + setTimeout(() => { + cancelRecording(); + }, 1500); }} onPress={() => { takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri)); -- cgit v1.2.3-70-g09d2