From 142c84c7c45411b9badf7da3182c9e4bd0e96e38 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 20 Jul 2021 17:35:20 -0400 Subject: Add gradient progress bar --- src/constants/constants.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'src/constants') diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 13a73208..476e7af4 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -69,6 +69,7 @@ export const TAGG_DARK_BLUE = '#4E699C'; export const TAGG_DARK_PURPLEISH_BLUE = '#4755A1'; export const TAGG_LIGHT_BLUE: string = '#698DD3'; export const TAGG_LIGHT_BLUE_2: string = '#6EE7E7'; +export const TAGG_LIGHT_BLUE_3 = '#DDE8FE'; export const TAGG_LIGHT_PURPLE = '#F4DDFF'; export const RADIO_BUTTON_GREY: string = '#BEBEBE'; -- cgit v1.2.3-70-g09d2 From 9b94f60df0b62a9d3762a1963ec7dac024658a51 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 21 Jul 2021 19:11:32 -0400 Subject: Update progress bar type --- src/components/moments/MomentUploadProgressBar.tsx | 16 +++++++++++----- src/constants/api.ts | 1 + src/store/initialStates.ts | 3 ++- src/types/types.ts | 7 ++++++- 4 files changed, 20 insertions(+), 7 deletions(-) (limited to 'src/constants') diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx index 285f4e84..07d876e8 100644 --- a/src/components/moments/MomentUploadProgressBar.tsx +++ b/src/components/moments/MomentUploadProgressBar.tsx @@ -13,17 +13,23 @@ interface MomentUploadProgressBarProps {} const MomentUploadProgressBar: React.FC = ({}) => { - const {momentUploadStatus} = useSelector((state: RootState) => state.user); - const progress = useSharedValue(0); + const {momentUploadProgressBar} = useSelector( + (state: RootState) => state.user, + ); + const progress = useSharedValue(0.001); useEffect(() => { - if (momentUploadStatus === MomentUploadStatusType.Uploading) { + if ( + momentUploadProgressBar?.status === MomentUploadStatusType.Uploading + ) { progress.value = withTiming(1, { - duration: 30 * 1000, + duration: momentUploadProgressBar.originalVideoDuration * 1000, easing: Easing.out(Easing.quad), }); } - }, [momentUploadStatus]); + }, [momentUploadProgressBar?.status]); + + useEffect(() => {}, []); return ( diff --git a/src/constants/api.ts b/src/constants/api.ts index 6dab1153..ec2f0897 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -39,6 +39,7 @@ export const COMMENTS_ENDPOINT: string = API_URL + 'comments/'; export const COMMENT_REACTIONS_ENDPOINT: string = API_URL + 'reaction-comment/'; export const COMMENT_REACTIONS_REPLY_ENDPOINT: string = API_URL + 'reaction-reply/'; export const PRESIGNED_URL_ENDPOINT: string = API_URL + 'presigned-url/'; +export const CHECK_MOMENT_UPLOAD_FINISHED_ENDPOINT: string = API_URL + 'moments/check_upload_finished/'; export const FRIENDS_ENDPOINT: string = API_URL + 'friends/'; export const ALL_USERS_ENDPOINT: string = API_URL + 'users/'; export const REPORT_ISSUE_ENDPOINT: string = API_URL + 'report/'; diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index 5ae62838..ddfdf5d2 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -10,6 +10,7 @@ import { import { CommentThreadType, MomentPostType, + MomentUploadProgressBarType, MomentUploadStatusType, UniversityType, } from './../types/types'; @@ -49,7 +50,7 @@ export const NO_USER_DATA = { profile: NO_PROFILE, avatar: undefined, cover: undefined, - momentUploadStatus: MomentUploadStatusType.Empty, + momentUploadProgressBar: undefined, isOnboardedUser: false, newVersionAvailable: false, newNotificationReceived: false, diff --git a/src/types/types.ts b/src/types/types.ts index 930f833b..2001426a 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -61,8 +61,13 @@ export interface ProfileInfoType { is_private: boolean; } +export interface MomentUploadProgressBarType { + status: MomentUploadStatusType; + originalVideoDuration: number; + momentId: string; +} + export enum MomentUploadStatusType { - Empty = 'Empty', Uploading = 'Uploading', Done = 'Done', Error = 'Error', -- cgit v1.2.3-70-g09d2 From 9a043ad37aefb5c1b5908c4171cef36977acd5f4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 23 Jul 2021 14:48:37 -0400 Subject: Fix finish process check issue, Adjust progress bar timing --- src/components/moments/MomentUploadProgressBar.tsx | 17 +++++++---------- src/constants/api.ts | 2 +- src/services/MomentService.ts | 6 +++--- 3 files changed, 11 insertions(+), 14 deletions(-) (limited to 'src/constants') diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx index 0c93ea95..9412fcd6 100644 --- a/src/components/moments/MomentUploadProgressBar.tsx +++ b/src/components/moments/MomentUploadProgressBar.tsx @@ -8,7 +8,7 @@ import { withTiming, } from 'react-native-reanimated'; import {useDispatch, useSelector} from 'react-redux'; -import {checkMomentUploadFinished} from '../../services'; +import {checkMomentDoneProcessing} from '../../services'; import {loadUserMoments} from '../../store/actions'; import {setMomentUploadProgressBar} from '../../store/reducers'; import {RootState} from '../../store/rootReducer'; @@ -36,10 +36,10 @@ const MomentUploadProgressBar: React.FC = useEffect(() => { let doneProcessing = false; - const checkDone = () => { + const checkDone = async () => { if ( momentUploadProgressBar && - checkMomentUploadFinished(momentUploadProgressBar?.momentId) + (await checkMomentDoneProcessing(momentUploadProgressBar!.momentId)) ) { doneProcessing = true; cancelAnimation(progress); @@ -51,6 +51,7 @@ 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: { @@ -60,7 +61,7 @@ const MomentUploadProgressBar: React.FC = }, }, }); - }, finishProgressBarDuration + 1000); + }, finishProgressBarDuration); } }; if ( @@ -97,11 +98,10 @@ const MomentUploadProgressBar: React.FC = if ( momentUploadProgressBar?.status === MomentUploadStatusType.UploadingToS3 ) { - // assume it takes video duration (upload) + 1/2 of the video (process) duration to upload - // e.g. 30s video => 30 + 30 * .5 = 37.5s + // e.g. 30s video => 30 * 2 = 60s const videoDuration = momentUploadProgressBar.originalVideoDuration ?? 30; - const durationInSeconds = videoDuration * 1.5; + const durationInSeconds = videoDuration * 2; progress.value = withTiming(1, { duration: durationInSeconds * 1000, easing: Easing.out(Easing.quad), @@ -117,9 +117,6 @@ const MomentUploadProgressBar: React.FC = progress.value = 0; // clear this component after a duration setTimeout(() => { - if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) { - dispatch(loadUserMoments(loggedInUserId)); - } dispatch({ type: setMomentUploadProgressBar.type, payload: { diff --git a/src/constants/api.ts b/src/constants/api.ts index ec2f0897..b4548634 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -39,7 +39,7 @@ export const COMMENTS_ENDPOINT: string = API_URL + 'comments/'; export const COMMENT_REACTIONS_ENDPOINT: string = API_URL + 'reaction-comment/'; export const COMMENT_REACTIONS_REPLY_ENDPOINT: string = API_URL + 'reaction-reply/'; export const PRESIGNED_URL_ENDPOINT: string = API_URL + 'presigned-url/'; -export const CHECK_MOMENT_UPLOAD_FINISHED_ENDPOINT: string = API_URL + 'moments/check_upload_finished/'; +export const CHECK_MOMENT_UPLOAD_DONE_PROCESSING_ENDPOINT: string = API_URL + 'moments/check_done_processing/'; export const FRIENDS_ENDPOINT: string = API_URL + 'friends/'; export const ALL_USERS_ENDPOINT: string = API_URL + 'users/'; export const REPORT_ISSUE_ENDPOINT: string = API_URL + 'report/'; diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts index 2a0d9113..b67cd169 100644 --- a/src/services/MomentService.ts +++ b/src/services/MomentService.ts @@ -1,7 +1,7 @@ import AsyncStorage from '@react-native-community/async-storage'; import RNFetchBlob from 'rn-fetch-blob'; import { - CHECK_MOMENT_UPLOAD_FINISHED_ENDPOINT, + CHECK_MOMENT_UPLOAD_DONE_PROCESSING_ENDPOINT, MOMENTS_ENDPOINT, MOMENTTAG_ENDPOINT, MOMENT_TAGS_ENDPOINT, @@ -322,11 +322,11 @@ export const handleVideoUpload = async ( return false; }; -export const checkMomentUploadFinished = async (momentId: string) => { +export const checkMomentDoneProcessing = async (momentId: string) => { try { const token = await AsyncStorage.getItem('token'); const response = await fetch( - CHECK_MOMENT_UPLOAD_FINISHED_ENDPOINT + '?moment_id=' + momentId, + CHECK_MOMENT_UPLOAD_DONE_PROCESSING_ENDPOINT + '?moment_id=' + momentId, { method: 'GET', headers: { -- cgit v1.2.3-70-g09d2 From e3302c00072ab8275ccd01f58037fcadf54a9614 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 23 Jul 2021 15:08:53 -0400 Subject: Add check to prevent multiple uploads --- src/constants/strings.ts | 13 +++++------ src/screens/upload/EditMedia.tsx | 47 ++++++++++++++++++++++++++++------------ 2 files changed, 39 insertions(+), 21 deletions(-) (limited to 'src/constants') diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 071b3835..450d7e5c 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -2,8 +2,8 @@ // Below is the regex to convert this into a csv for the Google Sheet // export const (.*) = .*?(['|"|`])(.*)\2; // replace with: $1\t$3 -export const APP_STORE_LINK = 'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613' export const ADD_COMMENT_TEXT = (username?: string) => username ? `Reply to ${username}` : 'Add a comment...' +export const APP_STORE_LINK = 'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613' export const COMING_SOON_MSG = 'Creating more fun things for you, surprises coming soon πŸ˜‰'; export const ERROR_ATTEMPT_EDIT_SP = 'Can\'t let you do that yet! Please onboard Suggested People first!'; export const ERROR_AUTHENTICATION = 'An error occurred during authentication. Please login again!'; @@ -31,8 +31,10 @@ export const ERROR_INVLAID_CODE = 'The code entered is not valid!'; export const ERROR_LINK = (str: string) => `Unable to link with ${str}, Please check your login and try again`; export const ERROR_LOGIN = 'There was a problem logging you in, please refresh and try again'; export const ERROR_LOGIN_FAILED = 'Login failed. Check your username and password, and try again'; +export const ERROR_MOMENT_UPLOAD_IN_PROGRESS = 'Please wait, there is a Moment upload in progress.'; export const ERROR_NEXT_PAGE = 'There was a problem while loading the next page πŸ˜“, try again in a couple minutes'; export const ERROR_NO_CONTACT_INVITE_LEFT = 'You have no more invites left!' +export const ERROR_NO_MOMENT_CATEGORY = 'Please select a category!'; export const ERROR_NOT_ONBOARDED = 'You are now on waitlist, please enter your invitation code if you have one'; export const ERROR_PHONE_IN_USE = 'Phone already in use, please try another one'; export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed πŸ˜“'; @@ -45,7 +47,6 @@ export const ERROR_SELECT_GENDER = 'Please select your gender'; export const ERROR_SELECT_UNIVERSITY = 'Please select your University'; export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please refresh and try again in a few mins'; export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app'; -export const ERROR_NO_MOMENT_CATEGORY = 'Please select a category!'; export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again"; export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again"; export const ERROR_T_AND_C_NOT_ACCEPTED = 'You must first agree to the terms and conditions.'; @@ -61,6 +62,7 @@ export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pi export const ERROR_UPLOAD_SP_PHOTO = 'Unable to update suggested people photo. Please retry!'; export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed πŸ˜“'; export const FIRST_MESSAGE = 'How about sending your first message to your friend'; +export const INVITE_USER_SMS_BODY = (invitedUserName: string, invitee: string, inviteCode: string) => `Hey ${invitedUserName}!\nYou've been tagged by ${invitee}. Follow the instructions below to skip the line and join them on Tagg!\nSign up and use this code to get in: ${inviteCode}\n ${APP_STORE_LINK}`; export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`; export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones'; export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; @@ -69,13 +71,10 @@ export const PRIVATE_ACCOUNT = 'This account is private'; export const START_CHATTING = 'Let’s Start Chatting!'; export const SUCCESS_BADGES_UPDATE = 'Badges updated successfully!' export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on'; +export const SUCCESS_CONFIRM_INVITE_CONTACT_MESSAGE = 'Use one now?'; +export const SUCCESS_CONFIRM_INVITE_CONTACT_TITLE = (str: string) => `You have ${str} invites left!`; export const SUCCESS_INVITATION_CODE = 'Welcome to Tagg!'; export const SUCCESS_INVITE_CONTACT = (str: string) => `Success! You now have ${str} invites left!`; -export const SUCCESS_CONFIRM_INVITE_CONTACT_TITLE = (str: string) => `You have ${str} invites left!`; -export const SUCCESS_CONFIRM_INVITE_CONTACT_MESSAGE = 'Use one now?'; -export const INVITE_USER_SMS_BODY = (invitedUserName: string, invitee: string, inviteCode: string) => `Hey ${invitedUserName}!\n -You've been tagged by ${invitee}. Follow the instructions below to skip the line and join them on Tagg!\n -Sign up and use this code to get in: ${inviteCode}\n ${APP_STORE_LINK}`; export const SUCCESS_LAST_CONTACT_INVITE = 'Done! That was your last invite, hope you used it wisely!'; export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} πŸŽ‰`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the Moment was uploaded successfully!'; diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx index 9a061a53..07d20a7b 100644 --- a/src/screens/upload/EditMedia.tsx +++ b/src/screens/upload/EditMedia.tsx @@ -2,14 +2,24 @@ import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/R import {RouteProp} from '@react-navigation/core'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useEffect, useRef, useState} from 'react'; -import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import { + Alert, + Image, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom'; import PhotoManipulator from 'react-native-photo-manipulator'; +import {useSelector} from 'react-redux'; import TrimIcon from '../../assets/icons/trim.svg'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {SaveButton, TrimmerPlayer} from '../../components'; import {TaggLoadingIndicator, TaggSquareButton} from '../../components/common'; +import {ERROR_MOMENT_UPLOAD_IN_PROGRESS} from '../../constants/strings'; import {MainStackParams} from '../../routes'; +import {RootState} from '../../store/rootReducer'; import { cropVideo, HeaderHeight, @@ -36,6 +46,9 @@ export const EditMedia: React.FC = ({route, navigation}) => { selectedCategory, media: {isVideo}, } = route.params; + const {momentUploadProgressBar} = useSelector( + (state: RootState) => state.user, + ); const [aspectRatio, setAspectRatio] = useState(1); // width and height of video, if video const [origDimensions, setOrigDimensions] = useState([0, 0]); @@ -252,6 +265,24 @@ export const EditMedia: React.FC = ({route, navigation}) => { ); }; + const handleNext = () => { + if (momentUploadProgressBar) { + Alert.alert(ERROR_MOMENT_UPLOAD_IN_PROGRESS); + } else { + processVideo((uri) => + navigation.navigate('CaptionScreen', { + screenType, + media: { + uri, + isVideo, + videoDuration, + }, + selectedCategory, + }), + ); + } + }; + return ( {cropLoading && } @@ -391,19 +422,7 @@ export const EditMedia: React.FC = ({route, navigation}) => { /> - processVideo((uri) => - navigation.navigate('CaptionScreen', { - screenType, - media: { - uri, - isVideo, - videoDuration, - }, - selectedCategory, - }), - ) - } + onPress={handleNext} title={'Next'} buttonStyle={'large'} buttonColor={'blue'} -- cgit v1.2.3-70-g09d2