sanity-plugin-mux-input 2.14.0 → 2.15.0

package/src/components/VideoDetails/VideoDetails.tsx

@@ -27,7 +27,7 @@ import {
 import React, {useEffect, useState} from 'react'
 
 import {DIALOGS_Z_INDEX} from '../../util/constants'
-import type {MuxTextTrack} from '../../util/types'
+import {MuxPlaybackId, MuxTextTrack, PlaybackPolicy} from '../../util/types'
 import FormField from '../FormField'
 import IconInfo from '../IconInfo'
 import {ResolutionIcon} from '../icons/Resolution'
@@ -295,13 +295,7 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
                     size={2}
                   />
                   <IconInfo text={`Mux ID: \n${displayInfo.id}`} icon={TagIcon} size={2} />
-                  {displayInfo?.playbackId && (
-                    <IconInfo
-                      text={`Playback ID: ${displayInfo.playbackId}`}
-                      icon={TagIcon}
-                      size={2}
-                    />
-                  )}
+                  <PlaybackIds playback_ids={displayInfo.playback_ids} />
                 </Stack>
               </Stack>
             </TabPanel>
@@ -319,4 +313,30 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
   )
 }
 
+const PlaybackIds = ({playback_ids}: {playback_ids?: MuxPlaybackId[]}) => {
+  if (playback_ids) {
+    return playback_ids.map((entry) => (
+      <IconInfo
+        key={entry.id}
+        text={`Playback ID [${policyToText(entry.policy)}]: ${entry.id}`}
+        icon={TagIcon}
+        size={2}
+      />
+    ))
+  }
+  return <IconInfo text={'No Playback ID'} icon={TagIcon} size={2} />
+}
+
+const policyToText = (policy: PlaybackPolicy) => {
+  switch (policy) {
+    case 'drm':
+      return 'DRM'
+    case 'signed':
+      return 'Signed'
+    case 'public':
+      return 'Public'
+    default:
+      return policy
+  }
+}
 export default VideoDetails

package/src/components/VideoInBrowser.tsx

@@ -3,6 +3,7 @@ import {Button, Card, Stack, Text, Tooltip} from '@sanity/ui'
 import React, {useState} from 'react'
 import {styled} from 'styled-components'
 
+import {DRMWarningDialog, useDrmPlaybackWarningContext} from '../context/DrmPlaybackWarningContext'
 import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
 import {VideoAssetDocument} from '../util/types'
@@ -71,6 +72,8 @@ const PlayButton = styled.button`
   }
 `
 
