sanity-plugin-mux-input 2.13.0 → 2.15.0

package/src/components/EditCaptionDialog.tsx

@@ -0,0 +1,508 @@
+import {DownloadIcon, TranslateIcon, UploadIcon} from '@sanity/icons'
+import {
+  Autocomplete,
+  Button,
+  Card,
+  Dialog,
+  Flex,
+  Label,
+  Spinner,
+  Stack,
+  Text,
+  TextInput,
+  useToast,
+} from '@sanity/ui'
+import LanguagesList from 'iso-639-1'
+import {useEffect, useId, useRef, useState} from 'react'
+
+import {addTextTrackFromUrl, deleteTextTrack, getAsset} from '../actions/assets'
+import {useClient} from '../hooks/useClient'
+import {generateJwt} from '../util/generateJwt'
+import {getPlaybackId} from '../util/getPlaybackPolicy'
+import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
+import {downloadVttFile, extractErrorMessage, pollTrackStatus} from '../util/textTracks'
+import type {MuxTextTrack, VideoAssetDocument} from '../util/types'
+
+const LANGUAGE_OPTIONS = LanguagesList.getAllCodes().map((code) => ({
+  value: code,
+  label: LanguagesList.getNativeName(code),
+}))
+
+export interface Props {
+  asset: VideoAssetDocument
+  track: MuxTextTrack
+  onUpdate: (track: MuxTextTrack, oldTrackId?: string) => void
+  onClose: () => void
+}
+
+export default function EditCaptionDialog({asset, track, onUpdate, onClose}: Props) {
+  const client = useClient()
+  const toast = useToast()
+  const dialogId = `EditCaptionDialog${useId()}`
+
+  const isAutogenerated =
+    track.text_source === 'generated_live' ||
+    track.text_source === 'generated_live_final' ||
+    track.text_source === 'generated_vod'
+
+  const [vttUrl, setVttUrl] = useState('')
+  const [languageCode, setLanguageCode] = useState(track.language_code || '')
+  const [selectedLanguage, setSelectedLanguage] = useState<{value: string; label: string} | null>(
+    () => {
+      const baseCode = track.language_code?.split('-')[0]
+      const found = LANGUAGE_OPTIONS.find(
+        (opt) => opt.value === track.language_code || opt.value === baseCode
+      )
+      if (found) return found
+      if (track.name) {
+        const foundByName = LANGUAGE_OPTIONS.find((opt) => opt.label === track.name)
+        if (foundByName) return foundByName
+      }
+      return null
+    }
+  )
+  const [name, setName] = useState(track.name || '')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [downloading, setDownloading] = useState(false)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    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
+    )
+    const foundByName = track.name ? LANGUAGE_OPTIONS.find((opt) => opt.label === track.name) : null
+    setSelectedLanguage(foundByCode || foundByName || null)
+  }, [track, asset, client])
+
+  const handleDownloadCurrentFile = async () => {
+    setDownloading(true)
+    try {
+      await downloadVttFile(client, asset, track)
+    } catch (error) {
+      let errorMessage = 'Please try again'
+      let title = 'Failed to download VTT file'
+
+      if (error instanceof Error) {
+        errorMessage = error.message
+        if (error.message.includes('Track')) {
+          title = 'Cannot download'
+        }
+      } else if (error === 'Track ID is missing' || error === 'Track is not ready yet') {
+        errorMessage = String(error)
+        title = 'Cannot download'
+      }
+
+      toast.push({
+        title,
+        status: 'error',
+        description: errorMessage,
+      })
+    } finally {
+      setDownloading(false)
+    }
+  }
+
+  const getCurrentFileName = () => {
+    if (track.id && asset.filename) {
+      return `${asset.filename}-${track.language_code || 'en'}.vtt`
+    }
+    return `captions-${track.language_code || 'en'}.vtt`
+  }
+
+  const uploadVttFile = async (file: File): Promise<string> => {
+    const assetDocument = await client.assets.upload('file', file, {
+      filename: file.name,
+    })
+    return assetDocument.url
+  }
+
+  const refreshAssetData = async () => {
+    if (!asset._id || !asset.assetId) return
+    try {
+      const latestAssetData = await getAsset(client, asset.assetId)
+      await client
+        .patch(asset._id)
+        .set({data: latestAssetData.data, status: latestAssetData.data.status})
+        .commit()
+    } catch (refreshError) {
+      console.error('Failed to refresh asset data:', refreshError)
+    }
+  }
+
+  const handleUpdateTrackWithNewUrl = async () => {
+    if (!asset.assetId) {
+      throw new Error('Asset ID is required')
+    }
+
+    const trimmedName = name.trim()
+    const trimmedLanguageCode = languageCode.trim()
+
+    const oldTrackId = track.id
+
+    try {
+      await deleteTextTrack(client, asset.assetId, oldTrackId)
+    } catch (deleteError) {
+      toast.push({
+        title: 'Failed to delete old track',
+        status: 'error',
+        description: 'Could not delete the old track. Please try again or delete it manually.',
+      })
+      setIsSubmitting(false)
+      throw deleteError
+    }
+
+    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
+      }
+    }
+
+    try {
+      await addTextTrackFromUrl(client, asset.assetId, vttUrlToUse, {
+        language_code: trimmedLanguageCode,
+        name: trimmedName,
+        text_type: 'subtitles',
+      })
+    } catch (error: unknown) {
+      toast.push({
+        title: 'Failed to update caption track',
+        status: 'error',
+        description: extractErrorMessage(error, 'Failed to update caption track'),
+      })
+      setIsSubmitting(false)
+      throw error
+    }
+
+    const result = await pollTrackStatus({
+      client,
+      assetId: asset.assetId,
+      trackName: trimmedName,
+      trackLanguageCode: trimmedLanguageCode,
+      onTrackErrored: async (erroredTrack) => {
+        const errorMessage =
+          erroredTrack.error?.messages?.[0] ||
+          erroredTrack.error?.type ||
+          'The track failed to download from the provided URL'
+        toast.push({
+          title: 'Caption track failed',
+          status: 'error',
+          description: errorMessage,
+        })
+        await refreshAssetData()
+        onUpdate(erroredTrack, oldTrackId)
+        setIsSubmitting(false)
+      },
+    })
+
+    if (!result.found || !result.track) {
+      toast.push({
+        title: 'Caption track may have been updated',
+        status: 'warning',
+        description:
+          'The track was updated but its status could not be determined. It may still be processing. Please refresh the page to see if it appears.',
+      })
+      setIsSubmitting(false)
+      return
+    }
+
+    if (result.status === 'errored') {
+      return
+    }
+
+    await refreshAssetData()
+
+    if (result.status === 'preparing') {
+      toast.push({
+        title: 'Caption track is processing',
+        status: 'info',
+        description:
+          'The track was updated and is being processed. It will appear in the list shortly.',
+      })
+    } else {
+      toast.push({
+        title: 'Caption track updated',
+        status: 'success',
+        description: 'Caption track updated successfully',
+      })
+    }
+
+    onUpdate(result.track, oldTrackId)
+    setIsSubmitting(false)
+  }
+
+  const handleSubmit = async () => {
+    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 (!asset.assetId) {
+        throw new Error('Asset ID is required')
+      }
+
+      const originalVttUrl = (() => {
+        if (isAutogenerated || !track.id) return ''
+        const playbackId = getPlaybackId(asset)
+        if (!playbackId) return ''
+        let url = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`
+        if (getPlaybackPolicy(asset)?.policy === 'signed') {
+          const token = generateJwt(client, playbackId, 'v')
+          url += `?token=${token}`
+        }
+        return url
+      })()
+
+      const urlChanged =
+        selectedFile !== null || (vttUrl.trim() && vttUrl.trim() !== originalVttUrl)
+
+      if (!urlChanged) {
+        toast.push({
+          title: 'No changes',
+          status: 'info',
+          description:
+            'Please provide a new VTT file or URL using the "Replace" button or URL field to update the track.',
+        })
+        setIsSubmitting(false)
+        return
+      }
+
+      if (urlChanged) {
+        if (!selectedFile && vttUrl.trim()) {
+          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)',
+            })
+            setIsSubmitting(false)
+            return
+          }
+        }
+
+        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',
+          })
+          setIsSubmitting(false)
+          return
+        }
+
+        await handleUpdateTrackWithNewUrl()
+      }
+
+      onClose()
+    } catch (error) {
+      toast.push({
+        title: 'Failed to update caption track',
+        status: 'error',
+        description: error instanceof Error ? error.message : 'Please try again',
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <Dialog
+      id={dialogId}
+      header="Edit Caption Track"
+      onClose={onClose}
+      width={1}
+      onClickOutside={onClose}
+    >
+      <Stack padding={4} space={4}>
+        <Stack space={2}>
+          <Card padding={3} marginBottom={2} tone="transparent" border radius={2}>
+            <Flex align="center" justify="space-between">
+              <Text>{getCurrentFileName()}</Text>
+              <Flex gap={2}>
+                {track.status !== 'errored' && (
+                  <Button
+                    icon={
+                      downloading ? (
+                        <Spinner
+                          style={{
+                            verticalAlign: 'middle',
+                            display: 'inline-block',
+                            marginTop: '-2px',
+                            width: '0.5em',
+                            height: '0.5em',
+                          }}
+                        />
+                      ) : (
+                        <DownloadIcon />
+                      )
+                    }
+                    text="Download"
+                    mode="ghost"
+                    tone="primary"
+                    fontSize={1}
+                    padding={2}
+                    onClick={handleDownloadCurrentFile}
+                    disabled={downloading || isSubmitting}
+                  />
+                )}
+                <Button
+                  icon={UploadIcon}
+                  text="Replace"
+                  mode="ghost"
+                  tone="primary"
+                  fontSize={1}
+                  padding={2}
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isSubmitting}
+                />
+              </Flex>
+            </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('')
+                }
+              }}
+            />
+            {selectedFile && (
+              <Text size={1} muted style={{marginTop: 8}}>
+                Selected: {selectedFile.name}
+              </Text>
+            )}
+          </Card>
+          <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}
+            />
+            <Text size={1} muted>
+              Add a URL to replace the existing VTT file with a new one
+            </Text>
+          </Stack>
+        </Stack>
+
+        <Stack space={2}>
+          <Label htmlFor="caption-name">Audio name</Label>
+          <Autocomplete
+            id="caption-name"
+            value={selectedLanguage?.value || ''}
+            onChange={(newValue) => {
+              const selected = LANGUAGE_OPTIONS.find((opt) => opt.value === newValue)
+              if (selected) {
+                setSelectedLanguage(selected)
+                setLanguageCode(selected.value)
+                setName(selected.label)
+              }
+            }}
+            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) => 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="Update 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/InputBrowser.tsx

@@ -16,7 +16,8 @@ export default function InputBrowser({
   setDialogState,
   asset,
   onChange,
-}: Pick<SelectAssetProps, 'onChange' | 'asset'> & {
+  config,
+}: Pick<SelectAssetProps, 'onChange' | 'asset' | 'config'> & {
   setDialogState: SetDialogState
 }) {
   const id = `InputBrowser${useId()}`
@@ -29,7 +30,12 @@ export default function InputBrowser({
       onClose={handleClose}
       width={2}
     >
-      <SelectAsset asset={asset} onChange={onChange} setDialogState={setDialogState} />
+      <SelectAsset
+        config={config}
+        asset={asset}
+        onChange={onChange}
+        setDialogState={setDialogState}
+      />
     </StyledDialog>
   )
 }

package/src/components/Onboard.tsx

@@ -2,10 +2,10 @@ import {PlugIcon} from '@sanity/icons'
 import {Button, Card, Flex, Grid, Heading, Inline, Text} from '@sanity/ui'
 import {useCallback} from 'react'
 
+import {useAccessControl} from '../hooks/useAccessControl'
 import type {SetDialogState} from '../hooks/useDialogState'
-import MuxLogo from './MuxLogo'
 import {PluginConfig} from '../util/types'
-import {useAccessControl} from '../hooks/useAccessControl'
+import MuxLogo from './MuxLogo'
 
 interface OnboardProps {
   setDialogState: SetDialogState

package/src/components/PageSelector.tsx

@@ -0,0 +1,54 @@
+import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
+import {Button, Label} from '@sanity/ui'
+import {Dispatch, SetStateAction, useEffect} from 'react'
+
+const PageSelector = (props: {
+  page: number
+  setPage: Dispatch<SetStateAction<number>>
+  total: number
+}) => {
+  const page = props.page
+  const setPage = props.setPage
+
+  useEffect(() => {
+    // Constraint in bounds.
+    const clamped = Math.min(props.total - 1, Math.max(0, page))
+    if (page !== clamped) {
+      setPage(clamped)
+    }
+  }, [page, props.total, setPage])
+
+  return (
+    <>
+      <Button
+        icon={ChevronLeftIcon}
+        mode="bleed"
+        padding={3}
+        style={{cursor: 'pointer'}}
+        disabled={page <= 0}
+        onClick={() => {
+          setPage((p) => {
+            return Math.min(props.total - 1, Math.max(0, p - 1))
+          })
+        }}
+      />
+      <Label muted>
+        Page {page + 1}/{props.total}
+      </Label>
+      <Button
+        icon={ChevronRightIcon}
+        mode="bleed"
+        padding={3}
+        style={{cursor: 'pointer'}}
+        disabled={page >= props.total - 1}
+        onClick={() => {
+          setPage((p) => {
+            return Math.min(props.total - 1, Math.max(0, p + 1))
+          })
+        }}
+      />
+    </>
+  )
+}
+
+export default PageSelector

package/src/components/Player.styled.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {Suspense, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
@@ -46,5 +46,10 @@ export function ThumbnailsMetadataTrack({asset}: ThumbnailsMetadataTrackProps) {
   // Why useState instead of useMemo? Because we really really only want to run it exactly once and useMemo doesn't make that guarantee
   const [src] = useState<string>(() => getStoryboardSrc({asset, client}))
 
-  return <track label="thumbnails" default kind="metadata" src={src} />
+  return (
+    /* We use Suspense here because `getStoryboardSrc` uses suspend() under the hood */
+    <Suspense fallback={null}>
+      <track label="thumbnails" default kind="metadata" src={src} />
+    </Suspense>
+  )
 }

package/src/components/PlayerActionsMenu.tsx

@@ -5,6 +5,7 @@ import {
   PlugIcon,
   ResetIcon,
   SearchIcon,
+  TranslateIcon,
   UploadIcon,
 } from '@sanity/icons'
 import {
@@ -63,7 +64,7 @@ function PlayerActionsMenu(
   const {asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept} = props
   const [open, setOpen] = useState(false)
   const [menuElement, setMenuRef] = useState<HTMLDivElement | null>(null)
-  const isSigned = useMemo(() => getPlaybackPolicy(asset) === 'signed', [asset])
+  const isSigned = useMemo(() => getPlaybackPolicy(asset)?.policy === 'signed', [asset])
   const {hasConfigAccess} = useAccessControl(props.config)
 
   const onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange])
@@ -122,11 +123,18 @@ function PlayerActionsMenu(
               onClick={() => setDialogState('select-video')}
             />
             {isVideoAsset(asset) && (
-              <MenuItem
-                icon={ImageIcon}
-                text="Thumbnail"
-                onClick={() => setDialogState('edit-thumbnail')}
-              />
+              <>
+                <MenuItem
+                  icon={ImageIcon}
+                  text="Thumbnail"
+                  onClick={() => setDialogState('edit-thumbnail')}
+                />
+                <MenuItem
+                  icon={TranslateIcon}
+                  text="Captions"
+                  onClick={() => setDialogState('edit-captions')}
+                />
+              </>
             )}
             <MenuDivider />
             {hasConfigAccess && (

package/src/components/SelectAsset.tsx

@@ -2,15 +2,21 @@ import {useCallback} from 'react'
 import {PatchEvent, set, setIfMissing, unset} from 'sanity'
 
 import type {SetDialogState} from '../hooks/useDialogState'
-import type {MuxInputProps, VideoAssetDocument} from '../util/types'
+import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
 import VideosBrowser, {type VideosBrowserProps} from './VideosBrowser'
 
 export interface Props extends Pick<MuxInputProps, 'onChange'> {
   asset?: VideoAssetDocument | null | undefined
   setDialogState: SetDialogState
+  config: PluginConfig
 }
 
-export default function SelectAssets({asset: selectedAsset, onChange, setDialogState}: Props) {
+export default function SelectAssets({
+  asset: selectedAsset,
+  onChange,
+  setDialogState,
+  config,
+}: Props) {
   const handleSelect = useCallback<Required<VideosBrowserProps>['onSelect']>(
     (chosenAsset) => {
       if (!chosenAsset?._id) {
@@ -29,5 +35,5 @@ export default function SelectAssets({asset: selectedAsset, onChange, setDialogS
     [onChange, setDialogState, selectedAsset]
   )
 
-  return <VideosBrowser onSelect={handleSelect} />
+  return <VideosBrowser onSelect={handleSelect} config={config} />
 }

package/src/components/StudioTool.tsx

@@ -4,8 +4,8 @@ import type {PluginConfig} from '../util/types'
 import ToolIcon from './icons/ToolIcon'
 import VideosBrowser from './VideosBrowser'
 
-const StudioTool: React.FC<PluginConfig> = () => {
-  return <VideosBrowser />
+const StudioTool: React.FC<PluginConfig> = (config) => {
+  return <VideosBrowser config={config} />
 }
 
 export const DEFAULT_TOOL_CONFIG = {