sanity-plugin-mux-input 2.2.3 → 2.3.0

package/src/components/Uploader.tsx

@@ -0,0 +1,384 @@
+import {ErrorOutlineIcon} from '@sanity/icons'
+import {Button, CardTone, Flex, Text, useToast} from '@sanity/ui'
+import React, {useEffect, useReducer, useRef, useState} from 'react'
+import {Subject, Subscription, type Observable} from 'rxjs'
+import {takeUntil, tap} from 'rxjs/operators'
+import type {SanityClient} from 'sanity'
+import {PatchEvent, set, setIfMissing} from 'sanity'
+
+import {uploadFile, uploadUrl} from '../actions/upload'
+import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
+import {isValidUrl} from '../util/asserters'
+import {extractDroppedFiles} from '../util/extractFiles'
+import type {
+  MuxInputProps,
+  MuxNewAssetSettings,
+  PluginConfig,
+  Secrets,
+  VideoAssetDocument,
+} from '../util/types'
+import InputBrowser from './InputBrowser'
+import Player from './Player'
+import PlayerActionsMenu from './PlayerActionsMenu'
+import UploadConfiguration from './UploadConfiguration'
+import {UploadCard} from './Uploader.styled'
+import UploadPlaceholder from './UploadPlaceholder'
+import {UploadProgress} from './UploadProgress'
+
+interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
+  config: PluginConfig
+  client: SanityClient
+  secrets: Secrets
+  asset: VideoAssetDocument | null | undefined
+  dialogState: DialogState
+  setDialogState: SetDialogState
+  needsSetup: boolean
+}
+
+export type StagedUpload = {type: 'file'; files: FileList | File[]} | {type: 'url'; url: string}
+type UploadStatus = {
+  progress: number
+  file?: {name: string | undefined; type: string}
+  uuid?: string
+  url?: string
+}
+
+interface State {
+  stagedUpload: StagedUpload | null
+  uploadStatus: UploadStatus | null
+  error: Error | null
+}
+
+const INITIAL_STATE: State = {
+  stagedUpload: null,
+  uploadStatus: null,
+  error: null,
+}
+
+type UploadFileEvent = ReturnType<typeof uploadFile> extends Observable<infer T> ? T : never
+type UploadUrlEvent = ReturnType<typeof uploadUrl> extends Observable<infer T> ? T : never
+type UploaderStateAction =
+  | {action: 'stageUpload'; input: NonNullable<State['stagedUpload']>}
+  | {action: 'commitUpload'}
+  | ({action: 'progressInfo'} & (
+      | Extract<UploadFileEvent, {type: 'uuid' | 'file'}>
+      | Extract<UploadUrlEvent, {type: 'url'}>
+    ))
+  | {action: 'progress'; percent: number}
+  | {action: 'error'; error: any}
+  | {action: 'complete' | 'reset'}
+
+/**
+ * The main interface for inputting a Mux Video. It handles staging an upload
+ * file, setting its configuration, displaying upload progress, and showing
+ * the preview player.
+ */
+export default function Uploader(props: Props) {
+  const toast = useToast()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const dragEnteredEls = useRef<EventTarget[]>([])
+  const [dragState, setDragState] = useState<'valid' | 'invalid' | null>(null)
+
+  const cancelUploadButton = useRef(
+    (() => {
+      const events$ = new Subject()
+      return {
+        observable: events$.asObservable(),
+        handleClick: ((event) => events$.next(event)) as React.MouseEventHandler<HTMLButtonElement>,
+      }
+    })()
+  ).current
+
+  const uploadRef = useRef<Subscription | null>(null)
+  const [state, dispatch] = useReducer(
+    (prev: State, action: UploaderStateAction) => {
+      switch (action.action) {
+        case 'stageUpload':
+          return Object.assign({}, INITIAL_STATE, {stagedUpload: action.input})
+        case 'commitUpload':
+          return Object.assign({}, prev, {uploadStatus: {progress: 0}})
+        case 'progressInfo': {
+          const {type, action: _, ...payload} = action
+          return Object.assign({}, prev, {
+            uploadStatus: {
+              ...prev.uploadStatus,
+              progress: prev.uploadStatus!.progress,
+              ...payload,
+            },
+          } satisfies Pick<typeof prev, 'uploadStatus'>)
+        }
+        case 'progress':
+          return Object.assign({}, prev, {
+            uploadStatus: {
+              ...prev.uploadStatus,
+              progress: action.percent,
+            },
+          } satisfies Pick<typeof prev, 'uploadStatus'>)
+        case 'reset':
+        case 'complete':
+          // Clear upload observable on completion
+          uploadRef.current?.unsubscribe()
+          uploadRef.current = null
+          return INITIAL_STATE
+        case 'error':
+          // Clear upload observable on error
+          uploadRef.current?.unsubscribe()
+          uploadRef.current = null
+          return Object.assign({}, INITIAL_STATE, {error: action.error})
+        default:
+          return prev
+      }
+    },
+    {
+      stagedUpload: null,
+      uploadStatus: null,
+      error: null,
+    }
+  )
+
+  // Make sure we close out the upload observer on dismount
+  useEffect(() => {
+    return () => {
+      if (uploadRef.current && !uploadRef.current.closed) {
+        uploadRef.current.unsubscribe()
+      }
+    }
+  }, [])
+
+  /* -------------------------------------------------------------------------- */
+  /*                                  Uploading                                 */
+  /* -------------------------------------------------------------------------- */
+
+  /**
+   * Begins a file or URL upload with the staged files or URL.
+   *
+   * Should only be called from the UploadConfiguration component, which provides
+   * the Mux configuration for the direct asset upload.
+   *
+   * @param settings The Mux new_asset_settings object to send to Sanity
+   * @returns
+   */
+  const startUpload = (settings: MuxNewAssetSettings) => {
+    const {stagedUpload} = state
+    if (!stagedUpload || uploadRef.current) return
+    dispatch({action: 'commitUpload'})
+    let uploadObservable: Observable<UploadFileEvent | UploadUrlEvent>
+    // eslint-disable-next-line default-case
+    switch (stagedUpload.type) {
+      case 'url':
+        uploadObservable = uploadUrl({
+          client: props.client,
+          url: stagedUpload.url,
+          settings,
+        })
+        break
+      case 'file':
+        uploadObservable = uploadFile({
+          client: props.client,
+          file: stagedUpload.files[0],
+          settings,
+        }).pipe(
+          takeUntil(
+            cancelUploadButton.observable.pipe(
+              tap(() => {
+                if (state.uploadStatus?.uuid) {
+                  props.client.delete(state.uploadStatus.uuid)
+                }
+              })
+            )
+          )
+        )
+        break
+    }
+    uploadRef.current = uploadObservable.subscribe({
+      next: (event) => {
+        switch (event.type) {
+          case 'uuid':
+          case 'file':
+          case 'url':
+            dispatch({action: 'progressInfo', ...event})
+            break
+          case 'progress':
+            dispatch({action: 'progress', percent: event.percent})
+            break
+          case 'success':
+            dispatch({action: 'progress', percent: 100})
+            props.onChange(
+              PatchEvent.from([
+                setIfMissing({asset: {}}),
+                set({_type: 'reference', _weak: true, _ref: event.asset._id}, ['asset']),
+              ])
+            )
+            break
+          case 'pause':
+          case 'resume':
+          default:
+            break
+        }
+      },
+      complete: () => dispatch({action: 'complete'}),
+      error: (error) => dispatch({action: 'error', error}),
+    })
+  }
+
+  /* -------------------------- 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[]) => {
+    dispatch({
+      action: 'stageUpload',
+      input: {type: 'file', files},
+    })
+  }
+
+  // Stages and validates an upload from pasting an asset URL
+  const handlePaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    const clipboardData = event.clipboardData || (window as any).clipboardData
+    const url = clipboardData.getData('text')
+    if (!isValidUrl(url)) {
+      toast.push({status: 'error', title: 'Invalid URL for Mux video input.'})
+      return
+    }
+    dispatch({action: 'stageUpload', input: {type: 'url', url: url}})
+  }
+
+  // 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((files) => {
+      dispatch({
+        action: 'stageUpload',
+        input: {type: 'file', files},
+      })
+    })
+  }
+
+  /* ------------------------------- 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(type?.startsWith('video/') ? '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)
+    }
+  }
+
+  /* -------------------------------- Rendering ------------------------------- */
+
+  // Upload has errored
+  if (state.error !== null) {
+    const error = {state}
+    return (
+      <Flex gap={3} direction="column" justify="center" align="center">
+        <Text size={5} muted>
+          <ErrorOutlineIcon />
+        </Text>
+        <Text>Something went wrong</Text>
+        {error instanceof Error && error.message && (
+          <Text size={1} muted>
+            {error.message}
+          </Text>
+        )}
+        <Button text="Upload another file" onClick={() => dispatch({action: 'reset'})} />
+      </Flex>
+    )
+  }
+
+  // Upload is in progress
+  if (state.uploadStatus !== null) {
+    const {uploadStatus} = state
+    return (
+      <UploadProgress
+        onCancel={cancelUploadButton.handleClick}
+        progress={uploadStatus.progress}
+        filename={uploadStatus.file?.name || uploadStatus.url}
+      />
+    )
+  }
+
+  // Upload needs configuration
+  if (state.stagedUpload !== null) {
+    return (
+      <UploadConfiguration
+        stagedUpload={state.stagedUpload}
+        pluginConfig={props.config}
+        secrets={props.secrets}
+        startUpload={startUpload}
+        onClose={() => dispatch({action: 'reset'})}
+      />
+    )
+  }
+
+  // Default: No staged upload
+  let tone: CardTone | undefined
+  if (dragState) tone = dragState === 'valid' ? 'positive' : 'critical'
+
+  return (
+    <>
+      <UploadCard
+        tone={tone}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDragEnter={handleDragEnter}
+        onPaste={handlePaste}
+        ref={containerRef}
+      >
+        {props.asset ? (
+          <Player
+            readOnly={props.readOnly}
+            asset={props.asset}
+            onChange={props.onChange}
+            buttons={
+              <PlayerActionsMenu
+                asset={props.asset}
+                dialogState={props.dialogState}
+                setDialogState={props.setDialogState}
+                onChange={props.onChange}
+                onSelect={handleUpload}
+                readOnly={props.readOnly}
+              />
+            }
+          />
+        ) : (
+          <UploadPlaceholder
+            hovering={dragState !== null}
+            onSelect={handleUpload}
+            readOnly={!!props.readOnly}
+            setDialogState={props.setDialogState}
+            needsSetup={props.needsSetup}
+          />
+        )}
+      </UploadCard>
+      {props.dialogState === 'select-video' && (
+        <InputBrowser
+          asset={props.asset}
+          onChange={props.onChange}
+          setDialogState={props.setDialogState}
+        />
+      )}
+    </>
+  )
+}

