sanity-plugin-mux-input 2.6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -76,8 +76,8 @@
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/vision": "^3.77.2",
     "@types/lodash": "^4.17.15",
-    "@types/react": "^18.3.18",
-    "@types/react-is": "^18.3.1",
+    "@types/react": "^19.0.10",
+    "@types/react-is": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "eslint": "^8.57.1",
@@ -93,17 +93,17 @@
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.5.2",
     "prettier-plugin-packagejson": "^2.5.9",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-is": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-is": "^19.0.0",
     "sanity": "^3.77.2",
     "semantic-release": "^24.2.3",
     "styled-components": "^6.1.15",
     "typescript": "5.7.3"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-is": "^18",
+    "react": "^18.3 || ^19",
+    "react-is": "^18.3 || ^19",
     "sanity": "^3.42.0",
     "styled-components": "^5 || ^6"
   },

package/src/components/VideoThumbnail.tsx

@@ -1,10 +1,10 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Spinner, Stack, Text} from '@sanity/ui'
-import {useMemo, useState} from 'react'
+import {useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
-import useInView from '../hooks/useInView'
+import {useInView} from '../hooks/useInView'
 import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
 import {getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
 import {getPosterSrc} from '../util/getPosterSrc'
@@ -36,7 +36,8 @@ export default function VideoThumbnail({
   width?: number
   staticImage?: boolean
 }) {
-  const {inView, ref} = useInView()
+  const ref = useRef<HTMLDivElement | null>(null)
+  const inView = useInView(ref)
   const posterWidth = width || 250
 
   const [status, setStatus] = useState<ImageStatus>('loading')
@@ -74,7 +75,7 @@ export default function VideoThumbnail({
       }}
       border
       radius={2}
-      ref={ref as any}
+      ref={ref}
       tone={STATUS_TO_TONE[status]}
     >
       {inView ? (
@@ -116,9 +117,7 @@ export default function VideoThumbnail({
             alt={`Preview for ${staticImage ? 'image' : 'video'} ${asset.filename || asset.assetId}`}
             onLoad={handleLoad}
             onError={handleError}
-            style={{
-              opacity: status === 'loaded' ? 1 : 0,
-            }}
+            style={{opacity: status === 'loaded' ? 1 : 0}}
           />
         </>
       ) : null}

package/src/hooks/useInView.ts

@@ -1,5 +1,4 @@
-import type {RefObject} from 'react'
-import {useEffect, useRef, useState} from 'react'
+import {useEffect, useState} from 'react'
 
 type IntersectionOptions = {
   root?: Element | null
@@ -8,11 +7,11 @@ type IntersectionOptions = {
   onChange?: (inView: boolean) => void
 }
 
-function useInView<RefElement = HTMLElement>(
+export function useInView(
+  ref: React.RefObject<HTMLDivElement | null>,
   options: IntersectionOptions = {}
-): {inView: boolean; ref: RefObject<RefElement>} {
+) {
   const [inView, setInView] = useState(false)
-  const ref = useRef(null)
 
   useEffect(() => {
     if (!ref.current) return
@@ -37,9 +36,7 @@ function useInView<RefElement = HTMLElement>(
     return () => {
       if (toObserve) observer.unobserve(toObserve)
     }
-  }, [options])
+  }, [options, ref])
 
-  return {inView, ref}
+  return inView
 }
-
-export default useInView

package/src/schema.ts

@@ -141,7 +141,7 @@ const muxAssetData = {
 
 const muxVideoAsset = {
   name: 'mux.videoAsset',
-  type: 'object',
+  type: 'document',
   title: 'Video asset',
   fields: [
     {