sanity-plugin-mux-input 2.0.3 → 2.0.5

package/src/actions/upload.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import type {SanityClient} from '@sanity/client'
+import type {SanityClient} from 'sanity'
 import {uuid as generateUuid} from '@sanity/uuid'
 import {type Observable, concat, defer, from, of, throwError} from 'rxjs'
 import {catchError, mergeMap, mergeMapTo, switchMap} from 'rxjs/operators'

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

package/src/components/__legacy__Uploader.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 // This component needs to be refactored into a functional component
 
-import type {SanityClient} from '@sanity/client'
+import type {SanityClient} from 'sanity'
 import React, {Component} from 'react'
 import {type Observable, Subject} from 'rxjs'
 import {takeUntil, tap} from 'rxjs/operators'

package/src/hooks/useSaveSecrets.ts

@@ -1,4 +1,4 @@
-import type {SanityClient} from '@sanity/client'
+import type {SanityClient} from 'sanity'
 import {useCallback} from 'react'
 
 import {createSigningKeys, haveValidSigningKeys, saveSecrets, testSecrets} from '../actions/secrets'

package/src/util/generateJwt.ts

@@ -1,4 +1,4 @@
-import type {SanityClient} from '@sanity/client'
+import type {SanityClient} from 'sanity'
 import {suspend} from 'suspend-react'
 
 import {readSecrets} from './readSecrets'

package/src/util/getAnimatedPosterSrc.ts

@@ -1,4 +1,4 @@
-import type {SanityClient} from '@sanity/client'
+import type {SanityClient} from 'sanity'
 
 import {generateJwt} from './generateJwt'
 import {getPlaybackId} from './getPlaybackId'

package/src/util/getPosterSrc.ts

@@ -1,4 +1,4 @@
-import type {SanityClient} from '@sanity/client'
+import type {SanityClient} from 'sanity'
 
 import {generateJwt} from './generateJwt'
 import {getPlaybackId} from './getPlaybackId'

package/src/util/getStoryboardSrc.ts

@@ -1,4 +1,4 @@
-import type {SanityClient} from '@sanity/client'
+import type {SanityClient} from 'sanity'
 
 import {generateJwt} from './generateJwt'
 import {getPlaybackId} from './getPlaybackId'

package/src/util/getVideoSrc.ts

@@ -1,4 +1,4 @@
-import type {SanityClient} from '@sanity/client'
+import type {SanityClient} from 'sanity'
 
 import {generateJwt} from './generateJwt'
 import {getPlaybackId} from './getPlaybackId'

package/src/util/readSecrets.ts

@@ -4,7 +4,7 @@
 
 // @TODO rename to readSigningPair
 
-import type {SanityClient} from '@sanity/client'
+import type {SanityClient} from 'sanity'
 import {suspend} from 'suspend-react'
 
 import {cacheNs} from '../util/constants'