sanity-plugin-mux-input 2.14.0 → 2.16.0

package/src/components/VideosBrowser.tsx

@@ -2,8 +2,9 @@ import {SearchIcon} from '@sanity/icons'
 import {Card, Flex, Grid, Inline, Label, Stack, Text, TextInput} from '@sanity/ui'
 import {useMemo, useState} from 'react'
 
+import {DrmPlaybackWarningContextProvider} from '../context/DrmPlaybackWarningContext'
 import useAssets from '../hooks/useAssets'
-import type {VideoAssetDocument} from '../util/types'
+import type {PluginConfig, VideoAssetDocument} from '../util/types'
 import ConfigureApi from './ConfigureApi'
 import ImportVideosFromMux from './ImportVideosFromMux'
 import PageSelector from './PageSelector'
@@ -15,10 +16,11 @@ import VideoDetails from './VideoDetails/VideoDetails'
 import VideoInBrowser from './VideoInBrowser'
 
 export interface VideosBrowserProps {
+  config: PluginConfig
   onSelect?: (asset: VideoAssetDocument) => void
 }
 
-export default function VideosBrowser({onSelect}: VideosBrowserProps) {
+export default function VideosBrowser({onSelect, config}: VideosBrowserProps) {
   const {assets, isLoading, searchQuery, setSearchQuery, setSort, sort} = useAssets()
   const [page, setPage] = useState<number>(0)
   const pageLimit = 20
@@ -34,7 +36,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
 
   const placement = onSelect ? 'input' : 'tool'
   return (
-    <>
+    <DrmPlaybackWarningContextProvider config={config}>
       <Stack padding={4} space={4} style={{minHeight: '50vh'}}>
         <Flex justify="space-between" align="center">
           <Flex align="center" gap={3}>
@@ -47,7 +49,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
               placeholder="Search videos"
             />
             <SelectSortOptions setSort={setSort} sort={sort} />
-            <PageSelector page={page} setPage={setPage} total={pageTotal} limit={pageLimit} />
+            <PageSelector page={page} setPage={setPage} total={pageTotal} />
           </Flex>
           {placement === 'tool' && (
             <Inline space={2}>
@@ -93,6 +95,6 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
       {freshEditedAsset && (
         <VideoDetails closeDialog={() => setEditedAsset(null)} asset={freshEditedAsset} />
       )}
-    </>
+    </DrmPlaybackWarningContextProvider>
   )
 }

package/src/components/uploadConfiguration/PlaybackPolicy.tsx

@@ -1,6 +1,8 @@
-import {Grid, Text} from '@sanity/ui'
+import {Code, Grid, Text} from '@sanity/ui'
+import {ActionDispatch} from 'react'
 
 import {Secrets, UploadConfig} from '../../util/types'
+import {UploadConfigurationStateAction} from '../UploadConfiguration'
 import PlaybackPolicyOption from './PlaybackPolicyOption'
 import PlaybackPolicyWarning from './PlaybackPolicyWarning'
 
@@ -13,9 +15,10 @@ export default function PlaybackPolicy({
   id: string
   config: UploadConfig
   secrets: Secrets
-  dispatch: any
+  dispatch: ActionDispatch<[action: UploadConfigurationStateAction]>
 }) {
-  const noPolicySelected = !(config.public_policy || config.signed_policy)
+  const noPolicySelected = !(config.public_policy || config.signed_policy || config.drm_policy)
+  const drmPolicyDisabled = !secrets.drmConfigId
   return (
     <Grid gap={3}>
       <Text weight="bold">Advanced Playback Policies</Text>
@@ -23,7 +26,14 @@ export default function PlaybackPolicy({
         id={`${id}--public`}
         checked={config.public_policy}
         optionName="Public"
-        description="Playback IDs are accessible by constructing an HLS URL like https://stream.mux.com/{PLAYBACK_ID}"
+        description={
+          <>
+            <Text size={2} muted>
+              Playback IDs are accessible by constructing an HLS URL like
+            </Text>
+            <Code>{'https://stream.mux.com/{PLAYBACK_ID}'}</Code>
+          </>
+        }
         dispatch={dispatch}
         action="public_policy"
       />
@@ -32,12 +42,91 @@ export default function PlaybackPolicy({
           id={`${id}--signed`}
           checked={config.signed_policy}
           optionName="Signed"
-          description="Playback IDs should be used with tokens https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}. 
-                // See Secure video playback for details about creating tokens."
+          description={
+            <>
+              <Text size={2} muted>
+                Playback IDs should be used with tokens
+              </Text>
+              <Code>{'https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}'}</Code>
+              <Text size={2} muted>
+                See{' '}
+                <a
+                  href="https://www.mux.com/docs/guides/secure-video-playback"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Secure video playback
+                </a>{' '}
+                for details about creating tokens.
+              </Text>
+            </>
+          }
+          // See Secure video playback for details about creating tokens."
           dispatch={dispatch}
           action="signed_policy"
         />
       )}
+      {drmPolicyDisabled ? (
+        <PlaybackPolicyOption
+          id={`${id}--drm`}
+          checked={false}
+          optionName="DRM - Disabled"
+          description={
+            <>
+              <Text size={2} muted>
+                To enable DRM add your DRM Configuration Id to your plugin configuration in the API
+                Credentials view.{' '}
+                <a
+                  href="https://www.mux.com/support/human"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Contact us
+                </a>{' '}
+                to get started using DRM.
+              </Text>
+            </>
+          }
+          dispatch={dispatch}
+          disabled
+        />
+      ) : (
+        <PlaybackPolicyOption
+          id={`${id}--drm`}
+          checked={config.drm_policy}
+          optionName="DRM"
+          description={
+            <>
+              <Text size={2} muted>
+                Playback IDs should be used with tokens as with Signed playback, but require extra
+                configuration.
+              </Text>
+              <Code>{'https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}'}</Code>
+              <Text size={2} muted>
+                See{' '}
+                <a
+                  href="https://www.mux.com/docs/guides/protect-videos-with-drm#play-drm-protected-videos"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Protect videos with DRM
+                </a>{' '}
+                for details about configuring your player for DRM playback and{' '}
+                <a
+                  href="https://www.mux.com/docs/guides/secure-video-playback"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Secure video playback
+                </a>{' '}
+                for details about creating tokens.
+              </Text>
+            </>
+          }
+          dispatch={dispatch}
+          action="drm_policy"
+        />
+      )}
       {noPolicySelected && <PlaybackPolicyWarning />}
     </Grid>
   )

package/src/components/uploadConfiguration/PlaybackPolicyOption.tsx

@@ -1,5 +1,5 @@
-import {Box, Checkbox, Flex, Grid, Stack, Text} from '@sanity/ui'
-import {CSSProperties, useState} from 'react'
+import {Checkbox, Flex, Grid, Text} from '@sanity/ui'
+import {ActionDispatch, CSSProperties, ReactNode, useState} from 'react'
 
 import {UploadConfigurationStateAction} from '../UploadConfiguration'
 
@@ -10,13 +10,15 @@ export default function PlaybackPolicyOption({
   description,
   dispatch,
   action,
+  disabled,
 }: {
   id: string
   checked: boolean
   optionName: string
-  description: string
-  dispatch: any
-  action: UploadConfigurationStateAction['action']
+  description: string | ReactNode
+  dispatch: ActionDispatch<[action: UploadConfigurationStateAction]>
+  action?: 'public_policy' | 'signed_policy' | 'drm_policy'
+  disabled?: boolean
 }) {
   const [scale, setScale] = useState(1)
 
@@ -24,7 +26,7 @@ export default function PlaybackPolicyOption({
     outline: '0.01rem solid grey',
     transform: `scale(${scale})`,
     transition: 'transform 0.1s ease-in-out',
-    cursor: 'pointer',
+    cursor: disabled ? 'not-allowed' : 'pointer',
     borderRadius: '0.25rem',
   }
 
@@ -36,23 +38,37 @@ export default function PlaybackPolicyOption({
   }
 
   const handleBoxClick = () => {
+    if (!action) return
     triggerAnimation()
     dispatch({
       action,
       value: !checked,
     })
   }
+
+  const descriptionJsx =
+    typeof description === 'string' ? (
+      <Text size={2} muted>
+        {description}
+      </Text>
+    ) : (
+      description
+    )
   return (
     <label>
       <Flex gap={3} padding={3} style={boxStyle}>
-        <Checkbox id={id} required checked={checked} onChange={handleBoxClick} />
+        <Checkbox
+          id={id}
+          required
+          checked={checked}
+          onChange={handleBoxClick}
+          disabled={disabled}
+        />
         <Grid gap={3}>
           <Text size={3} weight="bold">
             {optionName}
           </Text>
-          <Text size={2} muted>
-            {description}
-          </Text>
+          {descriptionJsx}
         </Grid>
       </Flex>
     </label>

package/src/components/uploadConfiguration/ResolutionTierSelector.tsx

@@ -0,0 +1,71 @@
+import {Flex, Radio, Text} from '@sanity/ui'
+import {ActionDispatch} from 'react'
+import {FormField} from 'sanity'
+
+import {type UploadConfig} from '../../util/types'
+import {UploadConfigurationStateAction} from '../UploadConfiguration'
+
+export 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}[]
+
+export const ResolutionTierSelector = ({
+  id,
+  config,
+  dispatch,
+  maxSupportedResolution,
+}: {
+  id: string
+  config: UploadConfig
+  dispatch: ActionDispatch<[action: UploadConfigurationStateAction]>
+  maxSupportedResolution: number
+}) => {
+  return (
+    <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>
+  )
+}

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/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,
+  }
+}