sanity-plugin-mux-input 2.3.5 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -55,14 +55,14 @@
   "dependencies": {
     "@mux/mux-player-react": "^2.6.0",
     "@mux/upchunk": "^3.4.0",
-    "@sanity/icons": "^2.11.8",
+    "@sanity/icons": "^3.0.0",
     "@sanity/incompatible-plugin": "^1.0.4",
     "@sanity/ui": "^2.1.11",
     "@sanity/uuid": "^3.0.2",
     "iso-639-1": "^3.1.2",
     "jsonwebtoken-esm": "^1.0.5",
     "lodash": "^4.17.21",
-    "react-rx": "^2.1.3",
+    "react-rx": "^4.1.5",
     "rxjs": "^7.8.1",
     "scroll-into-view-if-needed": "^3.1.0",
     "suspend-react": "^0.1.3",
@@ -71,40 +71,38 @@
     "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@sanity/client": "^6.18.2",
-    "@sanity/pkg-utils": "^6.8.16",
-    "@sanity/plugin-kit": "4.0.12",
-    "@sanity/semantic-release-preset": "^4.1.7",
-    "@sanity/vision": "^3.42.1",
-    "@types/lodash": "^4.17.4",
-    "@types/react": "^18.3.2",
+    "@sanity/client": "^6.22.4",
+    "@sanity/pkg-utils": "^6.11.11",
+    "@sanity/plugin-kit": "4.0.18",
+    "@sanity/semantic-release-preset": "^5.0.0",
+    "@sanity/vision": "^3.64.1",
+    "@types/lodash": "^4.17.13",
+    "@types/react": "^18.3.12",
     "@types/react-is": "^18.3.0",
     "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "cz-conventional-changelog": "^3.3.0",
-    "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.0.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.3.3",
+    "prettier-plugin-packagejson": "^2.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "rimraf": "^5.0.7",
-    "sanity": "^3.42.1",
-    "styled-components": "^6.1.11",
-    "typescript": "^5.4.5",
+    "sanity": "^3.64.1",
+    "semantic-release": "^24.2.0",
+    "styled-components": "^6.1.13",
+    "typescript": "^5.6.3",
     "yalc": "1.0.0-pre.53"
   },
   "peerDependencies": {

package/src/actions/upload.ts

@@ -1,10 +1,10 @@
 import {uuid as generateUuid} from '@sanity/uuid'
-import {concat, defer, from, of, throwError, type Observable} from 'rxjs'
+import {concat, defer, from, type Observable, of, throwError} from 'rxjs'
 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,8 +1,9 @@
-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 {Card, CardTone, Flex, Inline} from '@sanity/ui'
+import {PropsWithChildren, useRef, useState} from 'react'
+
 import {extractDroppedFiles} from '../util/extractFiles'
+import {FileInputButton} from './FileInputButton'
 
 interface FileInputAreaProps extends PropsWithChildren {
   accept?: string

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/Uploader.tsx

@@ -1,7 +1,7 @@
 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 {type Observable, Subject, Subscription} from 'rxjs'
 import {takeUntil, tap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
 import {PatchEvent, set, setIfMissing} from 'sanity'

package/src/components/VideoDetails/VideoDetails.tsx

@@ -7,8 +7,8 @@ import {
   ErrorOutlineIcon,
   RevertIcon,
   SearchIcon,
-  TrashIcon,
   TagIcon,
+  TrashIcon,
 } from '@sanity/icons'
 import {
   Button,
@@ -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,12 +1,12 @@
 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'
 import useInView from '../hooks/useInView'
 import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
-import {getAnimatedPosterSrc, type AnimatedPosterSrcOptions} from '../util/getAnimatedPosterSrc'
+import {type AnimatedPosterSrcOptions, getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
 import {VideoAssetDocument} from '../util/types'
 
 const Image = styled.img`
@@ -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/components/documentPreview/PaneItemPreview.tsx

@@ -2,8 +2,8 @@
 // https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
 import {Inline} from '@sanity/ui'
 import {isNumber, isString} from 'lodash'
-import {isValidElement} from 'react'
-import {useMemoObservable} from 'react-rx'
+import {isValidElement, useMemo} from 'react'
+import {useObservable} from 'react-rx'
 import type {SanityDocument, SchemaType} from 'sanity'
 import type {PreviewValue} from 'sanity'
 import {
@@ -44,12 +44,15 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
       ? value.title
       : null
 
-  // NOTE: this emits sync so can never be null
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const {draft, published, isLoading} = useMemoObservable<PaneItemPreviewState>(
+  const observable = useMemo(
     () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
-    [props.documentPreviewStore, schemaType, value._id, title]
-  )!
+    [props.documentPreviewStore, schemaType, title, value._id]
+  )
+  const {draft, published, isLoading} = useObservable(observable, {
+    draft: null,
+    published: null,
+    isLoading: true,
+  })
 
   const status = isLoading ? null : (
     <Inline space={4}>

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,