sanity-plugin-mux-input 2.14.0 → 2.16.0

package/src/hooks/useMediaMetadata.ts

@@ -0,0 +1,100 @@
+import {useEffect, useState} from 'react'
+
+import {StagedUpload} from '../components/Uploader'
+
+export interface VideoAssetMetadata {
+  width?: number
+  height?: number
+  isAudioOnly?: boolean
+  duration?: number
+  size?: number
+}
+
+export function useMediaMetadata(stagedUpload: StagedUpload) {
+  const [videoAssetMetadata, setVideoAssetMetadata] = useState<VideoAssetMetadata | null>(null)
+  const [isLoadingMetadata, setIsLoadingMetadata] = useState(false)
+  useEffect(() => {
+    let videoSrc = null
+    // Validate file uploads
+    if (stagedUpload.type === 'file') {
+      const file = stagedUpload.files[0]
+      videoSrc = URL.createObjectURL(file)
+    }
+
+    // Validate URL uploads
+    if (stagedUpload.type === 'url') {
+      videoSrc = stagedUpload.url
+    }
+
+    setVideoAssetMetadata((old) => ({
+      ...old,
+      duration: undefined,
+      width: undefined,
+      height: undefined,
+    }))
+
+    if (!videoSrc) return () => null
+
+    setIsLoadingMetadata(true)
+    const videoElement = document.createElement('video')
+    videoElement.preload = 'metadata'
+
+    const metadataListeners = [
+      () => {
+        setIsLoadingMetadata(false)
+      },
+      () => {
+        const duration = videoElement.duration
+        const width = videoElement.videoWidth
+        const height = videoElement.videoHeight
+        const isAudioOnly = width <= 0 && height <= 0
+        setVideoAssetMetadata((old) => {
+          return {
+            ...old,
+            duration: duration,
+            width: width,
+            height: height,
+            isAudioOnly: isAudioOnly,
+          }
+        })
+      },
+    ]
+
+    const cleanupVideo = (videoEl: HTMLVideoElement) => {
+      const currentVideoSrc = videoEl?.src
+      if (videoEl) {
+        metadataListeners.forEach((listener) =>
+          videoEl.removeEventListener('loadedmetadata', listener)
+        )
+        videoEl.onerror = null
+        videoEl.src = ''
+        videoEl.load()
+      }
+      if (currentVideoSrc?.startsWith('blob:')) {
+        URL.revokeObjectURL(currentVideoSrc)
+      }
+    }
+    metadataListeners.push(() => setTimeout(() => cleanupVideo(videoElement), 0))
+
+    videoElement.onerror = () => {
+      setIsLoadingMetadata(false)
+      console.warn('Could not read video metadata for validation')
+      cleanupVideo(videoElement)
+    }
+
+    metadataListeners.forEach((listener) =>
+      videoElement.addEventListener('loadedmetadata', listener)
+    )
+    videoElement.src = videoSrc
+
+    return () => {
+      cleanupVideo(videoElement)
+    }
+  }, [stagedUpload.type, stagedUpload])
+
+  return {
+    videoAssetMetadata,
+    setVideoAssetMetadata,
+    isLoadingMetadata,
+  }
+}

package/src/hooks/useResyncAsset.ts

