sanity-plugin-mux-input 2.17.0 → 2.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.17.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,6 +4,7 @@ import {catchError, mergeMap, mergeMapTo, switchMap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
 
 import {createUpChunkObservable} from '../clients/upChunkObservable'
+import {formatDriveShareLink} from '../util/formatDriveShareLink'
 import {roundPxString} from '../util/roundPxString'
 import type {MuxAsset, MuxNewAssetSettings, WatermarkConfig} from '../util/types'
 import {getAsset} from './assets'
@@ -280,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"

package/src/components/EditCaptionDialog.tsx

@@ -17,6 +17,7 @@ import {useEffect, useId, useRef, useState} from 'react'
 
 import {addTextTrackFromUrl, deleteTextTrack, getAsset} from '../actions/assets'
 import {useClient} from '../hooks/useClient'
+import {addKeysToMuxData} from '../util/addKeysToMuxData'
 import {generateJwt} from '../util/generateJwt'
 import {getPlaybackId} from '../util/getPlaybackPolicy'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
@@ -125,10 +126,11 @@ export default function EditCaptionDialog({asset, track, onUpdate, onClose}: Pro
     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: latestAssetData.data, status: latestAssetData.data.status})
-        .commit()
+        .set({data: dataWithKeys, status: latestAssetData.data.status})
+        .commit({returnDocuments: false})
     } catch (refreshError) {
       console.error('Failed to refresh asset data:', refreshError)
     }

package/src/util/formatDriveShareLink.ts

@@ -0,0 +1,64 @@
+/**
+ * Format Google Drive share links as Google Drive export links.
+ * Supported formats:
+ *  - https://drive.google.com/uc?id=<ID>...
+ *  - https://drive.google.com/open?id=<ID>...
+ *  - https://drive.google.com/file/d/<ID>...
+ *  - https://drive.google.com/folder/<ID>...
+ *
+ * @param url Google Drive share link to format.
+ * @returns Google Drive export link (URL passthrough if not share link).
+ */
+export function formatDriveShareLink(url: string): string {
+  // Export link formatter.
+  const formatExportLink = (id: string) => {
+    return `https://drive.google.com/uc?export=download&id=${id}`
+  }
+
+  // URL formatting.
+  try {
+    // Parse URL.
+    const trimmed = url.trim()
+    const parsed = new URL(trimmed)
+
+    // Enforce strict host name.
+    if (parsed.hostname !== 'drive.google.com') {
+      throw new Error('URL is not from Google Drive.')
+    }
+
+    // Look for ID in search parameters.
+    const id = parsed.searchParams.get('id') || ''
+    if (id.length) {
+      return formatExportLink(id)
+    }
+
+    // Look for ID in path name.
+    const path = parsed.pathname.split('/') || []
+
+    // Path is /file/d/<ID>...
+    if (path.includes('file') && path.includes('d')) {
+      const index =
+        path.findIndex((value: string) => {
+          return value === 'd'
+        }) + 1
+      const fileId = path.at(index) || ''
+      return formatExportLink(fileId)
+    }
+
+    // Path is /folder/<ID>...
+    if (path.includes('folders')) {
+      const index =
+        path.findIndex((value: string) => {
+          return value === 'folders'
+        }) + 1
+      const folderId = path.at(index) || ''
+      return formatExportLink(folderId)
+    }
+
+    // URL not recognized.
+    throw new Error('URL was not recognized.')
+  } catch {
+    // URL passthrough by default.
+    return url
+  }
+}