sanity-plugin-mux-input 2.3.6 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.3.6",
+  "version": "2.4.1",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -62,7 +62,7 @@
     "iso-639-1": "^3.1.2",
     "jsonwebtoken-esm": "^1.0.5",
     "lodash": "^4.17.21",
-    "react-rx": "^3.0.0",
+    "react-rx": "^4.1.5",
     "rxjs": "^7.8.1",
     "scroll-into-view-if-needed": "^3.1.0",
     "suspend-react": "^0.1.3",
@@ -71,38 +71,38 @@
     "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
-    "@sanity/client": "^6.18.2",
-    "@sanity/pkg-utils": "^6.8.16",
-    "@sanity/plugin-kit": "4.0.12",
+    "@sanity/client": "^6.24.1",
+    "@sanity/pkg-utils": "^6.12.1",
+    "@sanity/plugin-kit": "4.0.19",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/vision": "^3.42.1",
-    "@types/lodash": "^4.17.4",
-    "@types/react": "^18.3.2",
-    "@types/react-is": "^18.3.0",
+    "@sanity/vision": "^3.68.1",
+    "@types/lodash": "^4.17.13",
+    "@types/react": "^18.3.17",
+    "@types/react-is": "^18.3.1",
     "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "eslint": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-config-sanity": "^7.1.2",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-config-sanity": "^7.1.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "npm-run-all2": "^5.0.0",
