sanity-plugin-mux-input 2.14.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.14.0",
+  "version": "2.16.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

@@ -5,6 +5,7 @@ import {
   PlugIcon,
   ResetIcon,
   SearchIcon,
+  SyncIcon,
   TranslateIcon,
   UploadIcon,
 } from '@sanity/icons'
@@ -28,6 +29,7 @@ import {styled} from 'styled-components'
 
 import {useAccessControl} from '../hooks/useAccessControl'
 import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
+import {useResyncAsset} from '../hooks/useResyncAsset'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
 import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
 import {FileInputMenuItem} from './FileInputMenuItem'
@@ -64,11 +66,17 @@ 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 {resyncAsset, isResyncing} = useResyncAsset({showToast: true})
 
   const onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange])
 
+  const handleResync = useCallback(async () => {
+    setOpen(false)
+    await resyncAsset(asset)
+  }, [resyncAsset, asset])
+
   useEffect(() => {
     if (open && dialogState) {
       setOpen(false)
@@ -134,6 +142,12 @@ function PlayerActionsMenu(
                   text="Captions"
                   onClick={() => setDialogState('edit-captions')}
                 />
+                <MenuItem
+                  icon={SyncIcon}
+                  text="Resync from Mux"
+                  onClick={handleResync}
+                  disabled={readOnly || isResyncing}
+                />
               </>
             )}
             <MenuDivider />

package/src/components/ResyncMetadata.tsx

@@ -1,28 +1,106 @@
 import {CheckmarkCircleIcon, ErrorOutlineIcon, SyncIcon} from '@sanity/icons'
-import {Box, Button, Card, Dialog, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+import {Box, Button, Card, Dialog, Flex, Heading, Radio, Spinner, Stack, Text} from '@sanity/ui'
+import {useState} from 'react'
 
 import useResyncMuxMetadata from '../hooks/useResyncMuxMetadata'
 import {isEmptyOrPlaceholderTitle} from '../util/assetTitlePlaceholder'
 import {DIALOGS_Z_INDEX} from '../util/constants'
 
-// eslint-disable-next-line complexity
+type SyncOption = 'fillEmpty' | 'syncTitles' | 'fullResync'
+
+interface OptionCardProps {
+  id: SyncOption
+  selected: boolean
+  onSelect: (id: SyncOption) => void
+  title: string
+  count: number
+  description: string
+  disabled?: boolean
+}
+
+function OptionCard({
+  id,
+  selected,
+  onSelect,
+  title,
+  count,
+  description,
+  disabled,
+}: OptionCardProps) {
+  return (
+    <Card
+      as="label"
+      padding={3}
+      radius={2}
+      border
+      tone={selected ? 'primary' : 'default'}
+      style={{
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      <Flex gap={3} align="flex-start">
+        <Box paddingTop={1}>
+          <Radio
+            checked={selected}
+            onChange={() => onSelect(id)}
+            disabled={disabled}
+            name="sync-option"
+          />
+        </Box>
+        <Stack space={2} flex={1}>
+          <Flex align="center" gap={2}>
+            <Text size={2} weight="semibold">
+              {title} ({count})
+            </Text>
+          </Flex>
+          <Text size={1} muted>
+            {description}
+          </Text>
+        </Stack>
+      </Flex>
+    </Card>
+  )
+}
+
 function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
   const {resyncState} = props
 
-  const canTriggerResync = resyncState === 'idle' || resyncState === 'error'
-  const isResyncing = resyncState === 'syncing'
-  const isDone = resyncState === 'done'
-
   const videosToUpdate = props.matchedAssets?.filter((m) => m.muxAsset).length || 0
   const videosWithEmptyOrPlaceholder =
     props.matchedAssets?.filter(
       (m) => m.muxAsset && m.muxTitle && isEmptyOrPlaceholderTitle(m.currentTitle, m.muxAsset.id)
     ).length || 0
 
+  const hasEmptyTitles = videosWithEmptyOrPlaceholder > 0
+  const defaultOption: SyncOption = hasEmptyTitles ? 'fillEmpty' : 'syncTitles'
+  const [selectedOption, setSelectedOption] = useState<SyncOption>(defaultOption)
+
+  const canTriggerResync = resyncState === 'idle' || resyncState === 'error'
+  const isResyncing = resyncState === 'syncing'
+  const isDone = resyncState === 'done'
+  const isLoading = props.muxAssets.loading || props.sanityAssetsLoading
+
+  const handleSync = () => {
+    switch (selectedOption) {
+      case 'fillEmpty':
+        props.syncOnlyEmpty()
+        break
+      case 'syncTitles':
+        props.syncAllVideos()
+        break
+      case 'fullResync':
+        props.syncFullData()
+        break
+      default:
+        break
+    }
+  }
+
   return (
     <Dialog
       animate
-      header={'Resync Metadata from Mux'}
+      header="Sync with Mux"
       zOffset={DIALOGS_Z_INDEX}
       id="resync-metadata-dialog"
       onClose={props.closeDialog}
@@ -32,40 +110,25 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
       footer={
         !isDone && (
           <Card padding={3}>
-            <Flex justify="space-between" align="center">
+            <Flex justify="flex-end" gap={2}>
               <Button
                 fontSize={2}
                 padding={3}
                 mode="ghost"
                 text="Cancel"
-                tone="critical"
                 onClick={props.closeDialog}
                 disabled={isResyncing}
               />
-              <Flex gap={2}>
-                {videosWithEmptyOrPlaceholder > 0 && (
-                  <Button
-                    fontSize={2}
-                    padding={3}
-                    mode="ghost"
-                    text={`Update empty (${videosWithEmptyOrPlaceholder})`}
-                    tone="caution"
-                    onClick={props.syncOnlyEmpty}
-                    disabled={isResyncing || !canTriggerResync}
-                  />
-                )}
-                <Button
-                  icon={SyncIcon}
-                  fontSize={2}
-                  padding={3}
-                  mode="ghost"
-                  text={`Update all (${videosToUpdate})`}
-                  tone="positive"
-                  onClick={props.syncAllVideos}
-                  iconRight={isResyncing && Spinner}
-                  disabled={!canTriggerResync}
-                />
-              </Flex>
+              <Button
+                icon={SyncIcon}
+                fontSize={2}
+                padding={3}
+                text="Run sync"
+                tone="primary"
+                onClick={handleSync}
+                iconRight={isResyncing && Spinner}
+                disabled={!canTriggerResync || isLoading}
+              />
             </Flex>
           </Card>
         )
@@ -73,15 +136,17 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
     >
       <Box padding={4}>
         {/* LOADING ASSETS STATE */}
-        {(props.muxAssets.loading || props.sanityAssetsLoading) && (
-          <Card tone="primary" marginBottom={5} padding={3} border>
+        {isLoading && (
+          <Card tone="primary" marginBottom={4} padding={3} border radius={2}>
             <Flex align="center" gap={4}>
               <Spinner muted size={4} />
               <Stack space={2}>
                 <Text size={2} weight="semibold">
                   Loading assets from Mux
                 </Text>
-                <Text size={1}>This may take a while.</Text>
+                <Text size={1} muted>
+                  This may take a while.
+                </Text>
               </Stack>
             </Flex>
           </Card>
@@ -89,7 +154,7 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
 
         {/* ERROR LOADING MUX */}
         {props.muxAssets.error && (
-          <Card tone="critical" marginBottom={5} padding={3} border>
+          <Card tone="critical" marginBottom={4} padding={3} border radius={2}>
             <Flex align="center" gap={2}>
               <ErrorOutlineIcon fontSize={36} />
               <Stack space={2}>
@@ -104,14 +169,16 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
 
         {/* SYNCING STATE */}
         {resyncState === 'syncing' && (
-          <Card tone="primary" marginBottom={5} padding={3} border>
+          <Card tone="primary" marginBottom={4} padding={3} border radius={2}>
             <Flex align="center" gap={4}>
               <Spinner muted size={4} />
               <Stack space={2}>
                 <Text size={2} weight="semibold">
-                  Updating video metadata
+                  Syncing metadata
+                </Text>
+                <Text size={1} muted>
+                  Updating videos from Mux...
                 </Text>
-                <Text size={1}>Syncing titles from Mux...</Text>
               </Stack>
             </Flex>
           </Card>
@@ -119,7 +186,7 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
 
         {/* ERROR SYNCING */}
         {resyncState === 'error' && (
-          <Card tone="critical" marginBottom={5} padding={3} border>
+          <Card tone="critical" marginBottom={4} padding={3} border radius={2}>
             <Flex align="center" gap={2}>
               <ErrorOutlineIcon fontSize={36} />
               <Stack space={2}>
@@ -138,45 +205,57 @@ function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
 
         {/* SUCCESS STATE */}
         {resyncState === 'done' && (
-          <Stack paddingY={5} marginBottom={4} space={3} style={{textAlign: 'center'}}>
+          <Stack paddingY={5} space={3} style={{textAlign: 'center'}}>
             <Box>
               <CheckmarkCircleIcon fontSize={48} />
             </Box>
-            <Heading size={2}>Metadata synced successfully</Heading>
-            <Text size={2}>All video titles have been updated from Mux.</Text>
+            <Heading size={2}>Sync completed</Heading>
+            <Text size={2} muted>
+              Videos have been updated from Mux.
+            </Text>
           </Stack>
         )}
 
-        {/* CONFIRMATION MESSAGE */}
-        {resyncState === 'idle' && !props.muxAssets.loading && !props.sanityAssetsLoading && (
+        {/* OPTIONS */}
+        {!isDone && !isLoading && !props.muxAssets.error && (
           <Stack space={4}>
-            <Heading size={1}>
-              There {videosToUpdate === 1 ? 'is' : 'are'} {videosToUpdate} video
-              {videosToUpdate === 1 ? '' : 's'} with Mux metadata
-            </Heading>
-            <Text size={2}>
-              This will update video titles in Sanity to match those in Mux. No new videos will be
-              created.
+            <Text size={1} muted>
+              Found {videosToUpdate} video{videosToUpdate === 1 ? '' : 's'} linked to Mux.
             </Text>
-            {videosWithEmptyOrPlaceholder > 0 && (
-              <Card padding={3} tone="caution" border>
-                <Flex align="flex-start" gap={2}>
-                  <Box>
-                    <ErrorOutlineIcon />
-                  </Box>
-                  <Stack space={2}>
-                    <Text size={2} weight="semibold">
-                      Videos with empty or placeholder titles
-                    </Text>
-                    <Text size={1} muted>
-                      {videosWithEmptyOrPlaceholder} video
-                      {videosWithEmptyOrPlaceholder === 1 ? '' : 's'} without titles or with
-                      placeholder titles (e.g., &quot;Asset #123&quot;) can be updated selectively.
-                    </Text>
-                  </Stack>
-                </Flex>
-              </Card>
-            )}
+
+            <Stack space={3}>
+              {hasEmptyTitles && (
+                <OptionCard
+                  id="fillEmpty"
+                  selected={selectedOption === 'fillEmpty'}
+                  onSelect={setSelectedOption}
+                  title="Fill missing titles only"
+                  count={videosWithEmptyOrPlaceholder}
+                  description="Updates only videos without a title or with placeholder titles (e.g., 'Asset #123') using the title from Mux."
+                  disabled={isResyncing}
+                />
+              )}
+
+              <OptionCard
+                id="syncTitles"
+                selected={selectedOption === 'syncTitles'}
+                onSelect={setSelectedOption}
+                title="Sync all titles"
+                count={videosToUpdate}
+                description="Replaces the title in Sanity with the title from Mux for all videos."
+                disabled={isResyncing}
+              />
+
+              <OptionCard
+                id="fullResync"
+                selected={selectedOption === 'fullResync'}
+                onSelect={setSelectedOption}
+                title="Full resync"
+                count={videosToUpdate}
+                description="Updates all fields from Mux including status, duration, tracks, captions, and renditions."
+                disabled={isResyncing}
+              />
+            </Stack>
           </Stack>
         )}
       </Box>
@@ -197,5 +276,5 @@ export default function ResyncMetadata() {
   }
 
   // eslint-disable-next-line consistent-return
-  return <Button mode="bleed" text="Resync Metadata" onClick={resyncMetadata.openDialog} />
+  return <Button mode="bleed" text="Sync with Mux" onClick={resyncMetadata.openDialog} />
 }

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 = {