sanity-plugin-mux-input 2.14.0 → 2.15.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/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/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])
 }

package/src/util/textTracks.ts

@@ -2,7 +2,7 @@ import type {SanityClient} from '@sanity/client'
 
 import {getAsset} from '../actions/assets'
 import {generateJwt} from './generateJwt'
-import {getPlaybackId} from './getPlaybackId'
+import {getPlaybackId} from './getPlaybackPolicy'
 import {getPlaybackPolicy} from './getPlaybackPolicy'
 import type {MuxTextTrack, VideoAssetDocument} from './types'
 
@@ -169,6 +169,9 @@ export async function pollTrackStatus(
   }
 }
 
+/**
+ * May throw a Promise. Call this with {@link tryWithSuspend} or rethrow the Promise
+ */
 export async function downloadVttFile(
   client: SanityClient,
   asset: VideoAssetDocument,
@@ -191,11 +194,11 @@ export async function downloadVttFile(
     throw new Error('Playback ID is required')
   }
 
-  const playbackPolicy = getPlaybackPolicy(asset)
+  const playbackPolicy = getPlaybackPolicy(asset)?.policy
 
   let downloadUrl = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`
 
-  if (playbackPolicy === 'signed') {
+  if (playbackPolicy === 'signed' || playbackPolicy === 'drm') {
     const token = generateJwt(client, playbackId, 'v')
     downloadUrl += `?token=${token}`
   }

package/src/util/tryWithSuspend.ts

@@ -0,0 +1,22 @@
+/**
+ * When running `suspend()` from react-suspend a function may throw a Promise
+ * causing unexpected behavior when catching.
+ * @param block Your block of code that uses suspend
+ * @param onError (optional) How to handle a regular Error
+ * @returns Whatever is returned by the block if it succeeds, otherwise whatever is resolved by onError if defined
+ * @throws rethrows the caught Promise to comply with Suspense logic
+ */
+export function tryWithSuspend<T, E>(
+  block: () => T,
+  onError?: (error: Error) => E
+): T | E | undefined {
+  try {
+    return block()
+  } catch (errorOrPromise) {
+    if (errorOrPromise instanceof Promise) {
+      // react-suspend will throw a Promise
+      throw errorOrPromise
+    }
+    return onError ? onError(errorOrPromise as Error) : undefined
+  }
+}

package/src/util/types.ts

@@ -89,6 +89,13 @@ export interface MuxInputConfig {
    */
   defaultPublic?: boolean
 
+  /**
+   * Enables DRM Protection by default, if you configured your DRM Configuration Id.
+   * @see {@link https://www.mux.com/docs/guides/protect-videos-with-drm}
+   * @defaultValue true
+   */
+  defaultDrm?: boolean
+
   /**
    * Auto-generate captions for these languages by default.
    * Requires `"video_quality": "plus"`
@@ -124,6 +131,13 @@ export interface MuxInputConfig {
    */
   disableTextTrackConfig?: boolean
 
+  /**
+   * Whether or not to show the playback warning when trying to watch DRM content for the first time.
+   *
+   * @defaultValue false
+   */
+  disableDrmPlaybackWarning?: boolean
+
   /**
    * The mime types that are accepted by the input.
    *
@@ -266,6 +280,7 @@ export interface UploadConfig
   text_tracks: UploadTextTrack[]
   signed_policy: boolean
   public_policy: boolean
+  drm_policy: boolean
 }
 
 /**
@@ -308,18 +323,28 @@ export interface MuxNewAssetSettings
   }[]
 
   /** An array of playback policy names that you want applied to this asset and available through playback_ids. */
-  playback_policy: ('public' | 'signed' | 'drm')[]
+  playback_policy?: PlaybackPolicy[]
+
+  /** An array of playback policy objects that you want applied to this asset and available through playback_ids. advanced_playback_policies must be used instead of playback_policies when creating a DRM playback ID. */
+  advanced_playback_policies: AdvancedPlaybackPolicy[]
 
   /** Arbitrary user-supplied metadata that will be included in the asset details and related webhooks.  */
   passthrough?: string
 }
 
+/** Used by advanced_playback_policies, allows to define DRM config. */
+export type AdvancedPlaybackPolicy = {
+  policy: PlaybackPolicy
+  drm_configuration_id?: string
+}
+
 export interface Secrets {
   token: string | null
   secretKey: string | null
   enableSignedUrls: boolean
   signingKeyId: string | null
   signingKeyPrivate: string | null
+  drmConfigId: string | null
 }
 
 // This narrowed type indicates that there may be assets that are signed, and we have the secrets to access them
@@ -366,7 +391,7 @@ export interface AssetThumbnailOptions {
   asset: Pick<VideoAssetDocument, 'playbackId' | 'data' | 'thumbTime' | 'filename' | 'assetId'>
 }
 
-export type PlaybackPolicy = 'signed' | 'public'
+export type PlaybackPolicy = 'signed' | 'public' | 'drm'
 
 export interface MuxErrors {
   type: string

package/src/util/getPlaybackId.ts

@@ -1,9 +0,0 @@
-import type {VideoAssetDocument} from './types'
-
-export function getPlaybackId(asset: Pick<VideoAssetDocument, 'playbackId'>): string {
-  if (!asset?.playbackId) {
-    console.error('Asset is missing a playbackId', {asset})
-    throw new TypeError(`Missing playbackId`)
-  }
-  return asset.playbackId
-}