package/src/components/VideoDetails/DeleteDialog.tsx

@@ -1,12 +1,12 @@
 import {TrashIcon} from '@sanity/icons'
-import {Button, Card, Checkbox, Dialog, Flex, Heading, Stack, Text, useToast} from '@sanity/ui'
-import React, {useEffect, useState} from 'react'
-import {SanityDocument} from 'sanity'
+import {Box, Button, Card, Checkbox, Dialog, Flex, Heading, Stack, Text, useToast} from '@sanity/ui'
+import {useEffect, useState} from 'react'
+import type {SanityDocument} from 'sanity'
 
 import {deleteAsset} from '../../actions/assets'
 import {useClient} from '../../hooks/useClient'
 import {DIALOGS_Z_INDEX} from '../../util/constants'
-import {PluginPlacement, VideoAssetDocument} from '../../util/types'
+import type {PluginPlacement, VideoAssetDocument} from '../../util/types'
 import SpinnerBox from '../SpinnerBox'
 import VideoReferences from './VideoReferences'
 
@@ -69,26 +69,9 @@ export default function DeleteDialog({
       onClickOutside={cancelDelete}
       width={1}
       position="fixed"
-      footer={
-        <Card padding={3}>
-          <Flex justify="space-between" align="center">
-            <Button
-              icon={TrashIcon}
-              fontSize={2}
-              padding={3}
-              text="Delete video"
-              tone="critical"
-              onClick={confirmDelete}
-              disabled={['processing_deletion', 'checkingReferences', 'cantDelete'].some(
-                (s) => s === state
-              )}
-            />
-          </Flex>
-        </Card>
-      }
     >
       <Card
-        padding={5}
+        padding={3}
         style={{
           minHeight: '150px',
           display: 'flex',
@@ -105,7 +88,7 @@ export default function DeleteDialog({
           )}
           {state === 'cantDelete' && (
             <>
-              <Heading size={2}>Video can't be deleted</Heading>
+              <Heading size={2}>Video can&apos;t be deleted</Heading>
               <Text size={2} style={{marginBottom: '2rem'}}>
                 There are {references?.length} document{references && references.length > 0 && 's'}{' '}
                 pointing to this video. Remove their references to this file or delete them before
@@ -122,7 +105,7 @@ export default function DeleteDialog({
             <>
               <Heading size={2}>Are you sure you want to delete this video?</Heading>
               <Text size={2}>This action is irreversible</Text>
-              <Stack space={4} marginTop={4}>
+              <Stack space={4} marginY={4}>
                 <Flex align="center" as="label">
                   <Checkbox
                     checked={deleteOnMux}
@@ -134,6 +117,19 @@ export default function DeleteDialog({
                   <Checkbox disabled checked />
                   <Text style={{margin: '0 10px'}}>Delete video from dataset</Text>
                 </Flex>
+                <Box>
+                  <Button
+                    icon={TrashIcon}
+                    fontSize={2}
+                    padding={3}
+                    text="Delete video"
+                    tone="critical"
+                    onClick={confirmDelete}
+                    disabled={['processing_deletion', 'checkingReferences', 'cantDelete'].some(
+                      (s) => s === state
+                    )}
+                  />
+                </Box>
               </Stack>
             </>
           )}

package/src/components/VideoDetails/VideoDetails.tsx

@@ -8,6 +8,7 @@ import {
   RevertIcon,
   SearchIcon,
   TrashIcon,
+  TagIcon,
 } from '@sanity/icons'
 import {
   Button,
@@ -221,7 +222,12 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
                 selected={tab === 'references'}
               />
             </TabList>
-            <TabPanel aria-labelledby="details-tab" id="details-panel" hidden={tab !== 'details'}>
+            <TabPanel
+              aria-labelledby="details-tab"
+              id="details-panel"
+              hidden={tab !== 'details'}
+              style={{wordBreak: 'break-word'}}
+            >
               <Stack space={4}>
                 <AssetInput
                   label="Video title or file name"
@@ -271,6 +277,7 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
                     icon={CalendarIcon}
                     size={2}
                   />
+                  <IconInfo text={`Mux ID: \n${displayInfo.id}`} icon={TagIcon} size={2} />
                 </Stack>
               </Stack>
             </TabPanel>

package/src/components/VideoMetadata.tsx

@@ -1,4 +1,4 @@
-import {CalendarIcon, ClockIcon} from '@sanity/icons'
+import {CalendarIcon, ClockIcon, TagIcon} from '@sanity/icons'
 import {Inline, Stack, Text} from '@sanity/ui'
 import React from 'react'
 
@@ -35,6 +35,9 @@ const VideoMetadata = (props: {asset: VideoAssetDocument}) => {
           size={1}
           muted
         />
+        {displayInfo.title != displayInfo.id.slice(0, 12) && (
+          <IconInfo text={displayInfo.id.slice(0, 12)} icon={TagIcon} size={1} muted />
+        )}
       </Inline>
     </Stack>
   )

package/src/components/VideoPlayer.tsx

@@ -1,6 +1,7 @@
-import MuxPlayer, {MuxPlayerProps} from '@mux/mux-player-react'
-import {Card} from '@sanity/ui'
-import React, {PropsWithChildren, useMemo} from 'react'
+import MuxPlayer, {type MuxPlayerProps} from '@mux/mux-player-react'
+import {ErrorOutlineIcon} from '@sanity/icons'
+import {Card, Text} from '@sanity/ui'
+import {type PropsWithChildren, useMemo} from 'react'
 
 import {useClient} from '../hooks/useClient'
 import {MIN_ASPECT_RATIO} from '../util/constants'
@@ -17,7 +18,17 @@ export default function VideoPlayer({
 >) {
   const client = useClient()
 
-  const videoSrc = useMemo(() => asset?.playbackId && getVideoSrc({client, asset}), [asset, client])
+  const {src: videoSrc, error} = useMemo(() => {
+    try {
+      const src = asset?.playbackId && getVideoSrc({client, asset})
+      if (src) return {src: src}
+
+      return {error: new TypeError('Asset has no playback ID')}
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+    } catch (error) {
+      return {error}
+    }
+  }, [asset, client])
 
   const signedToken = useMemo(() => {
     try {
@@ -46,7 +57,6 @@ export default function VideoPlayer({
                 ? {playback: signedToken, thumbnail: signedToken, storyboard: signedToken}
                 : undefined
             }
-            streamType="on-demand"
             preload="metadata"
             crossOrigin="anonymous"
             metadata={{
@@ -64,6 +74,24 @@ export default function VideoPlayer({
           {children}
         </>
       )}
+      {error ? (
+        <div
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+        >
+          <Text muted>
+            <ErrorOutlineIcon style={{marginRight: '0.15em'}} />
+            {typeof error === 'object' && 'message' in error && typeof error.message === 'string'
+              ? error.message
+              : 'Error loading video'}
+          </Text>
+        </div>
+      ) : null}
+      {children}
     </Card>
   )
 }

package/src/components/VideoThumbnail.tsx

@@ -1,14 +1,13 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
-import {Card, CardTone, Stack, Text} from '@sanity/ui'
+import {Box, Card, CardTone, Spinner, Stack, Text} from '@sanity/ui'
 import React, {useMemo, useState} from 'react'
 import styled from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
 import useInView from '../hooks/useInView'
 import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
-import {getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
+import {getAnimatedPosterSrc, type AnimatedPosterSrcOptions} from '../util/getAnimatedPosterSrc'
 import {VideoAssetDocument} from '../util/types'
-import SpinnerBox from './SpinnerBox'
 
 const Image = styled.img`
   transition: opacity 0.175s ease-out 0s;
@@ -29,19 +28,20 @@ const STATUS_TO_TONE: Record<ImageStatus, CardTone> = {
 
 export default function VideoThumbnail({
   asset,
-  width = 250,
+  width,
 }: {
-  asset: Partial<VideoAssetDocument>
+  asset: AnimatedPosterSrcOptions['asset'] & Pick<VideoAssetDocument, 'filename' | 'assetId'>
   width?: number
 }) {
   const {inView, ref} = useInView()
+  const posterWidth = width || 250
 
   const [status, setStatus] = useState<ImageStatus>('loading')
   const client = useClient()
 
   const animatedSrc = useMemo(() => {
     try {
-      return getAnimatedPosterSrc({asset, client, width})
+      return getAnimatedPosterSrc({asset, client, width: posterWidth})
     } catch {
       if (status !== 'error') setStatus('error')
       return undefined
@@ -61,6 +61,9 @@ export default function VideoThumbnail({
       style={{
         aspectRatio: THUMBNAIL_ASPECT_RATIO,
         position: 'relative',
+        maxWidth: width ? `${width}px` : undefined,
+        width: '100%',
+        flex: 1,
       }}
       border
       radius={2}
@@ -69,7 +72,18 @@ export default function VideoThumbnail({
     >
       {inView ? (
         <>
-          {status === 'loading' && <SpinnerBox />}
+          {status === 'loading' && (
+            <Box
+              style={{
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+              }}
+            >
+              <Spinner />
+            </Box>
+          )}
           {status === 'error' && (
             <Stack
               space={4}

package/src/components/VideosBrowser.tsx

@@ -4,10 +4,11 @@ import React from 'react'
 
 import useAssets from '../hooks/useAssets'
 import type {VideoAssetDocument} from '../util/types'
+import ImportVideosFromMux from './ImportVideosFromMux'
 import {SelectSortOptions} from './SelectSortOptions'
 import SpinnerBox from './SpinnerBox'
-import {VideoDetailsProps} from './VideoDetails/useVideoDetails'
 import VideoDetails from './VideoDetails/VideoDetails'
+import {VideoDetailsProps} from './VideoDetails/useVideoDetails'
 import VideoInBrowser from './VideoInBrowser'
 
 export interface VideosBrowserProps {
@@ -22,6 +23,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
     [editedAsset, assets]
   )
 
+  const placement = onSelect ? 'input' : 'tool'
   return (
     <>
       <Stack padding={4} space={4} style={{minHeight: '50vh'}}>
@@ -37,6 +39,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
             />
             <SelectSortOptions setSort={setSort} sort={sort} />
           </Flex>
+          {placement === 'tool' && <ImportVideosFromMux />}
         </Flex>
         <Stack space={3}>
           {assets?.length > 0 && (
@@ -64,7 +67,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
         {isLoading && <SpinnerBox />}
 
         {!isLoading && assets.length === 0 && (
-          <Card padding={4} marginY={4} border radius={2} tone="transparent">
+          <Card marginY={4} paddingX={4} paddingY={6} border radius={2} tone="transparent">
             <Text align="center" muted size={3}>
               {searchQuery ? `No videos found for "${searchQuery}"` : 'No videos in this dataset'}
             </Text>
@@ -75,7 +78,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
         <VideoDetails
           closeDialog={() => setEditedAsset(null)}
           asset={freshEditedAsset}
-          placement={onSelect ? 'input' : 'tool'}
+          placement={placement}
         />
       )}
     </>