sanity-plugin-mux-input 2.13.0 → 2.14.0

package/src/components/Uploader.styled.tsx

@@ -5,9 +5,6 @@ import {styled} from 'styled-components'
 
 import {withFocusRing} from './withFocusRing'
 
-const ctrlKey = 17
-const cmdKey = 91
-
 const UploadCardWithFocusRing = withFocusRing(Card)
 
 interface UploadCardProps {
@@ -21,22 +18,19 @@ interface UploadCardProps {
 }
 export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps>(
   ({children, tone, onPaste, onDrop, onDragEnter, onDragLeave, onDragOver}, forwardedRef) => {
-    const ctrlDown = useRef(false)
     const inputRef = useRef<HTMLInputElement>(null)
     const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>((event) => {
-      if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
-        ctrlDown.current = true
+      const target = event.target as HTMLElement
+
+      // Don't steal focus when pasting into the VTT input
+      if (target.closest('#vtt-url')) {
+        return
       }
-      const vKey = 86
-      if (ctrlDown.current && event.keyCode == vKey) {
+
+      if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         inputRef.current!.focus()
       }
     }, [])
-    const handleKeyUp = useCallback<React.KeyboardEventHandler<HTMLDivElement>>((event) => {
-      if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
-        ctrlDown.current = false
-      }
-    }, [])
 
     return (
       <UploadCardWithFocusRing
@@ -47,14 +41,13 @@ export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps>(
         shadow={0}
         tabIndex={0}
         onKeyDown={handleKeyDown}
-        onKeyUp={handleKeyUp}
         onPaste={onPaste}
         onDrop={onDrop}
         onDragEnter={onDragEnter}
         onDragLeave={onDragLeave}
         onDragOver={onDragOver}
       >
-        <HiddenInput ref={inputRef} onPaste={onPaste} />
+        <HiddenInput ref={inputRef} />
         {children}
       </UploadCardWithFocusRing>
     )

package/src/components/Uploader.tsx

@@ -297,6 +297,13 @@ export default function Uploader(props: Props) {
 
   // Stages and validates an upload from pasting an asset URL
   const handlePaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    const target = event.target as HTMLElement
+
+    // Ignore paste coming from the VTT URL input
+    if (target.closest('#vtt-url')) {
+      return
+    }
+
     event.preventDefault()
     event.stopPropagation()
     const clipboardData =

package/src/components/VideoDetails/VideoDetails.tsx

@@ -27,10 +27,12 @@ import {
 import React, {useEffect, useState} from 'react'
 
 import {DIALOGS_Z_INDEX} from '../../util/constants'
+import type {MuxTextTrack} from '../../util/types'
 import FormField from '../FormField'
 import IconInfo from '../IconInfo'
 import {ResolutionIcon} from '../icons/Resolution'
 import {StopWatchIcon} from '../icons/StopWatch'
+import TextTracksManager from '../TextTracksManager'
 import VideoPlayer from '../VideoPlayer'
 import DeleteDialog from './DeleteDialog'
 import useVideoDetails, {VideoDetailsProps} from './useVideoDetails'
@@ -203,6 +205,20 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
         >
           <Stack space={4} flex={1} sizing="border">
             <VideoPlayer asset={props.asset} autoPlay={props.asset.autoPlay || false} />
+            {tab === 'details' && (
+              <TextTracksManager
+                asset={props.asset}
+                iconOnly
+                collapseTracks
+                tracks={
+                  displayInfo?.text_tracks ||
+                  props.asset.data?.tracks?.filter(
+                    (track): track is MuxTextTrack => track.type === 'text'
+                  ) ||
+                  []
+                }
+              />
+            )}
           </Stack>
           <Stack space={4} flex={1} sizing="border">
             <TabList space={2}>

package/src/components/VideoPlayer.tsx

@@ -10,6 +10,7 @@ import {AUDIO_ASPECT_RATIO, MIN_ASPECT_RATIO} from '../util/constants'
 import {getPosterSrc} from '../util/getPosterSrc'
 import {getVideoSrc} from '../util/getVideoSrc'
 import type {VideoAssetDocument} from '../util/types'
+import CaptionsDialog from './CaptionsDialog'
 import EditThumbnailDialog from './EditThumbnailDialog'
 import {AudioIcon} from './icons/Audio'
 
@@ -149,6 +150,7 @@ export default function VideoPlayer({
       {dialogState === 'edit-thumbnail' && (
         <EditThumbnailDialog asset={asset} currentTime={muxPlayer?.current?.currentTime} />
       )}
+      {dialogState === 'edit-captions' && <CaptionsDialog asset={asset} />}
     </>
   )
 }

package/src/components/VideosBrowser.tsx

@@ -6,6 +6,7 @@ import useAssets from '../hooks/useAssets'
 import type {VideoAssetDocument} from '../util/types'
 import ConfigureApi from './ConfigureApi'
 import ImportVideosFromMux from './ImportVideosFromMux'
+import PageSelector from './PageSelector'
 import ResyncMetadata from './ResyncMetadata'
 import {SelectSortOptions} from './SelectSortOptions'
 import SpinnerBox from './SpinnerBox'
@@ -19,12 +20,18 @@ export interface VideosBrowserProps {
 
 export default function VideosBrowser({onSelect}: VideosBrowserProps) {
   const {assets, isLoading, searchQuery, setSearchQuery, setSort, sort} = useAssets()
+  const [page, setPage] = useState<number>(0)
+  const pageLimit = 20
+  const pageTotal = Math.floor(assets.length / pageLimit) + 1
   const [editedAsset, setEditedAsset] = useState<VideoDetailsProps['asset'] | null>(null)
   const freshEditedAsset = useMemo(
     () => assets.find((a) => a._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
   )
 
+  const pageStart = page * pageLimit
+  const pageEnd = pageStart + pageLimit
+
   const placement = onSelect ? 'input' : 'tool'
   return (
     <>
@@ -40,6 +47,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
               placeholder="Search videos"
             />
             <SelectSortOptions setSort={setSort} sort={sort} />
+            <PageSelector page={page} setPage={setPage} total={pageTotal} limit={pageLimit} />
           </Flex>
           {placement === 'tool' && (
             <Inline space={2}>
@@ -62,7 +70,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
               gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
             }}
           >
-            {assets.map((asset) => (
+            {assets.slice(pageStart, pageEnd).map((asset) => (
               <VideoInBrowser
                 key={asset._id}
                 asset={asset}

package/src/hooks/useAccessControl.ts

@@ -1,4 +1,5 @@
 import {useCurrentUser} from 'sanity'
+
 import {PluginConfig} from '../util/types'
 
 export const useAccessControl = (config: PluginConfig) => {

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,6 +1,6 @@
+import type MuxPlayerElement from '@mux/mux-player'
 import type {ObjectInputProps, PreviewLayoutKey, PreviewProps, SchemaType} from 'sanity'
 import type {PartialDeep} from 'type-fest'
-import type MuxPlayerElement from '@mux/mux-player'
 
 /**
  * Standard static rendition options available for plugin configuration defaults
@@ -303,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
   }[]
@@ -401,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
@@ -410,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