sanity-plugin-mux-input 2.13.0 → 2.15.0

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}),
     })
   }
 
@@ -297,6 +307,13 @@ export default function Uploader(props: Props) {
 
   // Stages and validates an upload from pasting an asset URL
   const handlePaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    const target = event.target as HTMLElement
+
+    // Ignore paste coming from the VTT URL input
+    if (target.closest('#vtt-url')) {
+      return
+    }
+
     event.preventDefault()
     event.stopPropagation()
     const clipboardData =
@@ -365,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>
@@ -373,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>
         )}
@@ -464,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}

package/src/components/VideoDetails/VideoDetails.tsx

@@ -27,10 +27,12 @@ import {
 import React, {useEffect, useState} from 'react'
 
 import {DIALOGS_Z_INDEX} from '../../util/constants'
+import {MuxPlaybackId, MuxTextTrack, PlaybackPolicy} from '../../util/types'
 import FormField from '../FormField'
 import IconInfo from '../IconInfo'
 import {ResolutionIcon} from '../icons/Resolution'
 import {StopWatchIcon} from '../icons/StopWatch'
+import TextTracksManager from '../TextTracksManager'
 import VideoPlayer from '../VideoPlayer'
 import DeleteDialog from './DeleteDialog'
 import useVideoDetails, {VideoDetailsProps} from './useVideoDetails'
@@ -203,6 +205,20 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
         >
           <Stack space={4} flex={1} sizing="border">
             <VideoPlayer asset={props.asset} autoPlay={props.asset.autoPlay || false} />
+            {tab === 'details' && (
+              <TextTracksManager
+                asset={props.asset}
+                iconOnly
+                collapseTracks
+                tracks={
+                  displayInfo?.text_tracks ||
+                  props.asset.data?.tracks?.filter(
+                    (track): track is MuxTextTrack => track.type === 'text'
+                  ) ||
+                  []
+                }
+              />
+            )}
           </Stack>
           <Stack space={4} flex={1} sizing="border">
             <TabList space={2}>
@@ -279,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>
@@ -303,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,14 +2,19 @@ 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'
 import {AudioIcon} from './icons/Audio'
 
@@ -32,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 =
@@ -70,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
@@ -80,7 +156,7 @@ export default function VideoPlayer({
           ...(isAudio && {display: 'flex', alignItems: 'flex-end'}),
         }}
       >
-        {videoSrc && (
+        {src && poster && (
           <>
             {isAudio && (
               <AudioIcon
@@ -95,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 ? (
@@ -149,6 +223,7 @@ export default function VideoPlayer({
       {dialogState === 'edit-thumbnail' && (
         <EditThumbnailDialog asset={asset} currentTime={muxPlayer?.current?.currentTime} />
       )}
+      {dialogState === 'edit-captions' && <CaptionsDialog asset={asset} />}
     </>
   )
 }