[Video] Make compress/upload cancelable (#4996)

* add abort controller to video upload system

* rm log

* rm log 2

src/lib/async/cancelable.ts

@@ -0,0 +1,20 @@
+export function cancelable<A, T>(
+  f: (args: A) => Promise<T>,
+  signal: AbortSignal,
+) {
+  return (args: A) => {
+    return new Promise<T>((resolve, reject) => {
+      signal.addEventListener('abort', () => {
+        reject(new AbortError())
+      })
+      f(args).then(resolve, reject)
+    })
+  }
+}
+
+export class AbortError extends Error {
+  constructor() {
+    super('Aborted')
+    this.name = 'AbortError'
+  }
+}

src/lib/media/video/compress.ts

@@ -8,19 +8,25 @@ export type CompressedVideo = {
 export async function compressVideo(
   file: string,
   opts?: {
-    getCancellationId?: (id: string) => void
+    signal?: AbortSignal
     onProgress?: (progress: number) => void
   },
 ): Promise<CompressedVideo> {
-  const {onProgress, getCancellationId} = opts || {}
+  const {onProgress, signal} = opts || {}
 
   const compressed = await Video.compress(
     file,
     {
-      getCancellationId,
       compressionMethod: 'manual',
       bitrate: 3_000_000, // 3mbps
       maxSize: 1920,
+      getCancellationId: id => {
+        if (signal) {
+          signal.addEventListener('abort', () => {
+            Video.cancelCompression(id)
+          })
+        }
+      },
     },
     onProgress,
   )

src/lib/media/video/compress.web.ts

@@ -10,8 +10,9 @@ export type CompressedVideo = {
 // doesn't actually compress, but throws if >100MB
 export async function compressVideo(
   file: string,
-  _callbacks?: {
-    onProgress: (progress: number) => void
+  _opts?: {
+    signal?: AbortSignal
+    onProgress?: (progress: number) => void
   },
 ): Promise<CompressedVideo> {
   const blob = await fetch(file).then(res => res.blob())

src/state/queries/video/compress-video.ts

@@ -1,23 +1,30 @@
 import {ImagePickerAsset} from 'expo-image-picker'
 import {useMutation} from '@tanstack/react-query'
 
+import {cancelable} from '#/lib/async/cancelable'
 import {CompressedVideo, compressVideo} from 'lib/media/video/compress'
 
 export function useCompressVideoMutation({
   onProgress,
   onSuccess,
   onError,
+  signal,
 }: {
   onProgress: (progress: number) => void
   onError: (e: any) => void
   onSuccess: (video: CompressedVideo) => void
+  signal: AbortSignal
 }) {
   return useMutation({
-    mutationFn: async (asset: ImagePickerAsset) => {
-      return await compressVideo(asset.uri, {
+    mutationKey: ['video', 'compress'],
+    mutationFn: cancelable(
+      (asset: ImagePickerAsset) =>
+        compressVideo(asset.uri, {
           onProgress: num => onProgress(trunc2dp(num)),
-      })
-    },
+          signal,
+        }),
+      signal,
+    ),
     onError,
     onSuccess,
     onMutate: () => {

src/state/queries/video/video-upload.ts

@@ -3,6 +3,7 @@ import {AppBskyVideoDefs} from '@atproto/api'
 import {useMutation} from '@tanstack/react-query'
 import {nanoid} from 'nanoid/non-secure'
 
+import {cancelable} from '#/lib/async/cancelable'
 import {CompressedVideo} from '#/lib/media/video/compress'
 import {createVideoEndpointUrl} from '#/state/queries/video/util'
 import {useAgent, useSession} from '#/state/session'
@@ -11,16 +12,19 @@ export const useUploadVideoMutation = ({
   onSuccess,
   onError,
   setProgress,
+  signal,
 }: {
   onSuccess: (response: AppBskyVideoDefs.JobStatus) => void
   onError: (e: any) => void
   setProgress: (progress: number) => void
+  signal: AbortSignal
 }) => {
   const {currentAccount} = useSession()
   const agent = useAgent()
 
   return useMutation({
-    mutationFn: async (video: CompressedVideo) => {
+    mutationKey: ['video', 'upload'],
+    mutationFn: cancelable(async (video: CompressedVideo) => {
       const uri = createVideoEndpointUrl('/xrpc/app.bsky.video.uploadVideo', {
         did: currentAccount!.did,
         name: `${nanoid(12)}.mp4`, // @TODO what are we limiting this to?
@@ -59,7 +63,7 @@ export const useUploadVideoMutation = ({
 
       const responseBody = JSON.parse(res.body) as AppBskyVideoDefs.JobStatus
       return responseBody
-    },
+    }, signal),
     onError,
     onSuccess,
   })

src/state/queries/video/video-upload.web.ts

@@ -2,6 +2,7 @@ import {AppBskyVideoDefs} from '@atproto/api'
 import {useMutation} from '@tanstack/react-query'
 import {nanoid} from 'nanoid/non-secure'
 
+import {cancelable} from '#/lib/async/cancelable'
 import {CompressedVideo} from '#/lib/media/video/compress'
 import {createVideoEndpointUrl} from '#/state/queries/video/util'
 import {useAgent, useSession} from '#/state/session'
@@ -10,16 +11,19 @@ export const useUploadVideoMutation = ({
   onSuccess,
   onError,
   setProgress,
+  signal,
 }: {
   onSuccess: (response: AppBskyVideoDefs.JobStatus) => void
   onError: (e: any) => void
   setProgress: (progress: number) => void
+  signal: AbortSignal
 }) => {
   const {currentAccount} = useSession()
   const agent = useAgent()
 
   return useMutation({
-    mutationFn: async (video: CompressedVideo) => {
+    mutationKey: ['video', 'upload'],
+    mutationFn: cancelable(async (video: CompressedVideo) => {
       const uri = createVideoEndpointUrl('/xrpc/app.bsky.video.uploadVideo', {
         did: currentAccount!.did,
         name: `${nanoid(12)}.mp4`, // @TODO: make sure it's always mp4'
@@ -70,7 +74,7 @@ export const useUploadVideoMutation = ({
       )
 
       return res
-    },
+    }, signal),
     onError,
     onSuccess,
   })

src/state/queries/video/video.ts

@@ -3,7 +3,7 @@ import {ImagePickerAsset} from 'expo-image-picker'
 import {AppBskyVideoDefs, BlobRef} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useQuery} from '@tanstack/react-query'
+import {QueryClient, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {logger} from '#/logger'
 import {CompressedVideo} from 'lib/media/video/compress'
@@ -32,9 +32,11 @@ export interface State {
   jobStatus?: AppBskyVideoDefs.JobStatus
   blobRef?: BlobRef
   error?: string
+  abortController: AbortController
 }
 
-function reducer(state: State, action: Action): State {
+function reducer(queryClient: QueryClient) {
+  return (state: State, action: Action): State => {
     let updatedState = state
     if (action.type === 'SetStatus') {
       updatedState = {...state, status: action.status}
@@ -43,11 +45,16 @@ function reducer(state: State, action: Action): State {
     } else if (action.type === 'SetError') {
       updatedState = {...state, error: action.error}
     } else if (action.type === 'Reset') {
+      state.abortController.abort()
+      queryClient.cancelQueries({
+        queryKey: ['video'],
+      })
       updatedState = {
         status: 'idle',
         progress: 0,
         video: null,
         blobRef: undefined,
+        abortController: new AbortController(),
       }
     } else if (action.type === 'SetAsset') {
       updatedState = {...state, asset: action.asset}
@@ -59,6 +66,7 @@ function reducer(state: State, action: Action): State {
       updatedState = {...state, blobRef: action.blobRef}
     }
     return updatedState
+  }
 }
 
 export function useUploadVideo({
@@ -69,10 +77,12 @@ export function useUploadVideo({
   onSuccess: () => void
 }) {
   const {_} = useLingui()
-  const [state, dispatch] = React.useReducer(reducer, {
+  const queryClient = useQueryClient()
+  const [state, dispatch] = React.useReducer(reducer(queryClient), {
     status: 'idle',
     progress: 0,
     video: null,
+    abortController: new AbortController(),
   })
 
   const {setJobId} = useUploadStatusQuery({
@@ -116,6 +126,7 @@ export function useUploadVideo({
     setProgress: p => {
       dispatch({type: 'SetProgress', progress: p})
     },
+    signal: state.abortController.signal,
   })
 
   const {mutate: onSelectVideo} = useCompressVideoMutation({
@@ -148,6 +159,7 @@ export function useUploadVideo({
       })
       onVideoCompressed(video)
     },
+    signal: state.abortController.signal,
   })
 
   const selectVideo = (asset: ImagePickerAsset) => {
@@ -163,7 +175,6 @@ export function useUploadVideo({
   }
 
   const clearVideo = () => {
-    // @TODO cancel any running jobs
     dispatch({type: 'Reset'})
   }
 
@@ -187,7 +198,7 @@ const useUploadStatusQuery = ({
   const [jobId, setJobId] = React.useState<string>()
 
   const {isLoading, isError} = useQuery({
-    queryKey: ['video-upload', jobId],
+    queryKey: ['video', 'upload status', jobId],
     queryFn: async () => {
       if (!jobId) return // this won't happen, can ignore
 

src/view/com/composer/Composer.tsx

@@ -1,5 +1,4 @@
 import React, {
-  Suspense,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -700,15 +699,10 @@ export const ComposePost = observer(function ComposePost({
               <VideoTranscodeProgress
                 asset={videoUploadState.asset}
                 progress={videoUploadState.progress}
-              />
-            ) : videoUploadState.video ? (
-              // remove suspense when we get rid of lazy
-              <Suspense fallback={null}>
-                <VideoPreview
-                  video={videoUploadState.video}
                 clear={clearVideo}
               />
-              </Suspense>
+            ) : videoUploadState.video ? (
+              <VideoPreview video={videoUploadState.video} clear={clearVideo} />
             ) : null}
           </View>
         </Animated.ScrollView>

src/view/com/composer/ExternalEmbedRemoveBtn.tsx

@@ -25,8 +25,8 @@ export function ExternalEmbedRemoveBtn({onRemove}: {onRemove: () => void}) {
       }}
       onPress={onRemove}
       accessibilityRole="button"
-      accessibilityLabel={_(msg`Remove image preview`)}
-      accessibilityHint={_(msg`Removes the image preview`)}
+      accessibilityLabel={_(msg`Remove attachment`)}
+      accessibilityHint={_(msg`Removes the attachment`)}
       onAccessibilityEscape={onRemove}>
       <FontAwesomeIcon size={18} icon="xmark" style={s.white} />
     </TouchableOpacity>

src/view/com/composer/videos/VideoTranscodeProgress.tsx

@@ -3,18 +3,19 @@ import {View} from 'react-native'
 // @ts-expect-error no type definition
 import ProgressPie from 'react-native-progress/Pie'
 import {ImagePickerAsset} from 'expo-image-picker'
-import {Trans} from '@lingui/macro'
 
 import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
+import {ExternalEmbedRemoveBtn} from '../ExternalEmbedRemoveBtn'
 import {VideoTranscodeBackdrop} from './VideoTranscodeBackdrop'
 
 export function VideoTranscodeProgress({
   asset,
   progress,
+  clear,
 }: {
   asset: ImagePickerAsset
   progress: number
+  clear: () => void
 }) {
   const t = useTheme()
 
@@ -41,16 +42,14 @@ export function VideoTranscodeProgress({
           a.inset_0,
         ]}>
         <ProgressPie
-          size={64}
-          borderWidth={4}
+          size={48}
+          borderWidth={3}
           borderColor={t.atoms.text.color}
           color={t.atoms.text.color}
           progress={progress}
         />
-        <Text>
-          <Trans>Compressing...</Trans>
-        </Text>
       </View>
+      <ExternalEmbedRemoveBtn onRemove={clear} />
     </View>
   )
 }