sanity-plugin-mux-input 2.14.0 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",

package/src/_exports/index.ts

@@ -14,6 +14,7 @@ export const defaultConfig: PluginConfig = {
   normalize_audio: false,
   defaultPublic: true,
   defaultSigned: false,
+  defaultDrm: false,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: [],
   acceptedMimeTypes: ['video/*', 'audio/*'],

package/src/actions/secrets.ts

@@ -9,6 +9,7 @@ interface SecretsDocument {
   enableSignedUrls: boolean
   signingKeyId: string
   signingKeyPrivate: string
+  drmConfigId: string
 }
 // eslint-disable-next-line max-params
 export function saveSecrets(
@@ -17,7 +18,8 @@ export function saveSecrets(
   secretKey: string,
   enableSignedUrls: boolean,
   signingKeyId: string,
-  signingKeyPrivate: string
+  signingKeyPrivate: string,
+  drmConfigId: string
 ): Promise<SecretsDocument> {
   const doc: SecretsDocument = {
     _id: 'secrets.mux',
@@ -27,7 +29,10 @@ export function saveSecrets(
     enableSignedUrls,
     signingKeyId,
     signingKeyPrivate,
+    drmConfigId,
   }
+  doc.signingKeyId = enableSignedUrls ? signingKeyId : ''
+  doc.signingKeyPrivate = enableSignedUrls ? signingKeyPrivate : ''
 
   return client.createOrReplace(doc)
 }

package/src/actions/upload.ts

@@ -158,7 +158,7 @@ type UploadResponse = {
     new_asset_settings: {
       static_renditions?: {resolution: string}[]
       passthrough: string
-      playback_policies: ['public' | 'signed']
+      playback_policies: ['public' | 'signed' | 'drm']
     }
     status: string
     timeout: number

package/src/components/ConfigureApi.tsx

@@ -32,7 +32,7 @@ export interface ConfigureApiDialogProps {
   secrets: Secrets
 }
 
-const fieldNames = ['token', 'secretKey', 'enableSignedUrls'] as const
+const fieldNames = ['token', 'secretKey', 'enableSignedUrls', 'drmConfigId'] as const
 
 // Internal dialog component that can be used with external state
 export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialogProps) {
@@ -44,11 +44,12 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
     () =>
       secrets.token !== state.token ||
       secrets.secretKey !== state.secretKey ||
-      secrets.enableSignedUrls !== state.enableSignedUrls,
+      secrets.enableSignedUrls !== state.enableSignedUrls ||
+      secrets.drmConfigId !== state.drmConfigId,
     [secrets, state]
   )
   const id = `ConfigureApi${useId()}`
-  const [tokenId, secretKeyId, enableSignedUrlsId] = useMemo<typeof fieldNames>(
+  const [tokenId, secretKeyId, enableSignedUrlsId, drmConfigIdId] = useMemo<typeof fieldNames>(
     () => fieldNames.map((field) => `${id}-${field}`) as unknown as typeof fieldNames,
     [id]
   )
@@ -63,8 +64,8 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
       if (!saving.current && event.currentTarget.reportValidity()) {
         saving.current = true
         dispatch({type: 'submit'})
-        const {token, secretKey, enableSignedUrls} = state
-        handleSaveSecrets({token, secretKey, enableSignedUrls})
+        const {token, secretKey, enableSignedUrls, drmConfigId} = state
+        handleSaveSecrets({token, secretKey, enableSignedUrls, drmConfigId})
           .then((savedSecrets) => {
             const {projectId, dataset} = client.config()
             clear([cacheNs, secretsId, projectId, dataset])
@@ -106,6 +107,15 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
     },
     [dispatch]
   )
+  const handleChangeDrmConfigId = useCallback(
+    (event: React.FormEvent<HTMLInputElement>) => {
+      dispatch({
+        type: 'change',
+        payload: {name: 'drmConfigId', value: event.currentTarget.value},
+      })
+    },
+    [dispatch]
+  )
 
   useEffect(() => {
     if (firstField.current) {
@@ -202,6 +212,42 @@ export function ConfigureApiDialog({secrets, setDialogState}: ConfigureApiDialog
               ) : null}
             </Stack>
 
+            <FormField title="DRM Configuration ID" inputId={drmConfigIdId}>
+              <TextInput
+                id={drmConfigIdId}
+                onChange={handleChangeDrmConfigId}
+                type="text"
+                value={state.drmConfigId ?? ''}
+                required={false}
+              />
+            </FormField>
+            <Card padding={[3, 3, 3]} radius={2} shadow={1} tone="neutral">
+              <Stack space={3}>
+                <Text size={1}>
+                  DRM (Digital Rights Management) provides an extra layer of content security for
+                  video content streamed from Mux. For additional information check out our{' '}
+                  <a
+                    href="https://www.mux.com/docs/guides/protect-videos-with-drm#play-drm-protected-videos"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    DRM Guide
+                  </a>
+                  .
+                </Text>
+                <Text size={1}>
+                  <a
+                    href="https://www.mux.com/support/human"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Contact us
+                  </a>{' '}
+                  to get started using DRM.
+                </Text>
+              </Stack>
+            </Card>
+
             <Inline space={2}>
               <Button
                 text="Save"

package/src/components/EditCaptionDialog.tsx

@@ -18,7 +18,7 @@ import {useEffect, useId, useRef, useState} from 'react'
 import {addTextTrackFromUrl, deleteTextTrack, getAsset} from '../actions/assets'
 import {useClient} from '../hooks/useClient'
 import {generateJwt} from '../util/generateJwt'
-import {getPlaybackId} from '../util/getPlaybackId'
+import {getPlaybackId} from '../util/getPlaybackPolicy'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
 import {downloadVttFile, extractErrorMessage, pollTrackStatus} from '../util/textTracks'
 import type {MuxTextTrack, VideoAssetDocument} from '../util/types'
@@ -276,7 +276,7 @@ export default function EditCaptionDialog({asset, track, onUpdate, onClose}: Pro
         const playbackId = getPlaybackId(asset)
         if (!playbackId) return ''
         let url = `https://stream.mux.com/${playbackId}/text/${track.id}.vtt`
-        if (getPlaybackPolicy(asset) === 'signed') {
+        if (getPlaybackPolicy(asset)?.policy === 'signed') {
           const token = generateJwt(client, playbackId, 'v')
           url += `?token=${token}`
         }

package/src/components/InputBrowser.tsx

@@ -16,7 +16,8 @@ export default function InputBrowser({
   setDialogState,
   asset,
   onChange,
-}: Pick<SelectAssetProps, 'onChange' | 'asset'> & {
+  config,
+}: Pick<SelectAssetProps, 'onChange' | 'asset' | 'config'> & {
   setDialogState: SetDialogState
 }) {
   const id = `InputBrowser${useId()}`
@@ -29,7 +30,12 @@ export default function InputBrowser({
       onClose={handleClose}
       width={2}
     >
-      <SelectAsset asset={asset} onChange={onChange} setDialogState={setDialogState} />
+      <SelectAsset
+        config={config}
+        asset={asset}
+        onChange={onChange}
+        setDialogState={setDialogState}
+      />
     </StyledDialog>
   )
 }

package/src/components/PageSelector.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-shadow */
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
 import {Button, Label} from '@sanity/ui'
 import {Dispatch, SetStateAction, useEffect} from 'react'
@@ -7,8 +6,6 @@ const PageSelector = (props: {
   page: number
   setPage: Dispatch<SetStateAction<number>>
   total: number
-  // eslint-disable-next-line react/no-unused-prop-types
-  limit: number
 }) => {
   const page = props.page
   const setPage = props.setPage
@@ -30,8 +27,8 @@ const PageSelector = (props: {
         style={{cursor: 'pointer'}}
         disabled={page <= 0}
         onClick={() => {
-          setPage((page) => {
-            return Math.min(props.total - 1, Math.max(0, page - 1))
+          setPage((p) => {
+            return Math.min(props.total - 1, Math.max(0, p - 1))
           })
         }}
       />
@@ -45,8 +42,8 @@ const PageSelector = (props: {
         style={{cursor: 'pointer'}}
         disabled={page >= props.total - 1}
         onClick={() => {
-          setPage((page) => {
-            return Math.min(props.total - 1, Math.max(0, page + 1))
+          setPage((p) => {
+            return Math.min(props.total - 1, Math.max(0, p + 1))
           })
         }}
       />

package/src/components/Player.styled.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {Suspense, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
@@ -46,5 +46,10 @@ export function ThumbnailsMetadataTrack({asset}: ThumbnailsMetadataTrackProps) {
   // Why useState instead of useMemo? Because we really really only want to run it exactly once and useMemo doesn't make that guarantee
   const [src] = useState<string>(() => getStoryboardSrc({asset, client}))
 
-  return <track label="thumbnails" default kind="metadata" src={src} />
+  return (
+    /* We use Suspense here because `getStoryboardSrc` uses suspend() under the hood */
+    <Suspense fallback={null}>
+      <track label="thumbnails" default kind="metadata" src={src} />
+    </Suspense>
+  )
 }

package/src/components/PlayerActionsMenu.tsx

@@ -64,7 +64,7 @@ function PlayerActionsMenu(
   const {asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept} = props
   const [open, setOpen] = useState(false)
   const [menuElement, setMenuRef] = useState<HTMLDivElement | null>(null)
-  const isSigned = useMemo(() => getPlaybackPolicy(asset) === 'signed', [asset])
+  const isSigned = useMemo(() => getPlaybackPolicy(asset)?.policy === 'signed', [asset])
   const {hasConfigAccess} = useAccessControl(props.config)
 
   const onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange])

package/src/components/SelectAsset.tsx

@@ -2,15 +2,21 @@ import {useCallback} from 'react'
 import {PatchEvent, set, setIfMissing, unset} from 'sanity'
 
 import type {SetDialogState} from '../hooks/useDialogState'
-import type {MuxInputProps, VideoAssetDocument} from '../util/types'
+import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
 import VideosBrowser, {type VideosBrowserProps} from './VideosBrowser'
 
 export interface Props extends Pick<MuxInputProps, 'onChange'> {
   asset?: VideoAssetDocument | null | undefined
   setDialogState: SetDialogState
+  config: PluginConfig
 }
 
-export default function SelectAssets({asset: selectedAsset, onChange, setDialogState}: Props) {
+export default function SelectAssets({
+  asset: selectedAsset,
+  onChange,
+  setDialogState,
+  config,
+}: Props) {
   const handleSelect = useCallback<Required<VideosBrowserProps>['onSelect']>(
     (chosenAsset) => {
       if (!chosenAsset?._id) {
@@ -29,5 +35,5 @@ export default function SelectAssets({asset: selectedAsset, onChange, setDialogS
     [onChange, setDialogState, selectedAsset]
   )
 
-  return <VideosBrowser onSelect={handleSelect} />
+  return <VideosBrowser onSelect={handleSelect} config={config} />
 }

package/src/components/StudioTool.tsx

@@ -4,8 +4,8 @@ import type {PluginConfig} from '../util/types'
 import ToolIcon from './icons/ToolIcon'
 import VideosBrowser from './VideosBrowser'
 
-const StudioTool: React.FC<PluginConfig> = () => {
-  return <VideosBrowser />
+const StudioTool: React.FC<PluginConfig> = (config) => {
+  return <VideosBrowser config={config} />
 }
 
 export const DEFAULT_TOOL_CONFIG = {