+type RenderState = 'render-video' | 'pre-render-warn' | false
+
 export default function VideoInBrowser({
   onSelect,
   onEdit,
@@ -80,16 +83,23 @@ export default function VideoInBrowser({
   onEdit?: (asset: VideoAssetDocument) => void
   asset: VideoAssetDocument
 }) {
-  const [renderVideo, setRenderVideo] = useState(false)
+  const [renderVideo, setRenderVideo] = useState<RenderState>(false)
   const select = React.useCallback(() => onSelect?.(asset), [onSelect, asset])
   const edit = React.useCallback(() => onEdit?.(asset), [onEdit, asset])
+  const {hasShownWarning} = useDrmPlaybackWarningContext()
 
   if (!asset) {
     return null
   }
 
   const playbackPolicy = getPlaybackPolicy(asset)
-
+  const onClickPlay = () => {
+    if (playbackPolicy?.policy === 'drm' && !hasShownWarning) {
+      setRenderVideo('pre-render-warn')
+    } else {
+      setRenderVideo('render-video')
+    }
+  }
   return (
     <Card
       border
@@ -100,7 +110,7 @@ export default function VideoInBrowser({
         position: 'relative',
       }}
     >
-      {playbackPolicy === 'signed' && (
+      {playbackPolicy?.policy === 'signed' && (
         <Tooltip
           animate
           content={
@@ -119,7 +129,7 @@ export default function VideoInBrowser({
               position: 'absolute',
               left: '1em',
               top: '1em',
-              zIndex: 10,
+              zIndex: 11,
             }}
             padding={2}
             border
@@ -130,6 +140,36 @@ export default function VideoInBrowser({
           </Card>
         </Tooltip>
       )}
+      {playbackPolicy?.policy === 'drm' && (
+        <Tooltip
+          animate
+          content={
+            <Card padding={2} radius={2}>
+              <IconInfo icon={LockIcon} text="DRM playback policy" size={2} />
+            </Card>
+          }
+          placement="right"
+          fallbackPlacements={['top', 'bottom']}
+          portal
+        >
+          <Card
+            tone="caution"
+            style={{
+              borderRadius: '0.25rem',
+              position: 'absolute',
+              left: '1em',
+              top: '1em',
+              zIndex: 11,
+            }}
+            padding={2}
+            border
+          >
+            <Text muted size={1} weight="semibold" style={{color: 'var(--card-icon-color)'}}>
+              DRM
+            </Text>
+          </Card>
+        </Tooltip>
+      )}
       <Stack
         space={3}
         height="fill"
@@ -137,10 +177,17 @@ export default function VideoInBrowser({
           gridTemplateRows: 'min-content min-content 1fr',
         }}
       >
-        {renderVideo ? (
+        {renderVideo === 'pre-render-warn' && (
+          <DRMWarningDialog
+            onClose={() => {
+              setRenderVideo('render-video')
+            }}
+          />
+        )}
+        {renderVideo === 'render-video' ? (
           <VideoPlayer asset={asset} autoPlay forceAspectRatio={THUMBNAIL_ASPECT_RATIO} />
         ) : (
-          <PlayButton onClick={() => setRenderVideo(true)}>
+          <PlayButton onClick={onClickPlay}>
             <div data-play>
               <PlayIcon />
             </div>

package/src/components/VideoPlayer.tsx

@@ -2,13 +2,17 @@ import {type MuxPlayerProps, type MuxPlayerRefAttributes} from '@mux/mux-player-
 import MuxPlayer from '@mux/mux-player-react/lazy'
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Card, Text} from '@sanity/ui'
-import {type PropsWithChildren, useMemo, useRef} from 'react'
+import {type PropsWithChildren, Suspense, useMemo, useRef, useState} from 'react'
 
 import {useDialogStateContext} from '../context/DialogStateContext'
 import {useClient} from '../hooks/useClient'
 import {AUDIO_ASPECT_RATIO, MIN_ASPECT_RATIO} from '../util/constants'
+import {generateJwt} from '../util/generateJwt'
+import {getPlaybackId} from '../util/getPlaybackPolicy'
+import {getPlaybackPolicyById} from '../util/getPlaybackPolicy'
 import {getPosterSrc} from '../util/getPosterSrc'
 import {getVideoSrc} from '../util/getVideoSrc'
+import {tryWithSuspend} from '../util/tryWithSuspend'
 import type {VideoAssetDocument} from '../util/types'
 import CaptionsDialog from './CaptionsDialog'
 import EditThumbnailDialog from './EditThumbnailDialog'
@@ -33,32 +37,101 @@ export default function VideoPlayer({
 
   const isAudio = assetIsAudio(asset)
   const muxPlayer = useRef<MuxPlayerRefAttributes>(null)
+  const [error, setError] = useState<Error>()
 
-  const {
-    src: videoSrc,
-    thumbnail: thumbnailSrc,
-    error,
-  } = useMemo(() => {
+  /* Playback ID that will be used to play the video */
+  const playbackId = useMemo(() => {
     try {
-      const thumbnail = getPosterSrc({asset, client, width: thumbnailWidth})
-      const src = asset?.playbackId && getVideoSrc({client, asset})
-      if (src) return {src: src, thumbnail}
-
-      return {error: new TypeError('Asset has no playback ID')}
-      // eslint-disable-next-line @typescript-eslint/no-shadow
-    } catch (error) {
-      return {error}
+      return getPlaybackId(asset, ['public', 'signed', 'drm'])
+    } catch (e) {
+      setError(new TypeError('Asset has no playback ID'))
+      return undefined
     }
+  }, [asset])
+
+  const muxPlaybackId = useMemo(() => {
+    if (!playbackId) return undefined
+    return getPlaybackPolicyById(asset, playbackId)
+  }, [asset, playbackId])
+
+  const src = useMemo(() => {
+    if (!playbackId) return undefined
+    if (!muxPlaybackId) return undefined
+    return tryWithSuspend(
+      () => getVideoSrc({muxPlaybackId, client}),
+      (e: Error) => {
+        setError(e)
+        return undefined
+      }
+    )
+  }, [muxPlaybackId, playbackId, client])
+
+  const poster = useMemo(() => {
+    return tryWithSuspend(
+      () => getPosterSrc({asset, client, width: thumbnailWidth}),
+      (e: Error) => {
+        setError(e)
+        return undefined
+      }
+    )
   }, [asset, client, thumbnailWidth])
 
   const signedToken = useMemo(() => {
     try {
-      const url = new URL(videoSrc!)
+      const url = new URL(src!)
       return url.searchParams.get('token')
     } catch {
-      return false
+      return undefined
+    }
+  }, [src])
+  const drmToken = useMemo(() => {
+    if (!playbackId) return undefined
+    if (muxPlaybackId?.policy !== 'drm') return undefined
+
+    return tryWithSuspend(
+      () => generateJwt(client, playbackId, 'd'),
+      (e: Error) => {
+        setError(e)
+        return undefined
+      }
+    )
+  }, [client, muxPlaybackId?.policy, playbackId])
+  const tokens:
+    | Partial<{
+        playback?: string
+        thumbnail?: string
+        storyboard?: string
+        drm?: string
+      }>
+    | undefined = useMemo(() => {
+    try {
+      const partialTokens: {
+        playback?: string
+        thumbnail?: string
+        storyboard?: string
+        drm?: string
+      } = {
+        playback: undefined,
+        thumbnail: undefined,
+        storyboard: undefined,
+        drm: undefined,
+      }
+
+      if (signedToken) {
+        partialTokens.playback = signedToken
+        partialTokens.thumbnail = signedToken
+        partialTokens.storyboard = signedToken
+      }
+
+      if (drmToken) {
+        partialTokens.drm = drmToken
+      }
+
+      return {...partialTokens}
+    } catch {
+      return undefined
     }
-  }, [videoSrc])
+  }, [signedToken, drmToken])
 
   const [width, height] = (asset?.data?.aspect_ratio ?? '16:9').split(':').map(Number)
   const targetAspectRatio =
@@ -71,6 +144,8 @@ export default function VideoPlayer({
       : AUDIO_ASPECT_RATIO
   }
 
+  /* We use Suspense here because `generateJwt` and related functions use suspend()
+   under the hood */
   return (
     <>
       <Card
@@ -81,7 +156,7 @@ export default function VideoPlayer({
           ...(isAudio && {display: 'flex', alignItems: 'flex-end'}),
         }}
       >
-        {videoSrc && (
+        {src && poster && (
           <>
             {isAudio && (
               <AudioIcon
@@ -96,35 +171,33 @@ export default function VideoPlayer({
                 }}
               />
             )}
-            <MuxPlayer
-              poster={isAudio ? undefined : thumbnailSrc}
-              ref={muxPlayer}
-              {...props}
-              playsInline
-              playbackId={asset.playbackId}
-              tokens={
-                signedToken
-                  ? {playback: signedToken, thumbnail: signedToken, storyboard: signedToken}
-                  : undefined
-              }
-              preload="metadata"
-              crossOrigin="anonymous"
-              metadata={{
-                player_name: 'Sanity Admin Dashboard',
-                player_version: process.env.PKG_VERSION,
-                page_type: 'Preview Player',
-              }}
-              audio={isAudio}
-              _hlsConfig={hlsConfig}
-              style={{
-                ...(!isAudio && {height: '100%'}),
-                width: '100%',
-                display: 'block',
-                objectFit: 'contain',
-                ...(isAudio && {alignSelf: 'end'}),
-              }}
-            />
-            {children}
+            <Suspense fallback={null}>
+              <MuxPlayer
+                poster={isAudio ? undefined : poster}
+                ref={muxPlayer}
+                {...props}
+                playsInline
+                playbackId={playbackId}
+                tokens={tokens}
+                preload="metadata"
+                crossOrigin="anonymous"
+                metadata={{
+                  player_name: 'Sanity Admin Dashboard',
+                  player_version: process.env.PKG_VERSION,
+                  page_type: 'Preview Player',
+                }}
+                audio={isAudio}
+                _hlsConfig={hlsConfig}
+                style={{
+                  ...(!isAudio && {height: '100%'}),
+                  width: '100%',
+                  display: 'block',
+                  objectFit: 'contain',
+                  ...(isAudio && {alignSelf: 'end'}),
+                }}
+              />
+              {children}
+            </Suspense>
           </>
         )}
         {error ? (

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,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>
   )
 }