sanity-plugin-mux-input 2.1.1 → 2.2.0

package/src/components/SelectAsset.tsx

@@ -1,73 +1,33 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
-import {PatchEvent, set, setIfMissing} from 'sanity'
+import React, {useCallback} from 'react'
+import {PatchEvent, set, setIfMissing, unset} from 'sanity'
 
-import {useClient} from '../hooks/useClient'
 import type {SetDialogState} from '../hooks/useDialogState'
 import type {MuxInputProps, VideoAssetDocument} from '../util/types'
-import VideoSource, {type Props as VideoSourceProps} from './VideoSource'
-
-const PER_PAGE = 200
-
-function createQuery(start = 0, end = PER_PAGE) {
-  return /* groq */ `*[_type == "mux.videoAsset"] | order(_updatedAt desc) [${start}...${end}]`
-}
+import VideosBrowser, {type VideosBrowserProps} from './VideosBrowser'
 
 export interface Props extends Pick<MuxInputProps, 'onChange'> {
   asset?: VideoAssetDocument | null | undefined
   setDialogState: SetDialogState
 }
 
-export default function SelectAssets({asset, onChange, setDialogState}: Props) {
-  const client = useClient()
-  const pageNoRef = useRef(0)
-  const [isLastPage, setLastPage] = useState(false)
-  const [isLoading, setLoading] = useState(false)
-  const [assets, setAssets] = useState<VideoAssetDocument[]>([])
-
-  const fetchPage = useCallback(
-    (pageNo: number) => {
-      const start = pageNo * PER_PAGE
-      const end = start + PER_PAGE
-      setLoading(true)
-      return client
-        .fetch(createQuery(start, end))
-        .then((result: VideoAssetDocument[]) => {
-          setLastPage(result.length < PER_PAGE)
-          setAssets((prev) => prev.concat(result))
-        })
-        .finally(() => setLoading(false))
-    },
-    [client]
-  )
-  const handleSelect = useCallback<VideoSourceProps['onSelect']>(
-    (id) => {
-      const selected = assets.find((doc) => doc._id === id)
-      if (!selected) {
-        throw new TypeError(`Failed to find video asset with id: ${id}`)
+export default function SelectAssets({asset: selectedAsset, onChange, setDialogState}: Props) {
+  const handleSelect = useCallback<Required<VideosBrowserProps>['onSelect']>(
+    (chosenAsset) => {
+      if (!chosenAsset?._id) {
+        onChange(PatchEvent.from([unset(['asset'])]))
+      }
+      if (chosenAsset._id !== selectedAsset?._id) {
+        onChange(
+          PatchEvent.from([
+            setIfMissing({asset: {}}),
+            set({_type: 'reference', _weak: true, _ref: chosenAsset._id}, ['asset']),
+          ])
+        )
       }
-      onChange(
-        PatchEvent.from([
-          setIfMissing({asset: {}}),
-          set({_type: 'reference', _weak: true, _ref: selected._id}, ['asset']),
-        ])
-      )
       setDialogState(false)
     },
-    [assets, onChange, setDialogState]
+    [onChange, setDialogState, selectedAsset]
   )
-  const handleLoadMore = useCallback<VideoSourceProps['onLoadMore']>(() => {
-    fetchPage(++pageNoRef.current)
-  }, [fetchPage])
 
-  useEffect(() => void fetchPage(pageNoRef.current), [fetchPage])
-
-  return (
-    <VideoSource
-      onSelect={handleSelect}
-      assets={assets}
-      isLastPage={isLastPage}
-      isLoading={isLoading}
-      onLoadMore={handleLoadMore}
-    />
-  )
+  return <VideosBrowser onSelect={handleSelect} />
 }

package/src/components/SelectSortOptions.tsx

@@ -0,0 +1,45 @@
+import {SortIcon} from '@sanity/icons'
+import {Button, Menu, MenuButton, MenuItem, PopoverProps} from '@sanity/ui'
+import React, {useId} from 'react'
+
+import {ASSET_SORT_OPTIONS, SortOption} from '../hooks/useAssets'
+
+export const CONTEXT_MENU_POPOVER_PROPS: PopoverProps = {
+  constrainSize: true,
+  placement: 'bottom',
+  portal: true,
+  width: 0,
+}
+
+/**
+ * @sanity/ui components adapted from:
+ * https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx#L19
+ */
+export function SelectSortOptions(props: {sort: SortOption; setSort: (s: SortOption) => void}) {
+  const id = useId()
+
+  return (
+    <MenuButton
+      button={
+        <Button text="Sort" icon={SortIcon} mode="bleed" padding={3} style={{cursor: 'pointer'}} />
+      }
+      id={id}
+      menu={
+        <Menu>
+          {Object.entries(ASSET_SORT_OPTIONS).map(([type, {label}]) => (
+            <MenuItem
+              key={type}
+              data-as="button"
+              onClick={() => props.setSort(type as SortOption)}
+              padding={3}
+              tone="default"
+              text={label}
+              pressed={type === props.sort}
+            />
+          ))}
+        </Menu>
+      }
+      popover={CONTEXT_MENU_POPOVER_PROPS}
+    />
+  )
+}

package/src/components/SpinnerBox.tsx

@@ -0,0 +1,17 @@
+import {Box, Spinner} from '@sanity/ui'
+import React from 'react'
+
+const SpinnerBox: React.FC = () => (
+  <Box
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '150px',
+    }}
+  >
+    <Spinner />
+  </Box>
+)
+
+export default SpinnerBox

package/src/components/StudioTool.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {Tool} from 'sanity'
+
+import {Config} from '../util/types'
+import ToolIcon from './icons/ToolIcon'
+import VideosBrowser from './VideosBrowser'
+
+const StudioTool: React.FC<Config> = () => {
+  return <VideosBrowser />
+}
+
+export default function createStudioTool(config: Config): Tool {
+  const toolConfig = typeof config.tool === 'object' ? config.tool : {}
+  return {
+    name: 'mux',
+    title: toolConfig.title || 'Videos',
+    component: (props: any) => <StudioTool {...config} {...props} />,
+    icon: toolConfig.icon || ToolIcon,
+  }
+}

package/src/components/VideoDetails/DeleteDialog.tsx

@@ -0,0 +1,156 @@
+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 {deleteAsset} from '../../actions/assets'
+import {useClient} from '../../hooks/useClient'
+import {DIALOGS_Z_INDEX} from '../../util/constants'
+import {PluginPlacement, VideoAssetDocument} from '../../util/types'
+import SpinnerBox from '../SpinnerBox'
+import FileReferences from './VideoReferences'
+
+export default function DeleteDialog({
+  asset,
+  references,
+  referencesLoading,
+  cancelDelete,
+  placement,
+  succeededDeleting,
+}: {
+  asset: VideoAssetDocument
+  placement: PluginPlacement
+  references?: SanityDocument[]
+  referencesLoading: boolean
+  cancelDelete: () => void
+  succeededDeleting: () => void
+}) {
+  const client = useClient()
+  const [state, setState] = useState<
+    'processing_deletion' | 'checkingReferences' | 'error_deleting' | 'cantDelete' | 'confirm'
+  >('checkingReferences')
+  const [deleteOnMux, setDeleteOnMux] = useState(true)
+  const toast = useToast()
+
+  useEffect(() => {
+    if (state !== 'checkingReferences' || referencesLoading) return
+
+    setState(references?.length ? 'cantDelete' : 'confirm')
+  }, [state, references, referencesLoading])
+
+  async function confirmDelete() {
+    if (state !== 'confirm') return
+
+    setState('processing_deletion')
+    const worked = await deleteAsset({client, asset, deleteOnMux})
+    if (worked === true) {
+      toast.push({title: 'Successfully deleted video', status: 'success'})
+      succeededDeleting()
+    } else if (worked === 'failed-mux') {
+      toast.push({
+        title: 'Deleted video in Sanity',
+        description: "But it wasn't deleted in Mux",
+        status: 'warning',
+      })
+      succeededDeleting()
+    } else {
+      toast.push({title: 'Failed deleting video', status: 'error'})
+
+      setState('error_deleting')
+    }
+  }
+
+  return (
+    <Dialog
+      header={'Delete file'}
+      zOffset={DIALOGS_Z_INDEX}
+      id="deleting-file-details-dialog"
+      onClose={cancelDelete}
+      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 file"
+              tone="critical"
+              onClick={confirmDelete}
+              disabled={['processing_deletion', 'checkingReferences', 'cantDelete'].some(
+                (s) => s === state
+              )}
+            />
+          </Flex>
+        </Card>
+      }
+    >
+      <Card
+        padding={5}
+        style={{
+          minHeight: '150px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Stack space={3}>
+          {state === 'checkingReferences' && (
+            <>
+              <Heading size={2}>Checking if file can be deleted</Heading>
+              <SpinnerBox />
+            </>
+          )}
+          {state === 'cantDelete' && (
+            <>
+              <Heading size={2}>Video can't be deleted</Heading>
+              <Text size={2} style={{marginBottom: '2rem'}}>
+                There are {references?.length} document{references && references.length > 0 && 's'}{' '}
+                pointing to this file. Remove their references to this file or delete them before
+                proceeding.
+              </Text>
+              <FileReferences
+                references={references}
+                isLoaded={!referencesLoading}
+                placement={placement}
+              />
+            </>
+          )}
+          {state === 'confirm' && (
+            <>
+              <Heading size={2}>Are you sure you want to delete this file?</Heading>
+              <Text size={2}>This action is irreversible</Text>
+              <Stack space={4} marginTop={4}>
+                <Flex align="center" as="label">
+                  <Checkbox
+                    checked={deleteOnMux}
+                    onChange={() => setDeleteOnMux((prev) => !prev)}
+                  />
+                  <Text style={{margin: '0 10px'}}>Delete asset on Mux</Text>
+                </Flex>
+                <Flex align="center" as="label">
+                  <Checkbox disabled checked />
+                  <Text style={{margin: '0 10px'}}>Delete video from dataset</Text>
+                </Flex>
+              </Stack>
+            </>
+          )}
+          {state === 'processing_deletion' && (
+            <>
+              <Heading size={2}>Deleting file...</Heading>
+              <SpinnerBox />
+            </>
+          )}
+          {state === 'error_deleting' && (
+            <>
+              <Heading size={2}>Something went wrong!</Heading>
+              <Text size={2}>Try deleting the file again by clicking the button below</Text>
+            </>
+          )}
+        </Stack>
+      </Card>
+    </Dialog>
+  )
+}

package/src/components/VideoDetails/VideoDetails.tsx

@@ -0,0 +1,298 @@
+import {
+  CalendarIcon,
+  CheckmarkIcon,
+  ClockIcon,
+  CropIcon,
+  EditIcon,
+  ErrorOutlineIcon,
+  RevertIcon,
+  SearchIcon,
+  TrashIcon,
+} from '@sanity/icons'
+import {
+  Button,
+  Card,
+  Dialog,
+  Flex,
+  Heading,
+  Spinner,
+  Stack,
+  Tab,
+  TabList,
+  TabPanel,
+  Text,
+  TextInput,
+} from '@sanity/ui'
+import React, {useEffect, useState} from 'react'
+
+import {DIALOGS_Z_INDEX} from '../../util/constants'
+import FormField from '../FormField'
+import IconInfo from '../IconInfo'
+import {ResolutionIcon} from '../icons/Resolution'
+import {StopWatchIcon} from '../icons/StopWatch'
+import VideoPlayer from '../VideoPlayer'
+import DeleteDialog from './DeleteDialog'
+import useFileDetails, {FileDetailsProps} from './useVideoDetails'
+import FileReferences from './VideoReferences'
+
+const AssetInput: React.FC<{
+  label: string
+  description?: string
+  placeholder?: string
+  value: string
+  onInput: (e: React.FormEvent<HTMLInputElement>) => void
+  disabled?: boolean
+}> = (props) => (
+  <FormField title={props.label} description={props.description} inputId={props.label}>
+    <TextInput
+      id={props.label}
+      value={props.value}
+      placeholder={props.placeholder}
+      onInput={props.onInput}
+      disabled={props.disabled}
+    />
+  </FormField>
+)
+
+const VideoDetails: React.FC<FileDetailsProps> = (props) => {
+  const [tab, setTab] = useState<'details' | 'references'>('details')
+  const {
+    displayInfo,
+    filename,
+    modified,
+    references,
+    referencesLoading,
+    setFilename,
+    state,
+    setState,
+    handleClose,
+    confirmClose,
+    saveChanges,
+  } = useFileDetails(props)
+
+  const isSaving = state === 'saving'
+
+  // Avoid layout shifts in large screens' 2-column dialog by setting their `minHeight` to the container's
+  const [containerHeight, setContainerHeight] = useState<number | null>(null)
+  const contentsRef = React.useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!contentsRef.current || !('getBoundingClientRect' in contentsRef.current)) return
+
+    setContainerHeight(contentsRef.current.getBoundingClientRect().height)
+  }, [])
+
+  return (
+    <Dialog
+      header={displayInfo.title}
+      zOffset={DIALOGS_Z_INDEX}
+      id="file-details-dialog"
+      onClose={handleClose}
+      onClickOutside={handleClose}
+      width={2}
+      style={{minHeight: '50vh'}}
+      position="fixed"
+      footer={
+        <Card padding={3}>
+          <Flex justify="space-between" align="center">
+            <Button
+              icon={TrashIcon}
+              fontSize={2}
+              padding={3}
+              mode="bleed"
+              text="Delete"
+              tone="critical"
+              onClick={() => setState('deleting')}
+              disabled={isSaving}
+            />
+            {modified && (
+              <Button
+                icon={CheckmarkIcon}
+                fontSize={2}
+                padding={3}
+                mode="ghost"
+                text="Save and close"
+                tone="positive"
+                onClick={saveChanges}
+                iconRight={isSaving && Spinner}
+                disabled={isSaving}
+              />
+            )}
+          </Flex>
+        </Card>
+      }
+    >
+      {/* DELETION DIALOG */}
+      {state === 'deleting' && (
+        <DeleteDialog
+          asset={props.asset}
+          cancelDelete={() => setState('idle')}
+          placement={props.placement}
+          referencesLoading={referencesLoading}
+          references={references}
+          succeededDeleting={() => {
+            props.closeDialog()
+          }}
+        />
+      )}
+
+      {/* CONFIRM CLOSING DIALOG */}
+      {state === 'closing' && (
+        <Dialog
+          header={'You have unsaved changes'}
+          zOffset={DIALOGS_Z_INDEX}
+          id="closing-file-details-dialog"
+          onClose={() => confirmClose(false)}
+          onClickOutside={() => confirmClose(false)}
+          width={1}
+          position="fixed"
+          footer={
+            <Card padding={3}>
+              <Flex justify="space-between" align="center">
+                <Button
+                  icon={ErrorOutlineIcon}
+                  fontSize={2}
+                  padding={3}
+                  text="Discard changes"
+                  tone="critical"
+                  onClick={() => confirmClose(true)}
+                />
+                {modified && (
+                  <Button
+                    icon={RevertIcon}
+                    fontSize={2}
+                    padding={3}
+                    mode="ghost"
+                    text="Keep editing"
+                    tone="primary"
+                    onClick={() => confirmClose(false)}
+                  />
+                )}
+              </Flex>
+            </Card>
+          }
+        >
+          <Card padding={5}>
+            <Stack style={{textAlign: 'center'}} space={3}>
+              <Heading size={2}>Unsaved changes will be lost</Heading>
+              <Text size={2}>Are you sure you want to discard them?</Text>
+            </Stack>
+          </Card>
+        </Dialog>
+      )}
+      <Card
+        padding={4}
+        sizing="border"
+        style={{
+          containerType: 'inline-size',
+        }}
+      >
+        <Flex
+          sizing="border"
+          gap={4}
+          direction={['column', 'column', 'row']}
+          align="flex-start"
+          ref={contentsRef}
+          style={
+            typeof containerHeight === 'number'
+              ? {
+                  minHeight: containerHeight,
+                }
+              : undefined
+          }
+        >
+          <Stack space={4} flex={1} sizing="border">
+            <VideoPlayer asset={props.asset} autoPlay={props.asset.autoPlay || false} />
+          </Stack>
+          <Stack space={4} flex={1} sizing="border">
+            <TabList space={2}>
+              <Tab
+                aria-controls="details-panel"
+                icon={EditIcon}
+                id="details-tab"
+                label="Details"
+                onClick={() => setTab('details')}
+                selected={tab === 'details'}
+              />
+              {references && references.length > 0 && (
+                <Tab
+                  aria-controls="references-panel"
+                  icon={SearchIcon}
+                  id="references-tab"
+                  label={`Used by (${references.length})`}
+                  onClick={() => setTab('references')}
+                  selected={tab === 'references'}
+                />
+              )}
+            </TabList>
+            <TabPanel aria-labelledby="details-tab" id="details-panel" hidden={tab !== 'details'}>
+              <Stack space={4}>
+                <AssetInput
+                  label="File name"
+                  description="Not visible to users. Useful for finding files later."
+                  value={filename || ''}
+                  onInput={(e) => setFilename(e.currentTarget.value)}
+                  disabled={state !== 'idle'}
+                />
+                <Stack space={3}>
+                  {displayInfo?.duration && (
+                    <IconInfo
+                      text={`Duration: ${displayInfo.duration}`}
+                      icon={ClockIcon}
+                      size={2}
+                    />
+                  )}
+                  {displayInfo?.max_stored_resolution && (
+                    <IconInfo
+                      text={`Max Resolution: ${displayInfo.max_stored_resolution}`}
+                      icon={ResolutionIcon}
+                      size={2}
+                    />
+                  )}
+                  {displayInfo?.max_stored_frame_rate && (
+                    <IconInfo
+                      text={`Frame rate: ${displayInfo.max_stored_frame_rate}`}
+                      icon={StopWatchIcon}
+                      size={2}
+                    />
+                  )}
+                  {displayInfo?.aspect_ratio && (
+                    <IconInfo
+                      text={`Aspect Ratio: ${displayInfo.aspect_ratio}`}
+                      icon={CropIcon}
+                      size={2}
+                    />
+                  )}
+                  <IconInfo
+                    text={`Uploaded on: ${displayInfo.createdAt.toLocaleDateString('en', {
+                      year: 'numeric',
+                      month: '2-digit',
+                      day: '2-digit',
+                      hour: '2-digit',
+                      minute: '2-digit',
+                      hour12: true,
+                    })}`}
+                    icon={CalendarIcon}
+                    size={2}
+                  />
+                </Stack>
+              </Stack>
+            </TabPanel>
+            <TabPanel
+              aria-labelledby="references-tab"
+              id="references-panel"
+              hidden={tab !== 'references'}
+            >
+              <FileReferences
+                references={references}
+                isLoaded={!referencesLoading}
+                placement={props.placement}
+              />
+            </TabPanel>
+          </Stack>
+        </Flex>
+      </Card>
+    </Dialog>
+  )
+}
+
+export default VideoDetails