sanity-plugin-mux-input 2.12.1 → 2.14.0

package/src/components/UploadConfiguration.tsx

@@ -1,4 +1,4 @@
-import {DocumentVideoIcon, UploadIcon} from '@sanity/icons'
+import {DocumentVideoIcon, ErrorOutlineIcon, UploadIcon} from '@sanity/icons'
 import {Box, Button, Card, Checkbox, Dialog, Flex, Label, Radio, Stack, Text} from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
 import LanguagesList from 'iso-639-1'
@@ -6,6 +6,7 @@ import {useEffect, useId, useMemo, useReducer, useRef, useState} from 'react'
 import {FormField} from 'sanity'
 
 import formatBytes from '../util/formatBytes'
+import {formatSeconds} from '../util/formatSeconds'
 import {
   type AutogeneratedTextTrack,
   type CustomTextTrack,
@@ -190,6 +191,138 @@ export default function UploadConfiguration({
     isAdvancedMode ? 'advanced' : 'standard'
   )
 
+  // Video validations
+  const [videoDuration, setVideoDuration] = useState<number | null>(null)
+  const [urlFileSize, setUrlFileSize] = useState<number | null>(null)
+  const [isLoadingDuration, setIsLoadingDuration] = useState(false)
+  const [isLoadingFileSize, setIsLoadingFileSize] = useState(false)
+  const [validationError, setValidationError] = useState<string | null>(null)
+  const [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = useState(false)
+
+  const MAX_FILE_SIZE = pluginConfig.maxAssetFileSize
+  const MAX_DURATION_SECONDS = pluginConfig.maxAssetDuration
+
+  useEffect(() => {
+    setVideoDuration(null)
+    setUrlFileSize(null)
+    setIsLoadingDuration(false)
+    setIsLoadingFileSize(false)
+    setValidationError(null)
+    setCanSkipFileSizeValidation(false)
+
+    let videoElement: HTMLVideoElement | null = null
+    let currentVideoSrc: string | null = null
+
+    const cleanupVideo = (shouldRevokeUrl: boolean) => {
+      if (videoElement) {
+        videoElement.onloadedmetadata = null
+        videoElement.onerror = null
+        videoElement.src = ''
+        videoElement.load()
+        videoElement = null
+      }
+      if (shouldRevokeUrl && currentVideoSrc?.startsWith('blob:')) {
+        URL.revokeObjectURL(currentVideoSrc)
+      }
+      currentVideoSrc = null
+    }
+
+    const validateDuration = (videoSrc: string, shouldRevokeUrl = false) => {
+      if (!MAX_DURATION_SECONDS || MAX_DURATION_SECONDS <= 0) return
+
+      setIsLoadingDuration(true)
+      videoElement = document.createElement('video')
+      videoElement.preload = 'metadata'
+      currentVideoSrc = videoSrc
+
+      videoElement.onloadedmetadata = () => {
+        const duration = videoElement!.duration
+        setVideoDuration(duration)
+        setIsLoadingDuration(false)
+
+        if (duration > MAX_DURATION_SECONDS) {
+          setValidationError(
+            `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`
+          )
+        }
+
+        cleanupVideo(shouldRevokeUrl)
+      }
+
+      videoElement.onerror = () => {
+        setIsLoadingDuration(false)
+        console.warn('Could not read video metadata for validation')
+        cleanupVideo(shouldRevokeUrl)
+      }
+
+      videoElement.src = videoSrc
+    }
+
+    const validateFileSize = (size: number): boolean => {
+      if (MAX_FILE_SIZE === undefined || size <= MAX_FILE_SIZE) {
+        return true
+      }
+
+      setValidationError(
+        `File size (${formatBytes(size)}) exceeds maximum allowed size of ${formatBytes(MAX_FILE_SIZE)}`
+      )
+      return false
+    }
+
+    // Validate file uploads
+    if (stagedUpload.type === 'file') {
+      const file = stagedUpload.files[0]
+      if (validateFileSize(file.size)) {
+        validateDuration(URL.createObjectURL(file), true)
+      }
+    }
+
+    // Validate URL uploads
+    if (stagedUpload.type === 'url') {
+      const url = stagedUpload.url
+
+      // Get file size from URL
+      const fetchFileSize = async () => {
+        setIsLoadingFileSize(true)
+        try {
+          const response = await fetch(url, {method: 'HEAD'})
+          const contentLength = response.headers.get('content-length')
+          const fileSize = contentLength ? parseInt(contentLength, 10) : null
+
+          setIsLoadingFileSize(false)
+          if (fileSize) {
+            setUrlFileSize(fileSize)
+          }
+
+          // Validate file size if limit is configured and size is available
+          const shouldValidateDuration =
+            MAX_FILE_SIZE === undefined || fileSize === null || validateFileSize(fileSize)
+
+          if (fileSize === null && MAX_FILE_SIZE !== undefined) {
+            // Size unknown but size limit is configured - skip file size validation
+            setCanSkipFileSizeValidation(true)
+          }
+
+          if (shouldValidateDuration) {
+            validateDuration(url)
+          }
+        } catch {
+          setIsLoadingFileSize(false)
+          console.warn('Could not validate file size from URL')
+          // Skip validation of file size, but still validate duration
+          setCanSkipFileSizeValidation(true)
+          validateDuration(url)
+        }
+      }
+
+      fetchFileSize()
+    }
+
+    return () => {
+      cleanupVideo(true)
+    }
+  }, [stagedUpload, MAX_FILE_SIZE, MAX_DURATION_SECONDS])
+
   // Helper to toggle a rendition
   const toggleRendition = (rendition: StaticRenditionResolution) => {
     const current = config.static_renditions
@@ -252,6 +385,19 @@ export default function UploadConfiguration({
       onClose={onClose}
     >
       <Stack padding={4} space={2}>
+        {validationError && (
+          <Card padding={3} tone="critical" radius={2} marginBottom={2}>
+            <Flex gap={2} align="flex-start">
+              <ErrorOutlineIcon width={20} height={20} />
+              <Stack space={2}>
+                <Text size={1} weight="semibold">
+                  Validation Error
+                </Text>
+                <Text size={1}>{validationError}</Text>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
         <Label size={3}>FILE TO UPLOAD</Label>
         <Card
           tone="transparent"
@@ -269,8 +415,30 @@ export default function UploadConfiguration({
               <Text as="p" size={1} muted>
                 {stagedUpload.type === 'file'
                   ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})`
-                  : 'File From URL (Unknown size)'}
+                  : (() => {
+                      if (urlFileSize) {
+                        return `File From URL (${formatBytes(urlFileSize)})`
+                      }
+                      if (isLoadingFileSize) {
+                        return 'File From URL (Loading size...)'
+                      }
+                      return 'File From URL (Unknown size)'
+                    })()}
               </Text>
+              {stagedUpload.type === 'file' && (
+                <Stack space={1}>
+                  {isLoadingDuration && (
+                    <Text as="p" size={1} muted>
+                      Reading video metadata...
+                    </Text>
+                  )}
+                  {videoDuration !== null && !validationError && (
+                    <Text as="p" size={1} muted>
+                      Duration: {formatSeconds(videoDuration)}
+                    </Text>
+                  )}
+                </Stack>
+              )}
             </Stack>
           </Flex>
         </Card>
@@ -488,11 +656,20 @@ export default function UploadConfiguration({
 
         <Box marginTop={4}>
           <Button
-            disabled={!basicConfig && !config.public_policy && !config.signed_policy}
+            disabled={
+              (!basicConfig && !config.public_policy && !config.signed_policy) ||
+              validationError !== null ||
+              isLoadingDuration ||
+              (isLoadingFileSize && !canSkipFileSizeValidation)
+            }
             icon={UploadIcon}
             text="Upload"
             tone="positive"
-            onClick={() => startUpload(formatUploadConfig(config))}
+            onClick={() => {
+              if (!validationError) {
+                startUpload(formatUploadConfig(config))
+              }
+            }}
           />
         </Box>
       </Stack>

package/src/components/UploadPlaceholder.tsx

@@ -1,12 +1,18 @@
-import {PlugIcon, SearchIcon, UploadIcon} from '@sanity/icons'
-import {DocumentVideoIcon} from '@sanity/icons'
+import {DocumentVideoIcon, PlugIcon, SearchIcon, UploadIcon} from '@sanity/icons'
 import {Button, Card, Flex, Inline, Text} from '@sanity/ui'
 import {useCallback} from 'react'
 
-import type {SetDialogState} from '../hooks/useDialogState'
-import {FileInputButton, type FileInputButtonProps} from './FileInputButton'
 import {useAccessControl} from '../hooks/useAccessControl'
+import type {SetDialogState} from '../hooks/useDialogState'
 import {PluginConfig} from '../util/types'
+import {FileInputButton, type FileInputButtonProps} from './FileInputButton'
+
+function formatAcceptString(accept: string): string {
+  return accept
+    .split(',')
+    .map((type) => type.trim().replace('/*', ''))
+    .join(' or ')
+}
 
 interface UploadPlaceholderProps {
   setDialogState: SetDialogState
@@ -15,9 +21,10 @@ interface UploadPlaceholderProps {
   needsSetup: boolean
   onSelect: FileInputButtonProps['onSelect']
   config: PluginConfig
+  accept: string
 }
 export default function UploadPlaceholder(props: UploadPlaceholderProps) {
-  const {setDialogState, readOnly, onSelect, hovering, needsSetup} = props
+  const {setDialogState, readOnly, onSelect, hovering, needsSetup, accept} = props
   const handleBrowse = useCallback(() => setDialogState('select-video'), [setDialogState])
   const handleConfigureApi = useCallback(() => setDialogState('secrets'), [setDialogState])
   const {hasConfigAccess} = useAccessControl(props.config)
@@ -48,12 +55,13 @@ export default function UploadPlaceholder(props: UploadPlaceholderProps) {
           </Flex>
           <Flex justify="center">
             <Text size={1} muted>
-              Drag video or paste URL here
+              Drag {formatAcceptString(accept)} file or paste URL here
             </Text>
           </Flex>
         </Flex>
         <Inline space={2}>
           <FileInputButton
+            accept={accept}
             mode="bleed"
             tone="default"
             icon={UploadIcon}

package/src/components/Uploader.styled.tsx

@@ -5,9 +5,6 @@ import {styled} from 'styled-components'
 
 import {withFocusRing} from './withFocusRing'
 
-const ctrlKey = 17
-const cmdKey = 91
-
 const UploadCardWithFocusRing = withFocusRing(Card)
 
 interface UploadCardProps {
@@ -21,22 +18,19 @@ interface UploadCardProps {
 }
 export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps>(
   ({children, tone, onPaste, onDrop, onDragEnter, onDragLeave, onDragOver}, forwardedRef) => {
-    const ctrlDown = useRef(false)
     const inputRef = useRef<HTMLInputElement>(null)
     const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>((event) => {
-      if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
-        ctrlDown.current = true
+      const target = event.target as HTMLElement
+
+      // Don't steal focus when pasting into the VTT input
+      if (target.closest('#vtt-url')) {
+        return
       }
-      const vKey = 86
-      if (ctrlDown.current && event.keyCode == vKey) {
+
+      if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         inputRef.current!.focus()
       }
     }, [])
-    const handleKeyUp = useCallback<React.KeyboardEventHandler<HTMLDivElement>>((event) => {
-      if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
-        ctrlDown.current = false
-      }
-    }, [])
 
     return (
       <UploadCardWithFocusRing
@@ -47,14 +41,13 @@ export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps>(
         shadow={0}
         tabIndex={0}
         onKeyDown={handleKeyDown}
-        onKeyUp={handleKeyUp}
         onPaste={onPaste}
         onDrop={onDrop}
         onDragEnter={onDragEnter}
         onDragLeave={onDragLeave}
         onDragOver={onDragOver}
       >
-        <HiddenInput ref={inputRef} onPaste={onPaste} />
+        <HiddenInput ref={inputRef} />
         {children}
       </UploadCardWithFocusRing>
     )

package/src/components/Uploader.tsx

@@ -1,6 +1,6 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Button, CardTone, Flex, Text, useToast} from '@sanity/ui'
-import React, {useEffect, useReducer, useRef, useState} from 'react'
+import React, {useCallback, useEffect, useReducer, useRef, useState} from 'react'
 import {type Observable, Subject, Subscription} from 'rxjs'
 import {takeUntil, tap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
@@ -66,7 +66,7 @@ type UploaderStateAction =
       | Extract<UploadUrlEvent, {type: 'url'}>
     ))
   | {action: 'progress'; percent: number}
-  | {action: 'error'; error: any}
+  | {action: 'error'; error: Error}
   | {action: 'complete' | 'reset'}
 
 /**
@@ -101,6 +101,7 @@ export default function Uploader(props: Props) {
         case 'commitUpload':
           return Object.assign({}, prev, {uploadStatus: {progress: 0}})
         case 'progressInfo': {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
           const {type, action: _, ...payload} = action
           return Object.assign({}, prev, {
             uploadStatus: {
@@ -257,12 +258,37 @@ export default function Uploader(props: Props) {
     })
   }
 
+  const invalidFileToast = useCallback(() => {
+    toast.push({
+      status: 'error',
+      title: `Invalid file type. Accepted types: ${props.config.acceptedMimeTypes?.join(', ')}`,
+    })
+  }, [props.config.acceptedMimeTypes, toast])
+
+  /**
+   * Validates if any file in the provided FileList or File array has an unsupported MIME type
+   * @param files - FileList or File array to validate
+   * @returns true if any file has an invalid MIME type, false if all files are valid
+   */
+  const isInvalidFile = (files: FileList | File[]) => {
+    const isInvalid = Array.from(files).some((file) => {
+      return !props.config.acceptedMimeTypes?.some((acceptedType) => {
+        // Convert mime type pattern to regex (e.g., 'audio/*' -> /^audio\/.*$/)
+        const pattern = `^${acceptedType.replace('*', '.*')}$`
+        return new RegExp(pattern).test(file.type)
+      })
+    })
+
+    return isInvalid
+  }
+
   /* -------------------------- Upload Initialization ------------------------- */
   // The below populate the uploadInput state field, which then triggers the
   // upload configuration, or the startUpload function if no config is required.
 
   // Stages an upload from the file selector
   const handleUpload = (files: FileList | File[]) => {
+    if (isInvalidFile(files)) return
     dispatch({
       action: 'stageUpload',
       input: {type: 'file', files},
@@ -271,10 +297,18 @@ 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 = event.clipboardData || (window as any).clipboardData
-    const url = clipboardData.getData('text')?.trim()
+    const clipboardData =
+      event.clipboardData || (window as Window & {clipboardData?: DataTransfer}).clipboardData
+    const url = clipboardData?.getData('text')?.trim()
     if (!isValidUrl(url)) {
       toast.push({status: 'error', title: 'Invalid URL for Mux video input.'})
       return
@@ -284,9 +318,14 @@ export default function Uploader(props: Props) {
 
   // Stages and validates an upload from dragging+dropping files or folders
   const handleDrop: React.DragEventHandler<HTMLDivElement> = (event) => {
-    setDragState(null)
     event.preventDefault()
     event.stopPropagation()
+    if (dragState === 'invalid') {
+      invalidFileToast()
+      setDragState(null)
+      return
+    }
+    setDragState(null)
     extractDroppedFiles(event.nativeEvent.dataTransfer!).then((files) => {
       dispatch({
         action: 'stageUpload',
@@ -306,7 +345,16 @@ export default function Uploader(props: Props) {
     event.stopPropagation()
     dragEnteredEls.current.push(event.target)
     const type = event.dataTransfer.items?.[0]?.type
-    setDragState(type?.startsWith('video/') ? 'valid' : 'invalid')
+    const mimeTypes = props.config.acceptedMimeTypes
+
+    // Check if the dragged file type matches any of the accepted mime types
+    const isValidType = mimeTypes?.some((acceptedType) => {
+      // Convert mime type pattern to regex (e.g., 'video/*' -> /^video\/.*$/)
+      const pattern = `^${acceptedType.replace('*', '.*')}$`
+      return new RegExp(pattern).test(type)
+    })
+
+    setDragState(isValidType ? 'valid' : 'invalid')
   }
 
   const handleDragLeave: React.DragEventHandler<HTMLDivElement> = (event) => {
@@ -370,6 +418,10 @@ export default function Uploader(props: Props) {
   let tone: CardTone | undefined
   if (dragState) tone = dragState === 'valid' ? 'positive' : 'critical'
 
+  const acceptMimeString = props.config?.acceptedMimeTypes?.length
+    ? props.config.acceptedMimeTypes.join(',')
+    : 'video/*, audio/*'
+
   return (
     <>
       <UploadCard
@@ -390,8 +442,10 @@ export default function Uploader(props: Props) {
               readOnly={props.readOnly}
               asset={props.asset}
               onChange={props.onChange}
+              config={props.config}
               buttons={
                 <PlayerActionsMenu
+                  accept={acceptMimeString}
                   asset={props.asset}
                   dialogState={props.dialogState}
                   setDialogState={props.setDialogState}
@@ -405,6 +459,7 @@ export default function Uploader(props: Props) {
           </DialogStateProvider>
         ) : (
           <UploadPlaceholder
+            accept={acceptMimeString}
             hovering={dragState !== null}
             onSelect={handleUpload}
             readOnly={!!props.readOnly}

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 type {MuxTextTrack} 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}>

package/src/components/VideoInBrowser.tsx

@@ -7,6 +7,7 @@ import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
 import {VideoAssetDocument} from '../util/types'
 import IconInfo from './IconInfo'
+import {AudioIcon} from './icons/Audio'
 import VideoMetadata from './VideoMetadata'
 import VideoPlayer, {assetIsAudio} from './VideoPlayer'
 import VideoThumbnail from './VideoThumbnail'
@@ -152,13 +153,7 @@ export default function VideoInBrowser({
                   justifyContent: 'center',
                 }}
               >
-                <svg xmlns="http://www.w3.org/2000/svg" width="3em" viewBox="0 0 24 24">
-                  <path
-                    fill="currentColor"
-                    style={{opacity: '0.65'}}
-                    d="M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
-                  />
-                </svg>
+                <AudioIcon width="3em" height="3em" />
               </div>
             ) : (
               <VideoThumbnail asset={asset} />

package/src/components/VideoPlayer.tsx

@@ -10,17 +10,23 @@ import {AUDIO_ASPECT_RATIO, MIN_ASPECT_RATIO} from '../util/constants'
 import {getPosterSrc} from '../util/getPosterSrc'
 import {getVideoSrc} from '../util/getVideoSrc'
 import type {VideoAssetDocument} from '../util/types'
+import CaptionsDialog from './CaptionsDialog'
 import EditThumbnailDialog from './EditThumbnailDialog'
+import {AudioIcon} from './icons/Audio'
 
 export default function VideoPlayer({
   asset,
   thumbnailWidth = 250,
   children,
+  hlsConfig,
   ...props
 }: PropsWithChildren<
-  {asset: VideoAssetDocument; thumbnailWidth?: number; forceAspectRatio?: number} & Partial<
-    Pick<MuxPlayerProps, 'autoPlay'>
-  >
+  {
+    asset: VideoAssetDocument
+    thumbnailWidth?: number
+    forceAspectRatio?: number
+    hlsConfig?: MuxPlayerProps['_hlsConfig']
+  } & Partial<Pick<MuxPlayerProps, 'autoPlay'>>
 >) {
   const client = useClient()
   const {dialogState} = useDialogStateContext()
@@ -67,11 +73,31 @@ export default function VideoPlayer({
 
   return (
     <>
-      <Card tone="transparent" style={{aspectRatio: aspectRatio, position: 'relative'}}>
+      <Card
+        tone="transparent"
+        style={{
+          aspectRatio: aspectRatio,
+          position: 'relative',
+          ...(isAudio && {display: 'flex', alignItems: 'flex-end'}),
+        }}
+      >
         {videoSrc && (
           <>
+            {isAudio && (
+              <AudioIcon
+                style={{
+                  padding: '0.5em',
+                  width: '2.2em',
+                  height: '2.2em',
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  zIndex: 1,
+                }}
+              />
+            )}
             <MuxPlayer
-              poster={thumbnailSrc}
+              poster={isAudio ? undefined : thumbnailSrc}
               ref={muxPlayer}
               {...props}
               playsInline
@@ -89,11 +115,13 @@ export default function VideoPlayer({
                 page_type: 'Preview Player',
               }}
               audio={isAudio}
+              _hlsConfig={hlsConfig}
               style={{
-                height: '100%',
+                ...(!isAudio && {height: '100%'}),
                 width: '100%',
                 display: 'block',
                 objectFit: 'contain',
+                ...(isAudio && {alignSelf: 'end'}),
               }}
             />
             {children}
@@ -122,6 +150,7 @@ export default function VideoPlayer({
       {dialogState === 'edit-thumbnail' && (
         <EditThumbnailDialog asset={asset} currentTime={muxPlayer?.current?.currentTime} />
       )}
+      {dialogState === 'edit-captions' && <CaptionsDialog asset={asset} />}
     </>
   )
 }

package/src/components/VideosBrowser.tsx

@@ -6,6 +6,7 @@ import useAssets from '../hooks/useAssets'
 import type {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'
@@ -19,12 +20,18 @@ export interface VideosBrowserProps {
 
 export default function VideosBrowser({onSelect}: 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 (
     <>
@@ -40,6 +47,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
               placeholder="Search videos"
             />
             <SelectSortOptions setSort={setSort} sort={sort} />
+            <PageSelector page={page} setPage={setPage} total={pageTotal} limit={pageLimit} />
           </Flex>
           {placement === 'tool' && (
             <Inline space={2}>
@@ -62,7 +70,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}

package/src/components/icons/Audio.tsx

@@ -0,0 +1,13 @@
+import type {SVGProps} from 'react'
+
+export function AudioIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        style={{opacity: '0.65'}}
+        d="M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
+      />
+    </svg>
+  )
+}

package/src/hooks/useAccessControl.ts

@@ -1,4 +1,5 @@
 import {useCurrentUser} from 'sanity'
+
 import {PluginConfig} from '../util/types'
 
 export const useAccessControl = (config: PluginConfig) => {