@@ -0,0 +1,110 @@
+import {useToast} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+
+import {getAsset} from '../actions/assets'
+import {addKeysToMuxData} from '../util/addKeysToMuxData'
+import type {MuxAsset, VideoAssetDocument} from '../util/types'
+import {useClient} from './useClient'
+
+type ResyncAssetState = 'idle' | 'syncing' | 'success' | 'error'
+
+interface UseResyncAssetOptions {
+  showToast?: boolean
+  onSuccess?: (updatedData: MuxAsset) => void
+  onError?: (error: unknown) => void
+}
+
+interface UseResyncAssetReturn {
+  resyncState: ResyncAssetState
+  resyncError: unknown
+  resyncAsset: (asset: VideoAssetDocument) => Promise<MuxAsset | undefined>
+  isResyncing: boolean
+}
+
+export function useResyncAsset(options?: UseResyncAssetOptions): UseResyncAssetReturn {
+  const client = useClient()
+  const toast = useToast()
+  const [resyncState, setResyncState] = useState<ResyncAssetState>('idle')
+  const [resyncError, setResyncError] = useState<unknown>(null)
+
+  const showToast = options?.showToast ?? false
+
+  const resyncAsset = useCallback(
+    async (asset: VideoAssetDocument) => {
+      if (!asset.assetId) {
+        if (showToast) {
+          toast.push({
+            title: 'Cannot resync',
+            description: 'Asset has no Mux ID',
+            status: 'error',
+          })
+        }
+        options?.onError?.(new Error('Asset has no Mux ID'))
+        return undefined
+      }
+
+      if (!asset._id) {
+        if (showToast) {
+          toast.push({
+            title: 'Cannot resync',
+            description: 'Asset has no document ID',
+            status: 'error',
+          })
+        }
+        options?.onError?.(new Error('Asset has no document ID'))
+        return undefined
+      }
+
+      setResyncState('syncing')
+      setResyncError(null)
+
+      try {
+        const response = await getAsset(client, asset.assetId)
+        const muxData = response.data
+        const dataWithKeys = addKeysToMuxData(muxData)
+
+        await client
+          .patch(asset._id)
+          .set({
+            status: muxData.status,
+            data: dataWithKeys,
+            ...(muxData.meta?.title && {filename: muxData.meta.title}),
+          })
+          .commit({returnDocuments: false})
+
+        setResyncState('success')
+        if (showToast) {
+          toast.push({
+            title: 'Asset synced',
+            description: 'Data has been updated from Mux',
+            status: 'success',
+          })
+        }
+
+        options?.onSuccess?.(muxData)
+        return muxData
+      } catch (error) {
+        setResyncState('error')
+        setResyncError(error)
+        console.error('Failed to refresh asset data:', error)
+        if (showToast) {
+          toast.push({
+            title: 'Sync failed',
+            description: 'Could not sync asset from Mux',
+            status: 'error',
+          })
+        }
+        options?.onError?.(error)
+        return undefined
+      }
+    },
+    [client, toast, options, showToast]
+  )
+
+  return {
+    resyncState,
+    resyncError,
+    resyncAsset,
+    isResyncing: resyncState === 'syncing',
+  }
+}

package/src/hooks/useResyncMuxMetadata.ts

@@ -6,6 +6,7 @@ import {
   useDocumentStore,
 } from 'sanity'
 
+import {addKeysToMuxData} from '../util/addKeysToMuxData'
 import {isEmptyOrPlaceholderTitle} from '../util/assetTitlePlaceholder'
 import type {MuxAsset, VideoAssetDocument} from '../util/types'
 import {SANITY_API_VERSION} from './useClient'
@@ -115,6 +116,37 @@ export default function useResyncMuxMetadata() {
     }
   }
 
