sanity-plugin-mux-input 2.13.0 → 2.15.0

package/package.json

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

package/src/_exports/index.ts

@@ -14,6 +14,7 @@ export const defaultConfig: PluginConfig = {
   normalize_audio: false,
   defaultPublic: true,
   defaultSigned: false,
+  defaultDrm: false,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: [],
   acceptedMimeTypes: ['video/*', 'audio/*'],

package/src/actions/assets.ts

@@ -69,3 +69,78 @@ export function listAssets(
     query,
   })
 }
+
+/**
+ * Adds a new text track to an existing asset using a VTT file URL
+ */
+export function addTextTrackFromUrl(
+  client: SanityClient,
+  assetId: string,
+  vttUrl: string,
+  options: {
+    language_code: string
+    name: string
+    text_type?: 'subtitles'
+  }
+) {
+  const {dataset} = client.config()
+
+  return client.request<{data: MuxAsset}>({
+    url: `/addons/mux/assets/${dataset}/${assetId}/tracks`,
+    withCredentials: true,
+    method: 'POST',
+    body: {
+      url: vttUrl,
+      type: 'text',
+      language_code: options.language_code,
+      name: options.name,
+      text_type: options.text_type || 'subtitles',
+    },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+}
+
+/**
+ * Generates subtitles automatically for an audio track
+ */
+export function generateSubtitles(
+  client: SanityClient,
+  assetId: string,
+  audioTrackId: string,
+  options: {
+    language_code: string
+    name: string
+  }
+) {
+  const {dataset} = client.config()
+  return client.request<{data: MuxAsset}>({
+    url: `/addons/mux/assets/${dataset}/${assetId}/tracks/${audioTrackId}/generate-subtitles`,
+    withCredentials: true,
+    method: 'POST',
+    body: {
+      generated_subtitles: [
+        {
+          language_code: options.language_code,
+          name: options.name,
+        },
+      ],
+    },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+}
+
+/**
+ * Deletes a text track from an asset
+ */
+export function deleteTextTrack(client: SanityClient, assetId: string, trackId: string) {
+  const {dataset} = client.config()
+  return client.request<{data: MuxAsset}>({
+    url: `/addons/mux/assets/${dataset}/${assetId}/tracks/${trackId}`,
+    withCredentials: true,
+    method: 'DELETE',
+  })
+}

package/src/actions/secrets.ts

@@ -9,6 +9,7 @@ interface SecretsDocument {
   enableSignedUrls: boolean
   signingKeyId: string
   signingKeyPrivate: string
+  drmConfigId: string
 }
 // eslint-disable-next-line max-params
 export function saveSecrets(
@@ -17,7 +18,8 @@ export function saveSecrets(
   secretKey: string,
   enableSignedUrls: boolean,
   signingKeyId: string,
-  signingKeyPrivate: string
+  signingKeyPrivate: string,
+  drmConfigId: string
 ): Promise<SecretsDocument> {
   const doc: SecretsDocument = {
     _id: 'secrets.mux',
@@ -27,7 +29,10 @@ export function saveSecrets(
     enableSignedUrls,
     signingKeyId,
     signingKeyPrivate,
+    drmConfigId,
   }
+  doc.signingKeyId = enableSignedUrls ? signingKeyId : ''
+  doc.signingKeyPrivate = enableSignedUrls ? signingKeyPrivate : ''
 
   return client.createOrReplace(doc)
 }

package/src/actions/upload.ts

@@ -158,7 +158,7 @@ type UploadResponse = {
     new_asset_settings: {
       static_renditions?: {resolution: string}[]
       passthrough: string
-      playback_policies: ['public' | 'signed']
+      playback_policies: ['public' | 'signed' | 'drm']
     }
     status: string
     timeout: number

package/src/components/AddCaptionDialog.tsx

@@ -0,0 +1,421 @@
+import {TranslateIcon, UploadIcon} from '@sanity/icons'
+import {
+  Autocomplete,
+  Button,
+  Card,
+  Checkbox,
+  Dialog,
+  Flex,
+  Label,
+  Spinner,
+  Stack,
+  Text,
+  TextInput,
+  useToast,
+} from '@sanity/ui'
+import LanguagesList from 'iso-639-1'
+import {useId, useRef, useState} from 'react'
+
+import {addTextTrackFromUrl, generateSubtitles, getAsset} from '../actions/assets'
+import {useClient} from '../hooks/useClient'
+import {extractErrorMessage, pollTrackStatus} from '../util/textTracks'
+import {type MuxTextTrack, SUPPORTED_MUX_LANGUAGES, type VideoAssetDocument} from '../util/types'
+
+const LANGUAGE_OPTIONS = LanguagesList.getAllCodes().map((code) => ({
+  value: code,
+  label: LanguagesList.getNativeName(code),
+}))
+
+const MUX_LANGUAGE_OPTIONS = SUPPORTED_MUX_LANGUAGES.map((lang) => ({
+  value: lang.code,
+  label: lang.label,
+}))
+
+export interface Props {
+  asset: VideoAssetDocument
+  onAdd: (track: MuxTextTrack) => void
+  onClose: () => void
+}
+
+export default function AddCaptionDialog({asset, onAdd, onClose}: Props) {
+  const client = useClient()
+  const toast = useToast()
+  const dialogId = `AddCaptionDialog${useId()}`
+
+  const [isAutogenerated, setIsAutogenerated] = useState(false)
+  const [vttUrl, setVttUrl] = useState('')
+  const [languageCode, setLanguageCode] = useState('')
+  const [selectedLanguage, setSelectedLanguage] = useState<{value: string; label: string} | null>(
+    null
+  )
+  const [name, setName] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const uploadVttFile = async (file: File): Promise<string> => {
+    const assetDocument = await client.assets.upload('file', file, {
+      filename: file.name,
+    })
+    return assetDocument.url
+  }
+
+  const handleAddTrackFromUrl = async () => {
+    if (!asset.assetId) {
+      throw new Error('Asset ID is required')
+    }
+
+    const trimmedName = name.trim()
+    const trimmedLanguageCode = languageCode.trim()
+
+    let vttUrlToUse = vttUrl.trim()
+
+    if (selectedFile) {
+      try {
+        vttUrlToUse = await uploadVttFile(selectedFile)
+      } catch (uploadError) {
+        toast.push({
+          title: 'Failed to upload VTT file',
+          status: 'error',
+          description: 'Could not upload the VTT file to Sanity. Please try again.',
+        })
+        setIsSubmitting(false)
+        throw uploadError
+      }
+    }
+
+    await addTextTrackFromUrl(client, asset.assetId, vttUrlToUse, {
+      language_code: trimmedLanguageCode,
+      name: trimmedName,
+      text_type: 'subtitles',
+    })
+
+    const result = await pollTrackStatus({
+      client,
+      assetId: asset.assetId,
+      trackName: trimmedName,
+      trackLanguageCode: trimmedLanguageCode,
+      onTrackErrored: (track) => {
+        const errorMessage =
+          track.error?.messages?.[0] ||
+          track.error?.type ||
+          'The track failed to download from the provided URL'
+        toast.push({
+          title: 'Caption track failed',
+          status: 'error',
+          description: errorMessage,
+        })
+        onAdd(track)
+        onClose()
+      },
+    })
+
+    if (!result.found || !result.track) {
+      toast.push({
+        title: 'Caption track may have been added',
+        status: 'warning',
+        description:
+          'The track was created but its status could not be determined. It may still be processing. Please refresh the page to see if it appears.',
+      })
+      onClose()
+      return
+    }
+
+    if (result.status === 'errored') {
+      return
+    }
+
+    if (result.status === 'preparing') {
+      toast.push({
+        title: 'Caption track is processing',
+        status: 'info',
+        description:
+          'The track was created and is being processed. It will appear in the list shortly.',
+      })
+      onAdd(result.track)
+      onClose()
+      return
+    }
+
+    toast.push({
+      title: 'Caption track added',
+      status: 'success',
+      description: 'Caption track added successfully',
+    })
+
+    onAdd(result.track)
+    onClose()
+  }
+
+  const handleGenerateSubtitles = async () => {
+    if (!asset.assetId) {
+      throw new Error('Asset ID is required')
+    }
+
+    const assetData = await getAsset(client, asset.assetId)
+    const audioTrack = assetData.data.tracks?.find((track) => track.type === 'audio')
+
+    if (!audioTrack || !audioTrack.id) {
+      toast.push({
+        title: 'No audio track found',
+        status: 'error',
+        description:
+          'The asset does not have an audio track. Auto-generated subtitles require an audio track.',
+      })
+      throw new Error('No audio track found')
+    }
+
+    await generateSubtitles(client, asset.assetId, audioTrack.id, {
+      language_code: languageCode.trim(),
+      name: name.trim(),
+    })
+
+    const mockTrackId = `generating-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
+    const mockTrack: MuxTextTrack = {
+      type: 'text',
+      id: mockTrackId,
+      text_type: 'subtitles',
+      text_source: 'generated_live',
+      language_code: languageCode.trim(),
+      name: name.trim(),
+      status: 'preparing',
+    }
+
+    toast.push({
+      title: 'Generating subtitles',
+      status: 'success',
+      description: 'This may take a few minutes',
+    })
+
+    onAdd(mockTrack)
+    onClose()
+  }
+
+  const handleSubmit = async () => {
+    if (!isAutogenerated) {
+      if (!selectedFile && !vttUrl.trim()) {
+        toast.push({
+          title: 'VTT file or URL required',
+          status: 'error',
+          description: 'Please select a VTT file or enter a VTT file URL',
+        })
+        return
+      }
+
+      if (vttUrl.trim() && !selectedFile) {
+        try {
+          void new URL(vttUrl.trim())
+        } catch {
+          toast.push({
+            title: 'Invalid URL',
+            status: 'error',
+            description: 'Please enter a valid URL (e.g., https://example.com/subtitles.vtt)',
+          })
+          return
+        }
+      }
+    }
+
+    if (!name.trim()) {
+      toast.push({
+        title: 'Audio name required',
+        status: 'error',
+        description: 'Please enter an audio name for this caption track',
+      })
+      return
+    }
+
+    if (!languageCode.trim()) {
+      toast.push({
+        title: 'Language code required',
+        status: 'error',
+        description: 'Please enter a language code (e.g., en, es, fr)',
+      })
+      return
+    }
+
+    setIsSubmitting(true)
+
+    try {
+      if (isAutogenerated) {
+        await handleGenerateSubtitles()
+      } else {
+        await handleAddTrackFromUrl()
+      }
+    } catch (error) {
+      toast.push({
+        title: 'Failed to add caption track',
+        status: 'error',
+        description: extractErrorMessage(error, 'Failed to add caption track'),
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <Dialog
+      id={dialogId}
+      header="Add Caption Track"
+      onClose={onClose}
+      width={1}
+      onClickOutside={onClose}
+    >
+      <Stack padding={4} space={4}>
+        <Stack space={2}>
+          <Flex align="center" marginBottom={3}>
+            <Checkbox
+              id="autogenerated-checkbox"
+              style={{display: 'block'}}
+              checked={isAutogenerated}
+              onChange={(e) => {
+                setIsAutogenerated(e.currentTarget.checked)
+                if (e.currentTarget.checked) {
+                  setVttUrl('')
+                }
+              }}
+              disabled={isSubmitting}
+            />
+            <Flex flex={1} paddingLeft={2}>
+              <Text>
+                <label htmlFor="autogenerated-checkbox">Generate captions</label>
+              </Text>
+            </Flex>
+          </Flex>
+          {!isAutogenerated && (
+            <Stack space={2}>
+              <Card padding={3} marginBottom={2} tone="transparent" border radius={2}>
+                <Flex align="center" justify="space-between">
+                  <Text size={1} muted>
+                    {selectedFile ? `Selected: ${selectedFile.name}` : 'No file selected'}
+                  </Text>
+                  <Button
+                    icon={UploadIcon}
+                    text="Select File"
+                    mode="ghost"
+                    tone="primary"
+                    fontSize={1}
+                    padding={2}
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={isSubmitting}
+                  />
+                </Flex>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".vtt,text/vtt"
+                  style={{display: 'none'}}
+                  onChange={(e) => {
+                    if (e.target.files && e.target.files.length > 0 && !isSubmitting) {
+                      setSelectedFile(e.target.files[0])
+                      setVttUrl('')
+                    }
+                  }}
+                />
+              </Card>
+              <Text size={1} muted style={{textAlign: 'center'}}>
+                Or enter the VTT file URL
+              </Text>
+              <Stack space={2}>
+                <Label htmlFor="vtt-url">VTT File URL</Label>
+                <TextInput
+                  id="vtt-url"
+                  placeholder="https://example.com/subtitles.vtt"
+                  value={vttUrl}
+                  onChange={(e) => {
+                    setVttUrl(e.currentTarget.value)
+                    setSelectedFile(null)
+                  }}
+                  disabled={isSubmitting}
+                />
+              </Stack>
+            </Stack>
+          )}
+        </Stack>
+
+        <Stack space={2}>
+          <Label htmlFor="caption-name">Audio name</Label>
+          <Autocomplete
+            id="caption-name"
+            value={selectedLanguage?.value || ''}
+            onChange={(newValue) => {
+              const options = isAutogenerated ? MUX_LANGUAGE_OPTIONS : LANGUAGE_OPTIONS
+              const selected = options.find((opt) => opt.value === newValue)
+              if (selected) {
+                setSelectedLanguage(selected)
+                setLanguageCode(selected.value)
+                setName(selected.label)
+              }
+            }}
+            options={isAutogenerated ? MUX_LANGUAGE_OPTIONS : LANGUAGE_OPTIONS}
+            icon={TranslateIcon}
+            placeholder="Select language"
+            filterOption={(query, option) =>
+              option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
+              option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
+            }
+            openButton
+            renderValue={(value) =>
+              (isAutogenerated ? MUX_LANGUAGE_OPTIONS : LANGUAGE_OPTIONS).find(
+                (l) => l.value === value
+              )?.label || value
+            }
+            renderOption={(option) => (
+              <Card data-as="button" padding={3} radius={2} tone="inherit">
+                <Text size={2} textOverflow="ellipsis">
+                  {option.label} ({option.value})
+                </Text>
+              </Card>
+            )}
+            disabled={isSubmitting}
+          />
+        </Stack>
+
+        <Stack space={2}>
+          <Label htmlFor="caption-language">Language Code</Label>
+          <TextInput
+            id="caption-language"
+            placeholder="en-US"
+            value={languageCode}
+            onChange={(e) => {
+              setLanguageCode(e.currentTarget.value)
+              if (selectedLanguage && selectedLanguage.value !== e.currentTarget.value) {
+                setSelectedLanguage(null)
+                if (!name || name === selectedLanguage.label) {
+                  setName('')
+                }
+              }
+            }}
+            disabled={isSubmitting}
+          />
+        </Stack>
+
+        <Flex gap={2} justify="flex-end" marginTop={2}>
+          <Button text="Cancel" mode="ghost" onClick={onClose} disabled={isSubmitting} />
+          <Button
+            text="Add Caption Track"
+            tone="primary"
+            icon={
+              isSubmitting ? (
+                <Spinner
+                  style={{
+                    verticalAlign: 'middle',
+                    display: 'inline-block',
+                    marginBottom: '-3px',
+                    width: '1em',
+                    height: '1em',
+                    marginRight: '-6px',
+                  }}
+                />
+              ) : (
+                <UploadIcon />
+              )
+            }
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+          />
+        </Flex>
+      </Stack>
+    </Dialog>
+  )
+}

package/src/components/CaptionsDialog.tsx

@@ -0,0 +1,23 @@
+import {Dialog, Stack} from '@sanity/ui'
+import {useId} from 'react'
+
+import {useDialogStateContext} from '../context/DialogStateContext'
+import type {VideoAssetDocument} from '../util/types'
+import TextTracksManager from './TextTracksManager'
+
+export interface Props {
+  asset: VideoAssetDocument
+}
+
+export default function CaptionsDialog({asset}: Props) {
+  const {setDialogState} = useDialogStateContext()
+  const dialogId = `CaptionsDialog${useId()}`
+
+  return (
+    <Dialog id={dialogId} header="Edit Captions" onClose={() => setDialogState(false)} width={1}>
+      <Stack padding={4}>
+        <TextTracksManager asset={asset} />
+      </Stack>
+    </Dialog>
+  )
+}

package/src/components/ConfigureApi.tsx

@@ -32,7 +32,7 @@ export interface ConfigureApiDialogProps {
   secrets: Secrets
 }
 
-const fieldNames = ['token', 'secretKey', 'enableSignedUrls'] as const
+const fieldNames = ['token', 'secretKey', 'enableSignedUrls', 'drmConfigId'] as const
 
 // Internal dialog component that can be used with external state
 export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialogProps) {
@@ -44,11 +44,12 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
     () =>
       secrets.token !== state.token ||
       secrets.secretKey !== state.secretKey ||
-      secrets.enableSignedUrls !== state.enableSignedUrls,
+      secrets.enableSignedUrls !== state.enableSignedUrls ||
+      secrets.drmConfigId !== state.drmConfigId,
     [secrets, state]
   )
   const id = `ConfigureApi${useId()}`
-  const [tokenId, secretKeyId, enableSignedUrlsId] = useMemo<typeof fieldNames>(
+  const [tokenId, secretKeyId, enableSignedUrlsId, drmConfigIdId] = useMemo<typeof fieldNames>(
     () => fieldNames.map((field) => `${id}-${field}`) as unknown as typeof fieldNames,
     [id]
   )
@@ -63,8 +64,8 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
       if (!saving.current && event.currentTarget.reportValidity()) {
         saving.current = true
         dispatch({type: 'submit'})
-        const {token, secretKey, enableSignedUrls} = state
-        handleSaveSecrets({token, secretKey, enableSignedUrls})
+        const {token, secretKey, enableSignedUrls, drmConfigId} = state
+        handleSaveSecrets({token, secretKey, enableSignedUrls, drmConfigId})
           .then((savedSecrets) => {
             const {projectId, dataset} = client.config()
             clear([cacheNs, secretsId, projectId, dataset])
@@ -106,6 +107,15 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
     },
     [dispatch]
   )
+  const handleChangeDrmConfigId = useCallback(
+    (event: React.FormEvent<HTMLInputElement>) => {
+      dispatch({
+        type: 'change',
+        payload: {name: 'drmConfigId', value: event.currentTarget.value},
+      })
+    },
+    [dispatch]
+  )
 
   useEffect(() => {
     if (firstField.current) {
@@ -202,6 +212,42 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
               ) : null}
             </Stack>
 
+            <FormField title="DRM Configuration ID" inputId={drmConfigIdId}>
+              <TextInput
+                id={drmConfigIdId}
+                onChange={handleChangeDrmConfigId}
+                type="text"
+                value={state.drmConfigId ?? ''}
+                required={false}
+              />
+            </FormField>
+            <Card padding={[3, 3, 3]} radius={2} shadow={1} tone="neutral">
+              <Stack space={3}>
+                <Text size={1}>
+                  DRM (Digital Rights Management) provides an extra layer of content security for
+                  video content streamed from Mux. For additional information check out our{' '}
+                  <a
+                    href="https://www.mux.com/docs/guides/protect-videos-with-drm#play-drm-protected-videos"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    DRM Guide
+                  </a>
+                  .
+                </Text>
+                <Text size={1}>
+                  <a
+                    href="https://www.mux.com/support/human"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Contact us
+                  </a>{' '}
+                  to get started using DRM.
+                </Text>
+              </Stack>
+            </Card>
+
             <Inline space={2}>
               <Button
                 text="Save"