sanity-plugin-mux-input 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -74,7 +74,7 @@
     "scroll-into-view-if-needed": "^3",
     "suspend-react": "^0.1.0",
     "swr": "^2.1.0",
-    "type-fest": "^3.6.1",
+    "type-fest": "^4.0.0",
     "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
@@ -94,16 +94,16 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
     "next": "^13.4.12",
-    "next-sanity": "^4.3.3",
+    "next-sanity": "^5.1.6",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.1",
     "prettier-plugin-packagejson": "^2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -123,7 +123,8 @@
     "node": ">=14"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "sanityExchangeUrl": "https://www.sanity.io/plugins/sanity-plugin-mux-input"
 }

package/src/components/InputBrowser.tsx

@@ -1,18 +1,35 @@
 import {Dialog} from '@sanity/ui'
 import React, {useCallback, useId} from 'react'
+import styled from 'styled-components'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import SelectAsset, {type Props as SelectAssetProps} from './SelectAsset'
 
-interface Props extends Pick<SelectAssetProps, 'onChange' | 'asset'> {
+/** To prevent Content Layout Shift (CLS), ensure that the dialog always occupies the entire available height. */
+const StyledDialog = styled(Dialog)`
+  > div[data-ui='DialogCard'] > div[data-ui='Card'] {
+    height: 100%;
+  }
+`
+
+export default function InputBrowser({
+  setDialogState,
+  asset,
+  onChange,
+}: Pick<SelectAssetProps, 'onChange' | 'asset'> & {
   setDialogState: SetDialogState
-}
-export default function InputBrowser({setDialogState, asset, onChange}: Props) {
+}) {
   const id = `InputBrowser${useId()}`
   const handleClose = useCallback(() => setDialogState(false), [setDialogState])
   return (
-    <Dialog __unstable_autoFocus header="Select video" id={id} onClose={handleClose} width={2}>
+    <StyledDialog
+      __unstable_autoFocus
+      header="Select video"
+      id={id}
+      onClose={handleClose}
+      width={2}
+    >
       <SelectAsset asset={asset} onChange={onChange} setDialogState={setDialogState} />
-    </Dialog>
+    </StyledDialog>
   )
 }

package/src/components/Player.tsx

@@ -75,7 +75,7 @@ const Player = ({asset, buttons, readOnly, onChange}: Props) => {
       <UploadProgress
         progress={100}
         filename={asset?.filename}
-        text={(isLoading !== true && isLoading) || 'Waiting for Mux to complete the file'}
+        text={(isLoading !== true && isLoading) || 'Waiting for Mux to complete the upload'}
         onCancel={readOnly ? undefined : () => handleCancelUpload()}
       />
     )

package/src/components/VideoDetails/DeleteDialog.tsx

@@ -8,7 +8,7 @@ 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'
+import VideoReferences from './VideoReferences'
 
 export default function DeleteDialog({
   asset,
@@ -62,9 +62,9 @@ export default function DeleteDialog({
 
   return (
     <Dialog
-      header={'Delete file'}
+      header={'Delete video'}
       zOffset={DIALOGS_Z_INDEX}
-      id="deleting-file-details-dialog"
+      id="deleting-video-details-dialog"
       onClose={cancelDelete}
       onClickOutside={cancelDelete}
       width={1}
@@ -76,7 +76,7 @@ export default function DeleteDialog({
               icon={TrashIcon}
               fontSize={2}
               padding={3}
-              text="Delete file"
+              text="Delete video"
               tone="critical"
               onClick={confirmDelete}
               disabled={['processing_deletion', 'checkingReferences', 'cantDelete'].some(
@@ -99,7 +99,7 @@ export default function DeleteDialog({
         <Stack space={3}>
           {state === 'checkingReferences' && (
             <>
-              <Heading size={2}>Checking if file can be deleted</Heading>
+              <Heading size={2}>Checking if video can be deleted</Heading>
               <SpinnerBox />
             </>
           )}
@@ -108,10 +108,10 @@ export default function DeleteDialog({
               <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
+                pointing to this video. Remove their references to this file or delete them before
                 proceeding.
               </Text>
-              <FileReferences
+              <VideoReferences
                 references={references}
                 isLoaded={!referencesLoading}
                 placement={placement}
@@ -120,7 +120,7 @@ export default function DeleteDialog({
           )}
           {state === 'confirm' && (
             <>
-              <Heading size={2}>Are you sure you want to delete this file?</Heading>
+              <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}>
                 <Flex align="center" as="label">
@@ -139,14 +139,14 @@ export default function DeleteDialog({
           )}
           {state === 'processing_deletion' && (
             <>
-              <Heading size={2}>Deleting file...</Heading>
+              <Heading size={2}>Deleting video...</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>
+              <Text size={2}>Try deleting the video again by clicking the button below</Text>
             </>
           )}
         </Stack>

package/src/components/VideoDetails/VideoDetails.tsx

@@ -32,8 +32,8 @@ 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'
+import useVideoDetails, {VideoDetailsProps} from './useVideoDetails'
+import VideoReferences from './VideoReferences'
 
 const AssetInput: React.FC<{
   label: string
@@ -54,7 +54,7 @@ const AssetInput: React.FC<{
   </FormField>
 )
 
-const VideoDetails: React.FC<FileDetailsProps> = (props) => {
+const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
   const [tab, setTab] = useState<'details' | 'references'>('details')
   const {
     displayInfo,
@@ -68,7 +68,7 @@ const VideoDetails: React.FC<FileDetailsProps> = (props) => {
     handleClose,
     confirmClose,
     saveChanges,
-  } = useFileDetails(props)
+  } = useVideoDetails(props)
 
   const isSaving = state === 'saving'
 
@@ -85,11 +85,10 @@ const VideoDetails: React.FC<FileDetailsProps> = (props) => {
     <Dialog
       header={displayInfo.title}
       zOffset={DIALOGS_Z_INDEX}
-      id="file-details-dialog"
+      id="video-details-dialog"
       onClose={handleClose}
       onClickOutside={handleClose}
       width={2}
-      style={{minHeight: '50vh'}}
       position="fixed"
       footer={
         <Card padding={3}>
@@ -140,7 +139,7 @@ const VideoDetails: React.FC<FileDetailsProps> = (props) => {
         <Dialog
           header={'You have unsaved changes'}
           zOffset={DIALOGS_Z_INDEX}
-          id="closing-file-details-dialog"
+          id="closing-video-details-dialog"
           onClose={() => confirmClose(false)}
           onClickOutside={() => confirmClose(false)}
           width={1}
@@ -213,22 +212,20 @@ const VideoDetails: React.FC<FileDetailsProps> = (props) => {
                 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'}
-                />
-              )}
+              <Tab
+                aria-controls="references-panel"
+                icon={SearchIcon}
+                id="references-tab"
+                label={`Used by ${references ? `(${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."
+                  label="Video title or file name"
+                  description="Not visible to users. Useful for finding videos later."
                   value={filename || ''}
                   onInput={(e) => setFilename(e.currentTarget.value)}
                   disabled={state !== 'idle'}
@@ -282,7 +279,7 @@ const VideoDetails: React.FC<FileDetailsProps> = (props) => {
               id="references-panel"
               hidden={tab !== 'references'}
             >
-              <FileReferences
+              <VideoReferences
                 references={references}
                 isLoaded={!referencesLoading}
                 placement={props.placement}

package/src/components/VideoDetails/VideoReferences.tsx

@@ -20,7 +20,7 @@ const Container = styled(Box)`
   }
 `
 
-const FileReferences: React.FC<{
+const VideoReferences: React.FC<{
   references?: SanityDocument[]
   isLoaded: boolean
   placement: PluginPlacement
@@ -32,9 +32,9 @@ const FileReferences: React.FC<{
 
   if (!props.references?.length) {
     return (
-      <Text size={2} weight="bold" muted style={{marginTop: '1.5rem', textAlign: 'center'}}>
-        No documents are using this file
-      </Text>
+      <Card border radius={3} padding={3}>
+        <Text size={2}>No documents are using this video</Text>
+      </Card>
     )
   }
 
@@ -67,4 +67,4 @@ const FileReferences: React.FC<{
   )
 }
 
-export default FileReferences
+export default VideoReferences

package/src/components/VideoDetails/useVideoDetails.ts

@@ -7,13 +7,13 @@ import useDocReferences from '../../hooks/useDocReferences'
 import getVideoMetadata from '../../util/getVideoMetadata'
 import {PluginPlacement, VideoAssetDocument} from '../../util/types'
 
-export interface FileDetailsProps {
+export interface VideoDetailsProps {
   placement: PluginPlacement
   closeDialog: () => void
   asset: VideoAssetDocument & {autoPlay?: boolean}
 }
 
-export default function useFileDetails(props: FileDetailsProps) {
+export default function useVideoDetails(props: VideoDetailsProps) {
   const documentStore = useDocumentStore()
   const toast = useToast()
   const client = useClient()
@@ -56,7 +56,12 @@ export default function useFileDetails(props: FileDetailsProps) {
     try {
       await client.patch(props.asset._id).set({filename}).commit()
       setOriginalAsset((prev) => ({...prev, filename}))
-      toast.push({title: 'File name updated', status: 'success'})
+      toast.push({
+        title: 'Video title updated',
+        description: `New title: ${filename}`,
+        status: 'success',
+      })
+      props.closeDialog()
     } catch (error) {
       toast.push({
         title: 'Failed updating file name',

package/src/components/VideosBrowser.tsx

@@ -6,7 +6,7 @@ import useAssets from '../hooks/useAssets'
 import type {VideoAssetDocument} from '../util/types'
 import {SelectSortOptions} from './SelectSortOptions'
 import SpinnerBox from './SpinnerBox'
-import {FileDetailsProps} from './VideoDetails/useVideoDetails'
+import {VideoDetailsProps} from './VideoDetails/useVideoDetails'
 import VideoDetails from './VideoDetails/VideoDetails'
 import VideoInBrowser from './VideoInBrowser'
 
@@ -16,7 +16,7 @@ export interface VideosBrowserProps {
 
 export default function VideosBrowser({onSelect}: VideosBrowserProps) {
   const {assets, isLoading, searchQuery, setSearchQuery, setSort, sort} = useAssets()
-  const [editedAsset, setEditedAsset] = React.useState<FileDetailsProps['asset'] | null>(null)
+  const [editedAsset, setEditedAsset] = React.useState<VideoDetailsProps['asset'] | null>(null)
   const freshEditedAsset = React.useMemo(
     () => assets.find((a) => a._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
@@ -24,7 +24,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
 
   return (
     <>
-      <Stack padding={4} space={4}>
+      <Stack padding={4} space={4} style={{minHeight: '50vh'}}>
         <Flex justify="space-between" align="center">
           <Flex align="center" gap={3}>
             <TextInput
@@ -33,7 +33,7 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
               onInput={(e: React.FormEvent<HTMLInputElement>) =>
                 setSearchQuery(e.currentTarget.value)
               }
-              placeholder="Search files"
+              placeholder="Search videos"
             />
             <SelectSortOptions setSort={setSort} sort={sort} />
           </Flex>
@@ -64,8 +64,8 @@ export default function VideosBrowser({onSelect}: VideosBrowserProps) {
         {isLoading && <SpinnerBox />}
 
         {!isLoading && assets.length === 0 && (
-          <Card padding={2} marginY={4} border radius={2}>
-            <Text align="center" muted>
+          <Card padding={4} marginY={4} border radius={2} tone="transparent">
+            <Text align="center" muted size={3}>
               {searchQuery ? `No videos found for "${searchQuery}"` : 'No videos in this dataset'}
             </Text>
           </Card>

package/src/hooks/useAssets.ts

@@ -25,10 +25,14 @@ const useAssetDocuments = createHookFromObservableFactory<
   const search = createSearchFilter(searchQuery)
   const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
 
-  const query = ASSET_SORT_OPTIONS[sort].groq
-  return documentStore.listenQuery(/* groq */ `*[${filter}] | order(${query})`, search.params, {
-    apiVersion: SANITY_API_VERSION,
-  })
+  const sortFragment = ASSET_SORT_OPTIONS[sort].groq
+  return documentStore.listenQuery(
+    /* groq */ `*[${filter}] | order(${sortFragment})`,
+    search.params,
+    {
+      apiVersion: SANITY_API_VERSION,
+    }
+  )
 })
 
 export default function useAssets() {
@@ -45,7 +49,7 @@ export default function useAssets() {
           ({
             ...(collated.draft || collated.published || {}),
             _id: collated.id,
-          } as VideoAssetDocument)
+          }) as VideoAssetDocument
       ),
     [assetDocuments]
   )

package/src/util/constants.ts

@@ -9,5 +9,5 @@ export const DIALOGS_Z_INDEX = 60_000
 
 export const THUMBNAIL_ASPECT_RATIO = 16 / 9
 
-/** Thumbnails and input shouldn't go beyond this aspect ratio */
-export const MIN_ASPECT_RATIO = 1
+/** To prevent excessive height, thumbnails and input should not go beyond to this aspect ratio. */
+export const MIN_ASPECT_RATIO = 5 / 4

package/src/util/createSearchFilter.ts

@@ -12,7 +12,7 @@ function tokenize(string: string): string[] {
 function toGroqParams(terms: string[]): Record<string, string> {
   const params: Record<string, string> = {}
   return terms.reduce((acc, term, i) => {
-    acc[`t${i}`] = `*${term}*` // "t" is short for term
+    acc[`t${i}`] = `${term}*` // "t" is short for term
     return acc
   }, params)
 }
@@ -52,7 +52,7 @@ function extractTermsFromQuery(query: string): string[] {
 }
 
 /** Which properties of the video asset document should we match users' queries against */
-const SEARCH_PATHS = ['filename', 'assetId', '_id']
+const SEARCH_PATHS = ['filename']
 
 /**
  * Create GROQ constraints, given search terms and the full spec of available document types and fields.