sanity-plugin-mux-input 2.3.4 → 2.3.6

package/src/components/VideoPlayer.tsx

@@ -4,7 +4,7 @@ import {Card, Text} from '@sanity/ui'
 import {type PropsWithChildren, useMemo} from 'react'
 
 import {useClient} from '../hooks/useClient'
-import {MIN_ASPECT_RATIO} from '../util/constants'
+import {AUDIO_ASPECT_RATIO, MIN_ASPECT_RATIO} from '../util/constants'
 import {getVideoSrc} from '../util/getVideoSrc'
 import type {VideoAssetDocument} from '../util/types'
 
@@ -17,6 +17,8 @@ export default function VideoPlayer({
 >) {
   const client = useClient()
 
+  const isAudio = assetIsAudio(asset)
+
   const {src: videoSrc, error} = useMemo(() => {
     try {
       const src = asset?.playbackId && getVideoSrc({client, asset})
@@ -41,7 +43,13 @@ export default function VideoPlayer({
   const [width, height] = (asset?.data?.aspect_ratio ?? '16:9').split(':').map(Number)
   const targetAspectRatio =
     props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height)
-  const aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio)
+  let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio)
+  if (isAudio) {
+    aspectRatio = props.forceAspectRatio
+      ? // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
+        props.forceAspectRatio * 1.2
+      : AUDIO_ASPECT_RATIO
+  }
 
   return (
     <Card tone="transparent" style={{aspectRatio: aspectRatio, position: 'relative'}}>
@@ -63,6 +71,7 @@ export default function VideoPlayer({
               player_version: process.env.PKG_VERSION,
               page_type: 'Preview Player',
             }}
+            audio={isAudio}
             style={{
               height: '100%',
               width: '100%',
@@ -94,3 +103,7 @@ export default function VideoPlayer({
     </Card>
   )
 }
+
+export function assetIsAudio(asset: VideoAssetDocument) {
+  return asset.data?.max_stored_resolution === 'Audio only'
+}

package/src/components/VideoThumbnail.tsx

@@ -6,7 +6,7 @@ import {styled} from 'styled-components'
 import {useClient} from '../hooks/useClient'
 import useInView from '../hooks/useInView'
 import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
-import {getAnimatedPosterSrc, type AnimatedPosterSrcOptions} from '../util/getAnimatedPosterSrc'
+import {type AnimatedPosterSrcOptions, getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
 import {VideoAssetDocument} from '../util/types'
 
 const Image = styled.img`

package/src/components/documentPreview/PaneItemPreview.tsx

@@ -2,8 +2,8 @@
 // https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
 import {Inline} from '@sanity/ui'
 import {isNumber, isString} from 'lodash'
-import {isValidElement} from 'react'
-import {useMemoObservable} from 'react-rx'
+import {isValidElement, useMemo} from 'react'
+import {useObservable} from 'react-rx'
 import type {SanityDocument, SchemaType} from 'sanity'
 import type {PreviewValue} from 'sanity'
 import {
@@ -44,12 +44,15 @@ export function PaneItemPreview(props: PaneItemPreviewProps) {
       ? value.title
       : null
 
-  // NOTE: this emits sync so can never be null
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const {draft, published, isLoading} = useMemoObservable<PaneItemPreviewState>(
+  const observable = useMemo(
     () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
-    [props.documentPreviewStore, schemaType, value._id, title]
-  )!
+    [props.documentPreviewStore, schemaType, title, value._id]
+  )
+  const {draft, published, isLoading} = useObservable(observable, {
+    draft: null,
+    published: null,
+    isLoading: true,
+  })
 
   const status = isLoading ? null : (
     <Inline space={4}>

package/src/hooks/useImportMuxAssets.ts

@@ -58,7 +58,7 @@ export default function useImportMuxAssets() {
 
   async function importAssets() {
     setImportState('importing')
-    const documents = selectedAssets.map(muxAssetToSanityDocument)
+    const documents = selectedAssets.flatMap((asset) => muxAssetToSanityDocument(asset) || [])
 
     const tx = client.transaction()
     documents.forEach((doc) => tx.create(doc))
@@ -89,14 +89,18 @@ export default function useImportMuxAssets() {
   }
 }
 
-function muxAssetToSanityDocument(asset: MuxAsset): VideoAssetDocument {
+function muxAssetToSanityDocument(asset: MuxAsset): VideoAssetDocument | undefined {
+  const playbackId = (asset.playback_ids || []).find((p) => p.id)?.id
+
+  if (!playbackId) return undefined
+
   return {
     _id: uuid(),
     _type: 'mux.videoAsset',
     _updatedAt: new Date().toISOString(),
     _createdAt: parseMuxDate(asset.created_at).toISOString(),
     assetId: asset.id,
-    playbackId: asset.playback_ids.find((p) => p.id)?.id,
+    playbackId,
     filename: `Asset #${truncateString(asset.id, 15)}`,
     status: asset.status,
     data: asset,

package/src/schema.ts

@@ -0,0 +1,181 @@
+export const muxVideoSchema = {
+  name: 'mux.video',
+  type: 'object',
+  title: 'Video asset reference',
+  fields: [
+    {
+      title: 'Video',
+      name: 'asset',
+      type: 'reference',
+      weak: true,
+      to: [{type: 'mux.videoAsset'}],
+    },
+  ],
+}
+
+const muxTrack = {
+  name: 'mux.track',
+  type: 'object',
+  fields: [
+    {type: 'string', name: 'id'},
+    {type: 'string', name: 'type'},
+    {type: 'number', name: 'max_width'},
+    {type: 'number', name: 'max_frame_rate'},
+    {type: 'number', name: 'duration'},
+    {type: 'number', name: 'max_height'},
+  ],
+}
+
+const muxPlaybackId = {
+  name: 'mux.playbackId',
+  type: 'object',
+  fields: [
+    {type: 'string', name: 'id'},
+    {type: 'string', name: 'policy'},
+  ],
+}
+
+const muxStaticRenditionFile = {
+  name: 'mux.staticRenditionFile',
+  type: 'object',
+  fields: [
+    {type: 'string', name: 'ext'},
+    {type: 'string', name: 'name'},
+    {type: 'number', name: 'width'},
+    {type: 'number', name: 'bitrate'},
+    {type: 'number', name: 'filesize'},
+    {type: 'number', name: 'height'},
+  ],
+}
+
+const muxStaticRenditions = {
+  name: 'mux.staticRenditions',
+  type: 'object',
+  fields: [
+    {type: 'string', name: 'status'},
+    {
+      name: 'files',
+      type: 'array',
+      of: [{type: 'mux.staticRenditionFile'}],
+    },
+  ],
+}
+
+const muxAssetData = {
+  name: 'mux.assetData',
+  title: 'Mux asset data',
+  type: 'object',
+  fields: [
+    {
+      type: 'string',
+      name: 'resolution_tier',
+    },
+    {
+      type: 'string',
+      name: 'upload_id',
+    },
+    {
+      type: 'string',
+      name: 'created_at',
+    },
+    {
+      type: 'string',
+      name: 'id',
+    },
+    {
+      type: 'string',
+      name: 'status',
+    },
+    {
+      type: 'string',
+      name: 'max_stored_resolution',
+    },
+    {
+      type: 'string',
+      name: 'passthrough',
+    },
+    {
+      type: 'string',
+      name: 'encoding_tier',
+    },
+    {
+      type: 'string',
+      name: 'master_access',
+    },
+    {
+      type: 'string',
+      name: 'aspect_ratio',
+    },
+    {
+      type: 'number',
+      name: 'duration',
+    },
+    {
+      type: 'number',
+      name: 'max_stored_frame_rate',
+    },
+    {
+      type: 'string',
+      name: 'mp4_support',
+    },
+    {
+      type: 'string',
+      name: 'max_resolution_tier',
+    },
+    {
+      name: 'tracks',
+      type: 'array',
+      of: [{type: 'mux.track'}],
+    },
+    {
+      name: 'playback_ids',
+      type: 'array',
+      of: [{type: 'mux.playbackId'}],
+    },
+    {
+      name: 'static_renditions',
+      type: 'mux.staticRenditions',
+    },
+  ],
+}
+
+const muxVideoAsset = {
+  name: 'mux.videoAsset',
+  type: 'object',
+  title: 'Video asset',
+  fields: [
+    {
+      type: 'string',
+      name: 'status',
+    },
+    {
+      type: 'string',
+      name: 'assetId',
+    },
+    {
+      type: 'string',
+      name: 'playbackId',
+    },
+    {
+      type: 'string',
+      name: 'filename',
+    },
+    {
+      type: 'number',
+      name: 'thumbTime',
+    },
+    {
+      type: 'mux.assetData',
+      name: 'data',
+    },
+  ],
+}
+
+export const schemaTypes = [
+  muxTrack,
+  muxPlaybackId,
+  muxStaticRenditionFile,
+  muxStaticRenditions,
+  muxAssetData,
+  muxVideoAsset,
+]

package/src/util/constants.ts

@@ -11,3 +11,5 @@ export const THUMBNAIL_ASPECT_RATIO = 16 / 9
 
 /** To prevent excessive height, thumbnails and input should not go beyond to this aspect ratio. */
 export const MIN_ASPECT_RATIO = 5 / 4
+
+export const AUDIO_ASPECT_RATIO = 5 / 1

package/src/util/generateJwt.ts

@@ -24,10 +24,10 @@ export function generateJwt<T extends Audience>(
 ): string {
   const {signingKeyId, signingKeyPrivate} = readSecrets(client)
   if (!signingKeyId) {
-    throw new TypeError('Missing signingKeyId')
+    throw new TypeError("Missing `signingKeyId`.\n Check your plugin's configuration")
   }
   if (!signingKeyPrivate) {
-    throw new TypeError('Missing signingKeyPrivate')
+    throw new TypeError("Missing `signingKeyPrivate`.\n Check your plugin's configuration")
   }
 
   // @ts-expect-error - handle missing typings for this package

package/src/util/types.ts

@@ -43,11 +43,19 @@ export interface MuxInputConfig {
    * Auto-generate captions for these languages by default.
    * Requires `"encoding_tier": "smart"`
    *
-   * @see {@link https://docs.mux.com/guides/secure-video-playback}
-   * @defaultValue false
+   * @see {@link https://docs.mux.com/guides/add-autogenerated-captions-and-use-transcripts}
+   * @deprecated use `defaultAutogeneratedSubtitleLang` instead. Only a single autogenerated
    */
   defaultAutogeneratedSubtitleLangs?: SupportedMuxLanguage[]
 
+  /**
+   * Auto-generate captions for this language by default. Users can still
+   * Requires `"encoding_tier": "smart"`
+   *
+   * @see {@link https://docs.mux.com/guides/add-autogenerated-captions-and-use-transcripts}
+   */
+  defaultAutogeneratedSubtitleLang?: SupportedMuxLanguage
+
   /**
    * Whether or not to allow content editors to override asset upload
    * configuration settings when uploading a video to Mux.