sanity-plugin-mux-input 3.0.3 → 3.0.5

package/package.json

@@ -1,80 +1,82 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
-    "sanity",
-    "video",
-    "mux",
     "input",
+    "media",
+    "mux",
     "plugin",
+    "sanity",
     "sanity-plugin",
-    "media"
+    "video"
   ],
   "homepage": "https://github.com/sanity-io/plugins/tree/main/plugins/sanity-plugin-mux-input#readme",
   "bugs": {
     "url": "https://github.com/sanity-io/plugins/issues"
   },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/sanity-io/plugins.git",
     "directory": "plugins/sanity-plugin-mux-input"
   },
-  "license": "MIT",
-  "author": "Sanity.io <hello@sanity.io>",
-  "sideEffects": false,
+  "files": [
+    "src",
+    "dist",
+    "sanity.json",
+    "v2-incompatible.js"
+  ],
   "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/_exports/index.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.cjs",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "src",
-    "dist",
-    "sanity.json",
-    "v2-incompatible.js"
-  ],
   "dependencies": {
-    "@mux/mux-player": "^3.8.0",
-    "@mux/mux-player-react": "^3.8.0",
-    "@mux/upchunk": "^3.4.0",
+    "@mux/mux-player": "^3.13.0",
+    "@mux/mux-player-react": "^3.13.0",
+    "@mux/upchunk": "^3.5.0",
     "@sanity/icons": "^3.7.4",
-    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/incompatible-plugin": "^1.0.5",
     "@sanity/ui": "^3.2.0",
-    "@sanity/uuid": "^3.0.2",
-    "iso-639-1": "^3.1.2",
+    "@sanity/uuid": "^3.0.3",
+    "iso-639-1": "^3.1.5",
     "jsonwebtoken-esm": "^1.0.5",
     "lodash": "^4.17.21",
-    "react-rx": "^4.1.5",
-    "rxjs": "^7.8.1",
+    "react-rx": "^4.2.2",
+    "rxjs": "^7.8.2",
     "scroll-into-view-if-needed": "^3.1.0",
     "suspend-react": "^0.1.3",
-    "swr": "^2.2.5",
-    "type-fest": "^4.18.2",
+    "swr": "^2.4.1",
+    "type-fest": "^4.41.0",
     "use-device-pixel-ratio": "^1.1.2",
     "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
-    "@sanity/client": "^7.12.1",
+    "@sanity/client": "^7.23.0",
     "@sanity/pkg-utils": "^10.5.7",
-    "@types/lodash": "^4.17.15",
+    "@types/lodash": "^4.17.24",
     "@types/node": "^24.13.2",
-    "@types/react": "^19.0.10",
-    "@types/react-is": "^19.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-is": "^19.0.0",
+    "@types/react": "^19.2.17",
+    "@types/react-is": "^19.2.0",
+    "babel-plugin-styled-components": "^2.3.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-is": "^19.2.7",
     "sanity": "^6.1.0",
-    "styled-components": "^6.1.15",
+    "styled-components": "^6.4.2",
     "typescript": "5.9.3",
-    "@sanity/plugin-kit": "5.0.0"
+    "@repo/package.config": "0.0.0",
+    "@repo/tsconfig": "0.0.0",
+    "@sanity/plugin-kit": "5.0.2"
   },
   "peerDependencies": {
     "react": "^18.3 || ^19",
@@ -85,13 +87,11 @@
   "engines": {
     "node": ">=20.19 <22 || >=22.12"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "sanityExchangeUrl": "https://www.sanity.io/plugins/sanity-plugin-mux-input",
-  "browserslist": "extends @sanity/browserslist-config",
   "sanityPlugin": {
     "verifyPackage": {
+      "tsc": false,
+      "tsconfig": false,
       "srcIndex": false,
       "scripts": false,
       "eslintImports": false

package/src/_exports/index.ts

@@ -54,7 +54,7 @@ export const muxInput = definePlugin<Partial<PluginConfig> | void>((userConfig)
   }
   const config: PluginConfig = {
     ...defaultConfig,
-    ...(userConfig || {}),
+    ...userConfig,
     ...convertLegacyConfig(userConfig || {}),
   }
   return {

package/src/actions/assets.ts

@@ -26,14 +26,14 @@ export async function deleteAsset({
 
   try {
     await client.delete(asset._id)
-  } catch (error) {
+  } catch {
     return 'failed-sanity'
   }
 
   if (deleteOnMux && asset?.assetId) {
     try {
       await deleteAssetOnMux(client, asset.assetId)
-    } catch (error) {
+    } catch {
       return 'failed-mux'
     }
   }
@@ -53,7 +53,7 @@ export function getAsset(client: SanityClient, assetId: string) {
 
 export function listAssets(
   client: SanityClient,
-  options: {limit?: number; cursor?: string | null}
+  options: {limit?: number; cursor?: string | null},
 ) {
   const {dataset} = client.config()
   const query: {limit?: string; cursor?: string} = {}
@@ -84,7 +84,7 @@ export function addTextTrackFromUrl(
     language_code: string
     name: string
     text_type?: 'subtitles'
-  }
+  },
 ) {
   const {dataset} = client.config()
 
@@ -116,7 +116,7 @@ export function generateSubtitles(
   options: {
     language_code: string
     name: string
-  }
+  },
 ) {
   const {dataset} = client.config()
   return client.request<{data: MuxAsset}>({

package/src/actions/secrets.ts

@@ -13,7 +13,6 @@ interface SecretsDocument {
   signingKeyPrivate: string
   drmConfigId: string
 }
-// eslint-disable-next-line max-params
 export function saveSecrets(
   client: SanityClient,
   token: string,
@@ -21,7 +20,7 @@ export function saveSecrets(
   enableSignedUrls: boolean,
   signingKeyId: string,
   signingKeyPrivate: string,
-  drmConfigId: string
+  drmConfigId: string,
 ): Promise<SecretsDocument> {
   const doc: SecretsDocument = {
     _id: 'secrets.mux',
@@ -57,7 +56,7 @@ export async function createSigningKeys(client: SanityClient) {
       error.response?.statusCode === 401
         ? 'Unauthorized - Failed to create the Signing Key. Please ensure that the token has "System" permissions'
         : error.message
-    throw new Error(message)
+    throw new Error(message, {cause: error})
   }
 }
 
@@ -74,7 +73,7 @@ export function testSecrets(client: SanityClient) {
 export async function haveValidSigningKeys(
   client: SanityClient,
   signingKeyId: string,
-  signingKeyPrivate: string
+  signingKeyPrivate: string,
 ) {
   if (!(signingKeyId && signingKeyPrivate)) {
     return false
@@ -93,7 +92,7 @@ export async function haveValidSigningKeys(
     //
     return !!(res.data && res.data.id)
   } catch (e) {
-    console.error('Error fetching signingKeyId', signingKeyId, 'assuming it is not valid')
+    console.error('Error fetching signingKeyId', signingKeyId, 'assuming it is not valid', e)
     return false
   }
 }
@@ -106,6 +105,6 @@ export function testSecretsObservable(client: SanityClient) {
       withCredentials: true,
       method: 'GET',
       query: PLUGIN_VERSION_QUERY,
-    })
+    }),
   )
 }

package/src/actions/upload.ts

@@ -18,13 +18,13 @@ function sanitizeOverlaySettingsInPlace(settings: MuxNewAssetSettings) {
     const overlay = (input as {overlay_settings?: Record<string, unknown>}).overlay_settings
     if (!overlay) continue
 
-    const hm = roundPxString(overlay.horizontal_margin)
-    const vm = roundPxString(overlay.vertical_margin)
-    const w = roundPxString(overlay.width)
+    const hm = roundPxString(overlay['horizontal_margin'])
+    const vm = roundPxString(overlay['vertical_margin'])
+    const w = roundPxString(overlay['width'])
 
-    if (hm) overlay.horizontal_margin = hm
-    if (vm) overlay.vertical_margin = vm
-    if (w) overlay.width = w
+    if (hm) overlay['horizontal_margin'] = hm
+    if (vm) overlay['vertical_margin'] = vm
+    if (w) overlay['width'] = w
   }
 }
 
@@ -38,7 +38,7 @@ function sanitizePxStringsInJson(json: string): string {
   })
 }
 
-export function cancelUpload(client: SanityClient, uuid: string) {
+function cancelUpload(client: SanityClient, uuid: string) {
   return client.observable.request({
     url: `/addons/mux/uploads/${client.config().dataset}/${uuid}`,
     withCredentials: true,
@@ -51,7 +51,6 @@ export function uploadUrl({
   url,
   settings,
   client,
-  watermark,
 }: {
   url: string
   settings: MuxNewAssetSettings
@@ -70,12 +69,15 @@ export function uploadUrl({
             const uuid = generateUuid()
             const muxBody = settings
             if (!muxBody.input) muxBody.input = [{type: 'video'}]
-            muxBody.input[0].url = validUrl
+            muxBody.input[0]!.url = validUrl
             sanitizeOverlaySettingsInPlace(muxBody)
 
-            const query = {
+            const query: Record<string, string> = {
               muxBody: sanitizePxStringsInJson(JSON.stringify(muxBody)),
-              filename: validUrl.split('/').slice(-1)[0],
+            }
+            const filename = validUrl.split('/').slice(-1)[0]
+            if (filename) {
+              query['filename'] = filename
             }
 
             const dataset = client.config().dataset
@@ -89,7 +91,7 @@ export function uploadUrl({
                   'Content-Type': 'application/json',
                 },
                 query: {...query, ...PLUGIN_VERSION_QUERY},
-              })
+              }),
             ).pipe(
               mergeMap((result) => {
                 const asset =
@@ -100,12 +102,12 @@ export function uploadUrl({
                   return throwError(new Error('No asset document returned'))
                 }
                 return of({type: 'success' as const, id: uuid, asset})
-              })
+              }),
             )
-          })
-        )
+          }),
+        ),
       )
-    })
+    }),
   )
 }
 
