sanity-plugin-mux-input 2.2.4 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.2.4",
+  "version": "2.3.1",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -25,21 +25,16 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
-      "source": "./src/index.ts",
-      "require": "./lib/index.cjs",
-      "node": {
-        "module": "./lib/index.js",
-        "import": "./lib/index.cjs.js"
-      },
+      "source": "./src/_exports/index.ts",
       "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
       "default": "./lib/index.js"
     },
     "./package.json": "./package.json"
   },
   "main": "./lib/index.cjs",
-  "module": "./lib/index.js",
-  "source": "./src/index.ts",
+  "module": "./lib/index.esm.js",
+  "source": "./src/_exports/index.ts",
   "types": "./lib/index.d.ts",
   "files": [
     "src",
@@ -48,9 +43,9 @@
     "v2-incompatible.js"
   ],
   "scripts": {
-    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "build": "run-s clean && pkg-utils build --strict && pkg-utils --strict",
     "clean": "rimraf lib",
-    "dev": "next dev",
+    "dev": "plugin-kit link-watch",
     "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
@@ -61,63 +56,64 @@
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "@mux/mux-player-react": "1.15.0",
-    "@mux/upchunk": "^3.2.0",
-    "@sanity/icons": "^2",
-    "@sanity/incompatible-plugin": "^1",
-    "@sanity/ui": "^1",
-    "@sanity/uuid": "^3",
+    "@mux/mux-player-react": "^2.4.1",
+    "@mux/upchunk": "^3.3.2",
+    "@sanity/icons": "^2.11.7",
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/ui": "^2.1.0",
+    "@sanity/uuid": "^3.0.2",
+    "iso-639-1": "^3.1.2",
     "jsonwebtoken-esm": "^1.0.5",
-    "lodash": "^4",
+    "lodash": "^4.17.21",
     "react-rx": "^2.1.3",
-    "rxjs": "^7",
-    "scroll-into-view-if-needed": "^3",
+    "rxjs": "^7.8.1",
+    "scroll-into-view-if-needed": "^3.1.0",
     "suspend-react": "^0.1.3",
-    "swr": "^2.2.1",
-    "type-fest": "^4.2.0",
+    "swr": "^2.2.5",
+    "type-fest": "^4.10.2",
     "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
-    "@sanity/pkg-utils": "^2.4.10",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@sanity/client": "^6.15.11",
+    "@sanity/pkg-utils": "^6.0.1",
     "@sanity/plugin-kit": "^3.1.10",
-    "@sanity/semantic-release-preset": "^4.1.6",
-    "@sanity/vision": "^3.19.2",
-    "@types/react": "^18.2.37",
-    "@types/styled-components": "^5.1.30",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@sanity/semantic-release-preset": "^4.1.7",
+    "@sanity/vision": "^3.36.4",
+    "@types/lodash": "^4.17.0",
+    "@types/react": "^18.2.74",
+    "@types/react-is": "^18.2.4",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-sanity": "^7.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.3.0",
-    "next": "^13.5.6",
-    "next-sanity": "^5.5.10",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.0",
-    "prettier-plugin-packagejson": "^2.4.6",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "npm-run-all2": "^5.0.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-packagejson": "^2.4.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^5.0.0",
-    "sanity": "^3.19.2",
-    "styled-components": "^5.3.11",
-    "typescript": "^5.2.2"
+    "rimraf": "^5.0.5",
+    "sanity": "^3.36.4",
+    "semantic-release": "^23.0.7",
+    "styled-components": "^6.1.8",
+    "typescript": "5.4.2",
+    "yalc": "1.0.0-pre.53"
   },
   "peerDependencies": {
     "react": "^18",
     "react-is": "^18",
     "sanity": "^3",
-    "styled-components": "^5.2"
+    "styled-components": "^6"
   },
   "engines": {
     "node": ">=14"

package/src/_exports/index.ts

@@ -0,0 +1,32 @@
+import {definePlugin} from 'sanity'
+import createStudioTool, {DEFAULT_TOOL_CONFIG} from '../components/StudioTool'
+import {muxVideoCustomRendering} from '../plugin'
+import {muxVideo, muxVideoAsset} from '../schema'
+import type {PluginConfig} from '../util/types'
+export type {VideoAssetDocument} from '../util/types'
+
+export const defaultConfig: PluginConfig = {
+  mp4_support: 'none',
+  encoding_tier: 'smart',
+  max_resolution_tier: '1080p',
+  normalize_audio: false,
+  defaultSigned: false,
+  tool: DEFAULT_TOOL_CONFIG,
+}
+
+export const muxInput = definePlugin<Partial<PluginConfig> | void>((userConfig) => {
+  const config: PluginConfig = {...defaultConfig, ...(userConfig || {})}
+  return {
+    name: 'mux-input',
+    schema: {
+      types: [
+        muxVideoAsset,
+        {
+          ...muxVideo,
+          ...muxVideoCustomRendering(config),
+        },
+      ],
+    },
+    tools: config.tool === false ? undefined : [createStudioTool(config)],
+  }
+})

package/src/actions/upload.ts

@@ -1,11 +1,10 @@
-/* eslint-disable camelcase */
 import {uuid as generateUuid} from '@sanity/uuid'
-import {concat, defer, from, type Observable, of, throwError} from 'rxjs'
+import {concat, defer, from, of, throwError, type Observable} from 'rxjs'
 import {catchError, mergeMap, mergeMapTo, switchMap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
 
 import {createUpChunkObservable} from '../clients/upChunkObservable'
-import type {Config, MuxAsset} from '../util/types'
+import type {MuxAsset, MuxNewAssetSettings, PluginConfig, UploadConfig} from '../util/types'
 import {getAsset} from './assets'
 import {testSecretsObservable} from './secrets'
 
@@ -17,28 +16,29 @@ export function cancelUpload(client: SanityClient, uuid: string) {
   })
 }
 
