sanity-plugin-mux-input 2.3.6 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.3.6",
+  "version": "2.4.0",
   "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.22.4",
+    "@sanity/pkg-utils": "^6.11.11",
+    "@sanity/plugin-kit": "4.0.18",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/vision": "^3.42.1",
-    "@types/lodash": "^4.17.4",
-    "@types/react": "^18.3.2",
+    "@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",
-    "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",
-    "semantic-release": "^24.0.0",
-    "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

@@ -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/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,