sanity-plugin-mux-input 2.14.0 → 2.16.0

package/src/components/UploadConfiguration.tsx

@@ -1,10 +1,12 @@
 import {DocumentVideoIcon, ErrorOutlineIcon, UploadIcon} from '@sanity/icons'
-import {Box, Button, Card, Checkbox, Dialog, Flex, Label, Radio, Stack, Text} from '@sanity/ui'
+import {Box, Button, Card, Dialog, Flex, Label, Radio, Stack, Text} from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
 import LanguagesList from 'iso-639-1'
-import {useEffect, useId, useMemo, useReducer, useRef, useState} from 'react'
+import {useEffect, useId, useReducer, useRef, useState} from 'react'
 import {FormField} from 'sanity'
 
+import {useFetchFileSize} from '../hooks/useFetchFileSize'
+import {useMediaMetadata} from '../hooks/useMediaMetadata'
 import formatBytes from '../util/formatBytes'
 import {formatSeconds} from '../util/formatSeconds'
 import {
@@ -22,6 +24,11 @@ import {
 } from '../util/types'
 import TextTracksEditor, {type TrackAction} from './TextTracksEditor'
 import PlaybackPolicy from './uploadConfiguration/PlaybackPolicy'
+import {
+  RESOLUTION_TIERS,
+  ResolutionTierSelector,
+} from './uploadConfiguration/ResolutionTierSelector'
+import {StaticRenditionSelector} from './uploadConfiguration/StaticRenditionSelector'
 import type {StagedUpload} from './Uploader'
 
 export type UploadConfigurationStateAction =
@@ -31,6 +38,7 @@ export type UploadConfigurationStateAction =
   | {action: 'normalize_audio'; value: UploadConfig['normalize_audio']}
   | {action: 'signed_policy'; value: UploadConfig['signed_policy']}
   | {action: 'public_policy'; value: UploadConfig['public_policy']}
+  | {action: 'drm_policy'; value: UploadConfig['drm_policy']}
   | TrackAction
 
 const VIDEO_QUALITY_LEVELS = [
@@ -39,23 +47,6 @@ const VIDEO_QUALITY_LEVELS = [
   {value: 'premium', label: 'Premium'},
 ] as const satisfies {value: UploadConfig['video_quality']; label: string}[]
 
-const RESOLUTION_TIERS = [
-  {value: '1080p', label: '1080p'},
-  {value: '1440p', label: '1440p (2k)'},
-  {value: '2160p', label: '2160p (4k)'},
-] as const satisfies {value: UploadConfig['max_resolution_tier']; label: string}[]
-
-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'},
-]
-
 /**
  * Sanitizes static renditions configuration to ensure 'highest' is not mixed with specific resolutions.
  * If both are present, only 'highest' (and 'audio-only' if present) will be kept.
@@ -119,6 +110,7 @@ export default function UploadConfiguration({
               text_tracks: prev.text_tracks?.filter(({type}) => type !== 'autogenerated'),
               public_policy: true,
               signed_policy: false,
+              drm_policy: false,
             })
             // If video quality level switches to plus, add back in default plus features
           }
@@ -136,6 +128,8 @@ export default function UploadConfiguration({
           return Object.assign({}, prev, {[action.action]: action.value})
         case 'public_policy':
           return Object.assign({}, prev, {[action.action]: action.value})
+        case 'drm_policy':
+          return Object.assign({}, prev, {[action.action]: action.value})
         // Updating individual tracks
         case 'track': {
           const text_tracks = [...prev.text_tracks]
@@ -174,88 +168,39 @@ export default function UploadConfiguration({
       static_renditions: sanitizeStaticRenditions(pluginConfig.static_renditions || []),
       signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
       public_policy: pluginConfig.defaultPublic,
+      drm_policy: pluginConfig.defaultDrm && !!secrets.drmConfigId,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks,
     } as UploadConfig
   )
 
-  // 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'
-  )
-
   // Video validations
-  const [videoDuration, setVideoDuration] = useState<number | null>(null)
-  const [urlFileSize, setUrlFileSize] = useState<number | null>(null)
-  const [isLoadingDuration, setIsLoadingDuration] = useState(false)
-  const [isLoadingFileSize, setIsLoadingFileSize] = useState(false)
   const [validationError, setValidationError] = useState<string | null>(null)
-  const [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = useState(false)
-
   const MAX_FILE_SIZE = pluginConfig.maxAssetFileSize
   const MAX_DURATION_SECONDS = pluginConfig.maxAssetDuration
 
-  useEffect(() => {
-    setVideoDuration(null)
-    setUrlFileSize(null)
-    setIsLoadingDuration(false)
-    setIsLoadingFileSize(false)
-    setValidationError(null)
-    setCanSkipFileSizeValidation(false)
-
-    let videoElement: HTMLVideoElement | null = null
-    let currentVideoSrc: string | null = null
+  const {fileSize, isLoadingFileSize, canSkipFileSizeValidation} = useFetchFileSize(
+    stagedUpload,
+    MAX_FILE_SIZE
+  )
+  const {videoAssetMetadata, setVideoAssetMetadata, isLoadingMetadata} =
+    useMediaMetadata(stagedUpload)
 
-    const cleanupVideo = (shouldRevokeUrl: boolean) => {
-      if (videoElement) {
-        videoElement.onloadedmetadata = null
-        videoElement.onerror = null
-        videoElement.src = ''
-        videoElement.load()
-        videoElement = null
-      }
-      if (shouldRevokeUrl && currentVideoSrc?.startsWith('blob:')) {
-        URL.revokeObjectURL(currentVideoSrc)
-      }
-      currentVideoSrc = null
+  useEffect(() => {
+    if (fileSize) {
+      setVideoAssetMetadata((old) => ({...old, size: fileSize}))
     }
+  }, [fileSize, setVideoAssetMetadata])
 
-    const validateDuration = (videoSrc: string, shouldRevokeUrl = false) => {
-      if (!MAX_DURATION_SECONDS || MAX_DURATION_SECONDS <= 0) return
-
-      setIsLoadingDuration(true)
-      videoElement = document.createElement('video')
-      videoElement.preload = 'metadata'
-      currentVideoSrc = videoSrc
-
-      videoElement.onloadedmetadata = () => {
-        const duration = videoElement!.duration
-        setVideoDuration(duration)
-        setIsLoadingDuration(false)
-
-        if (duration > MAX_DURATION_SECONDS) {
-          setValidationError(
-            `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`
-          )
-        }
-
-        cleanupVideo(shouldRevokeUrl)
-      }
-
-      videoElement.onerror = () => {
-        setIsLoadingDuration(false)
-        console.warn('Could not read video metadata for validation')
-        cleanupVideo(shouldRevokeUrl)
+  useEffect(() => {
+    const validateDuration = (duration: number) => {
+      if (MAX_DURATION_SECONDS && duration > MAX_DURATION_SECONDS) {
+        setValidationError(
+          `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`
+        )
+        return false
       }
-
-      videoElement.src = videoSrc
+      return true
     }
 
     const validateFileSize = (size: number): boolean => {
@@ -269,95 +214,39 @@ export default function UploadConfiguration({
       return false
     }
 
-    // Validate file uploads
-    if (stagedUpload.type === 'file') {
-      const file = stagedUpload.files[0]
-      if (validateFileSize(file.size)) {
-        validateDuration(URL.createObjectURL(file), true)
+    const validateDrmAvailability = (isAudioOnly: boolean) => {
+      if (config.drm_policy && isAudioOnly) {
+        setValidationError('Audio-only asset cannot be DRM protected')
+        return false
       }
+      return true
     }
 
-    // Validate URL uploads
-    if (stagedUpload.type === 'url') {
-      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 fileSize = contentLength ? parseInt(contentLength, 10) : null
-
-          setIsLoadingFileSize(false)
-          if (fileSize) {
-            setUrlFileSize(fileSize)
-          }
-
-          // Validate file size if limit is configured and size is available
-          const shouldValidateDuration =
-            MAX_FILE_SIZE === undefined || fileSize === null || validateFileSize(fileSize)
-
-          if (fileSize === null && MAX_FILE_SIZE !== undefined) {
-            // Size unknown but size limit is configured - skip file size validation
-            setCanSkipFileSizeValidation(true)
-          }
-
-          if (shouldValidateDuration) {
-            validateDuration(url)
-          }
-        } catch {
-          setIsLoadingFileSize(false)
-          console.warn('Could not validate file size from URL')
-          // Skip validation of file size, but still validate duration
-          setCanSkipFileSizeValidation(true)
-          validateDuration(url)
-        }
-      }
-
-      fetchFileSize()
+    let valid = true
+    if (videoAssetMetadata?.size) {
+      valid = valid && (canSkipFileSizeValidation || validateFileSize(videoAssetMetadata.size))
     }
-
-    return () => {
-      cleanupVideo(true)
+    if (videoAssetMetadata?.duration) {
+      valid = valid && validateDuration(videoAssetMetadata.duration)
     }
-  }, [stagedUpload, MAX_FILE_SIZE, MAX_DURATION_SECONDS])
-
-  // 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],
-      })
+    if (videoAssetMetadata?.isAudioOnly != undefined) {
+      valid = valid && validateDrmAvailability(videoAssetMetadata.isAudioOnly)
     }
-  }
-
-  // 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'),
-      })
+    if (valid) {
+      setValidationError(null)
     }
-  }
+  }, [
+    MAX_FILE_SIZE,
+    MAX_DURATION_SECONDS,
+    canSkipFileSizeValidation,
+    videoAssetMetadata?.duration,
+    videoAssetMetadata?.size,
+    videoAssetMetadata?.height,
+    videoAssetMetadata?.width,
+    videoAssetMetadata,
+    config.drm_policy,
+    validationError,
+  ])
 
   // If user-provided config is disabled, begin the upload immediately with
   // the developer-specified values from the schema or config or defaults.
@@ -365,12 +254,13 @@ export default function UploadConfiguration({
   const {disableTextTrackConfig, disableUploadConfig} = pluginConfig
   const skipConfig = disableTextTrackConfig && disableUploadConfig
   useEffect(() => {
-    if (skipConfig) startUpload(formatUploadConfig(config))
+    if (skipConfig) startUpload(formatUploadConfig(config, secrets))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   if (skipConfig) return null
 
   const basicConfig = config.video_quality !== 'plus' && config.video_quality !== 'premium'
+  const playbackPolicySelected = config.public_policy || config.signed_policy || config.drm_policy
   const maxSupportedResolution = RESOLUTION_TIERS.findIndex(
     (rt) => rt.value === pluginConfig.max_resolution_tier
   )
@@ -416,8 +306,8 @@ export default function UploadConfiguration({
                 {stagedUpload.type === 'file'
                   ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})`
                   : (() => {
-                      if (urlFileSize) {
-                        return `File From URL (${formatBytes(urlFileSize)})`
+                      if (videoAssetMetadata?.size) {
+                        return `File From URL (${formatBytes(videoAssetMetadata.size)})`
                       }
                       if (isLoadingFileSize) {
                         return 'File From URL (Loading size...)'
@@ -427,14 +317,14 @@ export default function UploadConfiguration({
               </Text>
               {stagedUpload.type === 'file' && (
                 <Stack space={1}>
-                  {isLoadingDuration && (
+                  {isLoadingMetadata && (
                     <Text as="p" size={1} muted>
                       Reading video metadata...
                     </Text>
                   )}
-                  {videoDuration !== null && !validationError && (
+                  {videoAssetMetadata?.duration && !validationError && (
                     <Text as="p" size={1} muted>
-                      Duration: {formatSeconds(videoDuration)}
+                      Duration: {formatSeconds(videoAssetMetadata.duration)}
                     </Text>
                   )}
                 </Stack>
@@ -486,180 +376,38 @@ export default function UploadConfiguration({
               </Flex>
             </FormField>
 
-            {!basicConfig && maxSupportedResolution > 0 && (
-              <FormField
-                title="Resolution Tier"
-                description={
-                  <>
-                    The maximum{' '}
-                    <a
-                      href="https://docs.mux.com/api-reference#video/operation/create-direct-upload"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      resolution_tier
-                    </a>{' '}
-                    your asset is encoded, stored, and streamed at.
-                  </>
-                }
-              >
-                <Flex gap={3} wrap={'wrap'}>
-                  {RESOLUTION_TIERS.map(({value, label}, index) => {
-                    const inputId = `${id}--type-${value}`
-
-                    if (index > maxSupportedResolution) return null
-
-                    return (
-                      <Flex key={value} align="center" gap={2}>
-                        <Radio
-                          checked={config.max_resolution_tier === value}
-                          name="asset-resolutiontier"
-                          onChange={(e) =>
-                            dispatch({
-                              action: 'max_resolution_tier',
-                              value: e.currentTarget.value as UploadConfig['max_resolution_tier'],
-                            })
-                          }
-                          value={value}
-                          id={inputId}
-                        />
-                        <Text as="label" htmlFor={inputId}>
-                          {label}
-                        </Text>
-                      </Flex>
-                    )
-                  })}
-                </Flex>
-              </FormField>
-            )}
-
             {!basicConfig && (
               <FormField title="Additional Configuration">
                 <Stack space={3}>
                   <PlaybackPolicy id={id} config={config} secrets={secrets} dispatch={dispatch} />
-
-                  <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>
+                  {maxSupportedResolution > 0 && (
+                    <ResolutionTierSelector
+                      id={id}
+                      config={config}
+                      dispatch={dispatch}
+                      maxSupportedResolution={maxSupportedResolution}
+                    />
+                  )}
+                  <StaticRenditionSelector id={id} config={config} dispatch={dispatch} />
+                  {!disableTextTrackConfig && (
+                    <TextTracksEditor
+                      tracks={config.text_tracks}
+                      dispatch={dispatch}
+                      defaultLang={pluginConfig.defaultAutogeneratedSubtitleLang}
+                    />
+                  )}
                 </Stack>
               </FormField>
             )}
           </Stack>
         )}
 
-        {!disableTextTrackConfig && !basicConfig && (
-          <TextTracksEditor
-            tracks={config.text_tracks}
-            dispatch={dispatch}
-            defaultLang={pluginConfig.defaultAutogeneratedSubtitleLang}
-          />
-        )}
-
         <Box marginTop={4}>
           <Button
             disabled={
-              (!basicConfig && !config.public_policy && !config.signed_policy) ||
+              (!basicConfig && !playbackPolicySelected) ||
               validationError !== null ||
-              isLoadingDuration ||
+              isLoadingMetadata ||
               (isLoadingFileSize && !canSkipFileSizeValidation)
             }
             icon={UploadIcon}
@@ -667,7 +415,7 @@ export default function UploadConfiguration({
             tone="positive"
             onClick={() => {
               if (!validationError) {
-                startUpload(formatUploadConfig(config))
+                startUpload(formatUploadConfig(config, secrets))
               }
             }}
           />
@@ -677,18 +425,31 @@ export default function UploadConfiguration({
   )
 }
 
-function setPlaybackPolicy(config: UploadConfig): MuxNewAssetSettings['playback_policy'] {
-  const playback_policy: MuxNewAssetSettings['playback_policy'] = []
+function setAdvancedPlaybackPolicy(
+  config: UploadConfig,
+  secrets: Secrets
+): MuxNewAssetSettings['advanced_playback_policies'] {
+  const advanced_playback_policies: MuxNewAssetSettings['advanced_playback_policies'] = []
   if (config.public_policy) {
-    playback_policy.push('public')
+    advanced_playback_policies.push({policy: 'public'})
   }
   if (config.signed_policy) {
-    playback_policy.push('signed')
+    advanced_playback_policies.push({policy: 'signed'})
+  }
+  if (config.drm_policy) {
+    if (secrets.drmConfigId)
+      advanced_playback_policies.push({
+        policy: 'drm',
+        drm_configuration_id: secrets.drmConfigId ?? undefined,
+      })
+    else {
+      console.error('Selected DRM Policy but missing DRM Configuration Id')
+    }
   }
-  return playback_policy
+  return advanced_playback_policies
 }
 
-function formatUploadConfig(config: UploadConfig): MuxNewAssetSettings {
+function formatUploadConfig(config: UploadConfig, secrets: Secrets): MuxNewAssetSettings {
   const generated_subtitles = config.text_tracks
     .filter<AutogeneratedTextTrack>(isAutogeneratedTrack)
     .map<{name: string; language_code: SupportedMuxLanguage}>((track) => ({
@@ -723,7 +484,7 @@ function formatUploadConfig(config: UploadConfig): MuxNewAssetSettings {
       config.static_renditions.length > 0
         ? config.static_renditions.map((resolution) => ({resolution}))
         : undefined,
-    playback_policy: setPlaybackPolicy(config),
+    advanced_playback_policies: setAdvancedPlaybackPolicy(config, secrets),
     max_resolution_tier: config.max_resolution_tier,
     video_quality: config.video_quality,
     normalize_audio: config.normalize_audio,

package/src/components/Uploader.tsx

@@ -9,8 +9,9 @@ import {PatchEvent, set, setIfMissing} from 'sanity'
 import {uploadFile, uploadUrl} from '../actions/upload'
 import {DialogStateProvider} from '../context/DialogStateContext'
 import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
-import {isValidUrl} from '../util/asserters'
+import {isServerError, isValidUrl} from '../util/asserters'
 import {extractDroppedFiles} from '../util/extractFiles'
+import {hasPlaybackPolicy} from '../util/getPlaybackPolicy'
 import type {
   MuxInputProps,
   MuxNewAssetSettings,
@@ -66,7 +67,7 @@ type UploaderStateAction =
       | Extract<UploadUrlEvent, {type: 'url'}>
     ))
   | {action: 'progress'; percent: number}
-  | {action: 'error'; error: Error}
+  | {action: 'error'; error: Error; settings: MuxNewAssetSettings}
   | {action: 'complete' | 'reset'}
 
 /**
@@ -125,12 +126,21 @@ export default function Uploader(props: Props) {
           uploadRef.current = null
           uploadingDocumentId.current = null
           return INITIAL_STATE
-        case 'error':
+        case 'error': {
           // Clear upload observable on error
           uploadRef.current?.unsubscribe()
           uploadRef.current = null
           uploadingDocumentId.current = null
-          return Object.assign({}, INITIAL_STATE, {error: action.error})
+
+          let error = action.error
+          if (isServerError(action.error) && hasPlaybackPolicy(action.settings, 'drm')) {
+            error = new Error(
+              'Unknown Error while uploading DRM protected content. Make sure your DRM configuration ID is valid and set correctly'
+            )
+          }
+
+          return Object.assign({}, INITIAL_STATE, {error: error})
+        }
         default:
           return prev
       }
@@ -254,7 +264,7 @@ export default function Uploader(props: Props) {
         }
       },
       complete: () => dispatch({action: 'complete'}),
-      error: (error) => dispatch({action: 'error', error}),
+      error: (error) => dispatch({action: 'error', error, settings}),
     })
   }
 
@@ -372,7 +382,7 @@ export default function Uploader(props: Props) {
 
   // Upload has errored
   if (state.error !== null) {
-    const error = {state}
+    const error = state.error
     return (
       <Flex gap={3} direction="column" justify="center" align="center">
         <Text size={5} muted>
@@ -380,7 +390,7 @@ export default function Uploader(props: Props) {
         </Text>
         <Text>Something went wrong</Text>
         {error instanceof Error && error.message && (
-          <Text size={1} muted>
+          <Text size={1} muted weight="semibold" style={{textAlign: 'center'}}>
             {error.message}
           </Text>
         )}
@@ -471,6 +481,7 @@ export default function Uploader(props: Props) {
       </UploadCard>
       {props.dialogState === 'select-video' && (
         <InputBrowser
+          config={props.config}
           asset={props.asset}
           onChange={props.onChange}
           setDialogState={props.setDialogState}