sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/components/AddCaptionDialog.tsx

@@ -1,440 +0,0 @@
-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 {addKeysToMuxData} from '../util/addKeysToMuxData'
-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 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')
-    }
-
-    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 caption file',
-          status: 'error',
-          description: 'Could not upload the caption 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: async (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,
-        })
-        await refreshAssetData()
-        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.',
-      })
-      await refreshAssetData()
-      onAdd(result.track)
-      onClose()
-      return
-    }
-
-    await refreshAssetData()
-    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: 'Caption file or URL required',
-          status: 'error',
-          description: 'Please select a VTT or SRT file or enter a caption 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 or subtitles.srt)',
-          })
-          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,.srt,application/x-subrip"
-                  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 caption file URL
-              </Text>
-              <Stack space={2}>
-                <Label htmlFor="vtt-url">Caption File URL (.vtt or .srt)</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

@@ -1,23 +0,0 @@
-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.styled.tsx

@@ -1,19 +0,0 @@
-import {styled} from 'styled-components'
-
-import MuxLogo from './MuxLogo'
-
-const Logo = styled.span`
-  display: inline-block;
-  height: 0.8em;
-  margin-right: 1em;
-  transform: translate(0.3em, -0.2em);
-`
-
-export const Header = () => (
-  <>
-    <Logo>
-      <MuxLogo height={13} />
-    </Logo>
-    API Credentials
-  </>
-)