acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

APP-1645: Improve video upload progress indicator (#11248)

Browse Source
This commit is contained in:
Spence Pope
2026-08-12 17:14:06 -04:00
committed by DS Boyce
parent 68dd6f8cb0
commit db2928ada2
4 changed files with 155 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/composer/Composer.tsx
+16 -28
View File
@@ -25,7 +25,6 @@ import {Circle as ProgressCircle} from 'react-native-progress'
import Animated, {
type AnimatedRef,
type AnimatedStyle,
Easing,
FadeIn,
FadeOut,
interpolateColor,
@@ -37,7 +36,6 @@ import Animated, {
useAnimatedStyle,
useDerivedValue,
useSharedValue,
withRepeat,
withTiming,
ZoomIn,
ZoomOut,
@@ -127,6 +125,7 @@ import {atoms as a, native, useBreakpoints, useTheme, web} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as EmojiPicker from '#/components/EmojiPicker'
import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheckIcon} from '#/components/icons/CircleCheck'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmileIcon} from '#/components/icons/Emoji'
import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
@@ -180,6 +179,7 @@ import {
processVideo,
type VideoState,
} from './state/video'
import {videoProgressWithinPhase} from './state/videoProgress'
import {type TextInputRef} from './text-input/TextInput.types'
import {getVideoMetadata} from './videos/metadata'
import {clearThumbnailCache} from './videos/VideoTranscodeBackdrop'
@@ -1996,7 +1996,10 @@ function ComposerEmbeds({
(video.status === 'compressing' ? (
<VideoTranscodeProgress
asset={video.asset}
progress={video.progress}
progress={videoProgressWithinPhase(
'compressing',
video.progress,
)}
clear={clearVideo}
/>
) : video.video ? (
@@ -2672,28 +2675,7 @@ function VideoUploadToolbar({state}: {state: VideoState}) {
const t = useTheme()
const {t: l} = useLingui()
const progress = state.progress
const shouldRotate =
state.status === 'processing' && (progress === 0 || progress === 1)
let wheelProgress = shouldRotate ? 0.33 : progress
const rotate = useDerivedValue(() => {
if (shouldRotate) {
return withRepeat(
withTiming(360, {
duration: 2500,
easing: Easing.out(Easing.cubic),
}),
-1,
)
}
return 0
})
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{rotateZ: `${rotate.get()}deg`}],
}
})
let wheelProgress = progress
let text = ''
@@ -2723,7 +2705,7 @@ function VideoUploadToolbar({state}: {state: VideoState}) {
break
case 'error':
text = l`Error`
wheelProgress = 100
wheelProgress = 1
break
case 'done':
if (isGif) {
@@ -2736,7 +2718,13 @@ function VideoUploadToolbar({state}: {state: VideoState}) {
return (
<ToolbarWrapper style={[a.flex_row, a.align_center, {paddingVertical: 5}]}>
<Animated.View style={[animatedStyle]}>
{state.status === 'done' ? (
<Animated.View
entering={ZoomIn.duration(300)}
style={[a.align_center, a.justify_center, {height: 30, width: 30}]}>
<CircleCheckIcon size="lg" fill={t.palette.primary_500} />
</Animated.View>
) : (
<ProgressCircle
size={30}
borderWidth={1}
@@ -2748,7 +2736,7 @@ function VideoUploadToolbar({state}: {state: VideoState}) {
}
progress={wheelProgress}
/>
</Animated.View>
)}
<Text style={[a.font_semi_bold, a.ml_sm]}>{text}</Text>
</ToolbarWrapper>
)
src/view/com/composer/state/video.ts
+30 -8
View File
@@ -17,6 +17,11 @@ import {uploadVideo} from '#/lib/media/video/upload'
import {createVideoAgent} from '#/lib/media/video/util'
import {isNetworkError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {
advanceVideoProgress,
didSkipVideoCompression,
videoProgressForPhase,
} from './videoProgress'
type CaptionsTrack = {lang: string; file: File}
@@ -24,6 +29,7 @@ export type VideoAction =
| {
type: 'compressing_to_uploading'
video: CompressedVideo
compressionSkipped: boolean
signal: AbortSignal
}
| {
@@ -74,7 +80,7 @@ export type NoVideoState = typeof NO_VIDEO
type ErrorState = {
status: 'error'
progress: 100
progress: number
abortController: AbortController
asset: ImagePickerAsset | null
video: CompressedVideo | null
@@ -102,6 +108,7 @@ type CompressingState = {
type UploadingState = {
status: 'uploading'
progress: number
compressionSkipped: boolean
abortController: AbortController
asset: ImagePickerAsset
video: CompressedVideo
@@ -128,7 +135,7 @@ type ProcessingState = {
type DoneState = {
status: 'done'
progress: 100
progress: 1
abortController: AbortController
asset: ImagePickerAsset
video: CompressedVideo
@@ -173,7 +180,7 @@ export function videoReducer(
if (action.type === 'to_error') {
return {
status: 'error',
progress: 100,
progress: state.progress,
abortController: state.abortController,
error: action.error,
asset: state.asset ?? null,
@@ -185,9 +192,13 @@ export function videoReducer(
}
} else if (action.type === 'update_progress') {
if (state.status === 'compressing' || state.status === 'uploading') {
const phase =
state.status === 'uploading' && state.compressionSkipped
? 'uploadingWithoutCompression'
: state.status
return {
...state,
progress: action.progress,
progress: advanceVideoProgress(state.progress, phase, action.progress),
}
}
} else if (action.type === 'update_alt_text') {
@@ -204,7 +215,13 @@ export function videoReducer(
if (state.status === 'compressing') {
return {
status: 'uploading',
progress: 0,
progress: videoProgressForPhase(
action.compressionSkipped
? 'uploadingWithoutCompression'
: 'uploading',
0,
),
compressionSkipped: action.compressionSkipped,
abortController: state.abortController,
asset: state.asset,
video: action.video,
@@ -218,7 +235,7 @@ export function videoReducer(
if (state.status === 'uploading') {
return {
status: 'processing',
progress: 0,
progress: videoProgressForPhase('processing', 0),
abortController: state.abortController,
asset: state.asset,
video: state.video,
@@ -236,7 +253,11 @@ export function videoReducer(
jobStatus: action.jobStatus,
progress:
action.jobStatus.progress !== undefined
? action.jobStatus.progress / 100
? advanceVideoProgress(
state.progress,
'processing',
action.jobStatus.progress / 100,
)
: state.progress,
}
}
@@ -244,7 +265,7 @@ export function videoReducer(
if (state.status === 'processing') {
return {
status: 'done',
progress: 100,
progress: 1,
abortController: state.abortController,
asset: state.asset,
video: state.video,
@@ -314,6 +335,7 @@ export async function processVideo(
dispatch({
type: 'compressing_to_uploading',
video,
compressionSkipped: didSkipVideoCompression(video.passthroughReason),
signal,
})
src/view/com/composer/state/videoProgress.test.ts
+55
View File
@@ -0,0 +1,55 @@
import {
advanceVideoProgress,
didSkipVideoCompression,
videoProgressForPhase,
videoProgressWithinPhase,
} from './videoProgress'
describe('didSkipVideoCompression', () => {
it('distinguishes a real skip from a failed compression attempt', () => {
expect(didSkipVideoCompression(undefined)).toBe(false)
expect(didSkipVideoCompression('below-byte-threshold')).toBe(true)
expect(didSkipVideoCompression('no-webcodecs')).toBe(true)
expect(didSkipVideoCompression('gif')).toBe(true)
expect(didSkipVideoCompression('compress-error-fallback')).toBe(false)
})
})
describe('videoProgressForPhase', () => {
it('maps each phase onto one continuous timeline', () => {
expect(videoProgressForPhase('compressing', 0)).toBe(0)
expect(videoProgressForPhase('compressing', 1)).toBe(0.3)
expect(videoProgressForPhase('uploading', 0)).toBe(0.3)
expect(videoProgressForPhase('uploading', 1)).toBe(0.5)
expect(videoProgressForPhase('uploadingWithoutCompression', 0)).toBe(0)
expect(videoProgressForPhase('uploadingWithoutCompression', 1)).toBe(0.5)
expect(videoProgressForPhase('processing', 0)).toBe(0.5)
expect(videoProgressForPhase('processing', 0.5)).toBe(0.75)
expect(videoProgressForPhase('processing', 1)).toBe(1)
})
it('clamps invalid phase progress', () => {
expect(videoProgressForPhase('uploading', -1)).toBe(0.3)
expect(videoProgressForPhase('uploading', 2)).toBe(0.5)
})
})
describe('videoProgressWithinPhase', () => {
it('maps global progress back to phase-local progress', () => {
expect(videoProgressWithinPhase('compressing', 0)).toBe(0)
expect(videoProgressWithinPhase('compressing', 0.15)).toBe(0.5)
expect(videoProgressWithinPhase('compressing', 0.3)).toBe(1)
})
it('clamps progress outside the phase', () => {
expect(videoProgressWithinPhase('compressing', -1)).toBe(0)
expect(videoProgressWithinPhase('compressing', 1)).toBe(1)
})
})
describe('advanceVideoProgress', () => {
it('does not move backwards when a transport retries or falls back', () => {
const progressed = advanceVideoProgress(0.5, 'uploading', 0.8)
expect(advanceVideoProgress(progressed, 'uploading', 0)).toBe(progressed)
})
})
src/view/com/composer/state/videoProgress.ts
+54
View File
@@ -0,0 +1,54 @@
import {type VideoCompressSkipReason} from '#/lib/media/video/types'
export type VideoProgressPhase =
| 'compressing'
| 'uploading'
| 'uploadingWithoutCompression'
| 'processing'
// Keep progress monotonic across the full client pipeline instead of showing
// three separate 0 -> 100 cycles. Backend processing progress covers the
// entire server-side job, so it maps directly onto the final half.
const PHASE_RANGES: Record<VideoProgressPhase, [number, number]> = {
compressing: [0, 0.3],
uploading: [0.3, 0.5],
uploadingWithoutCompression: [0, 0.5],
processing: [0.5, 1],
}
export function didSkipVideoCompression(
passthroughReason: VideoCompressSkipReason | undefined,
): boolean {
// The web compressor can return the original file after reporting partial
// compression progress. Keep that case on the post-compression upload band
// so the global indicator cannot jump backwards.
return (
passthroughReason !== undefined &&
passthroughReason !== 'compress-error-fallback'
)
}
export function videoProgressForPhase(
phase: VideoProgressPhase,
phaseProgress: number,
): number {
const [start, end] = PHASE_RANGES[phase]
const clamped = Math.min(1, Math.max(0, phaseProgress))
return start + (end - start) * clamped
}
export function videoProgressWithinPhase(
phase: VideoProgressPhase,
progress: number,
): number {
const [start, end] = PHASE_RANGES[phase]
return Math.min(1, Math.max(0, (progress - start) / (end - start)))
}
export function advanceVideoProgress(
currentProgress: number,
phase: VideoProgressPhase,
phaseProgress: number,
): number {
return Math.max(currentProgress, videoProgressForPhase(phase, phaseProgress))
}