-export function uploadUrl(
-  config: Config,
-  client: SanityClient,
-  url: string,
-  options: {enableSignedUrls?: boolean} = {}
-) {
+export function uploadUrl({
+  url,
+  settings,
+  client,
+}: {
+  url: string
+  settings: MuxNewAssetSettings
+  client: SanityClient
+}) {
   return testUrl(url).pipe(
     switchMap((validUrl) => {
       return concat(
-        of({type: 'url', url: validUrl}),
+        of({type: 'url' as const, url: validUrl}),
         testSecretsObservable(client).pipe(
           switchMap((json) => {
             if (!json || !json.status) {
               return throwError(new Error('Invalid credentials'))
             }
             const uuid = generateUuid()
-            const {enableSignedUrls} = options
-            const muxBody = {
-              input: validUrl,
-              playback_policy: [enableSignedUrls ? 'signed' : 'public'],
-              mp4_support: config.mp4_support,
-            }
+            const muxBody = settings
+            if (!muxBody.input) muxBody.input = [{type: 'video'}]
+            muxBody.input[0].url = validUrl
+
             const query = {
               muxBody: JSON.stringify(muxBody),
               filename: validUrl.split('/').slice(-1)[0],
@@ -65,7 +65,7 @@ export function uploadUrl(
                 if (!asset) {
                   return throwError(new Error('No asset document returned'))
                 }
-                return of({type: 'success', id: uuid, asset})
+                return of({type: 'success' as const, id: uuid, asset})
               })
             )
           })
@@ -75,41 +75,36 @@ export function uploadUrl(
   )
 }
 
-export function uploadFile(
-  config: Config,
-  client: SanityClient,
-  file: File,
-  options: {enableSignedUrls?: boolean} = {}
-) {
+export function uploadFile({
+  settings,
+  client,
+  file,
+}: {
+  settings: MuxNewAssetSettings
+  client: SanityClient
+  file: File
+}) {
   return testFile(file).pipe(
     switchMap((fileOptions) => {
       return concat(
-        of({type: 'file', file: fileOptions}),
+        of({type: 'file' as const, file: fileOptions}),
         testSecretsObservable(client).pipe(
           switchMap((json) => {
             if (!json || !json.status) {
-              return throwError(new Error('Invalid credentials'))
+              return throwError(() => new Error('Invalid credentials'))
             }
             const uuid = generateUuid()
-            const {enableSignedUrls} = options
-            const body = {
-              mp4_support: config.mp4_support,
-              playback_policy: [enableSignedUrls ? 'signed' : 'public'],
-            }
+            const body = settings
 
             return concat(
-              of({type: 'uuid', uuid}),
+              of({type: 'uuid' as const, uuid}),
               defer(() =>
                 client.observable.request<{
                   sanityAssetId: string
                   upload: {
                     cors_origin: string
                     id: string
-                    new_asset_settings: {
-                      mp4_support: 'standard' | 'none'
-                      passthrough: string
-                      playback_policies: ['public' | 'signed']
-                    }
+                    new_asset_settings: MuxNewAssetSettings
                     status: 'waiting'
                     timeout: number
                     url: string
@@ -130,7 +125,7 @@ export function uploadFile(
                     // eslint-disable-next-line no-warning-comments
                     // @TODO type the observable events
                     // eslint-disable-next-line max-nested-callbacks
-                    mergeMap((event: any) => {
+                    mergeMap((event) => {
                       if (event.type !== 'success') {
                         return of(event)
                       }
@@ -234,7 +229,7 @@ async function updateAssetDocumentFromUpload(client: SanityClient, uuid: string)
   })
 }
 
-function testFile(file: File) {
+export function testFile(file: File) {
   if (typeof window !== 'undefined' && file instanceof window.File) {
     const fileOptions = optionsFromFile({}, file)
     return of(fileOptions)
@@ -242,7 +237,7 @@ function testFile(file: File) {
   return throwError(new Error('Invalid file'))
 }
 
-function testUrl(url: string): Observable<string> {
+export function testUrl(url: string): Observable<string> {
   const error = new Error('Invalid URL')
   if (typeof url !== 'string') {
     return throwError(error)
@@ -261,7 +256,7 @@ function testUrl(url: string): Observable<string> {
 
 function optionsFromFile(opts: {preserveFilename?: boolean}, file: File) {
   if (typeof window === 'undefined' || !(file instanceof window.File)) {
-    return opts
+    return undefined
   }
   return {
     name: opts.preserveFilename === false ? undefined : file.name,

package/src/clients/upChunkObservable.ts

@@ -2,7 +2,11 @@ import {UpChunk} from '@mux/upchunk'
 import {Observable} from 'rxjs'
 
 export function createUpChunkObservable(uuid: string, uploadUrl: string, source: File) {
-  return new Observable((subscriber) => {
+  return new Observable<
+    | {type: 'pause' | 'resume'; id: string}
+    | {type: 'success'; id: string}
+    | {type: 'progress'; percent: number}
+  >((subscriber) => {
     const upchunk = UpChunk.createUpload({
       endpoint: uploadUrl,
       file: source,

package/src/components/ConfigureApi.tsx

@@ -178,7 +178,6 @@ function ConfigureApi({secrets, setDialogState}: Props) {
                   </Text>
                 </Box>
               </Flex>
-              {/* TODO: use a popover instead to avoid jumping around */}
               {secrets.signingKeyId && state.enableSignedUrls ? (
                 <Card padding={[3, 3, 3]} radius={2} shadow={1} tone="caution">
                   <Stack space={3}>

package/src/components/FileInputArea.tsx

@@ -0,0 +1,92 @@
+import {PropsWithChildren, useRef, useState} from 'react'
+import {Box, Button, Card, CardTone, Flex, Inline, Text} from '@sanity/ui'
+import {FileInputButton} from './FileInputButton'
+import {UploadIcon} from '@sanity/icons'
+import {extractDroppedFiles} from '../util/extractFiles'
+
+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>
+  )
+}

package/src/components/FileInputButton.tsx

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

package/src/components/FileInputMenuItem.styled.tsx

@@ -1,9 +1,9 @@
-import {MenuItem, Theme} from '@sanity/ui'
+import {MenuItem} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
 import {focusRingStyle} from './withFocusRing/helpers'
 
-export const FileButton = styled(MenuItem)(({theme}: {theme: Theme}) => {
+export const FileButton = styled(MenuItem)(({theme}) => {
   const {focusRing} = theme.sanity
   const base = theme.sanity.color.base
   const border = {width: 1, color: 'var(--card-border-color)'}

package/src/components/FileInputMenuItem.tsx

@@ -25,7 +25,6 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
     fontSize,
     multiple,
     onSelect,
-    padding = 3,
     space = 3,
     textAlign,
     text,
@@ -45,7 +44,7 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
   )
 
   const content = (
-    <Flex align="center" justify="flex-start" padding={padding}>
+    <Flex align="center" justify="flex-start">
       {/* Icon */}
       {icon && (
         <Box marginRight={text ? space : undefined}>
@@ -66,14 +65,7 @@ export const FileInputMenuItem = React.forwardRef(function FileInputMenuItem(
   )
 
   return (
-    <FileButton
-      {...rest}
-      htmlFor={id}
-      padding={0}
-      fontSize={2}
-      disabled={disabled}
-      ref={forwardedRef}
-    >
+    <FileButton {...rest} htmlFor={id} disabled={disabled} ref={forwardedRef}>
       {content}
 
       {/* Visibly hidden input */}