Output mux new_asset_settings from upload config

src/actions/upload.ts

@@ -5,7 +5,7 @@ import {catchError, mergeMap, mergeMapTo, switchMap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
 
 import {createUpChunkObservable} from '../clients/upChunkObservable'
-import type {MuxAsset, PluginConfig, UploadConfig} from '../util/types'
+import type {MuxAsset, MuxNewAssetSettings, PluginConfig, UploadConfig} from '../util/types'
 import {getAsset} from './assets'
 import {testSecretsObservable} from './secrets'
 
@@ -19,11 +19,11 @@ export function cancelUpload(client: SanityClient, uuid: string) {
 
 export function uploadUrl({
   url,
-  uploadConfig,
+  settings,
   client,
 }: {
   url: string
-  uploadConfig: UploadConfig
+  settings: MuxNewAssetSettings
   client: SanityClient
 }) {
   return testUrl(url).pipe(
@@ -36,14 +36,11 @@ export function uploadUrl({
               return throwError(new Error('Invalid credentials'))
             }
             const uuid = generateUuid()
-            const muxBody = {
-              input: validUrl,
-              mp4_support: uploadConfig.mp4_support,
-              encoding_tier: uploadConfig.encoding_tier,
-              max_resolution_tier: uploadConfig.max_resolution_tier,
-              playback_policy: [uploadConfig.signed ? 'signed' : 'public'],
-              // @TODO: send tracks to backend
-            }
+            const muxBody = settings
+            if (!muxBody.input) muxBody.input = [{type: 'video'}]
+            muxBody.input[0].url = validUrl
+            console.log(muxBody)
+
             const query = {
               muxBody: JSON.stringify(muxBody),
               filename: validUrl.split('/').slice(-1)[0],
@@ -81,11 +78,11 @@ export function uploadUrl({
 }
 
 export function uploadFile({
-  uploadConfig,
+  settings,
   client,
   file,
 }: {
-  uploadConfig: UploadConfig
+  settings: MuxNewAssetSettings
   client: SanityClient
   file: File
 }) {
@@ -99,13 +96,7 @@ export function uploadFile({
               return throwError(new Error('Invalid credentials'))
             }
             const uuid = generateUuid()
-            const body = {
-              mp4_support: uploadConfig.mp4_support,
-              encoding_tier: uploadConfig.encoding_tier,
-              max_resolution_tier: uploadConfig.max_resolution_tier,
-              playback_policy: [uploadConfig.signed ? 'signed' : 'public'],
-              // @TODO: send tracks to backend
-            }
+            const body = settings
 
             return concat(
               of({type: 'uuid' as const, uuid}),
@@ -115,13 +106,7 @@ export function uploadFile({
                   upload: {
                     cors_origin: string
                     id: string
-                    new_asset_settings: Pick<
-                      Required<PluginConfig>,
-                      'mp4_support' | 'encoding_tier' | 'max_resolution_tier'
-                    > & {
-                      passthrough: string
-                      playback_policies: ['public' | 'signed']
-                    }
+                    new_asset_settings: MuxNewAssetSettings
                     status: 'waiting'
                     timeout: number
                     url: string

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

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"