[Video] Show better progress (#5133)
parent
d94ff2695d
commit
45bb2477d8
|
@ -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
|
||||||
|
|
|
@ -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}]}>
|
||||||
|
<Animated.View style={[animatedStyle]}>
|
||||||
<ProgressCircle
|
<ProgressCircle
|
||||||
size={30}
|
size={30}
|
||||||
borderWidth={1}
|
borderWidth={1}
|
||||||
borderColor={t.atoms.border_contrast_low.borderColor}
|
borderColor={t.atoms.border_contrast_low.borderColor}
|
||||||
color={state.error ? t.palette.negative_500 : t.palette.primary_500}
|
color={state.error ? t.palette.negative_500 : t.palette.primary_500}
|
||||||
progress={progress}
|
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>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue