sanity-plugin-mux-input 2.13.0 → 2.15.0

package/src/components/uploadConfiguration/StaticRenditionSelector.tsx

@@ -0,0 +1,179 @@
+import {Checkbox, Flex, Label, Radio, Stack, Text} from '@sanity/ui'
+import {ActionDispatch, useMemo, useState} from 'react'
+import {FormField} from 'sanity'
+
+import {type StaticRenditionResolution, type UploadConfig} from '../../util/types'
+import {UploadConfigurationStateAction} from '../UploadConfiguration'
+
+const ADVANCED_RESOLUTIONS: {value: StaticRenditionResolution; label: string}[] = [
+  {value: '270p', label: '270p'},
+  {value: '360p', label: '360p'},
+  {value: '480p', label: '480p'},
+  {value: '540p', label: '540p'},
+  {value: '720p', label: '720p'},
+  {value: '1080p', label: '1080p'},
+  {value: '1440p', label: '1440p'},
+  {value: '2160p', label: '2160p'},
+]
+
+export const StaticRenditionSelector = ({
+  id,
+  config,
+  dispatch,
+}: {
+  id: string
+  config: UploadConfig
+  dispatch: ActionDispatch<[action: UploadConfigurationStateAction]>
+}) => {
+  // Determine if user is in advanced mode based on selected renditions
+  const isAdvancedMode = useMemo(() => {
+    const specificResolutions = config.static_renditions.filter(
+      (r) => r !== 'highest' && r !== 'audio-only'
+    )
+    return specificResolutions.length > 0
+  }, [config.static_renditions])
+
+  const [renditionMode, setRenditionMode] = useState<'standard' | 'advanced'>(
+    isAdvancedMode ? 'advanced' : 'standard'
+  )
+
+  // Helper to toggle a rendition
+  const toggleRendition = (rendition: StaticRenditionResolution) => {
+    const current = config.static_renditions
+    const hasRendition = current.includes(rendition)
+
+    if (hasRendition) {
+      dispatch({
+        action: 'static_renditions',
+        value: current.filter((r) => r !== rendition),
+      })
+    } else {
+      dispatch({
+        action: 'static_renditions',
+        value: [...current, rendition],
+      })
+    }
+  }
+
+  // When switching modes, clear renditions that don't apply
+  const handleModeChange = (mode: 'standard' | 'advanced') => {
+    setRenditionMode(mode)
+    if (mode === 'standard') {
+      // Remove specific resolutions, keep only highest and audio-only
+      dispatch({
+        action: 'static_renditions',
+        value: config.static_renditions.filter((r) => r === 'highest' || r === 'audio-only'),
+      })
+    } else {
+      // Remove highest, keep specific resolutions and audio-only
+      dispatch({
+        action: 'static_renditions',
+        value: config.static_renditions.filter((r) => r !== 'highest'),
+      })
+    }
+  }
+  return (
+    <Stack space={3}>
+      <FormField
+        title="Static Renditions"
+        description="Generate downloadable MP4 or M4A files. Note: Mux will not upscale to produce MP4 renditions - renditions that would cause upscaling are skipped."
+      >
+        <Stack space={3}>
+          {/* Mode Selector */}
+          <Flex gap={3}>
+            <Flex align="center" gap={2}>
+              <Radio
+                checked={renditionMode === 'standard'}
+                name="rendition-mode"
+                onChange={() => handleModeChange('standard')}
+                value="standard"
+                id={`${id}--mode-standard`}
+              />
+              <Text as="label" htmlFor={`${id}--mode-standard`}>
+                Standard
+              </Text>
+            </Flex>
+            <Flex align="center" gap={2}>
+              <Radio
+                checked={renditionMode === 'advanced'}
+                name="rendition-mode"
+                onChange={() => handleModeChange('advanced')}
+                value="advanced"
+                id={`${id}--mode-advanced`}
+              />
+              <Text as="label" htmlFor={`${id}--mode-advanced`}>
+                Advanced
+              </Text>
+            </Flex>
+          </Flex>
+
+          {/* Standard Mode Options */}
+          {renditionMode === 'standard' && (
+            <Stack space={2}>
+              <Flex align="center" gap={2} padding={[0, 2]}>
+                <Checkbox
+                  id={`${id}--highest`}
+                  style={{display: 'block'}}
+                  checked={config.static_renditions.includes('highest')}
+                  onChange={() => toggleRendition('highest')}
+                />
+                <Text as="label" htmlFor={`${id}--highest`}>
+                  Highest Resolution (up to 4K)
+                </Text>
+              </Flex>
+              <Flex align="center" gap={2} padding={[0, 2]}>
+                <Checkbox
+                  id={`${id}--audio-only-standard`}
+                  style={{display: 'block'}}
+                  checked={config.static_renditions.includes('audio-only')}
+                  onChange={() => toggleRendition('audio-only')}
+                />
+                <Text as="label" htmlFor={`${id}--audio-only-standard`}>
+                  Audio Only (M4A)
+                </Text>
+              </Flex>
+            </Stack>
+          )}
+
+          {/* Advanced Mode Options */}
+          {renditionMode === 'advanced' && (
+            <Stack space={2}>
+              <Label size={1} muted>
+                Select specific resolutions:
+              </Label>
+              <Flex gap={2} wrap="wrap">
+                {ADVANCED_RESOLUTIONS.map(({value, label}) => {
+                  const inputId = `${id}--resolution-${value}`
+                  return (
+                    <Flex key={value} align="center" gap={2}>
+                      <Checkbox
+                        id={inputId}
+                        style={{display: 'block'}}
+                        checked={config.static_renditions.includes(value)}
+                        onChange={() => toggleRendition(value)}
+                      />
+                      <Text as="label" htmlFor={inputId} size={1}>
+                        {label}
+                      </Text>
+                    </Flex>
+                  )
+                })}
+              </Flex>
+              <Flex align="center" gap={2} padding={[2, 2, 0, 2]}>
+                <Checkbox
+                  id={`${id}--audio-only-advanced`}
+                  style={{display: 'block'}}
+                  checked={config.static_renditions.includes('audio-only')}
+                  onChange={() => toggleRendition('audio-only')}
+                />
+                <Text as="label" htmlFor={`${id}--audio-only-advanced`}>
+                  Audio Only (M4A)
+                </Text>
+              </Flex>
+            </Stack>
+          )}
+        </Stack>
+      </FormField>
+    </Stack>
+  )
+}

package/src/context/DrmPlaybackWarningContext.tsx

@@ -0,0 +1,93 @@
+import {Button, Card, Dialog, Stack, Text} from '@sanity/ui'
+import React, {createContext, useContext, useState} from 'react'
+
+import {PluginConfig} from '../util/types'
+
+const LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY = 'mux-plugin-has-shown-drm-playback-warning'
+
+type DrmPlaybackWarningContextContextProps = {
+  hasShownWarning: boolean
+  setHasWarnedAboutDrmPlayback: (b: boolean) => void
+}
+
+const DrmPlaybackWarningContext = createContext<DrmPlaybackWarningContextContextProps>({
+  hasShownWarning: false,
+  setHasWarnedAboutDrmPlayback: () => {
+    return null
+  },
+})
+
+interface DrmPlaybackWarningContextProviderProps {
+  config?: PluginConfig
+  children: React.ReactNode
+}
+
+export const DrmPlaybackWarningContextProvider = ({
+  config,
+  children,
+}: DrmPlaybackWarningContextProviderProps) => {
+  const warningDisabled = config?.disableDrmPlaybackWarning ?? false
+  const hasWarned: boolean =
+    warningDisabled || window.localStorage.getItem(LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY) === 'true'
+  const [hasWarnedAboutDrmPlayback, setHasWarnedAboutDrmPlayback] = useState(hasWarned)
+
+  const setHasShownWarning = (b: boolean) => {
+    window.localStorage.setItem(LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY, b.toString())
+    setHasWarnedAboutDrmPlayback(b)
+  }
+  return (
+    <DrmPlaybackWarningContext.Provider
+      value={{
+        hasShownWarning: hasWarnedAboutDrmPlayback,
+        setHasWarnedAboutDrmPlayback: setHasShownWarning,
+      }}
+    >
+      {children}
+    </DrmPlaybackWarningContext.Provider>
+  )
+}
+
+export const useDrmPlaybackWarningContext = () => {
+  const context = useContext(DrmPlaybackWarningContext)
+  return context
+}
+
+export const DRMWarningDialog = ({onClose}: {onClose: () => void}) => {
+  const {setHasWarnedAboutDrmPlayback} = useDrmPlaybackWarningContext()
+  const _onClose = () => {
+    setHasWarnedAboutDrmPlayback(true)
+    onClose()
+  }
+  return (
+    <Dialog
+      open
+      id="drm-playback-warn"
+      onClose={_onClose}
+      header="DRM Playback Warning"
+      footer={
+        <Stack padding={3}>
+          <Button mode="ghost" tone="primary" onClick={_onClose} text="Ok" />
+        </Stack>
+      }
+    >
+      <Stack space={3} padding={3}>
+        <Card padding={[3, 3, 3]} radius={2}>
+          <Stack space={3}>
+            <Text size={1} weight="semibold">
+              DRM-protected playback will generate a license with a small associated cost. The
+              plugin will attempt to play signed or public playback IDs instead whenever possible.
+            </Text>
+          </Stack>
+        </Card>
+        <Card padding={[3, 3, 3]} radius={2} tone="suggest">
+          <Stack space={3}>
+            <Text size={1} weight="semibold">
+              This is a one time warning. If it persists, you can disable it from your plugin
+              configuration.
+            </Text>
+          </Stack>
+        </Card>
+      </Stack>
+    </Dialog>
+  )
+}

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/hooks/useFetchFileSize.ts

@@ -0,0 +1,54 @@
+import {useEffect, useState} from 'react'
+
+import {StagedUpload} from '../components/Uploader'
+
+export function useFetchFileSize(stagedUpload: StagedUpload, maxFileSize?: number) {
+  const [fileSize, setFileSize] = useState<number | null>(null)
+  const [isLoadingFileSize, setIsLoadingFileSize] = useState(false)
+  const [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = useState(false)
+
+  useEffect(() => {
+    // Fetch URL Upload file size
+    if (stagedUpload.type === 'url') {
+      setIsLoadingFileSize(false)
+      setCanSkipFileSizeValidation(false)
+      setFileSize(null)
+      const url = stagedUpload.url
+
+      // Get file size from URL
+      const fetchFileSize = async () => {
+        setIsLoadingFileSize(true)
+        try {
+          const response = await fetch(url, {method: 'HEAD'})
+          const contentLength = response.headers.get('content-length')
+          const newFileSize = contentLength ? parseInt(contentLength, 10) : null
+
+          setIsLoadingFileSize(false)
+          if (newFileSize) {
+            setFileSize(newFileSize)
+          }
+          if (newFileSize === null && maxFileSize !== undefined) {
+            // Size unknown but size limit is configured - skip file size validation
+            setCanSkipFileSizeValidation(true)
+          }
+        } catch {
+          console.warn('Could not validate file size from URL')
+          // Skip validation of file size, but still validate duration
+          setCanSkipFileSizeValidation(true)
+          setIsLoadingFileSize(false)
+        }
+      }
+
+      fetchFileSize()
+    }
+    if (stagedUpload.type === 'file') {
+      setFileSize(stagedUpload.files[0].size)
+    }
+  }, [maxFileSize, stagedUpload, stagedUpload.type])
+
+  return {
+    fileSize,
+    isLoadingFileSize,
+    canSkipFileSizeValidation,
+  }
+}

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'])