sanity-plugin-mux-input 2.10.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -52,7 +52,7 @@
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "@mux/mux-player-react": "^2.6.0",
+    "@mux/mux-player-react": "^3.8.0",
     "@mux/upchunk": "^3.4.0",
     "@sanity/icons": "^3.0.0",
     "@sanity/incompatible-plugin": "^1.0.4",

package/src/_exports/index.ts

@@ -8,15 +8,28 @@ export type {VideoAssetDocument} from '../util/types'
 
 export const defaultConfig: PluginConfig = {
   mp4_support: 'none',
-  encoding_tier: 'smart',
+  video_quality: 'plus',
   max_resolution_tier: '1080p',
   normalize_audio: false,
+  defaultPublic: true,
   defaultSigned: false,
   tool: DEFAULT_TOOL_CONFIG,
   allowedRolesForConfiguration: [],
 }
 
 export const muxInput = definePlugin<Partial<PluginConfig> | void>((userConfig) => {
+  // TODO: Remove this on next major version when we end support for encoding_tier
+  if (typeof userConfig === 'object' && 'encoding_tier' in userConfig) {
+    const deprecated_encoding_tier = userConfig.encoding_tier
+    if (!userConfig.video_quality) {
+      if (deprecated_encoding_tier === 'baseline') {
+        userConfig.video_quality = 'basic'
+      }
+      if (deprecated_encoding_tier === 'smart') {
+        userConfig.video_quality = 'plus'
+      }
+    }
+  }
   const config: PluginConfig = {...defaultConfig, ...(userConfig || {})}
   return {
     name: 'mux-input',

package/src/components/UploadConfiguration.tsx

@@ -23,7 +23,7 @@ import PlaybackPolicy from './uploadConfiguration/PlaybackPolicy'
 import type {StagedUpload} from './Uploader'
 
 export type UploadConfigurationStateAction =
-  | {action: 'encoding_tier'; value: UploadConfig['encoding_tier']}
+  | {action: 'video_quality'; value: UploadConfig['video_quality']}
   | {action: 'max_resolution_tier'; value: UploadConfig['max_resolution_tier']}
   | {action: 'mp4_support'; value: UploadConfig['mp4_support']}
   | {action: 'normalize_audio'; value: UploadConfig['normalize_audio']}
@@ -31,10 +31,11 @@ export type UploadConfigurationStateAction =
   | {action: 'public_policy'; value: UploadConfig['public_policy']}
   | TrackAction
 
-const ENCODING_OPTIONS = [
-  {value: 'smart', label: 'Smart'},
-  {value: 'baseline', label: 'Baseline'},
-] as const satisfies {value: UploadConfig['encoding_tier']; label: string}[]
+const VIDEO_QUALITY_LEVELS = [
+  {value: 'basic', label: 'Basic'},
+  {value: 'plus', label: 'Plus'},
+  {value: 'premium', label: 'Premium'},
+] as const satisfies {value: UploadConfig['video_quality']; label: string}[]
 
 const RESOLUTION_TIERS = [
   {value: '1080p', label: '1080p'},
@@ -63,7 +64,7 @@ export default function UploadConfiguration({
 }) {
   const id = useId()
   const autoTextTracks = useRef<NonNullable<UploadConfig['text_tracks']>>(
-    pluginConfig.encoding_tier === 'smart' && pluginConfig.defaultAutogeneratedSubtitleLang
+    pluginConfig.video_quality === 'plus' && pluginConfig.defaultAutogeneratedSubtitleLang
       ? [
           {
             _id: uuid(),
@@ -78,21 +79,21 @@ export default function UploadConfiguration({
   const [config, dispatch] = useReducer(
     (prev: UploadConfig, action: UploadConfigurationStateAction) => {
       switch (action.action) {
-        case 'encoding_tier':
-          // If encoding tier switches to baseline, remove smart-only features
-          if (action.value === 'baseline') {
+        case 'video_quality':
+          // If video quality level switches to basic, remove plus-only features
+          if (action.value === 'basic') {
             return Object.assign({}, prev, {
-              encoding_tier: action.value,
+              video_quality: action.value,
               mp4_support: 'none',
               max_resolution_tier: '1080p',
               text_tracks: prev.text_tracks?.filter(({type}) => type !== 'autogenerated'),
               public_policy: true,
               signed_policy: false,
             })
-            // If encoding tier switches to smart, add back in default smart features
+            // If video quality level switches to plus, add back in default plus features
           }
           return Object.assign({}, prev, {
-            encoding_tier: action.value,
+            video_quality: action.value,
             mp4_support: pluginConfig.mp4_support,
             max_resolution_tier: pluginConfig.max_resolution_tier,
             text_tracks: [...autoTextTracks, ...(prev.text_tracks || [])],
@@ -138,11 +139,11 @@ export default function UploadConfiguration({
       }
     },
     {
-      encoding_tier: pluginConfig.encoding_tier,
+      video_quality: pluginConfig.video_quality,
       max_resolution_tier: pluginConfig.max_resolution_tier,
       mp4_support: pluginConfig.mp4_support,
       signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
-      public_policy: true,
+      public_policy: pluginConfig.defaultPublic,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks,
     } as UploadConfig
@@ -159,6 +160,7 @@ export default function UploadConfiguration({
   }, [])
   if (skipConfig) return null
 
+  const basicConfig = config.video_quality !== 'plus' && config.video_quality !== 'premium'
   const maxSupportedResolution = RESOLUTION_TIERS.findIndex(
     (rt) => rt.value === pluginConfig.max_resolution_tier
   )
@@ -198,11 +200,11 @@ export default function UploadConfiguration({
         {!disableUploadConfig && (
           <Stack space={3} paddingBottom={2}>
             <FormField
-              title="Encoding Tier"
+              title="Video Quality Level"
               description={
                 <>
-                  The encoding tier informs the cost, quality, and available platform features for
-                  the asset.{' '}
+                  The video quality level informs the cost, quality, and available platform features
+                  for the asset.{' '}
                   <a
                     href="https://docs.mux.com/guides/use-encoding-tiers"
                     target="_blank"
@@ -214,17 +216,17 @@ export default function UploadConfiguration({
               }
             >
               <Flex gap={3}>
-                {ENCODING_OPTIONS.map(({value, label}) => {
+                {VIDEO_QUALITY_LEVELS.map(({value, label}) => {
                   const inputId = `${id}--encodingtier-${value}`
                   return (
                     <Flex key={value} align="center" gap={2}>
                       <Radio
-                        checked={config.encoding_tier === value}
+                        checked={config.video_quality === value}
                         name="asset-encodingtier"
                         onChange={(e) =>
                           dispatch({
-                            action: 'encoding_tier' as const,
-                            value: e.currentTarget.value as UploadConfig['encoding_tier'],
+                            action: 'video_quality' as const,
+                            value: e.currentTarget.value as UploadConfig['video_quality'],
                           })
                         }
                         value={value}
@@ -239,7 +241,7 @@ export default function UploadConfiguration({
               </Flex>
             </FormField>
 
-            {config.encoding_tier === 'smart' && maxSupportedResolution > 0 && (
+            {!basicConfig && maxSupportedResolution > 0 && (
               <FormField
                 title="Resolution Tier"
                 description={
@@ -286,12 +288,12 @@ export default function UploadConfiguration({
               </FormField>
             )}
 
-            {config.encoding_tier === 'smart' && (
+            {!basicConfig && (
               <FormField title="Additional Configuration">
                 <Stack space={2}>
                   <PlaybackPolicy id={id} config={config} secrets={secrets} dispatch={dispatch} />
 
-                  {config.encoding_tier === 'smart' && (
+                  {!basicConfig && (
                     <Flex align="center" gap={2} padding={[0, 2]}>
                       <Checkbox
                         id={`${id}--mp4_support`}
@@ -319,7 +321,7 @@ export default function UploadConfiguration({
           </Stack>
         )}
 
-        {!disableTextTrackConfig && config.encoding_tier === 'smart' && (
+        {!disableTextTrackConfig && !basicConfig && (
           <TextTracksEditor
             tracks={config.text_tracks}
             dispatch={dispatch}
@@ -329,9 +331,7 @@ export default function UploadConfiguration({
 
         <Box marginTop={4}>
           <Button
-            disabled={
-              config.encoding_tier === 'smart' && !config.public_policy && !config.signed_policy
-            }
+            disabled={!basicConfig && !config.public_policy && !config.signed_policy}
             icon={UploadIcon}
             text="Upload"
             tone="positive"
@@ -388,7 +388,7 @@ function formatUploadConfig(config: UploadConfig): MuxNewAssetSettings {
     mp4_support: config.mp4_support,
     playback_policy: setPlaybackPolicy(config),
     max_resolution_tier: config.max_resolution_tier,
-    encoding_tier: config.encoding_tier,
+    video_quality: config.video_quality,
     normalize_audio: config.normalize_audio,
   }
 }

package/src/components/UploadProgress.tsx

@@ -42,6 +42,10 @@ export const UploadProgress = ({
   onCancel?: React.MouseEventHandler<HTMLButtonElement>
   text?: React.ReactNode
 }) => {
+  // Disable cancel button when upload is 90% or more complete
+  // to prevent inconsistency between Mux and Sanity
+  const isCancelDisabled = progress >= 90
+
   return (
     <CardWrapper tone="primary" padding={4} border height="fill">
       <FlexWrapper align="center" justify="space-between" height="fill" direction="row" gap={2}>
@@ -67,6 +71,7 @@ export const UploadProgress = ({
             mode="ghost"
             tone="critical"
             onClick={onCancel}
+            disabled={isCancelDisabled}
           />
         ) : null}
       </FlexWrapper>

package/src/components/Uploader.tsx

@@ -92,6 +92,7 @@ export default function Uploader(props: Props) {
   ).current
 
   const uploadRef = useRef<Subscription | null>(null)
+  const uploadingDocumentId = useRef<string | null>(null)
   const [state, dispatch] = useReducer(
     (prev: State, action: UploaderStateAction) => {
       switch (action.action) {
@@ -121,11 +122,13 @@ export default function Uploader(props: Props) {
           // Clear upload observable on completion
           uploadRef.current?.unsubscribe()
           uploadRef.current = null
+          uploadingDocumentId.current = null
           return INITIAL_STATE
         case 'error':
           // Clear upload observable on error
           uploadRef.current?.unsubscribe()
           uploadRef.current = null
+          uploadingDocumentId.current = null
           return Object.assign({}, INITIAL_STATE, {error: action.error})
         default:
           return prev
@@ -139,13 +142,38 @@ export default function Uploader(props: Props) {
   )
 
   // Make sure we close out the upload observer on dismount
+  // and cleanup orphaned documents if upload was in progress
   useEffect(() => {
-    return () => {
+    const cleanup = () => {
+      // Cancel subscription
       if (uploadRef.current && !uploadRef.current.closed) {
         uploadRef.current.unsubscribe()
       }
+
+      // Delete orphaned document if upload was in progress and document is different from the saved asset
+      if (uploadingDocumentId.current && props.asset?._id !== uploadingDocumentId.current) {
+        const docId = uploadingDocumentId.current
+        uploadingDocumentId.current = null
+
+        props.client.delete(docId).catch((err) => {
+          console.warn('Failed to cleanup orphaned upload document:', err)
+        })
+      }
+    }
+
+    const handleBeforeUnload = () => {
+      cleanup()
     }
-  }, [])
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    window.addEventListener('pagehide', handleBeforeUnload)
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+      window.removeEventListener('pagehide', handleBeforeUnload)
+      cleanup()
+    }
+  }, [props.client, props.asset?._id])
 
   /* -------------------------------------------------------------------------- */
   /*                                  Uploading                                 */
@@ -183,8 +211,9 @@ export default function Uploader(props: Props) {
           takeUntil(
             cancelUploadButton.observable.pipe(
               tap(() => {
-                if (state.uploadStatus?.uuid) {
-                  props.client.delete(state.uploadStatus.uuid)
+                if (uploadingDocumentId.current) {
+                  props.client.delete(uploadingDocumentId.current)
+                  uploadingDocumentId.current = null
                 }
               })
             )
@@ -196,6 +225,10 @@ export default function Uploader(props: Props) {
       next: (event) => {
         switch (event.type) {
           case 'uuid':
+            // Track the document ID for cleanup on unmount
+            uploadingDocumentId.current = event.uuid
+            dispatch({action: 'progressInfo', ...event})
+            break
           case 'file':
           case 'url':
             dispatch({action: 'progressInfo', ...event})
@@ -205,6 +238,7 @@ export default function Uploader(props: Props) {
             break
           case 'success':
             dispatch({action: 'progress', percent: 100})
+            uploadingDocumentId.current = null
             props.onChange(
               PatchEvent.from([
                 setIfMissing({asset: {}}),

package/src/components/VideoPlayer.tsx

@@ -26,19 +26,23 @@ export default function VideoPlayer({
 
   const isAudio = assetIsAudio(asset)
   const muxPlayer = useRef<MuxPlayerRefAttributes>(null)
-  const thumbnail = getPosterSrc({asset, client, width: thumbnailWidth})
 
-  const {src: videoSrc, error} = useMemo(() => {
+  const {
+    src: videoSrc,
+    thumbnail: thumbnailSrc,
+    error,
+  } = useMemo(() => {
     try {
+      const thumbnail = getPosterSrc({asset, client, width: thumbnailWidth})
       const src = asset?.playbackId && getVideoSrc({client, asset})
-      if (src) return {src: src}
+      if (src) return {src: src, thumbnail}
 
       return {error: new TypeError('Asset has no playback ID')}
       // eslint-disable-next-line @typescript-eslint/no-shadow
     } catch (error) {
       return {error}
     }
-  }, [asset, client])
+  }, [asset, client, thumbnailWidth])
 
   const signedToken = useMemo(() => {
     try {
@@ -66,7 +70,7 @@ export default function VideoPlayer({
         {videoSrc && (
           <>
             <MuxPlayer
-              poster={thumbnail}
+              poster={thumbnailSrc}
               ref={muxPlayer}
               {...props}
               playsInline

package/src/schema.ts

@@ -98,6 +98,10 @@ const muxAssetData = {
       type: 'string',
       name: 'encoding_tier',
     },
+    {
+      type: 'string',
+      name: 'video_quality',
+    },
     {
       type: 'string',
       name: 'master_access',

package/src/util/types.ts

@@ -4,7 +4,7 @@ import type {PartialDeep} from 'type-fest'
 export interface MuxInputConfig {
   /**
    * Enable static renditions by setting this to 'standard'. Can be overwritten on a per-asset basis.
-   * Requires `"encoding_tier": "smart"`
+   * Requires `"video_quality": "plus"`
    * @see {@link https://docs.mux.com/guides/video/enable-static-mp4-renditions#why-enable-mp4-support}
    * @defaultValue 'none'
    */
@@ -12,18 +12,27 @@ export interface MuxInputConfig {
 
   /**
    * Max resolution tier can be used to control the maximum resolution_tier your asset is encoded, stored, and streamed at.
-   * Requires `"encoding_tier": "smart"`
+   * Requires `"video_quality": "plus"`
    * @see {@link https://docs.mux.com/guides/stream-videos-in-4k}
    * @defaultValue '1080p'
    */
   max_resolution_tier: '2160p' | '1440p' | '1080p'
 
   /**
+   * @deprecated Use {@link video_quality}
+   * <br>
    * The encoding tier informs the cost, quality, and available platform features for the asset.
    * @see {@link https://docs.mux.com/guides/use-encoding-tiers}
    * @defaultValue 'smart'
    */
-  encoding_tier: 'baseline' | 'smart'
+  encoding_tier?: 'baseline' | 'smart'
+
+  /**
+   * The video quality level informs the cost, quality, and available platform features for the asset.
+   * @see {@link https://www.mux.com/docs/guides/use-video-quality-levels}
+   * @defaultValue 'plus'
+   */
+  video_quality: 'basic' | 'plus' | 'premium'
 
   /**
    * Normalize the audio track loudness level.
@@ -39,9 +48,15 @@ export interface MuxInputConfig {
    */
   defaultSigned?: boolean
 
+  /**
+   * Enables public URLs by default.
+   * @defaultValue true
+   */
+  defaultPublic?: boolean
+
   /**
    * Auto-generate captions for these languages by default.
-   * Requires `"encoding_tier": "smart"`
+   * Requires `"video_quality": "plus"`
    *
    * @see {@link https://docs.mux.com/guides/add-autogenerated-captions-and-use-transcripts}
    * @deprecated use `defaultAutogeneratedSubtitleLang` instead. Only a single autogenerated
@@ -50,7 +65,7 @@ export interface MuxInputConfig {
 
   /**
    * Auto-generate captions for this language by default. Users can still
-   * Requires `"encoding_tier": "smart"`
+   * Requires `"video_quality": "plus"`
    *
    * @see {@link https://docs.mux.com/guides/add-autogenerated-captions-and-use-transcripts}
    */
@@ -123,9 +138,10 @@ export const SUPPORTED_MUX_LANGUAGES = [
   {label: 'Bulgarian', code: 'bg', state: 'Beta'},
 ] as const
 
-export const ENCODING_TIERS = [
-  {label: 'Baseline', value: 'baseline'},
-  {label: 'Smart', value: 'smart'},
+export const VIDEO_QUALITY_LEVELS = [
+  {label: 'Basic', value: 'basic'},
+  {label: 'Plus', value: 'plus'},
+  {label: 'Premium', value: 'premium'},
 ] as const
 
 export const SUPPORTED_MUX_LANGUAGES_VALUES = SUPPORTED_MUX_LANGUAGES.map((l) => l.code)
@@ -168,7 +184,7 @@ export type UploadTextTrack = AutogeneratedTextTrack | CustomTextTrack
 export interface UploadConfig
   extends Pick<
     MuxInputConfig,
-    'encoding_tier' | 'max_resolution_tier' | 'mp4_support' | 'normalize_audio'
+    'max_resolution_tier' | 'mp4_support' | 'normalize_audio' | 'video_quality'
   > {
   text_tracks: UploadTextTrack[]
   signed_policy: boolean
@@ -182,7 +198,7 @@ export interface UploadConfig
 export interface MuxNewAssetSettings
   extends Pick<
     MuxInputConfig,
-    'encoding_tier' | 'max_resolution_tier' | 'mp4_support' | 'normalize_audio'
+    'max_resolution_tier' | 'mp4_support' | 'normalize_audio' | 'video_quality'
   > {
   /** An array of objects that each describe an input file to be used to create the asset.*/
   input?: {