sanity-plugin-mux-input 2.12.0 → 2.13.0

package/src/util/types.ts

@@ -1,5 +1,6 @@
 import type {ObjectInputProps, PreviewLayoutKey, PreviewProps, SchemaType} from 'sanity'
 import type {PartialDeep} from 'type-fest'
+import type MuxPlayerElement from '@mux/mux-player'
 
 /**
  * Standard static rendition options available for plugin configuration defaults
@@ -122,6 +123,50 @@ export interface MuxInputConfig {
    * @defaultValue false
    */
   disableTextTrackConfig?: boolean
+
+  /**
+   * The mime types that are accepted by the input.
+   *
+    * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept}
+   * @defaultValue ['video/*','audio/*']
+
+   */
+  acceptedMimeTypes?: ('audio/*' | 'video/*')[]
+
+  /**
+   * Maximum file size allowed for video uploads in bytes.
+   * If not specified, no file size validation will be performed.
+   *
+   * @example 1024 * 1024 * 1024 // 1 GB
+   * @defaultValue undefined
+   */
+  maxAssetFileSize?: number
+
+  /**
+   * Maximum video duration allowed in seconds.
+   * If not specified, no duration validation will be performed.
+   *
+   * @example 2 * 60 * 60 // 2 hours
+   * @defaultValue undefined
+   */
+  maxAssetDuration?: number
+
+  /**
+   * HLS.js configuration options to be passed to the Mux Player.
+   * These options allow you to customize the underlying HLS.js playback engine behavior.
+   *
+   * @see {@link https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning}
+   * @defaultValue undefined
+   * @example
+   * ```ts
+   * {
+   *   maxBufferLength: 30,
+   *   lowLatencyMode: true,
+   *   capLevelToPlayerSize: true
+   * }
+   * ```
+   */
+  hlsConfig?: MuxPlayerElement['_hlsConfig']
 }
 
 export interface PluginConfig extends MuxInputConfig {

package/src/components/FileInputArea.tsx

@@ -1,93 +0,0 @@
-import {UploadIcon} from '@sanity/icons'
-import {Card, CardTone, Flex, Inline} from '@sanity/ui'
-import {PropsWithChildren, useRef, useState} from 'react'
-
-import {extractDroppedFiles} from '../util/extractFiles'
-import {FileInputButton} from './FileInputButton'
-
-interface FileInputAreaProps extends PropsWithChildren {
-  accept?: string
-  acceptMIMETypes?: string[]
-  label: React.ReactNode
-  onSelect: (files: FileList | File[]) => void
-}
-
-export default function FileInputArea({
-  label,
-  accept,
-  acceptMIMETypes,
-  onSelect,
-}: FileInputAreaProps) {
-  const dragEnteredEls = useRef<EventTarget[]>([])
-  const [dragState, setDragState] = useState<'valid' | 'invalid' | null>(null)
-
-  // Stages and validates an upload from dragging+dropping files or folders
-  const handleDrop: React.DragEventHandler<HTMLDivElement> = (event) => {
-    setDragState(null)
-    event.preventDefault()
-    event.stopPropagation()
-    extractDroppedFiles(event.nativeEvent.dataTransfer!).then(onSelect)
-  }
-
-  /* ------------------------------- Drag State ------------------------------- */
-
-  const handleDragOver: React.DragEventHandler<HTMLDivElement> = (event) => {
-    event.preventDefault()
-    event.stopPropagation()
-  }
-
-  const handleDragEnter: React.DragEventHandler<HTMLDivElement> = (event) => {
-    event.stopPropagation()
-    dragEnteredEls.current.push(event.target)
-    const type = event.dataTransfer.items?.[0]?.type
-    setDragState(
-      !acceptMIMETypes || acceptMIMETypes.some((mimeType) => type?.match(mimeType))
-        ? 'valid'
-        : 'invalid'
-    )
-  }
-
-  const handleDragLeave: React.DragEventHandler<HTMLDivElement> = (event) => {
-    event.stopPropagation()
-    const idx = dragEnteredEls.current.indexOf(event.target)
-    if (idx > -1) {
-      dragEnteredEls.current.splice(idx, 1)
-    }
-    if (dragEnteredEls.current.length === 0) {
-      setDragState(null)
-    }
-  }
-
-  let tone: CardTone = 'inherit'
-  if (dragState) tone = dragState === 'valid' ? 'positive' : 'critical'
-  return (
-    <Card border sizing="border" tone={tone} style={{borderStyle: 'dashed'}} padding={3}>
-      <Flex
-        align="center"
-        justify="space-between"
-        gap={4}
-        direction={['column', 'column', 'row']}
-        paddingY={[2, 2, 0]}
-        sizing="border"
-        onDrop={handleDrop}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDragEnter={handleDragEnter}
-      >
-        <Flex align="center" justify="center" gap={2} flex={1}>
-          {label}
-        </Flex>
-        <Inline space={2}>
-          <FileInputButton
-            mode="ghost"
-            tone="default"
-            icon={UploadIcon}
-            text="Upload"
-            onSelect={onSelect}
-            accept={accept}
-          />
-        </Inline>
-      </Flex>
-    </Card>
-  )
-}