[Video] Show better progress (#5133)

zio/stable
Hailey 2024-09-04 09:17:14 -07:00 committed by GitHub
parent d94ff2695d
commit 45bb2477d8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 15 deletions

View File

@ -256,7 +256,7 @@ const useUploadStatusQuery = ({
throw new Error('Job completed, but did not return a blob') throw new Error('Job completed, but did not return a blob')
onSuccess(status.blob) onSuccess(status.blob)
} else if (status.state === 'JOB_STATE_FAILED') { } else if (status.state === 'JOB_STATE_FAILED') {
throw new Error('Job failed to process') throw new Error(status.error ?? 'Job failed to process')
} }
onStatusChange(status) onStatusChange(status)
return status return status

View File

@ -20,10 +20,12 @@ import {
// @ts-expect-error no type definition // @ts-expect-error no type definition
import ProgressCircle from 'react-native-progress/Circle' import ProgressCircle from 'react-native-progress/Circle'
import Animated, { import Animated, {
Easing,
FadeIn, FadeIn,
FadeOut, FadeOut,
interpolateColor, interpolateColor,
useAnimatedStyle, useAnimatedStyle,
useDerivedValue,
useSharedValue, useSharedValue,
withTiming, withTiming,
} from 'react-native-reanimated' } from 'react-native-reanimated'
@ -1080,6 +1082,26 @@ function ToolbarWrapper({
function VideoUploadToolbar({state}: {state: VideoUploadState}) { function VideoUploadToolbar({state}: {state: VideoUploadState}) {
const t = useTheme() const t = useTheme()
const {_} = useLingui() const {_} = useLingui()
const progress = state.jobStatus?.progress
? state.jobStatus.progress / 100
: state.progress
let wheelProgress = progress === 0 || progress === 1 ? 0.33 : progress
const rotate = useDerivedValue(() => {
if (progress === 0 || progress >= 0.99) {
return withTiming(360, {
duration: 2500,
easing: Easing.out(Easing.cubic),
})
}
return 0
})
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{rotateZ: `${rotate.value}deg`}],
}
})
let text = '' let text = ''
@ -1098,26 +1120,22 @@ function VideoUploadToolbar({state}: {state: VideoUploadState}) {
break break
} }
// we could use state.jobStatus?.progress but 99% of the time it jumps from 0 to 100
let progress =
state.status === 'compressing' || state.status === 'uploading'
? state.progress
: 100
if (state.error) { if (state.error) {
text = _('Error') text = _('Error')
progress = 100 wheelProgress = 100
} }
return ( return (
<ToolbarWrapper style={[a.flex_row, a.align_center, {paddingVertical: 5}]}> <ToolbarWrapper style={[a.flex_row, a.align_center, {paddingVertical: 5}]}>
<ProgressCircle <Animated.View style={[animatedStyle]}>
size={30} <ProgressCircle
borderWidth={1} size={30}
borderColor={t.atoms.border_contrast_low.borderColor} borderWidth={1}
color={state.error ? t.palette.negative_500 : t.palette.primary_500} borderColor={t.atoms.border_contrast_low.borderColor}
progress={progress} color={state.error ? t.palette.negative_500 : t.palette.primary_500}
/> progress={wheelProgress}
/>
</Animated.View>
<NewText style={[a.font_bold, a.ml_sm]}>{text}</NewText> <NewText style={[a.font_bold, a.ml_sm]}>{text}</NewText>
</ToolbarWrapper> </ToolbarWrapper>
) )