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(-) (limited to 'src/screens') 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(-) (limited to 'src/screens') 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(-) (limited to 'src/screens') 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(-) (limited to 'src/screens') 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(-) (limited to 'src/screens') 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 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(-) (limited to 'src/screens') 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 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(-) (limited to 'src/screens') 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 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(-) (limited to 'src/screens') 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(-) (limited to 'src/screens') 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 (limited to 'src/screens') 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 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(-) (limited to 'src/screens') 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 11:01:44 -0700 Subject: Remove unused styles --- src/screens/moments/TagFriendsScreen.tsx | 19 ------------------- 1 file changed, 19 deletions(-) (limited to 'src/screens') 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 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(-) (limited to 'src/screens') 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(-) (limited to 'src/screens') 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