sanity-plugin-mux-input 2.13.0 → 2.15.0

package/src/components/VideoThumbnail.tsx

@@ -1,6 +1,6 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Spinner, Stack, Text} from '@sanity/ui'
-import {useMemo, useRef, useState} from 'react'
+import {Suspense, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
@@ -8,6 +8,7 @@ import {useInView} from '../hooks/useInView'
 import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
 import {getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
 import {getPosterSrc} from '../util/getPosterSrc'
+import {tryWithSuspend} from '../util/tryWithSuspend'
 import {AssetThumbnailOptions, MuxAnimatedThumbnailUrl, MuxThumbnailUrl} from '../util/types'
 
 const Image = styled.img`
@@ -36,91 +37,102 @@ export default function VideoThumbnail({
   width?: number
   staticImage?: boolean
 }) {
+  const posterWidth = width || 250
+  const client = useClient()
   const ref = useRef<HTMLDivElement | null>(null)
   const inView = useInView(ref)
-  const posterWidth = width || 250
 
   const [status, setStatus] = useState<ImageStatus>('loading')
-  const client = useClient()
+  const [error, setError] = useState<string | null>(null)
 
-  const src = useMemo(() => {
-    try {
-      let thumbnail: MuxAnimatedThumbnailUrl | MuxThumbnailUrl
-      if (staticImage) thumbnail = getPosterSrc({asset, client, width: posterWidth})
-      else thumbnail = getAnimatedPosterSrc({asset, client, width: posterWidth})
+  const thumbnailSrc = useMemo(() => {
+    return tryWithSuspend(
+      () => {
+        let thumbnail: MuxAnimatedThumbnailUrl | MuxThumbnailUrl | undefined
 
-      return thumbnail
-    } catch {
-      if (status !== 'error') setStatus('error')
-      return undefined
-    }
-  }, [asset, client, posterWidth, status, staticImage])
+        if (staticImage) thumbnail = getPosterSrc({asset, client, width: posterWidth})
+        else thumbnail = getAnimatedPosterSrc({asset, client, width: posterWidth})
+        return thumbnail
+      },
+      (err: Error) => {
+        handleError(err.message)
+        return undefined
+      }
+    )
+  }, [asset, client, posterWidth, staticImage])
 
   function handleLoad() {
     setStatus('loaded')
   }
 
-  function handleError() {
+  function handleError(err?: string) {
     setStatus('error')
+    if (err) {
+      setError(err)
+    } else {
+      setError('Failed loading thumbnail')
+    }
   }
 
   return (
-    <Card
-      style={{
-        aspectRatio: THUMBNAIL_ASPECT_RATIO,
-        position: 'relative',
-        maxWidth: width ? `${width}px` : undefined,
-        width: '100%',
-        flex: 1,
-      }}
-      border
-      radius={2}
-      ref={ref}
-      tone={STATUS_TO_TONE[status]}
-    >
-      {inView ? (
-        <>
-          {status === 'loading' && (
-            <Box
-              style={{
-                position: 'absolute',
-                left: '50%',
-                top: '50%',
-                transform: 'translate(-50%, -50%)',
-              }}
-            >
-              <Spinner />
-            </Box>
-          )}
-          {status === 'error' && (
-            <Stack
-              space={4}
-              style={{
-                position: 'absolute',
-                width: '100%',
-                left: 0,
-                top: '50%',
-                transform: 'translateY(-50%)',
-                justifyItems: 'center',
-              }}
-            >
-              <Text size={4} muted>
-                <ErrorOutlineIcon style={{fontSize: '1.75em'}} />
-              </Text>
-              <Text muted align="center">
-                Failed loading thumbnail
-              </Text>
-            </Stack>
-          )}
-          <Image
-            src={src}
-            alt={`Preview for ${staticImage ? 'image' : 'video'} ${asset.filename || asset.assetId}`}
-            onLoad={handleLoad}
-            onError={handleError}
-            style={{opacity: status === 'loaded' ? 1 : 0}}
-          />
-        </>
-      ) : null}
-    </Card>
+    <Suspense fallback={<span>Preparing thumbnail</span>}>
+      <Card
+        style={{
+          aspectRatio: THUMBNAIL_ASPECT_RATIO,
+          position: 'relative',
+          maxWidth: width ? `${width}px` : undefined,
+          width: '100%',
+          flex: 1,
+        }}
+        border
+        radius={2}
+        ref={ref}
+        tone={STATUS_TO_TONE[status]}
+      >
+        {inView ? (
+          <>
+            {status === 'loading' && (
+              <Box
+                style={{
+                  position: 'absolute',
+                  left: '50%',
+                  top: '50%',
+                  transform: 'translate(-50%, -50%)',
+                }}
+              >
+                <Spinner />
+              </Box>
+            )}
+            {status === 'error' && (
+              <Stack
+                space={4}
+                style={{
+                  position: 'absolute',
+                  width: '100%',
+                  left: 0,
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  justifyItems: 'center',
+                }}
+              >
+                <Text size={4} muted>
+                  <ErrorOutlineIcon style={{fontSize: '1.75em'}} />
+                </Text>
+                <Text muted align="center">
+                  {error}
+                </Text>
+              </Stack>
+            )}
+            <Image
+              src={thumbnailSrc ?? undefined}
+              alt={`Preview for ${staticImage ? 'image' : 'video'} ${asset.filename || asset.assetId}`}
+              onLoad={handleLoad}
+              onError={() => handleError()}
+              style={{opacity: status === 'loaded' ? 1 : 0}}
+            />
+          </>
+        ) : null}
+      </Card>
+    </Suspense>
   )
 }

package/src/components/VideosBrowser.tsx

@@ -2,10 +2,12 @@ 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'
 import ResyncMetadata from './ResyncMetadata'
 import {SelectSortOptions} from './SelectSortOptions'
 import SpinnerBox from './SpinnerBox'
@@ -14,20 +16,27 @@ 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
+  const pageTotal = Math.floor(assets.length / pageLimit) + 1
   const [editedAsset, setEditedAsset] = useState<VideoDetailsProps['asset'] | null>(null)
   const freshEditedAsset = useMemo(
     () => assets.find((a) => a._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
   )
 
+  const pageStart = page * pageLimit
+  const pageEnd = pageStart + pageLimit
+
   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}>
@@ -40,6 +49,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
               placeholder="Search videos"
             />
             <SelectSortOptions setSort={setSort} sort={sort} />
+            <PageSelector page={page} setPage={setPage} total={pageTotal} />
           </Flex>
           {placement === 'tool' && (
             <Inline space={2}>
@@ -62,7 +72,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
               gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
             }}
           >
-            {assets.map((asset) => (
+            {assets.slice(pageStart, pageEnd).map((asset) => (
               <VideoInBrowser
                 key={asset._id}
                 asset={asset}
@@ -85,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>
+  )
+}