refactor: ready for testing

README.md

@@ -70,20 +70,13 @@ More information for this feature of the plugin can be found on Mux's [documenta
 To enable [static MP4 renditions](https://docs.mux.com/guides/video/enable-static-mp4-renditions), add `mp4_support: 'standard'` to the `options` of your `mux.video` schema type.
 
 js```
-{
-title: "Video blog post",
-name: "videoBlogPost",
-type: "document",
-fields: [
-{ title: "Title", name: "title", type: "string" },
-{
-title: "Video file",
-name: "video",
-type: "mux.video",
-options: {mp4_support: 'standard'}
-}
-]
-}
+import {muxInput} from 'sanity-plugin-mux-input'
+
+export deafult createConfig({
+plugins: [muxInput({
+mp4_support: "standard"
+})]
+})
 
 ```
 

src/components/Player.tsx

@@ -132,7 +132,7 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
         progress={100}
         filename={asset?.filename}
         text={(isLoading !== true && isLoading) || 'Waiting for Mux to complete the file'}
-        onCancel={readOnly ? undefined : () => handleCancelUpload().catch(setError)}
+        onCancel={readOnly ? undefined : () => handleCancelUpload()}
       />
     )
   }

src/components/Preview.tsx

@@ -1,36 +1,25 @@
-import React, {useMemo} from 'react'
+import React from 'react'
 import {SanityDefaultPreview} from 'sanity/_unstable'
 
-import type {MuxAsset, VideoAssetDocument} from '../util/types'
+import {useAssetDocumentValues} from '../hooks/useAssetDocumentValues'
 import {VideoThumbnail} from './VideoSource.styled'
 
 export interface MuxVideoPreviewProps {
   value: {
-    playbackId?: VideoAssetDocument['playbackId']
-    status?: VideoAssetDocument['status']
-    thumbTime?: VideoAssetDocument['thumbTime']
-    filename?: VideoAssetDocument['filename']
-    duration?: MuxAsset['duration']
-    playbackIds?: MuxAsset['playback_ids']
+    asset: {
+      _type: 'reference'
+      _ref: string
+    }
   }
 }
-const MuxVideoPreview = ({value = {}}: MuxVideoPreviewProps) => {
-  const asset = useMemo(() => {
-    if (!value || value.status !== 'ready' || !value.playbackId || !value.playbackIds) return null
+const MuxVideoPreview = ({value}: MuxVideoPreviewProps) => {
+  const assetDocumentValues = useAssetDocumentValues(value?.asset!)
 
-    return {
-      playbackId: value.playbackId,
-      status: value.status,
-      thumbTime: value.thumbTime,
-      filename: value.filename,
-      duration: value.duration,
-      data: {playback_ids: value.playbackIds},
-    }
-  }, [value])
-  if (asset) {
-    return <VideoThumbnail asset={asset} width={640} />
+  if (assetDocumentValues.value) {
+    return <VideoThumbnail asset={assetDocumentValues.value} width={640} />
   }
 
+  // @ts-expect-error
   const {filename, playbackId, status} = value ?? {}
 
   return (

src/index.tsx

@@ -55,6 +55,7 @@ export const muxInput = createPlugin<Partial<Config> | void>((userConfig) => {
         if (isMuxInputPreviewProps(props)) {
           return (
             <AspectRatioCard>
+              {/* @ts-expect-error */}
               <Preview {...props} />
             </AspectRatioCard>
           )