sanity-plugin-mux-input 2.16.0 → 2.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",

package/src/actions/upload.ts

@@ -4,10 +4,39 @@ import {catchError, mergeMap, mergeMapTo, switchMap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
 
 import {createUpChunkObservable} from '../clients/upChunkObservable'
-import type {MuxAsset, MuxNewAssetSettings} from '../util/types'
+import {formatDriveShareLink} from '../util/formatDriveShareLink'
+import {roundPxString} from '../util/roundPxString'
+import type {MuxAsset, MuxNewAssetSettings, WatermarkConfig} from '../util/types'
 import {getAsset} from './assets'
 import {testSecretsObservable} from './secrets'
 
+function sanitizeOverlaySettingsInPlace(settings: MuxNewAssetSettings) {
+  const inputs = settings.input
+  if (!inputs) return
+  for (const input of inputs) {
+    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)
+
+    if (hm) overlay.horizontal_margin = hm
+    if (vm) overlay.vertical_margin = vm
+    if (w) overlay.width = w
+  }
+}
+
+function sanitizePxStringsInJson(json: string): string {
+  return json.replace(/"(-?\d+(?:\.\d+)?)px"/g, (_match, num) => {
+    const n = Number(num)
+    if (!Number.isFinite(n)) return _match
+    let rounded = Math.round(n)
+    if (rounded === 0) rounded = n < 0 ? -1 : 1
+    return `"${rounded}px"`
+  })
+}
+
 export function cancelUpload(client: SanityClient, uuid: string) {
   return client.observable.request({
     url: `/addons/mux/uploads/${client.config().dataset}/${uuid}`,
@@ -20,10 +49,12 @@ export function uploadUrl({
   url,
   settings,
   client,
+  watermark,
 }: {
   url: string
   settings: MuxNewAssetSettings
   client: SanityClient
+  watermark?: WatermarkConfig
 }) {
   return testUrl(url).pipe(
     switchMap((validUrl) => {
@@ -38,9 +69,10 @@ export function uploadUrl({
             const muxBody = settings
             if (!muxBody.input) muxBody.input = [{type: 'video'}]
             muxBody.input[0].url = validUrl
+            sanitizeOverlaySettingsInPlace(muxBody)
 
             const query = {
-              muxBody: JSON.stringify(muxBody),
+              muxBody: sanitizePxStringsInJson(JSON.stringify(muxBody)),
               filename: validUrl.split('/').slice(-1)[0],
             }
 
@@ -79,10 +111,12 @@ export function uploadFile({
   settings,
   client,
   file,
+  watermark,
 }: {
   settings: MuxNewAssetSettings
   client: SanityClient
   file: File
+  watermark?: WatermarkConfig
 }) {
   return testFile(file).pipe(
     switchMap((fileOptions) => {
@@ -95,6 +129,7 @@ export function uploadFile({
             }
             const uuid = generateUuid()
             const body = settings
+            sanitizeOverlaySettingsInPlace(body)
 
             return concat(
               of({type: 'uuid' as const, uuid}),
@@ -129,7 +164,7 @@ export function uploadFile({
                       if (event.type !== 'success') {
                         return of(event)
                       }
-                      return from(updateAssetDocumentFromUpload(client, uuid)).pipe(
+                      return from(updateAssetDocumentFromUpload(client, uuid, watermark)).pipe(
                         // eslint-disable-next-line max-nested-callbacks
                         mergeMap((doc) => of({...event, asset: doc}))
                       )
@@ -201,7 +236,11 @@ function pollUpload(client: SanityClient, uuid: string): Promise<UploadResponse>
   })
 }
 
-async function updateAssetDocumentFromUpload(client: SanityClient, uuid: string) {
+async function updateAssetDocumentFromUpload(
+  client: SanityClient,
+  uuid: string,
+  _watermark?: WatermarkConfig
+) {
   let upload: UploadResponse
   let asset: {data: MuxAsset}
   try {
@@ -242,17 +281,18 @@ export function testUrl(url: string): Observable<string> {
   if (typeof url !== 'string') {
     return throwError(error)
   }
-  const trimmedUrl = url.trim()
+  let formattedUrl = url.trim()
+  formattedUrl = formatDriveShareLink(formattedUrl)
   let parsed
   try {
-    parsed = new URL(trimmedUrl)
+    parsed = new URL(formattedUrl)
   } catch (err) {
     return throwError(error)
   }
   if (parsed && !parsed.protocol.match(/http:|https:/)) {
     return throwError(error)
   }
-  return of(trimmedUrl)
+  return of(formattedUrl)
 }
 
 function optionsFromFile(opts: {preserveFilename?: boolean}, file: File) {

package/src/components/AddCaptionDialog.tsx

@@ -18,6 +18,7 @@ import {useId, useRef, useState} from 'react'
 
 import {addTextTrackFromUrl, generateSubtitles, getAsset} from '../actions/assets'
 import {useClient} from '../hooks/useClient'
+import {addKeysToMuxData} from '../util/addKeysToMuxData'
 import {extractErrorMessage, pollTrackStatus} from '../util/textTracks'
 import {type MuxTextTrack, SUPPORTED_MUX_LANGUAGES, type VideoAssetDocument} from '../util/types'
 
@@ -60,6 +61,20 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
     return assetDocument.url
   }
 
+  const refreshAssetData = async () => {
+    if (!asset._id || !asset.assetId) return
+    try {
+      const latestAssetData = await getAsset(client, asset.assetId)
+      const dataWithKeys = addKeysToMuxData(latestAssetData.data)
+      await client
+        .patch(asset._id)
+        .set({data: dataWithKeys, status: latestAssetData.data.status})
+        .commit({returnDocuments: false})
+    } catch (refreshError) {
+      console.error('Failed to refresh asset data:', refreshError)
+    }
+  }
+
   const handleAddTrackFromUrl = async () => {
     if (!asset.assetId) {
       throw new Error('Asset ID is required')
@@ -75,9 +90,9 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
         vttUrlToUse = await uploadVttFile(selectedFile)
       } catch (uploadError) {
         toast.push({
-          title: 'Failed to upload VTT file',
+          title: 'Failed to upload caption file',
           status: 'error',
-          description: 'Could not upload the VTT file to Sanity. Please try again.',
+          description: 'Could not upload the caption file to Sanity. Please try again.',
         })
         setIsSubmitting(false)
         throw uploadError
@@ -95,7 +110,7 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
       assetId: asset.assetId,
       trackName: trimmedName,
       trackLanguageCode: trimmedLanguageCode,
-      onTrackErrored: (track) => {
+      onTrackErrored: async (track) => {
         const errorMessage =
           track.error?.messages?.[0] ||
           track.error?.type ||
@@ -105,6 +120,7 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
           status: 'error',
           description: errorMessage,
         })
+        await refreshAssetData()
         onAdd(track)
         onClose()
       },
@@ -132,11 +148,13 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
         description:
           'The track was created and is being processed. It will appear in the list shortly.',
       })
+      await refreshAssetData()
       onAdd(result.track)
       onClose()
       return
     }
 
+    await refreshAssetData()
     toast.push({
       title: 'Caption track added',
       status: 'success',
@@ -195,9 +213,9 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
     if (!isAutogenerated) {
       if (!selectedFile && !vttUrl.trim()) {
         toast.push({
-          title: 'VTT file or URL required',
+          title: 'Caption file or URL required',
           status: 'error',
-          description: 'Please select a VTT file or enter a VTT file URL',
+          description: 'Please select a VTT or SRT file or enter a caption file URL',
         })
         return
       }
@@ -209,7 +227,8 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
           toast.push({
             title: 'Invalid URL',
             status: 'error',
-            description: 'Please enter a valid URL (e.g., https://example.com/subtitles.vtt)',
+            description:
+              'Please enter a valid URL (e.g., https://example.com/subtitles.vtt or subtitles.srt)',
           })
           return
         }
@@ -303,7 +322,7 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
                 <input
                   ref={fileInputRef}
                   type="file"
-                  accept=".vtt,text/vtt"
+                  accept=".vtt,text/vtt,.srt,application/x-subrip"
                   style={{display: 'none'}}
                   onChange={(e) => {
                     if (e.target.files && e.target.files.length > 0 && !isSubmitting) {
@@ -314,10 +333,10 @@ export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
                 />
               </Card>
               <Text size={1} muted style={{textAlign: 'center'}}>
-                Or enter the VTT file URL
+                Or enter the caption file URL
               </Text>
               <Stack space={2}>
-                <Label htmlFor="vtt-url">VTT File URL</Label>
+                <Label htmlFor="vtt-url">Caption File URL (.vtt or .srt)</Label>
                 <TextInput
                   id="vtt-url"
                   placeholder="https://example.com/subtitles.vtt"