@@ -156,35 +158,31 @@ export function uploadFile({
                   },
                   body,
                   query: PLUGIN_VERSION_QUERY,
-                })
+                }),
               ).pipe(
                 mergeMap((result) => {
                   return createUpChunkObservable(uuid, result.upload.url, file).pipe(
-                    // eslint-disable-next-line no-warning-comments
                     // @TODO type the observable events
-                    // eslint-disable-next-line max-nested-callbacks
                     mergeMap((event) => {
                       if (event.type !== 'success') {
                         return of(event)
                       }
                       return from(updateAssetDocumentFromUpload(client, uuid, watermark)).pipe(
-                        // eslint-disable-next-line max-nested-callbacks
-                        mergeMap((doc) => of({...event, asset: doc}))
+                        mergeMap((doc) => of({...event, asset: doc})),
                       )
                     }),
-                    // eslint-disable-next-line max-nested-callbacks
                     catchError((err) => {
                       // Delete asset document
                       return cancelUpload(client, uuid).pipe(mergeMapTo(throwError(err)))
-                    })
+                    }),
                   )
-                })
-              )
+                }),
+              ),
             )
-          })
-        )
+          }),
+        ),
       )
-    })
+    }),
   )
 }
 
@@ -202,7 +200,7 @@ type UploadResponse = {
     timeout: number
   }
 }
