forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] Show better progress (#5133)
+33
-15
+1
-1
src/state/queries/video/video.ts
+1
-1
src/state/queries/video/video.ts
···
256
256
throw new Error('Job completed, but did not return a blob')
257
257
onSuccess(status.blob)
258
258
} else if (status.state === 'JOB_STATE_FAILED') {
259
-
throw new Error('Job failed to process')
259
+
throw new Error(status.error ?? 'Job failed to process')
260
260
}
261
261
onStatusChange(status)
262
262
return status
+32
-14
src/view/com/composer/Composer.tsx
+32
-14
src/view/com/composer/Composer.tsx
···
20
20
// @ts-expect-error no type definition
21
21
import ProgressCircle from 'react-native-progress/Circle'
22
22
import Animated, {
23
+
Easing,
23
24
FadeIn,
24
25
FadeOut,
25
26
interpolateColor,
26
27
useAnimatedStyle,
28
+
useDerivedValue,
27
29
useSharedValue,
28
30
withTiming,
29
31
} from 'react-native-reanimated'
···
1080
1082
function VideoUploadToolbar({state}: {state: VideoUploadState}) {
1081
1083
const t = useTheme()
1082
1084
const {_} = useLingui()
1085
+
const progress = state.jobStatus?.progress
1086
+
? state.jobStatus.progress / 100
1087
+
: state.progress
1088
+
let wheelProgress = progress === 0 || progress === 1 ? 0.33 : progress
1089
+
1090
+
const rotate = useDerivedValue(() => {
1091
+
if (progress === 0 || progress >= 0.99) {
1092
+
return withTiming(360, {
1093
+
duration: 2500,
1094
+
easing: Easing.out(Easing.cubic),
1095
+
})
1096
+
}
1097
+
return 0
1098
+
})
1099
+
1100
+
const animatedStyle = useAnimatedStyle(() => {
1101
+
return {
1102
+
transform: [{rotateZ: `${rotate.value}deg`}],
1103
+
}
1104
+
})
1083
1105
1084
1106
let text = ''
1085
1107
···
1098
1120
break
1099
1121
}
1100
1122
1101
-
// we could use state.jobStatus?.progress but 99% of the time it jumps from 0 to 100
1102
-
let progress =
1103
-
state.status === 'compressing' || state.status === 'uploading'
1104
-
? state.progress
1105
-
: 100
1106
-
1107
1123
if (state.error) {
1108
1124
text = _('Error')
1109
-
progress = 100
1125
+
wheelProgress = 100
1110
1126
}
1111
1127
1112
1128
return (
1113
1129
<ToolbarWrapper style={[a.flex_row, a.align_center, {paddingVertical: 5}]}>
1114
-
<ProgressCircle
1115
-
size={30}
1116
-
borderWidth={1}
1117
-
borderColor={t.atoms.border_contrast_low.borderColor}
1118
-
color={state.error ? t.palette.negative_500 : t.palette.primary_500}
1119
-
progress={progress}
1120
-
/>
1130
+
<Animated.View style={[animatedStyle]}>
1131
+
<ProgressCircle
1132
+
size={30}
1133
+
borderWidth={1}
1134
+
borderColor={t.atoms.border_contrast_low.borderColor}
1135
+
color={state.error ? t.palette.negative_500 : t.palette.primary_500}
1136
+
progress={wheelProgress}
1137
+
/>
1138
+
</Animated.View>
1121
1139
<NewText style={[a.font_bold, a.ml_sm]}>{text}</NewText>
1122
1140
</ToolbarWrapper>
1123
1141
)