feat: Added clear mechanism to remove corrupted uploads (#439)

Author: R-Delfino95

src/components/UploadProgress.tsx

@@ -42,6 +42,10 @@ export const UploadProgress = ({
   onCancel?: React.MouseEventHandler<HTMLButtonElement>
   text?: React.ReactNode
 }) => {
+  // Disable cancel button when upload is 90% or more complete
+  // to prevent inconsistency between Mux and Sanity
+  const isCancelDisabled = progress >= 90
+
   return (
     <CardWrapper tone="primary" padding={4} border height="fill">
       <FlexWrapper align="center" justify="space-between" height="fill" direction="row" gap={2}>
@@ -67,6 +71,7 @@ export const UploadProgress = ({
             mode="ghost"
             tone="critical"
             onClick={onCancel}
+            disabled={isCancelDisabled}
           />
         ) : null}
       </FlexWrapper>

src/components/Uploader.tsx

@@ -92,6 +92,7 @@ export default function Uploader(props: Props) {
   ).current
 
   const uploadRef = useRef<Subscription | null>(null)
+  const uploadingDocumentId = useRef<string | null>(null)
   const [state, dispatch] = useReducer(
     (prev: State, action: UploaderStateAction) => {
       switch (action.action) {
@@ -121,11 +122,13 @@ export default function Uploader(props: Props) {
           // Clear upload observable on completion
           uploadRef.current?.unsubscribe()
           uploadRef.current = null
+          uploadingDocumentId.current = null
           return INITIAL_STATE
         case 'error':
           // Clear upload observable on error
           uploadRef.current?.unsubscribe()
           uploadRef.current = null
+          uploadingDocumentId.current = null
           return Object.assign({}, INITIAL_STATE, {error: action.error})
         default:
           return prev
@@ -139,13 +142,38 @@ export default function Uploader(props: Props) {
   )
 
   // Make sure we close out the upload observer on dismount
+  // and cleanup orphaned documents if upload was in progress
   useEffect(() => {
-    return () => {
+    const cleanup = () => {
+      // Cancel subscription
       if (uploadRef.current && !uploadRef.current.closed) {
         uploadRef.current.unsubscribe()
       }
+
+      // Delete orphaned document if upload was in progress and document is different from the saved asset
+      if (uploadingDocumentId.current && props.asset?._id !== uploadingDocumentId.current) {
+        const docId = uploadingDocumentId.current
+        uploadingDocumentId.current = null
+
+        props.client.delete(docId).catch((err) => {
+          console.warn('Failed to cleanup orphaned upload document:', err)
+        })
+      }
+    }
+
+    const handleBeforeUnload = () => {
+      cleanup()
     }
-  }, [])
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    window.addEventListener('pagehide', handleBeforeUnload)
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+      window.removeEventListener('pagehide', handleBeforeUnload)
+      cleanup()
+    }
+  }, [props.client, props.asset?._id])
 
   /* -------------------------------------------------------------------------- */
   /*                                  Uploading                                 */
@@ -183,8 +211,9 @@ export default function Uploader(props: Props) {
           takeUntil(
             cancelUploadButton.observable.pipe(
               tap(() => {
-                if (state.uploadStatus?.uuid) {
-                  props.client.delete(state.uploadStatus.uuid)
+                if (uploadingDocumentId.current) {
+                  props.client.delete(uploadingDocumentId.current)
+                  uploadingDocumentId.current = null
                 }
               })
             )
@@ -196,6 +225,10 @@ export default function Uploader(props: Props) {
       next: (event) => {
         switch (event.type) {
           case 'uuid':
+            // Track the document ID for cleanup on unmount
+            uploadingDocumentId.current = event.uuid
+            dispatch({action: 'progressInfo', ...event})
+            break
           case 'file':
           case 'url':
             dispatch({action: 'progressInfo', ...event})
@@ -205,6 +238,7 @@ export default function Uploader(props: Props) {
             break
           case 'success':
             dispatch({action: 'progress', percent: 100})
+            uploadingDocumentId.current = null
             props.onChange(
               PatchEvent.from([
                 setIfMissing({asset: {}}),

src/components/VideoPlayer.tsx

@@ -26,19 +26,23 @@ export default function VideoPlayer({
 
   const isAudio = assetIsAudio(asset)
   const muxPlayer = useRef<MuxPlayerRefAttributes>(null)
-  const thumbnail = getPosterSrc({asset, client, width: thumbnailWidth})
 
-  const {src: videoSrc, error} = useMemo(() => {
+  const {
+    src: videoSrc,
+    thumbnail: thumbnailSrc,
+    error,
+  } = useMemo(() => {
     try {
+      const thumbnail = getPosterSrc({asset, client, width: thumbnailWidth})
       const src = asset?.playbackId && getVideoSrc({client, asset})
-      if (src) return {src: src}
+      if (src) return {src: src, thumbnail}
 
       return {error: new TypeError('Asset has no playback ID')}
       // eslint-disable-next-line @typescript-eslint/no-shadow
     } catch (error) {
       return {error}
     }
-  }, [asset, client])
+  }, [asset, client, thumbnailWidth])
 
   const signedToken = useMemo(() => {
     try {
@@ -66,7 +70,7 @@ export default function VideoPlayer({
         {videoSrc && (
           <>
             <MuxPlayer
-              poster={thumbnail}
+              poster={thumbnailSrc}
               ref={muxPlayer}
               {...props}
               playsInline