sanity-plugin-mux-input 2.17.0 → 2.19.0

package/package.json

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

package/src/actions/assets.ts

@@ -1,5 +1,6 @@
 import type {SanityClient} from 'sanity'
 
+import {PLUGIN_VERSION_QUERY} from '../util/pluginVersion'
 import type {MuxAsset, VideoAssetDocument} from '../util/types'
 
 export function deleteAssetOnMux(client: SanityClient, assetId: string) {
@@ -8,6 +9,7 @@ export function deleteAssetOnMux(client: SanityClient, assetId: string) {
     url: `/addons/mux/assets/${dataset}/${assetId}`,
     withCredentials: true,
     method: 'DELETE',
+    query: PLUGIN_VERSION_QUERY,
   })
 }
 
@@ -45,6 +47,7 @@ export function getAsset(client: SanityClient, assetId: string) {
     url: `/addons/mux/assets/${dataset}/data/${assetId}`,
     withCredentials: true,
     method: 'GET',
+    query: PLUGIN_VERSION_QUERY,
   })
 }
 
@@ -66,7 +69,7 @@ export function listAssets(
     url: `/addons/mux/assets/${dataset}/data/list`,
     withCredentials: true,
     method: 'GET',
-    query,
+    query: {...query, ...PLUGIN_VERSION_QUERY},
   })
 }
 
@@ -99,6 +102,7 @@ export function addTextTrackFromUrl(
     headers: {
       'Content-Type': 'application/json',
     },
+    query: PLUGIN_VERSION_QUERY,
   })
 }
 
@@ -130,6 +134,7 @@ export function generateSubtitles(
     headers: {
       'Content-Type': 'application/json',
     },
+    query: PLUGIN_VERSION_QUERY,
   })
 }
 
@@ -142,5 +147,6 @@ export function deleteTextTrack(client: SanityClient, assetId: string, trackId:
     url: `/addons/mux/assets/${dataset}/${assetId}/tracks/${trackId}`,
     withCredentials: true,
     method: 'DELETE',
+    query: PLUGIN_VERSION_QUERY,
   })
 }

package/src/actions/secrets.ts

@@ -1,6 +1,8 @@
 import {defer} from 'rxjs'
 import type {SanityClient} from 'sanity'
 
+import {PLUGIN_VERSION_QUERY} from '../util/pluginVersion'
+
 interface SecretsDocument {
   _id: 'secrets.mux'
   _type: 'mux.apiKey'
@@ -46,6 +48,7 @@ export async function createSigningKeys(client: SanityClient) {
       url: `/addons/mux/signing-keys/${dataset}`,
       withCredentials: true,
       method: 'POST',
+      query: PLUGIN_VERSION_QUERY,
     })
     return res
   } catch (error: any) {
@@ -64,6 +67,7 @@ export function testSecrets(client: SanityClient) {
     url: `/addons/mux/secrets/${dataset}/test`,
     withCredentials: true,
     method: 'GET',
+    query: PLUGIN_VERSION_QUERY,
   })
 }
 
@@ -82,6 +86,7 @@ export async function haveValidSigningKeys(
       url: `/addons/mux/signing-keys/${dataset}/${signingKeyId}`,
       withCredentials: true,
       method: 'GET',
+      query: PLUGIN_VERSION_QUERY,
     })
     //
     // if this signing key is valid it will return { data: { id: 'xxxx' } }
@@ -100,6 +105,7 @@ export function testSecretsObservable(client: SanityClient) {
       url: `/addons/mux/secrets/${dataset}/test`,
       withCredentials: true,
       method: 'GET',
+      query: PLUGIN_VERSION_QUERY,
     })
   )
 }

package/src/actions/upload.ts

@@ -4,6 +4,8 @@ import {catchError, mergeMap, mergeMapTo, switchMap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
 
 import {createUpChunkObservable} from '../clients/upChunkObservable'
+import {formatDriveShareLink} from '../util/formatDriveShareLink'
+import {PLUGIN_VERSION_QUERY} from '../util/pluginVersion'
 import {roundPxString} from '../util/roundPxString'
 import type {MuxAsset, MuxNewAssetSettings, WatermarkConfig} from '../util/types'
 import {getAsset} from './assets'
@@ -41,6 +43,7 @@ export function cancelUpload(client: SanityClient, uuid: string) {
     url: `/addons/mux/uploads/${client.config().dataset}/${uuid}`,
     withCredentials: true,
     method: 'DELETE',
+    query: PLUGIN_VERSION_QUERY,
   })
 }
 
@@ -85,7 +88,7 @@ export function uploadUrl({
                   'MUX-Proxy-UUID': uuid,
                   'Content-Type': 'application/json',
                 },
-                query,
+                query: {...query, ...PLUGIN_VERSION_QUERY},
               })
             ).pipe(
               mergeMap((result) => {
@@ -152,6 +155,7 @@ export function uploadFile({
                     'Content-Type': 'application/json',
                   },
                   body,
+                  query: PLUGIN_VERSION_QUERY,
                 })
               ).pipe(
                 mergeMap((result) => {
@@ -204,6 +208,7 @@ export function getUpload(client: SanityClient, assetId: string) {
     url: `/addons/mux/uploads/${dataset}/${assetId}`,
     withCredentials: true,
     method: 'GET',
+    query: PLUGIN_VERSION_QUERY,
   })
 }
 
@@ -280,17 +285,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/hooks/useMuxPolling.ts

@@ -3,6 +3,7 @@ import {useDataset, useProjectId} from 'sanity'
 import useSWR from 'swr'
 
 import {useClient} from '../hooks/useClient'
+import {PLUGIN_VERSION_QUERY} from '../util/pluginVersion'
 import type {MuxAsset, VideoAssetDocument} from '../util/types'
 
 // Poll MUX if it's preparing the main document or its own static renditions
@@ -39,6 +40,7 @@ export const useMuxPolling = (asset?: VideoAssetDocument) => {
         url: `/addons/mux/assets/${dataset}/data/${asset!.assetId}`,
         withCredentials: true,
         method: 'GET',
+        query: PLUGIN_VERSION_QUERY,
       })
       client.patch(asset!._id!).set({status: data.status, data}).commit({returnDocuments: false})
     },

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
+  }
+}

package/src/util/pluginVersion.ts

@@ -0,0 +1 @@
+export const PLUGIN_VERSION_QUERY = {sanityVersion: process.env.PKG_VERSION!}