+  async function syncFullData() {
+    if (!matchedAssets) return
+
+    setResyncState('syncing')
+
+    try {
+      const tx = client.transaction()
+
+      matchedAssets.forEach((matched) => {
+        if (!matched.muxAsset) return
+
+        const dataWithKeys = addKeysToMuxData(matched.muxAsset)
+
+        // Update all fields: filename, status, and full data from Mux
+        tx.patch(matched.sanityDoc._id, {
+          set: {
+            filename: matched.muxTitle || matched.currentTitle || '',
+            status: matched.muxAsset.status,
+            data: dataWithKeys,
+          },
+        })
+      })
+
+      await tx.commit({returnDocuments: false})
+      setResyncState('done')
+    } catch (error) {
+      setResyncState('error')
+      setResyncError(error)
+    }
+  }
+
   return {
     sanityAssetsLoading,
     closeDialog,
@@ -124,6 +156,7 @@ export default function useResyncMuxMetadata() {
     hasSecrets,
     syncAllVideos,
     syncOnlyEmpty,
+    syncFullData,
     matchedAssets,
     muxAssets,
     openDialog,

package/src/hooks/useSaveSecrets.ts

@@ -10,7 +10,11 @@ export const useSaveSecrets = (client: SanityClient, secrets: Secrets) => {
       token,
       secretKey,
       enableSignedUrls,
-    }: Pick<Secrets, 'token' | 'secretKey' | 'enableSignedUrls'>): Promise<Secrets> => {
+      drmConfigId,
+    }: Pick<
+      Secrets,
+      'token' | 'secretKey' | 'enableSignedUrls' | 'drmConfigId'
+    >): Promise<Secrets> => {
       let {signingKeyId, signingKeyPrivate} = secrets
 
       try {
@@ -20,7 +24,8 @@ export const useSaveSecrets = (client: SanityClient, secrets: Secrets) => {
           secretKey!,
           enableSignedUrls,
           signingKeyId!,
-          signingKeyPrivate!
+          signingKeyPrivate!,
+          drmConfigId!
         )
         const valid = await testSecrets(client)
         if (!valid?.status && token && secretKey) {
@@ -49,7 +54,8 @@ export const useSaveSecrets = (client: SanityClient, secrets: Secrets) => {
               secretKey!,
               enableSignedUrls,
               signingKeyId,
-              signingKeyPrivate
+              signingKeyPrivate,
+              drmConfigId ?? ''
             )
           } catch (err: any) {
             // eslint-disable-next-line no-console
@@ -64,6 +70,7 @@ export const useSaveSecrets = (client: SanityClient, secrets: Secrets) => {
         enableSignedUrls,
         signingKeyId,
         signingKeyPrivate,
+        drmConfigId,
       }
     },
     [client, secrets]

package/src/hooks/useSecretsDocumentValues.ts

@@ -4,7 +4,14 @@ import {useDocumentValues} from 'sanity'
 import {muxSecretsDocumentId} from '../util/constants'
 import type {Secrets} from '../util/types'
 
-const path = ['token', 'secretKey', 'enableSignedUrls', 'signingKeyId', 'signingKeyPrivate']
+const path = [
+  'token',
+  'secretKey',
+  'enableSignedUrls',
+  'signingKeyId',
+  'signingKeyPrivate',
+  'drmConfigId',
+]
 export const useSecretsDocumentValues = () => {
   const {error, isLoading, value} = useDocumentValues<Partial<Secrets> | null | undefined>(
     muxSecretsDocumentId,
@@ -18,6 +25,7 @@ export const useSecretsDocumentValues = () => {
       enableSignedUrls: value?.enableSignedUrls || false,
       signingKeyId: value?.signingKeyId || null,
       signingKeyPrivate: value?.signingKeyPrivate || null,
+      drmConfigId: value?.drmConfigId || null,
     }
     return {
       isInitialSetup: !exists,

package/src/hooks/useSecretsFormState.ts

@@ -2,7 +2,8 @@ import {useReducer} from 'react'
 
 import type {Secrets} from '../util/types'
 
-export interface State extends Pick<Secrets, 'token' | 'secretKey' | 'enableSignedUrls'> {
+export interface State
+  extends Pick<Secrets, 'token' | 'secretKey' | 'enableSignedUrls' | 'drmConfigId'> {
   submitting: boolean
   error: string | null
 }
@@ -13,7 +14,8 @@ export type Action =
   | {type: 'change'; payload: {name: 'token'; value: string}}
   | {type: 'change'; payload: {name: 'secretKey'; value: string}}
   | {type: 'change'; payload: {name: 'enableSignedUrls'; value: boolean}}
-function init({token, secretKey, enableSignedUrls}: Secrets): State {
+  | {type: 'change'; payload: {name: 'drmConfigId'; value: string}}
+function init({token, secretKey, enableSignedUrls, drmConfigId}: Secrets): State {
   return {
     submitting: false,
     error: null,
@@ -22,6 +24,7 @@ function init({token, secretKey, enableSignedUrls}: Secrets): State {
     token: token ?? '',
     secretKey: secretKey ?? '',
     enableSignedUrls: enableSignedUrls ?? false,
+    drmConfigId: drmConfigId ?? '',
   }
 }
 function reducer(state: State, action: Action) {
@@ -35,7 +38,7 @@ function reducer(state: State, action: Action) {
     case 'change':
       return {...state, [action.payload.name]: action.payload.value}
     default:
-      throw new Error(`Unknown action type: ${(action as any)?.type}`)
+      throw new Error(`Unknown action type: ${(action as unknown as Action)?.type}`)
   }
 }
 

package/src/schema.ts

@@ -23,6 +23,11 @@ const muxTrack = {
     {type: 'number', name: 'max_frame_rate'},
     {type: 'number', name: 'duration'},
     {type: 'number', name: 'max_height'},
+    {type: 'string', name: 'language_code'},
+    {type: 'string', name: 'name'},
+    {type: 'string', name: 'status'},
+    {type: 'string', name: 'text_source'},
+    {type: 'string', name: 'text_type'},
   ],
 }
 

package/src/util/addKeysToMuxData.ts

@@ -0,0 +1,30 @@
+import {uuid} from '@sanity/uuid'
+
+import type {MuxAsset} from './types'
+
+/**
+ * Adds _key to array items in MuxAsset data for Sanity compatibility.
+ * Sanity requires _key on array items for proper editing support.
+ */
+export function addKeysToMuxData(data: MuxAsset): MuxAsset {
+  return {
+    ...data,
+    tracks: data.tracks?.map((track) => ({
+      ...track,
+      _key: uuid(),
+    })),
+    playback_ids: data.playback_ids?.map((playbackId) => ({
+      ...playbackId,
+      _key: uuid(),
+    })),
+    static_renditions: data.static_renditions
+      ? {
+          ...data.static_renditions,
+          files: data.static_renditions.files?.map((file) => ({
+            ...file,
+            _key: uuid(),
+          })),
+        }
+      : undefined,
+  }
+}

package/src/util/asserters.ts

@@ -1,3 +1,4 @@
+import {ServerError} from '@sanity/client'
 import {type InputProps, isObjectInputProps, type PreviewLayoutKey, type PreviewProps} from 'sanity'
 
 import type {MuxInputPreviewProps, MuxInputProps} from './types'
@@ -20,3 +21,16 @@ export function isValidUrl(url: string): boolean {
     return false
   }
 }
+
+/**
+ * We consider a server error one with status code 5XX.
+ * Used mainly to handle unknown Proxy issues.
+ */
+export function isServerError(error: Error): error is ServerError {
+  return (
+    'statusCode' in error &&
+    typeof error.statusCode === 'number' &&
+    500 <= error.statusCode &&
+    error.statusCode <= 600
+  )
+}

package/src/util/createUrlParamsObject.ts

@@ -1,10 +1,13 @@
 import type {SanityClient} from 'sanity'
 
+import {getPlaybackId} from '../util/getPlaybackPolicy'
 import {Audience, generateJwt} from './generateJwt'
-import {getPlaybackId} from './getPlaybackId'
-import {getPlaybackPolicy} from './getPlaybackPolicy'
+import {getPlaybackPolicyById} from './getPlaybackPolicy'
 import type {AssetThumbnailOptions} from './types'
 
+/**
+ * May throw a Promise. Call this with {@link tryWithSuspend} or rethrow the Promise
+ */
 export function createUrlParamsObject(
   client: SanityClient,
   asset: AssetThumbnailOptions['asset'],
@@ -16,7 +19,8 @@ export function createUrlParamsObject(
   let searchParams = new URLSearchParams(
     JSON.parse(JSON.stringify(params, (_, v) => v ?? undefined))
   )
-  if (getPlaybackPolicy(asset) === 'signed') {
+  const playbackPolicy = getPlaybackPolicyById(asset, playbackId)?.policy
+  if (playbackPolicy === 'signed' || playbackPolicy === 'drm') {
     const token = generateJwt(client, playbackId, audience, params)
     searchParams = new URLSearchParams({token})
   }

package/src/util/generateJwt.ts

@@ -4,7 +4,7 @@ import {suspend} from 'suspend-react'
 import {readSecrets} from './readSecrets'
 import type {AnimatedThumbnailOptions, ThumbnailOptions} from './types'
 
-export type Audience = 'g' | 's' | 't' | 'v'
+export type Audience = 'g' | 's' | 't' | 'v' | 'd'
 
 export type Payload<T extends Audience> = T extends 'g'
   ? AnimatedThumbnailOptions
@@ -14,8 +14,13 @@ export type Payload<T extends Audience> = T extends 'g'
       ? ThumbnailOptions
       : T extends 'v'
         ? never
-        : never
+        : T extends 'd'
+          ? never
+          : never
 
+/**
+ * Uses suspend. Call this with {@link tryWithSuspend} or rethrow the Promise
+ */
 export function generateJwt<T extends Audience>(
   client: SanityClient,
   playbackId: string,
@@ -30,6 +35,10 @@ export function generateJwt<T extends Audience>(
     throw new TypeError("Missing `signingKeyPrivate`.\n Check your plugin's configuration")
   }
 
+  /* Using suspend means we need to use Suspense on parent components. 
+  Also, this will throw a Promise under the hood (apparently common in React), 
+  so if we want to catch errors we have to take this into account in catch blocks
+  and rethrow promises. */
   // @ts-expect-error - handle missing typings for this package
   const {default: sign} = suspend(() => import('jsonwebtoken-esm/sign'), ['jsonwebtoken-esm/sign'])
 

package/src/util/getPlaybackPolicy.ts

@@ -1,10 +1,69 @@
-import type {PlaybackPolicy, VideoAssetDocument} from './types'
+import type {
+  AdvancedPlaybackPolicy,
+  MuxPlaybackId,
+  PlaybackPolicy,
+  VideoAssetDocument,
+} from './types'
+
+/* - Returns the playback id of the asset based on the specified priority.
+  By default chooses the "strongest" policy
+   - Otherwise, returns the first playback id in the array.
+   */
+export function getPlaybackId(
+  asset: Pick<VideoAssetDocument, 'data'>,
+  priority: string[] = ['drm', 'signed', 'public']
+): string {
+  try {
+    if (!asset) {
+      throw new TypeError('Tried to get playback Id with no asset')
+    }
+
+    const playbackIds = asset.data?.playback_ids
+    if (playbackIds && playbackIds.length > 0) {
+      for (const policy of priority) {
+        const match = playbackIds.find((entry) => entry.policy === policy)
+        if (match) {
+          return match.id
+        }
+      }
+
+      return playbackIds[0].id
+    }
+
+    throw new TypeError('Missing playbackId')
+  } catch (e) {
+    console.error('Asset is missing a playbackId', {asset}, e)
+    throw e
+  }
+}
 
 export function getPlaybackPolicy(
   asset: Pick<VideoAssetDocument, 'data' | 'playbackId'>
-): PlaybackPolicy {
+): MuxPlaybackId | undefined {
+  return (
+    asset.data?.playback_ids?.find(
+      (playbackId) => getPlaybackId(asset, ['drm', 'signed', 'public']) === playbackId.id
+    ) ?? {id: '', policy: 'public'}
+  )
+}
+
+export function getPlaybackPolicyById(
+  asset: Pick<VideoAssetDocument, 'data'>,
+  playbackId: string
+): MuxPlaybackId | undefined {
+  return asset.data?.playback_ids?.find((entry) => playbackId === entry.id)
+}
+
+export function hasPlaybackPolicy(
+  data: Partial<{
+    playback_policy?: PlaybackPolicy[]
+    advanced_playback_policies: AdvancedPlaybackPolicy[]
+  }>,
+  policy: PlaybackPolicy
+) {
   return (
-    asset.data?.playback_ids?.find((playbackId) => asset.playbackId === playbackId.id)?.policy ??
-    'public'
+    (data.advanced_playback_policies &&
+      data.advanced_playback_policies.find((p) => p.policy === policy)) ||
+    data.playback_policy?.find((p) => p === policy)
   )
 }

package/src/util/getStoryboardSrc.ts

@@ -1,8 +1,8 @@
 import type {SanityClient} from 'sanity'
 
+import {getPlaybackId} from '../util/getPlaybackPolicy'
 import {generateJwt} from './generateJwt'
-import {getPlaybackId} from './getPlaybackId'
-import {getPlaybackPolicy} from './getPlaybackPolicy'
+import {getPlaybackPolicyById} from './getPlaybackPolicy'
 import type {MuxStoryboardUrl, VideoAssetDocument} from './types'
 
 interface StoryboardSrcOptions {
@@ -10,11 +10,15 @@ interface StoryboardSrcOptions {
   client: SanityClient
 }
 
+/**
+ * May throw a Promise. Call this with {@link tryWithSuspend} or rethrow the Promise
+ */
 export function getStoryboardSrc({asset, client}: StoryboardSrcOptions): MuxStoryboardUrl {
   const playbackId = getPlaybackId(asset)
   const searchParams = new URLSearchParams()
 
-  if (getPlaybackPolicy(asset) === 'signed') {
+  const playbackPolicy = getPlaybackPolicyById(asset, playbackId)?.policy
+  if (playbackPolicy === 'signed' || playbackPolicy === 'drm') {
     const token = generateJwt(client, playbackId, 's')
     searchParams.set('token', token)
   }

package/src/util/getVideoMetadata.ts

@@ -13,6 +13,7 @@ export default function getVideoMetadata(doc: VideoAssetDocument) {
     playbackId: doc.playbackId,
     createdAt: date,
     duration: doc.data?.duration ? formatSeconds(doc.data?.duration) : undefined,
+    playback_ids: doc.data?.playback_ids,
     aspect_ratio: doc.data?.aspect_ratio,
     max_stored_resolution: doc.data?.max_stored_resolution,
     max_stored_frame_rate: doc.data?.max_stored_frame_rate,

package/src/util/getVideoSrc.ts

@@ -1,23 +1,23 @@
 import type {SanityClient} from 'sanity'
 
 import {generateJwt} from './generateJwt'
-import {getPlaybackId} from './getPlaybackId'
-import {getPlaybackPolicy} from './getPlaybackPolicy'
-import type {MuxVideoUrl, VideoAssetDocument} from './types'
+import type {MuxPlaybackId, MuxVideoUrl} from './types'
 
 interface VideoSrcOptions {
-  asset: VideoAssetDocument
+  muxPlaybackId: MuxPlaybackId
   client: SanityClient
 }
 
-export function getVideoSrc({asset, client}: VideoSrcOptions): MuxVideoUrl {
-  const playbackId = getPlaybackId(asset)
+/**
+ * May throw a Promise. Call this with {@link tryWithSuspend} or rethrow the Promise
+ */
+export function getVideoSrc({client, muxPlaybackId}: VideoSrcOptions): MuxVideoUrl {
   const searchParams = new URLSearchParams()
 
-  if (getPlaybackPolicy(asset) === 'signed') {
-    const token = generateJwt(client, playbackId, 'v')
+  if (muxPlaybackId.policy === 'signed' || muxPlaybackId.policy === 'drm') {
+    const token = generateJwt(client, muxPlaybackId.id, 'v')
     searchParams.set('token', token)
   }
 
-  return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`
+  return `https://stream.mux.com/${muxPlaybackId.id}.m3u8?${searchParams}`
 }

package/src/util/readSecrets.ts

@@ -21,7 +21,8 @@ export function readSecrets(client: SanityClient): Secrets {
         secretKey,
         enableSignedUrls,
         signingKeyId,
-        signingKeyPrivate
+        signingKeyPrivate,
+        drmConfigId
       }`,
       {_id}
     )
@@ -31,6 +32,7 @@ export function readSecrets(client: SanityClient): Secrets {
       enableSignedUrls: Boolean(data?.enableSignedUrls) || false,
       signingKeyId: data?.signingKeyId || null,
       signingKeyPrivate: data?.signingKeyPrivate || null,
+      drmConfigId: data?.drmConfigId || null,
     }
   }, [cacheNs, _id, projectId, dataset])
 }