sanity-plugin-mux-input 2.10.1 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -52,7 +52,7 @@
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "@mux/mux-player-react": "^2.6.0",
+    "@mux/mux-player-react": "^3.8.0",
     "@mux/upchunk": "^3.4.0",
     "@sanity/icons": "^3.0.0",
     "@sanity/incompatible-plugin": "^1.0.4",

package/src/_exports/index.ts

@@ -11,6 +11,7 @@ export const defaultConfig: PluginConfig = {
   video_quality: 'plus',
   max_resolution_tier: '1080p',
   normalize_audio: false,
+  defaultPublic: true,
   defaultSigned: false,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: [],

package/src/components/UploadConfiguration.tsx

@@ -143,7 +143,7 @@ export default function UploadConfiguration({
       max_resolution_tier: pluginConfig.max_resolution_tier,
       mp4_support: pluginConfig.mp4_support,
       signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
-      public_policy: true,
+      public_policy: pluginConfig.defaultPublic,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks,
     } as UploadConfig

package/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>

package/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: {}}),

package/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

package/src/util/types.ts

@@ -48,6 +48,12 @@ export interface MuxInputConfig {
    */
   defaultSigned?: boolean
 
+  /**
+   * Enables public URLs by default.
+   * @defaultValue true
+   */
+  defaultPublic?: boolean
+
   /**
    * Auto-generate captions for these languages by default.
    * Requires `"video_quality": "plus"`