sanity-plugin-mux-input 2.13.0 → 2.15.0

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

@@ -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 || ''
@@ -13,8 +13,11 @@ 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,
+    text_tracks:
+      doc.data?.tracks?.filter((track): track is MuxTextTrack => track.type === 'text') || [],
   }
 }

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

@@ -0,0 +1,222 @@
+import type {SanityClient} from '@sanity/client'
+
+import {getAsset} from '../actions/assets'
+import {generateJwt} from './generateJwt'
+import {getPlaybackId} from './getPlaybackPolicy'
+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',
+  }
+}
+
+/**
+ * May throw a Promise. Call this with {@link tryWithSuspend} or rethrow the Promise
+ */
+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)?.policy
+
+  let downloadUrl = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`
+
+  if (playbackPolicy === 'signed' || playbackPolicy === 'drm') {
+    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/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

@@ -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
@@ -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
 }
 
 /**
@@ -303,24 +318,33 @@ 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
   }[]
 
   /** 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
@@ -367,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
@@ -401,7 +425,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 +439,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/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
-}