diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/moments/MomentUploadProgressBar.tsx | 110 |
1 files changed, 93 insertions, 17 deletions
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx index 96f9fa27..a5dfb8d0 100644 --- a/src/components/moments/MomentUploadProgressBar.tsx +++ b/src/components/moments/MomentUploadProgressBar.tsx @@ -1,5 +1,5 @@ import React, {useEffect} from 'react'; -import {Image, StyleSheet, Text} from 'react-native'; +import {Image, StyleSheet, Text, TouchableOpacity} from 'react-native'; import {View} from 'react-native-animatable'; import { cancelAnimation, @@ -14,7 +14,11 @@ import { TAGG_PURPLE, } from '../../constants'; import {checkMomentDoneProcessing} from '../../services'; -import {loadUserMoments} from '../../store/actions'; +import { + handleImageMomentUpload, + handleVideoMomentUpload, + loadUserMoments, +} from '../../store/actions'; import {setMomentUploadProgressBar} from '../../store/reducers'; import {RootState} from '../../store/rootReducer'; import {MomentUploadStatusType} from '../../types'; @@ -38,7 +42,35 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> = MomentUploadStatusType.UploadingToS3 || momentUploadProgressBar?.status === MomentUploadStatusType.WaitingForDoneProcessing; + let timeoutTimer: ReturnType<typeof setTimeout> | undefined; + const cantainerHeight = + momentUploadProgressBar?.status === MomentUploadStatusType.Error + ? normalize(121) + : normalize(84); + const retryUpload = () => { + if (!momentUploadProgressBar || !timeoutTimer) { + return; + } + clearTimeout(timeoutTimer); + const {type, uri, caption, category, tags} = + momentUploadProgressBar.momentInfo; + if (type === 'image') { + dispatch(handleImageMomentUpload(uri, caption, category, tags)); + } else { + dispatch( + handleVideoMomentUpload( + uri, + momentUploadProgressBar.originalVideoDuration ?? 30, + caption, + category, + tags, + ), + ); + } + }; + + // WAITING_FOR_PROCESSING, check if done processing in a loop with a delay useEffect(() => { let doneProcessing = false; const checkDone = async () => { @@ -98,6 +130,7 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> = } }, [momentUploadProgressBar?.status]); + // UPLOADING_TO_S3, begin progress bar animation useEffect(() => { if ( momentUploadProgressBar?.status === MomentUploadStatusType.UploadingToS3 @@ -113,14 +146,31 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> = } }, [momentUploadProgressBar?.status]); + // ERROR, dismiss progress bar after some time, but allow retry + useEffect(() => { + if (momentUploadProgressBar?.status === MomentUploadStatusType.Error) { + progress.value = 0; + timeoutTimer = setTimeout(() => { + dispatch({ + type: setMomentUploadProgressBar.type, + payload: { + momentUploadProgressBar: undefined, + }, + }); + }, 5000); + } + }, [momentUploadProgressBar?.status]); + + // DONE, reload user moments useEffect(() => { if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) { dispatch(loadUserMoments(loggedInUserId)); } - if ( - momentUploadProgressBar?.status === MomentUploadStatusType.Done || - momentUploadProgressBar?.status === MomentUploadStatusType.Error - ) { + }, [momentUploadProgressBar?.status]); + + // DONE, clear and dismiss progress bar after some time + useEffect(() => { + if (momentUploadProgressBar?.status === MomentUploadStatusType.Done) { progress.value = 0; // clear this component after a duration setTimeout(() => { @@ -142,11 +192,12 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> = <View style={[ styles.background, + {height: StatusBarHeight + cantainerHeight}, momentUploadProgressBar?.status === MomentUploadStatusType.Error ? styles.redBackground : {}, ]}> - <View style={styles.container}> + <View style={[styles.container, {height: cantainerHeight}]}> {showLoading && ( <> <Text style={styles.text}>Uploading Moment...</Text> @@ -171,14 +222,21 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> = </View> )} {momentUploadProgressBar.status === MomentUploadStatusType.Error && ( - <View style={styles.row}> - <Image - source={require('../../assets/images/white-x.png')} - style={styles.x} - /> - <Text style={styles.whiteText}> - Unable to upload Moment. Please retry - </Text> + <View style={styles.column}> + <View style={styles.row}> + <Image + source={require('../../assets/images/white-x.png')} + style={styles.x} + /> + <Text style={styles.whiteText}> + Unable to upload Moment. Please retry + </Text> + </View> + <TouchableOpacity + onPress={retryUpload} + style={styles.retryButton}> + <Text style={styles.retryText}>Retry</Text> + </TouchableOpacity> </View> )} </View> @@ -190,7 +248,6 @@ const styles = StyleSheet.create({ background: { position: 'absolute', zIndex: 999, - height: StatusBarHeight + normalize(84), backgroundColor: 'white', width: '100%', alignItems: 'center', @@ -198,7 +255,6 @@ const styles = StyleSheet.create({ container: { justifyContent: 'center', marginTop: StatusBarHeight, - height: normalize(84), }, text: { fontSize: normalize(14), @@ -217,6 +273,12 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', }, + column: { + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'space-evenly', + flex: 1, + }, whiteText: { color: 'white', fontSize: normalize(14), @@ -229,6 +291,20 @@ const styles = StyleSheet.create({ height: normalize(26), marginRight: 10, }, + retryButton: { + backgroundColor: '#A2352C', + borderRadius: 6, + height: normalize(37), + width: '90%', + justifyContent: 'center', + alignItems: 'center', + }, + retryText: { + color: 'white', + fontWeight: 'bold', + letterSpacing: 2, + fontSize: normalize(15), + }, }); export default MomentUploadProgressBar; |