sanity-plugin-mux-input 2.12.0 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -104,7 +104,7 @@
   "peerDependencies": {
     "react": "^18.3 || ^19",
     "react-is": "^18.3 || ^19",
-    "sanity": "^3.42.0 || ^4.0.0-0",
+    "sanity": "^3.42.0 || ^4.0.0-0 || ^5.0.0",
     "styled-components": "^5 || ^6"
   },
   "engines": {

package/src/_exports/index.ts

@@ -16,6 +16,7 @@ export const defaultConfig: PluginConfig = {
   defaultSigned: false,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: [],
+  acceptedMimeTypes: ['video/*', 'audio/*'],
 }
 
 /**

package/src/components/FileInputButton.tsx

@@ -17,7 +17,7 @@ const Label = styled.label`
 
 export interface FileInputButtonProps extends ButtonProps {
   onSelect: (files: FileList) => void
-  accept?: string
+  accept: string
 }
 export const FileInputButton = ({onSelect, accept, ...props}: FileInputButtonProps) => {
   const inputId = `FileSelect${useId()}`
@@ -34,7 +34,7 @@ export const FileInputButton = ({onSelect, accept, ...props}: FileInputButtonPro
   return (
     <Label htmlFor={inputId}>
       <HiddenInput
-        accept={accept || 'video/*'}
+        accept={accept}
         ref={inputRef}
         tabIndex={0}
         type="file"

package/src/components/Player.tsx

@@ -2,7 +2,7 @@ import {Card, Text} from '@sanity/ui'
 import React, {useEffect, useMemo, useRef} from 'react'
 
 import {useCancelUpload} from '../hooks/useCancelUpload'
-import type {MuxInputProps, VideoAssetDocument} from '../util/types'
+import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
 import {TopControls} from './Player.styled'
 import {UploadProgress} from './UploadProgress'
 import VideoPlayer from './VideoPlayer'
@@ -10,9 +10,10 @@ import VideoPlayer from './VideoPlayer'
 interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
   buttons?: React.ReactNode
   asset: VideoAssetDocument
+  config?: PluginConfig
 }
 
-const Player = ({asset, buttons, readOnly, onChange}: Props) => {
+const Player = ({asset, buttons, readOnly, onChange, config}: Props) => {
   const isLoading = useMemo<boolean | string>(() => {
     if (asset?.status === 'preparing') {
       return 'Preparing the video'
@@ -91,7 +92,7 @@ const Player = ({asset, buttons, readOnly, onChange}: Props) => {
   }
 
   return (
-    <VideoPlayer asset={asset}>
+    <VideoPlayer asset={asset} hlsConfig={config?.hlsConfig}>
       {buttons && <TopControls slot="top-chrome">{buttons}</TopControls>}
       {isPreparingStaticRenditions && (
         <Card

package/src/components/PlayerActionsMenu.tsx

@@ -25,11 +25,11 @@ import {memo, useCallback, useEffect, useMemo, useState} from 'react'
 import {PatchEvent, unset} from 'sanity'
 import {styled} from 'styled-components'
 
+import {useAccessControl} from '../hooks/useAccessControl'
 import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
 import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
 import {FileInputMenuItem} from './FileInputMenuItem'
-import {useAccessControl} from '../hooks/useAccessControl'
 
 const LockCard = styled(Card)`
   position: absolute;
@@ -57,9 +57,10 @@ function PlayerActionsMenu(
     dialogState: DialogState
     setDialogState: SetDialogState
     config: PluginConfig
+    accept: string
   }
 ) {
-  const {asset, readOnly, dialogState, setDialogState, onChange, onSelect} = props
+  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])
@@ -108,7 +109,7 @@ function PlayerActionsMenu(
               </Label>
             </Box>
             <FileInputMenuItem
-              accept="video/*"
+              accept={accept}
               icon={UploadIcon}
               onSelect={onSelect}
               text="Upload"

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.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},
@@ -273,8 +299,9 @@ export default function Uploader(props: Props) {
   const handlePaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
     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 +311,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 +338,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 +411,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 +435,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 +452,7 @@ export default function Uploader(props: Props) {
           </DialogStateProvider>
         ) : (
           <UploadPlaceholder
+            accept={acceptMimeString}
             hovering={dragState !== null}
             onSelect={handleUpload}
             readOnly={!!props.readOnly}

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

@@ -11,16 +11,21 @@ import {getPosterSrc} from '../util/getPosterSrc'
 import {getVideoSrc} from '../util/getVideoSrc'
 import type {VideoAssetDocument} from '../util/types'
 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 +72,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 +114,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}

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