-    "prettier": "^3.2.5",
-    "prettier-plugin-packagejson": "^2.5.0",
+    "npm-run-all2": "^5.0.2",
+    "prettier": "^3.4.2",
+    "prettier-plugin-packagejson": "^2.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "rimraf": "^5.0.7",
-    "sanity": "^3.42.1",
-    "semantic-release": "^24.0.0",
-    "styled-components": "^6.1.11",
-    "typescript": "^5.4.5",
+    "sanity": "^3.68.1",
+    "semantic-release": "^24.2.0",
+    "styled-components": "^6.1.13",
+    "typescript": "^5.7.2",
     "yalc": "1.0.0-pre.53"
   },
   "peerDependencies": {

package/src/actions/upload.ts

@@ -4,7 +4,7 @@ import {catchError, mergeMap, mergeMapTo, switchMap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
 
 import {createUpChunkObservable} from '../clients/upChunkObservable'
-import type {MuxAsset, MuxNewAssetSettings, PluginConfig, UploadConfig} from '../util/types'
+import type {MuxAsset, MuxNewAssetSettings} from '../util/types'
 import {getAsset} from './assets'
 import {testSecretsObservable} from './secrets'
 

package/src/components/FileInputArea.tsx

@@ -1,5 +1,5 @@
 import {UploadIcon} from '@sanity/icons'
-import {Box, Button, Card, CardTone, Flex, Inline, Text} from '@sanity/ui'
+import {Card, CardTone, Flex, Inline} from '@sanity/ui'
 import {PropsWithChildren, useRef, useState} from 'react'
 
 import {extractDroppedFiles} from '../util/extractFiles'

package/src/components/Input.tsx

@@ -1,5 +1,5 @@
 import {Card} from '@sanity/ui'
-import React, {memo, Suspense} from 'react'
+import {memo, Suspense} from 'react'
 
 import {useAssetDocumentValues} from '../hooks/useAssetDocumentValues'
 import {useClient} from '../hooks/useClient'

package/src/components/InputBrowser.tsx

@@ -1,5 +1,5 @@
 import {Dialog} from '@sanity/ui'
-import React, {useCallback, useId} from 'react'
+import {useCallback, useId} from 'react'
 import {styled} from 'styled-components'
 
 import type {SetDialogState} from '../hooks/useDialogState'

package/src/components/InputError.tsx

@@ -1,5 +1,5 @@
 import {Box, Dialog, Text} from '@sanity/ui'
-import React, {useId} from 'react'
+import {useId} from 'react'
 
 interface Props {
   error: Error

package/src/components/MuxLogo.tsx

@@ -1,4 +1,4 @@
-import React, {useId, useMemo} from 'react'
+import {useId, useMemo} from 'react'
 
 // Mapping ids to ensure filter refs are unique, otherwise all Logo instances are hidden if the first SVG is hidden, due to how SVGs deal with relative links and ids
 const ids = [

package/src/components/Onboard.tsx

@@ -1,6 +1,6 @@
 import {PlugIcon} from '@sanity/icons'
 import {Button, Card, Flex, Grid, Heading, Inline} from '@sanity/ui'
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import MuxLogo from './MuxLogo'

package/src/components/PlayerActionsMenu.tsx

@@ -1,6 +1,5 @@
 import {
   EllipsisHorizontalIcon,
-  EllipsisVerticalIcon,
   LockIcon,
   PlugIcon,
   ResetIcon,
@@ -19,9 +18,9 @@ import {
   Popover,
   Text,
   Tooltip,
-  useClickOutside,
+  useClickOutsideEvent,
 } from '@sanity/ui'
-import React, {memo, useCallback, useEffect, useMemo, useState} from 'react'
+import {memo, useCallback, useEffect, useMemo, useState} from 'react'
 import {PatchEvent, unset} from 'sanity'
 import {styled} from 'styled-components'
 
@@ -65,9 +64,9 @@ function PlayerActionsMenu(
     }
   }, [dialogState, open])
 
-  useClickOutside(
-    useCallback(() => setOpen(false), []),
-    [menuElement]
+  useClickOutsideEvent(
+    () => setOpen(false),
+    () => [menuElement]
   )
 
   return (

package/src/components/SelectAsset.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {PatchEvent, set, setIfMissing, unset} from 'sanity'
 
 import type {SetDialogState} from '../hooks/useDialogState'

package/src/components/SelectSortOptions.tsx

@@ -1,6 +1,6 @@
 import {SortIcon} from '@sanity/icons'
 import {Button, Menu, MenuButton, MenuItem, PopoverProps} from '@sanity/ui'
-import React, {useId} from 'react'
+import {useId} from 'react'
 
 import {ASSET_SORT_OPTIONS, SortOption} from '../hooks/useAssets'
 

package/src/components/UploadPlaceholder.tsx

@@ -1,8 +1,7 @@
 import {PlugIcon, SearchIcon, UploadIcon} from '@sanity/icons'
 import {DocumentVideoIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Inline, Text} from '@sanity/ui'
-import React, {useCallback} from 'react'
-import {styled} from 'styled-components'
+import {Button, Card, Flex, Inline, Text} from '@sanity/ui'
+import {useCallback} from 'react'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import {FileInputButton, type FileInputButtonProps} from './FileInputButton'

package/src/components/VideoDetails/VideoDetails.tsx

@@ -280,6 +280,13 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
                     size={2}
                   />
                   <IconInfo text={`Mux ID: \n${displayInfo.id}`} icon={TagIcon} size={2} />
+                  {displayInfo?.playbackId && (
+                    <IconInfo
+                      text={`Playback ID: ${displayInfo.playbackId}`}
+                      icon={TagIcon}
+                      size={2}
+                    />
+                  )}
                 </Stack>
               </Stack>
             </TabPanel>

package/src/components/VideoThumbnail.tsx

@@ -1,6 +1,6 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Spinner, Stack, Text} from '@sanity/ui'
-import React, {useMemo, useState} from 'react'
+import {useMemo, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
@@ -46,7 +46,7 @@ export default function VideoThumbnail({
       if (status !== 'error') setStatus('error')
       return undefined
     }
-  }, [asset, client, width, status, setStatus])
+  }, [asset, client, posterWidth, status])
 
   function handleLoad() {
     setStatus('loaded')

package/src/hooks/useAssets.ts

@@ -1,5 +1,6 @@
 import {useMemo, useState} from 'react'
-import {collate, createHookFromObservableFactory, DocumentStore, useDocumentStore} from 'sanity'
+import {useObservable} from 'react-rx'
+import {collate, DocumentStore, useDocumentStore} from 'sanity'
 
 import {SANITY_API_VERSION} from '../hooks/useClient'
 import {createSearchFilter} from '../util/createSearchFilter'
@@ -14,44 +15,49 @@ export const ASSET_SORT_OPTIONS = {
 
 export type SortOption = keyof typeof ASSET_SORT_OPTIONS
 
-const useAssetDocuments = createHookFromObservableFactory<
-  VideoAssetDocument[],
-  {
-    documentStore: DocumentStore
-    sort: SortOption
-    searchQuery: string
-  }
->(({documentStore, sort, searchQuery}) => {
-  const search = createSearchFilter(searchQuery)
-  const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
+const useAssetDocuments = ({
+  documentStore,
+  sort,
+  searchQuery,
+}: {
+  documentStore: DocumentStore
+  sort: SortOption
+  searchQuery: string
+}): VideoAssetDocument[] | undefined => {
+  const memoizedObservable = useMemo(() => {
+    const search = createSearchFilter(searchQuery)
+    const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
+    const sortFragment = ASSET_SORT_OPTIONS[sort].groq
+    return documentStore.listenQuery(
+      /* groq */ `*[${filter}] | order(${sortFragment})`,
+      search.params,
+      {
+        apiVersion: SANITY_API_VERSION,
+      }
+    )
+  }, [documentStore, sort, searchQuery])
 
-  const sortFragment = ASSET_SORT_OPTIONS[sort].groq
-  return documentStore.listenQuery(
-    /* groq */ `*[${filter}] | order(${sortFragment})`,
-    search.params,
-    {
-      apiVersion: SANITY_API_VERSION,
-    }
-  )
-})
+  return useObservable(memoizedObservable, undefined)
+}
 
 export default function useAssets() {
   const documentStore = useDocumentStore()
   const [sort, setSort] = useState<SortOption>('createdDesc')
   const [searchQuery, setSearchQuery] = useState('')
 
-  const [assetDocuments = [], isLoading] = useAssetDocuments({documentStore, sort, searchQuery})
+  const assetDocumentsObservable = useAssetDocuments({documentStore, sort, searchQuery})
+  const isLoading = assetDocumentsObservable === undefined
   const assets = useMemo(
     () =>
       // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-      collate<VideoAssetDocument>(assetDocuments).map(
+      collate<VideoAssetDocument>(assetDocumentsObservable ?? []).map(
         (collated) =>
           ({
             ...(collated.draft || collated.published || {}),
             _id: collated.id,
           }) as VideoAssetDocument
       ),
-    [assetDocuments]
+    [assetDocumentsObservable]
   )
 
   return {

package/src/util/getPlaybackPolicy.ts

@@ -1,5 +1,10 @@
 import type {PlaybackPolicy, VideoAssetDocument} from './types'
 
-export function getPlaybackPolicy(asset: Pick<VideoAssetDocument, 'data'>): PlaybackPolicy {
-  return asset.data?.playback_ids?.[0]?.policy ?? 'public'
+export function getPlaybackPolicy(
+  asset: Pick<VideoAssetDocument, 'data' | 'playbackId'>
+): PlaybackPolicy {
+  return (
+    asset.data?.playback_ids?.find((playbackId) => asset.playbackId === playbackId.id)?.policy ??
+    'public'
+  )
 }

package/src/util/getVideoMetadata.ts

@@ -10,6 +10,7 @@ export default function getVideoMetadata(doc: VideoAssetDocument) {
   return {
     title: doc.filename || id.slice(0, 12),
     id: id,
+    playbackId: doc.playbackId,
     createdAt: date,
     duration: doc.data?.duration ? formatSeconds(doc.data?.duration) : undefined,
     aspect_ratio: doc.data?.aspect_ratio,