sanity-plugin-mux-input 2.12.1 → 2.14.0

package/src/hooks/useDialogState.ts

@@ -2,7 +2,7 @@
 
 import {useState} from 'react'
 
-export type DialogState = 'secrets' | 'select-video' | 'edit-thumbnail' | false
+export type DialogState = 'secrets' | 'select-video' | 'edit-thumbnail' | 'edit-captions' | false
 
 export function useDialogState() {
   return useState<DialogState>(false)

package/src/util/getVideoMetadata.ts

@@ -1,5 +1,5 @@
 import {formatSeconds} from './formatSeconds'
-import {VideoAssetDocument} from './types'
+import type {MuxTextTrack, VideoAssetDocument} from './types'
 
 export default function getVideoMetadata(doc: VideoAssetDocument) {
   const id = doc.assetId || doc._id || ''
@@ -16,5 +16,7 @@ export default function getVideoMetadata(doc: VideoAssetDocument) {
     aspect_ratio: doc.data?.aspect_ratio,
     max_stored_resolution: doc.data?.max_stored_resolution,
     max_stored_frame_rate: doc.data?.max_stored_frame_rate,
+    text_tracks:
+      doc.data?.tracks?.filter((track): track is MuxTextTrack => track.type === 'text') || [],
   }
 }

package/src/util/textTracks.ts

@@ -0,0 +1,219 @@
+import type {SanityClient} from '@sanity/client'
+
+import {getAsset} from '../actions/assets'
+import {generateJwt} from './generateJwt'
+import {getPlaybackId} from './getPlaybackId'
+import {getPlaybackPolicy} from './getPlaybackPolicy'
+import type {MuxTextTrack, VideoAssetDocument} from './types'
+
+export function extractErrorMessage(
+  error: unknown,
+  defaultMessage = 'Failed to process request'
+): string {
+  let message = ''
+
+  if (error && typeof error === 'object') {
+    const err = error as {response?: {body?: {message?: string}}; message?: string}
+    message = err.response?.body?.message || err.message || ''
+  } else if (typeof error === 'string') {
+    message = error
+  }
+
+  if (!message) {
+    return defaultMessage
+  }
+
+  const match = message.match(/\(([^)]+)\)/)
+  if (match && match[1]) {
+    return match[1]
+  }
+
+  if (message.includes('responded with')) {
+    const parts = message.split('(')
+    if (parts.length > 1) {
+      return parts[parts.length - 1].replace(')', '').trim()
+    }
+  }
+
+  return message
+}
+
+export interface PollTrackStatusOptions {
+  client: SanityClient
+  assetId: string
+  trackName: string
+  trackLanguageCode: string
+  maxAttempts?: number
+  onTrackFound?: (track: MuxTextTrack) => void
+  onTrackErrored?: (track: MuxTextTrack) => void
+  onTrackReady?: (track: MuxTextTrack) => void
+}
+
+export interface PollTrackStatusResult {
+  track: MuxTextTrack | undefined
+  found: boolean
+  status: 'ready' | 'preparing' | 'errored' | 'not-found'
+}
+
+/**
+ * Polls Mux API to find and track the status of a newly added text track.
+ * The track may be in "preparing" state initially, then become "ready" or "errored".
+ *
+ * @param options - Configuration options for polling
+ * @returns Promise resolving to the poll result
+ */
+export async function pollTrackStatus(
+  options: PollTrackStatusOptions
+): Promise<PollTrackStatusResult> {
+  const {
+    client,
+    assetId,
+    trackName,
+    trackLanguageCode,
+    maxAttempts = 10,
+    onTrackFound,
+    onTrackErrored,
+    onTrackReady,
+  } = options
+
+  const trimmedName = trackName.trim()
+  const trimmedLanguageCode = trackLanguageCode.trim()
+  let newTrack: MuxTextTrack | undefined
+  let attempts = 0
+  let trackFound = false
+
+  const findTrack = (textTracks: MuxTextTrack[]): MuxTextTrack | undefined => {
+    let foundTrack = textTracks.find(
+      (track) => track.name === trimmedName && track.language_code === trimmedLanguageCode
+    )
+
+    if (!foundTrack) {
+      foundTrack = textTracks.find((track) => track.language_code === trimmedLanguageCode)
+    }
+
+    if (!foundTrack && textTracks.length > 0) {
+      foundTrack = textTracks[textTracks.length - 1]
+    }
+
+    return foundTrack
+  }
+
+  while (attempts < maxAttempts) {
+    try {
+      if (attempts > 0) {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+      }
+
+      const assetData = await getAsset(client, assetId)
+      const textTracks =
+        assetData.data.tracks?.filter((track): track is MuxTextTrack => track.type === 'text') || []
+
+      const foundTrack = findTrack(textTracks)
+
+      if (!foundTrack) {
+        attempts++
+        continue
+      }
+
+      trackFound = true
+      newTrack = foundTrack
+
+      if (onTrackFound) {
+        onTrackFound(foundTrack)
+      }
+
+      if (foundTrack.status === 'ready') {
+        if (onTrackReady) {
+          onTrackReady(foundTrack)
+        }
+        break
+      }
+
+      if (foundTrack.status === 'errored') {
+        if (onTrackErrored) {
+          onTrackErrored(foundTrack)
+        }
+        return {
+          track: foundTrack,
+          found: true,
+          status: 'errored',
+        }
+      }
+    } catch (error) {
+      console.error('Failed to fetch updated asset:', error)
+    }
+
+    attempts++
+  }
+
+  if (!newTrack || !trackFound) {
+    return {
+      track: undefined,
+      found: false,
+      status: 'not-found',
+    }
+  }
+
+  if (newTrack.status === 'preparing') {
+    return {
+      track: newTrack,
+      found: true,
+      status: 'preparing',
+    }
+  }
+
+  return {
+    track: newTrack,
+    found: true,
+    status: 'ready',
+  }
+}
+
+export async function downloadVttFile(
+  client: SanityClient,
+  asset: VideoAssetDocument,
+  track: MuxTextTrack
+): Promise<void> {
+  if (!track.id) {
+    throw new Error('Track ID is missing')
+  }
+
+  if (track.status !== 'ready') {
+    throw new Error(`Track is not ready yet. Status: ${track.status}`)
+  }
+
+  if (!asset.assetId) {
+    throw new Error('Asset ID is required')
+  }
+
+  const playbackId = getPlaybackId(asset)
+  if (!playbackId) {
+    throw new Error('Playback ID is required')
+  }
+
+  const playbackPolicy = getPlaybackPolicy(asset)
+
+  let downloadUrl = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`
+
+  if (playbackPolicy === 'signed') {
+    const token = generateJwt(client, playbackId, 'v')
+    downloadUrl += `?token=${token}`
+  }
+
+  const response = await fetch(downloadUrl)
+  if (!response.ok) {
+    throw new Error(`Failed to download file: ${response.statusText}`)
+  }
+
+  const blob = await response.blob()
+  const blobUrl = URL.createObjectURL(blob)
+
+  const link = document.createElement('a')
+  link.href = blobUrl
+  link.download = `${asset.filename || 'captions'}-${track.language_code || 'en'}.vtt`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+
+  URL.revokeObjectURL(blobUrl)
+}

package/src/util/types.ts

@@ -1,3 +1,4 @@
+import type MuxPlayerElement from '@mux/mux-player'
 import type {ObjectInputProps, PreviewLayoutKey, PreviewProps, SchemaType} from 'sanity'
 import type {PartialDeep} from 'type-fest'
 
@@ -122,6 +123,50 @@ export interface MuxInputConfig {
    * @defaultValue false
    */
   disableTextTrackConfig?: boolean
+
+  /**
+   * The mime types that are accepted by the input.
+   *
+    * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept}
+   * @defaultValue ['video/*','audio/*']
+
+   */
+  acceptedMimeTypes?: ('audio/*' | 'video/*')[]
+
+  /**
+   * Maximum file size allowed for video uploads in bytes.
+   * If not specified, no file size validation will be performed.
+   *
+   * @example 1024 * 1024 * 1024 // 1 GB
+   * @defaultValue undefined
+   */
+  maxAssetFileSize?: number
+
+  /**
+   * Maximum video duration allowed in seconds.
+   * If not specified, no duration validation will be performed.
+   *
+   * @example 2 * 60 * 60 // 2 hours
+   * @defaultValue undefined
+   */
+  maxAssetDuration?: number
+
+  /**
+   * HLS.js configuration options to be passed to the Mux Player.
+   * These options allow you to customize the underlying HLS.js playback engine behavior.
+   *
+   * @see {@link https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning}
+   * @defaultValue undefined
+   * @example
+   * ```ts
+   * {
+   *   maxBufferLength: 30,
+   *   lowLatencyMode: true,
+   *   capLevelToPlayerSize: true
+   * }
+   * ```
+   */
+  hlsConfig?: MuxPlayerElement['_hlsConfig']
 }
 
 export interface PluginConfig extends MuxInputConfig {
@@ -258,7 +303,6 @@ export interface MuxNewAssetSettings
     name?: string
     /** Indicates the track provides Subtitles for the Deaf or Hard-of-hearing (SDH). */
     closed_captions?: boolean
-    /// @TODO Huhh?>?? Below
     /** This optional parameter should be used tracks with type of text and text_type set to subtitles. */
     passthrough?: string
   }[]
@@ -356,7 +400,12 @@ export interface MuxTextTrack {
   id: string
   text_type?: 'subtitles'
   // https://docs.mux.com/api-reference/video#operation/list-assets:~:text=text%20type%20tracks.-,tracks%5B%5D.,text_source,-string
-  text_source?: 'uploaded' | 'embedded' | 'generated_live' | 'generated_live_final'
+  text_source?:
+    | 'uploaded'
+    | 'embedded'
+    | 'generated_live'
+    | 'generated_live_final'
+    | 'generated_vod'
   // BCP 47 language code
   language_code?: 'en' | 'en-US' | string
   // The name of the track containing a human-readable description. The hls manifest will associate a subtitle text track with this value
@@ -365,8 +414,12 @@ export interface MuxTextTrack {
   //  Max 255 characters
   passthrough?: string
   status: 'preparing' | 'ready' | 'errored'
+  error?: {
+    type: string
+    messages?: string[]
+  }
 }
-export type MuxTrack = MuxVideoTrack | MuxAudioTrack
+export type MuxTrack = MuxVideoTrack | MuxAudioTrack | MuxTextTrack
 // Typings lifted from https://docs.mux.com/api-reference/video#tag/assets
 export interface MuxAsset {
   id: string

package/src/components/FileInputArea.tsx

@@ -1,93 +0,0 @@
-import {UploadIcon} from '@sanity/icons'
-import {Card, CardTone, Flex, Inline} from '@sanity/ui'
-import {PropsWithChildren, useRef, useState} from 'react'
-
-import {extractDroppedFiles} from '../util/extractFiles'
-import {FileInputButton} from './FileInputButton'
-
-interface FileInputAreaProps extends PropsWithChildren {
-  accept?: string
-  acceptMIMETypes?: string[]
-  label: React.ReactNode
-  onSelect: (files: FileList | File[]) => void
-}
-
-export default function FileInputArea({
-  label,
-  accept,
-  acceptMIMETypes,
-  onSelect,
-}: FileInputAreaProps) {
-  const dragEnteredEls = useRef<EventTarget[]>([])
-  const [dragState, setDragState] = useState<'valid' | 'invalid' | null>(null)
-
-  // Stages and validates an upload from dragging+dropping files or folders
-  const handleDrop: React.DragEventHandler<HTMLDivElement> = (event) => {
-    setDragState(null)
-    event.preventDefault()
-    event.stopPropagation()
-    extractDroppedFiles(event.nativeEvent.dataTransfer!).then(onSelect)
-  }
-
-  /* ------------------------------- Drag State ------------------------------- */
-
-  const handleDragOver: React.DragEventHandler<HTMLDivElement> = (event) => {
-    event.preventDefault()
-    event.stopPropagation()
-  }
-
-  const handleDragEnter: React.DragEventHandler<HTMLDivElement> = (event) => {
-    event.stopPropagation()
-    dragEnteredEls.current.push(event.target)
-    const type = event.dataTransfer.items?.[0]?.type
-    setDragState(
-      !acceptMIMETypes || acceptMIMETypes.some((mimeType) => type?.match(mimeType))
-        ? 'valid'
-        : 'invalid'
-    )
-  }
-
-  const handleDragLeave: React.DragEventHandler<HTMLDivElement> = (event) => {
-    event.stopPropagation()
-    const idx = dragEnteredEls.current.indexOf(event.target)
-    if (idx > -1) {
-      dragEnteredEls.current.splice(idx, 1)
-    }
-    if (dragEnteredEls.current.length === 0) {
-      setDragState(null)
-    }
-  }
-
-  let tone: CardTone = 'inherit'
-  if (dragState) tone = dragState === 'valid' ? 'positive' : 'critical'
-  return (
-    <Card border sizing="border" tone={tone} style={{borderStyle: 'dashed'}} padding={3}>
-      <Flex
-        align="center"
-        justify="space-between"
-        gap={4}
-        direction={['column', 'column', 'row']}
-        paddingY={[2, 2, 0]}
-        sizing="border"
-        onDrop={handleDrop}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDragEnter={handleDragEnter}
-      >
-        <Flex align="center" justify="center" gap={2} flex={1}>
-          {label}
-        </Flex>
-        <Inline space={2}>
-          <FileInputButton
-            mode="ghost"
-            tone="default"
-            icon={UploadIcon}
-            text="Upload"
-            onSelect={onSelect}
-            accept={accept}
-          />
-        </Inline>
-      </Flex>
-    </Card>
-  )
-}