sanity-plugin-mux-input 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -25,8 +25,8 @@
     ".": {
       "types": "./lib/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./lib/index.esm.js",
       "require": "./lib/index.js",
+      "import": "./lib/index.esm.js",
       "default": "./lib/index.esm.js"
     },
     "./package.json": "./package.json"
@@ -56,58 +56,58 @@
     "format": "prettier --write --cache --ignore-unknown ."
   },
   "dependencies": {
-    "@mux/playback-core": "^0.11.0",
-    "@mux/upchunk": "^3.0.0",
+    "@mux/mux-video-react": "^0.7",
+    "@mux/upchunk": "^3",
     "@sanity/icons": "^2",
     "@sanity/incompatible-plugin": "^1",
     "@sanity/ui": "^1",
     "@sanity/uuid": "^3",
     "classnames": "^2.3.2",
     "jsonwebtoken-esm": "^1.0.3",
-    "media-chrome": "^0.16.0",
-    "motion": "^10.14.3",
+    "media-chrome": "^0.17.0",
+    "motion": "^10",
     "rxjs": "^7",
-    "scroll-into-view-if-needed": "^3.0.3",
-    "suspend-react": "^0.0.8",
-    "swr": "^1.3.0",
-    "use-device-pixel-ratio": "^1.1.0",
+    "scroll-into-view-if-needed": "^3",
+    "suspend-react": "^0.0.9",
+    "swr": "^2.0.0",
+    "use-device-pixel-ratio": "^1.1.2",
     "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/pkg-utils": "^2.1.0",
-    "@sanity/plugin-kit": "^3.1.1",
-    "@sanity/semantic-release-preset": "^2.0.2",
-    "@sanity/vision": "^3.0.0",
+    "@commitlint/cli": "^17.4.2",
+    "@commitlint/config-conventional": "^17.4.2",
+    "@sanity/pkg-utils": "^2.2.1",
+    "@sanity/plugin-kit": "^3.1.4",
+    "@sanity/semantic-release-preset": "^3.0.2",
+    "@sanity/vision": "^3.2.3",
     "@types/react": "^18.0.26",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.4",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "husky": "^8.0.2",
-    "lint-staged": "^13.0.3",
-    "next": "^13.0.2",
-    "next-sanity": "^1.0.9",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.0",
+    "next": "^13.1.2",
+    "next-sanity": "^4.0.6",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.3",
     "prettier-plugin-packagejson": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "sanity": "^3.1.4",
+    "rimraf": "^4.0.4",
+    "sanity": "^3.2.3",
     "styled-components": "^5.3.6",
-    "type-fest": "^3.2.0",
+    "type-fest": "^3.5.1",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {

package/src/components/Player.tsx

@@ -1,4 +1,4 @@
-import {type PlaybackEngine, generatePlayerInitTime, initialize} from '@mux/playback-core'
+import MuxVideo from '@mux/mux-video-react'
 import {Card, Text} from '@sanity/ui'
 import {
   MediaControlBar,
@@ -35,7 +35,7 @@ interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
   setDialogState: SetDialogState
 }
 
-const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogState}: Props) => {
+const MuxVideoOld = ({asset, buttons, readOnly, onChange, dialogState, setDialogState}: Props) => {
   const client = useClient()
   const isLoading = useMemo<boolean | string>(() => {
     if (asset?.status === 'preparing') {
@@ -88,25 +88,6 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
       muteRef.current.shadowRoot.appendChild(style.cloneNode(true))
     }
   }, [])
-  const [playerInitTime] = useState(() => generatePlayerInitTime())
-  const playbackEngineRef = useRef<PlaybackEngine | undefined>(undefined)
-
-  useEffect(() => {
-    if (isLoading || !videoSrc) {
-      return
-    }
-    const nextPlaybackEngineRef = initialize(
-      {
-        src: videoSrc,
-        playerInitTime,
-        playerSoftwareName: 'sanity-plugin-mux-input',
-        playerSoftwareVersion: 'dev-preview',
-      },
-      video.current,
-      playbackEngineRef.current
-    )
-    playbackEngineRef.current = nextPlaybackEngineRef
-  }, [videoSrc, isLoading, playerInitTime])
 
   useEffect(() => {
     if (asset?.status === 'errored') {
@@ -117,6 +98,15 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
     }
   }, [asset.data?.errors?.messages, asset?.status, handleCancelUpload])
 
+  const signedToken = useMemo(() => {
+    try {
+      const url = new URL(videoSrc!)
+      return url.searchParams.get('token')
+    } catch {
+      return false
+    }
+  }, [videoSrc])
+
   if (error) {
     // @TODO better error handling
     throw error
@@ -141,16 +131,17 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
     <>
       <VideoContainer shadow={1} tone="transparent" scheme="dark">
         <MediaController>
-          <video
+          <MuxVideo
             playsInline
             ref={video}
+            playbackId={`${asset.playbackId}${signedToken ? `?token=${signedToken}` : ''}`}
             onError={handleError}
             slot="media"
             preload="metadata"
             crossOrigin="anonomous"
           >
             <ThumbnailsMetadataTrack asset={asset} />
-          </video>
+          </MuxVideo>
           <PosterImage asset={asset} />
           <MediaLoadingIndicator slot="centered-chrome" noAutoHide />
           <StyledCenterControls slot="centered-chrome">
@@ -193,4 +184,4 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
   )
 }
 
-export default MuxVideo
+export default MuxVideoOld