sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/components/EditCaptionDialog.tsx

@@ -1,510 +0,0 @@
-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 {addKeysToMuxData} from '../util/addKeysToMuxData'
-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)
-      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 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/EditThumbnailDialog.tsx

@@ -1,122 +0,0 @@
-import {Button, Dialog, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import React, {useId, useMemo, useState} from 'react'
-import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-
-import {useDialogStateContext} from '../context/DialogStateContext'
-import {useClient} from '../hooks/useClient'
-import {
-  formatSecondsToHHMMSS,
-  getSecondsFromTimeFormat,
-  isValidTimeFormat,
-} from '../util/formatSeconds'
-import type {VideoAssetDocument} from '../util/types'
-import VideoThumbnail from './VideoThumbnail'
-
-export interface Props {
-  asset: VideoAssetDocument
-  currentTime?: number
-}
-
-export default function EditThumbnailDialog({asset, currentTime = 0}: Props) {
-  const client = useClient()
-
-  const {setDialogState} = useDialogStateContext()
-  const dialogId = `EditThumbnailDialog${useId()}`
-
-  const [timeFormatted, setTimeFormatted] = useState<string>(() =>
-    formatSecondsToHHMMSS(currentTime)
-  )
-  const [nextTime, setNextTime] = useState<number>(currentTime)
-  const [inputError, setInputError] = useState<string>('')
-
-  const assetWithNewThumbnail = useMemo(() => ({...asset, thumbTime: nextTime}), [asset, nextTime])
-  const [saving, setSaving] = useState(false)
-  const [saveThumbnailError, setSaveThumbnailError] = useState<Error | null>(null)
-  const handleSave = () => {
-    setSaving(true)
-    client
-      .patch(asset._id!)
-      .set({thumbTime: nextTime})
-      .commit({returnDocuments: false})
-      .then(() => void setDialogState(false))
-      .catch(setSaveThumbnailError)
-      .finally(() => void setSaving(false))
-  }
-  const width = 300 * getDevicePixelRatio({maxDpr: 2})
-
-  if (saveThumbnailError) {
-    // eslint-disable-next-line no-warning-comments
-    // @TODO handle errors more gracefully
-    throw saveThumbnailError
-  }
-
-  const handleInputChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const value = event.currentTarget.value
-    setTimeFormatted(value)
-
-    if (isValidTimeFormat(value)) {
-      setInputError('')
-      const totalSeconds = getSecondsFromTimeFormat(value)
-      setNextTime(totalSeconds)
-    } else {
-      setInputError('Invalid time format')
-    }
-  }
-
-  return (
-    <Dialog
-      id={dialogId}
-      header="Edit thumbnail"
-      onClose={() => setDialogState(false)}
-      footer={
-        <Stack padding={3}>
-          <Button
-            key="thumbnail"
-            disabled={inputError !== ''}
-            mode="ghost"
-            tone="primary"
-            loading={saving}
-            onClick={handleSave}
-            text="Set new thumbnail"
-          />
-        </Stack>
-      }
-    >
-      <Stack space={3} padding={3}>
-        <Stack space={2}>
-          <Text size={1} weight="semibold">
-            Current:
-          </Text>
-          <VideoThumbnail asset={asset} width={width} staticImage />
-        </Stack>
-        <Stack space={2}>
-          <Text size={1} weight="semibold">
-            New:
-          </Text>
-          <VideoThumbnail asset={assetWithNewThumbnail} width={width} staticImage />
-        </Stack>
-
-        <Stack space={2}>
-          <Flex align={'center'} justify={'center'}>
-            <Text size={5} weight="semibold">
-              Or
-            </Text>
-          </Flex>
-        </Stack>
-
-        <Stack space={2}>
-          <Text size={1} weight="semibold">
-            Selected time for thumbnail (hh:mm:ss):
-          </Text>
-          <TextInput
-            size={1}
-            value={timeFormatted}
-            placeholder="hh:mm:ss"
-            onChange={handleInputChange}
-            customValidity={inputError}
-          />
-        </Stack>
-      </Stack>
-    </Dialog>
-  )
-}