diff --git a/src/state/queries/video/video.ts b/src/state/queries/video/video.ts index 0c65e226..4546595e 100644 --- a/src/state/queries/video/video.ts +++ b/src/state/queries/video/video.ts @@ -256,7 +256,7 @@ const useUploadStatusQuery = ({ throw new Error('Job completed, but did not return a blob') onSuccess(status.blob) } 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) return status diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index b07adf2a..4a6e4141 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -20,10 +20,12 @@ import { // @ts-expect-error no type definition import ProgressCircle from 'react-native-progress/Circle' import Animated, { + Easing, FadeIn, FadeOut, interpolateColor, useAnimatedStyle, + useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated' @@ -1080,6 +1082,26 @@ function ToolbarWrapper({ function VideoUploadToolbar({state}: {state: VideoUploadState}) { const t = useTheme() 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 = '' @@ -1098,26 +1120,22 @@ function VideoUploadToolbar({state}: {state: VideoUploadState}) { 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) { text = _('Error') - progress = 100 + wheelProgress = 100 } return ( - + + + {text} )