-export function getUpload(client: SanityClient, assetId: string) {
+function getUpload(client: SanityClient, assetId: string) {
   const {dataset} = client.config()
   return client.request<UploadResponse>({
     url: `/addons/mux/uploads/${dataset}/${assetId}`,
@@ -243,7 +241,7 @@ function pollUpload(client: SanityClient, uuid: string): Promise<UploadResponse>
 async function updateAssetDocumentFromUpload(
   client: SanityClient,
   uuid: string,
-  _watermark?: WatermarkConfig
+  _watermark?: WatermarkConfig,
 ) {
   let upload: UploadResponse
   let asset: {data: MuxAsset}
@@ -264,7 +262,7 @@ async function updateAssetDocumentFromUpload(
     status: asset.data.status,
     data: asset.data,
     assetId: asset.data.id,
-    playbackId: asset.data.playback_ids[0].id,
+    playbackId: asset.data.playback_ids[0]?.id,
     uploadId: upload.data.id,
   }
   return client.createOrReplace(doc).then(() => {
@@ -272,7 +270,7 @@ async function updateAssetDocumentFromUpload(
   })
 }
 
-export function testFile(file: File) {
+function testFile(file: File) {
   if (typeof window !== 'undefined' && file instanceof window.File) {
     const fileOptions = optionsFromFile({}, file)
     return of(fileOptions)
@@ -280,7 +278,7 @@ export function testFile(file: File) {
   return throwError(new Error('Invalid file'))
 }
 
-export function testUrl(url: string): Observable<string> {
+function testUrl(url: string): Observable<string> {
   const error = new Error('Invalid URL')
   if (typeof url !== 'string') {
     return throwError(error)
@@ -290,7 +288,7 @@ export function testUrl(url: string): Observable<string> {
   let parsed
   try {
     parsed = new URL(formattedUrl)
-  } catch (err) {
+  } catch {
     return throwError(error)
   }
   if (parsed && !parsed.protocol.match(/http:|https:/)) {

package/src/components/AddCaptionDialog.tsx

@@ -47,7 +47,7 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
   const [vttUrl, setVttUrl] = useState('')
   const [languageCode, setLanguageCode] = useState('')
   const [selectedLanguage, setSelectedLanguage] = useState<{value: string; label: string} | null>(
-    null
+    null,
   )
   const [name, setName] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -326,7 +326,7 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
                   style={{display: 'none'}}
                   onChange={(e) => {
                     if (e.target.files && e.target.files.length > 0 && !isSubmitting) {
-                      setSelectedFile(e.target.files[0])
+                      setSelectedFile(e.target.files[0]!)
                       setVttUrl('')
                     }
                   }}
@@ -376,7 +376,7 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
             openButton
             renderValue={(value) =>
               (isAutogenerated ? MUX_LANGUAGE_OPTIONS : LANGUAGE_OPTIONS).find(
-                (l) => l.value === value
+                (l) => l.value === value,
               )?.label || value
             }
             renderOption={(option) => (

package/src/components/ConfigureApi.tsx

@@ -46,12 +46,12 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
       secrets.secretKey !== state.secretKey ||
       secrets.enableSignedUrls !== state.enableSignedUrls ||
       secrets.drmConfigId !== state.drmConfigId,
-    [secrets, state]
+    [secrets, state],
   )
   const id = `ConfigureApi${useId()}`
   const [tokenId, secretKeyId, enableSignedUrlsId, drmConfigIdId] = useMemo<typeof fieldNames>(
     () => fieldNames.map((field) => `${id}-${field}`) as unknown as typeof fieldNames,
-    [id]
+    [id],
   )
   const firstField = useRef<HTMLInputElement>(null)
   const handleSaveSecrets = useSaveSecrets(client, secrets)
@@ -78,7 +78,7 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
           })
       }
     },
-    [client, dispatch, handleSaveSecrets, setDialogState, state]
+    [client, dispatch, handleSaveSecrets, setDialogState, state],
   )
   const handleChangeToken = useCallback(
     (event: React.FormEvent<HTMLInputElement>) => {
@@ -87,7 +87,7 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
         payload: {name: 'token', value: event.currentTarget.value},
       })
     },
-    [dispatch]
+    [dispatch],
   )
   const handleChangeSecretKey = useCallback(
     (event: React.FormEvent<HTMLInputElement>) => {
@@ -96,7 +96,7 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
         payload: {name: 'secretKey', value: event.currentTarget.value},
       })
     },
-    [dispatch]
+    [dispatch],
   )
   const handleChangeEnableSignedUrls = useCallback(
     (event: React.FormEvent<HTMLInputElement>) => {
@@ -105,7 +105,7 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
         payload: {name: 'enableSignedUrls', value: event.currentTarget.checked},
       })
     },
-    [dispatch]
+    [dispatch],
   )
   const handleChangeDrmConfigId = useCallback(
     (event: React.FormEvent<HTMLInputElement>) => {
@@ -114,7 +114,7 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
         payload: {name: 'drmConfigId', value: event.currentTarget.value},
       })
     },
-    [dispatch]
+    [dispatch],
   )
 
   useEffect(() => {

package/src/components/DraggableWatermark.tsx

@@ -208,7 +208,7 @@ export default function DraggableWatermark({
         onChange(newWatermark)
       }, 300)
     },
-    [onChange]
+    [onChange],
   )
 
   useEffect(() => {
@@ -221,6 +221,7 @@ export default function DraggableWatermark({
 
   useEffect(() => {
     if (!isDragging && watermark.position) {
+      // oxlint-disable-next-line react/react-compiler
       setLocalPosition(watermark.position)
     }
   }, [watermark.position, isDragging])
@@ -232,7 +233,7 @@ export default function DraggableWatermark({
       setDragStart({x: e.clientX, y: e.clientY})
       setStartPosition({x: position.x, y: position.y})
     },
-    [position]
+    [position],
   )
 
   const handleMouseMove = useCallback(
@@ -271,7 +272,7 @@ export default function DraggableWatermark({
       watermark,
       debouncedOnChange,
       getVideoContentBox,
-    ]
+    ],
   )
 
   const handleMouseUp = useCallback(() => {
@@ -306,6 +307,7 @@ export default function DraggableWatermark({
   const opacityForRender = hasManualOverlay
     ? (parseOpacityPercent(watermark.overlay_settings?.opacity) ?? opacity)
     : opacity
+  // oxlint-disable-next-line react/react-compiler
   const contentBox = getVideoContentBox()
   const hasContentBox = contentBox.width > 0 && contentBox.height > 0
 
@@ -336,6 +338,7 @@ export default function DraggableWatermark({
       ref={watermarkRef}
       $opacity={opacityForRender}
       onMouseDown={hasManualOverlay ? undefined : handleMouseDown}
+      // oxlint-disable-next-line react/react-compiler
       style={computeWatermarkStyle()}
     >
       <img src={watermark.imageUrl} alt="Watermark" draggable={false} />
@@ -364,14 +367,14 @@ export function WatermarkControls({
   const [isValid, setIsValid] = useState<boolean | null>(null)
   const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const [mode, setMode] = useState<'canvas' | 'manual'>(
-    watermark.overlay_settings ? 'manual' : 'canvas'
+    watermark.overlay_settings ? 'manual' : 'canvas',
   )
 
   const isUpdatingRef = useRef(false)
 
-  const isValidExtension = (extension: string) => {
+  const isValidExtension = useCallback((extension: string) => {
     return extension.endsWith('.png') || extension.endsWith('.jpg') || extension.endsWith('.jpeg')
-  }
+  }, [])
 
   const validateUrl = useCallback(
     (url: string) => {
@@ -461,7 +464,7 @@ export function WatermarkControls({
         }
       }, 500)
     },
-    [watermark, onChange, onValidationChange]
+    [watermark, onChange, onValidationChange, isValidExtension],
   )
 
   useEffect(() => {
@@ -473,6 +476,7 @@ export function WatermarkControls({
   }, [])
 
   useEffect(() => {
+    // oxlint-disable-next-line react/react-compiler
     setMode(watermark.overlay_settings ? 'manual' : 'canvas')
   }, [watermark.overlay_settings])
 
@@ -802,6 +806,7 @@ export function WatermarkControls({
             <>
               <Box>
                 <Text size={1} weight="medium">
+                  {/* oxlint-disable-next-line react/react-compiler */}
                   {(() => {
                     const sizePct = watermark.size || 20
                     const contentW = getVideoContentBox().width
@@ -812,17 +817,20 @@ export function WatermarkControls({
                 </Text>
                 <RangeInput
                   type="range"
+                  // oxlint-disable-next-line react/react-compiler
                   value={(() => {
                     const sizePct = watermark.size || 20
                     const contentW = getVideoContentBox().width
                     if (!contentW) return sizePct
                     return Math.max(1, Math.round((sizePct / 100) * contentW))
                   })()}
+                  // oxlint-disable-next-line react/react-compiler
                   min={(() => {
                     const contentW = getVideoContentBox().width
                     if (!contentW) return 5
                     return Math.max(1, Math.round(contentW * 0.05))
                   })()}
+                  // oxlint-disable-next-line react/react-compiler
                   max={(() => {
                     const contentW = getVideoContentBox().width
                     if (!contentW) return 50

package/src/components/EditCaptionDialog.tsx

@@ -52,7 +52,7 @@ export default function EditCaptionDialog({asset, track, onUpdate, onClose}: Pro
     () => {
       const baseCode = track.language_code?.split('-')[0]
       const found = LANGUAGE_OPTIONS.find(
-        (opt) => opt.value === track.language_code || opt.value === baseCode
+        (opt) => opt.value === track.language_code || opt.value === baseCode,
       )
       if (found) return found
       if (track.name) {
@@ -60,7 +60,7 @@ export default function EditCaptionDialog({asset, track, onUpdate, onClose}: Pro
         if (foundByName) return foundByName
       }
       return null
-    }
+    },
   )
   const [name, setName] = useState(track.name || '')
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -69,12 +69,13 @@ export default function EditCaptionDialog({asset, track, onUpdate, onClose}: Pro
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
+    // oxlint-disable-next-line react/react-compiler
     setLanguageCode(track.language_code || '')
     setName(track.name || '')
     setVttUrl('')
     const baseCode = track.language_code?.split('-')[0]
     const foundByCode = LANGUAGE_OPTIONS.find(
-      (opt) => opt.value === track.language_code || opt.value === baseCode
+      (opt) => opt.value === track.language_code || opt.value === baseCode,
     )
     const foundByName = track.name ? LANGUAGE_OPTIONS.find((opt) => opt.label === track.name) : null
     setSelectedLanguage(foundByCode || foundByName || null)
@@ -94,7 +95,7 @@ export default function EditCaptionDialog({asset, track, onUpdate, onClose}: Pro
           title = 'Cannot download'
         }
       } else if (error === 'Track ID is missing' || error === 'Track is not ready yet') {
-        errorMessage = String(error)
+        errorMessage = error
         title = 'Cannot download'
       }
 
@@ -398,7 +399,7 @@ export default function EditCaptionDialog({asset, track, onUpdate, onClose}: Pro
               style={{display: 'none'}}
               onChange={(e) => {
                 if (e.target.files && e.target.files.length > 0 && !isSubmitting) {
-                  setSelectedFile(e.target.files[0])
+                  setSelectedFile(e.target.files[0]!)
                   setVttUrl('')
                 }
               }}