sanity-plugin-mux-input 2.0.16 → 2.1.0

package/lib/index.d.ts

@@ -1,4 +1,6 @@
+import type {PartialDeep} from 'type-fest'
 import {Plugin as Plugin_2} from 'sanity'
+import type {SanityDocument} from 'sanity'
 
 declare interface Config {
   /**
@@ -11,6 +13,101 @@ declare interface Config {
 
 export declare const defaultConfig: Config
 
+declare interface MuxAsset {
+  id: string
+  created_at: string
+  status: 'preparing' | 'ready' | 'errored'
+  duration: number
+  max_stored_resolution: 'Audio only' | 'SD' | 'HD' | 'FHD' | 'UHD'
+  max_stored_frame_rate: -1 | number
+  aspect_ratio: `${number}:${number}`
+  playback_ids: MuxPlaybackId[]
+  tracks: MuxTrack[]
+  errors?: MuxErrors
+  upload_id: string
+  is_live?: boolean
+  passthrough: string
+  live_stream_id?: string
+  master?: {
+    status: 'ready' | 'preparing' | 'errored'
+    url: string
+  }
+  master_access: 'temporary' | 'none'
+  mp4_support: 'standard' | 'none'
+  source_asset_id?: string
+  normalize_audio?: boolean
+  static_renditions?: {
+    status: 'ready' | 'preparing' | 'disabled' | 'errored'
+    files: {
+      name: 'low.mp4' | 'medium.mp4' | 'high.mp4' | 'audio.m4a'
+      ext: 'mp4' | 'm4a'
+      height: number
+      width: number
+      bitrate: number
+      filesize: number
+    }[]
+  }
+  recording_times?: {
+    started_at: string
+    duration: number
+    type: 'content' | 'slate'
+  }[]
+  non_standard_input_reasons?: {
+    video_codec?: string
+    audio_codec?: string
+    video_gop_size?: 'high'
+    video_frame_rate?: string
+    video_resolution?: string
+    video_bitrate?: 'high'
+    pixel_aspect_ratio?: string
+    video_edit_list?: 'non-standard'
+    audio_edit_list?: 'non-standard'
+    unexpected_media_file_parameters?: 'non-standard'
+    test?: boolean
+  }
+}
+
+declare interface MuxAudioTrack {
+  type: 'audio'
+  id: string
+  duration?: number
+  max_channels: number
+  max_channel_layout: 'stereo' | string
+}
+
+declare interface MuxErrors {
+  type: string
+  messages: string[]
+}
+
 export declare const muxInput: Plugin_2<void | Partial<Config>>
 
+declare interface MuxPlaybackId {
+  id: string
+  policy: PlaybackPolicy
+}
+
+declare type MuxTrack = MuxVideoTrack | MuxAudioTrack
+
+declare interface MuxVideoTrack {
+  type: 'video'
+  id: string
+  max_width: number
+  max_height: number
+  max_frame_rate: -1 | number
+  duration?: number
+}
+
+declare type PlaybackPolicy = 'signed' | 'public'
+
+export declare interface VideoAssetDocument extends Partial<SanityDocument> {
+  type?: 'mux.videoAsset'
+  status?: string
+  assetId?: string
+  playbackId?: string
+  filename?: string
+  thumbTime?: number
+  data?: PartialDeep<MuxAsset>
+}
+
 export {}

package/lib/index.js

@@ -1,3 +1,3 @@
 import 'sanity';
-export { defaultConfig, muxInput } from './_chunks/index-f8b48f62.js';
+export { defaultConfig, muxInput } from './_chunks/index-0656ede8.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.0.16",
+  "version": "2.1.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -42,23 +42,23 @@
   "source": "./src/index.ts",
   "types": "./lib/index.d.ts",
   "files": [
+    "src",
     "lib",
     "sanity.json",
-    "src",
     "v2-incompatible.js"
   ],
   "scripts": {
     "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
     "clean": "rimraf lib",
     "dev": "next dev",
+    "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
     "prepare": "husky install || true",
     "prepublishOnly": "run-s build",
     "test": "npm run lint && npm run type-check && npm run build",
     "type-check": "tsc --noEmit",
-    "watch": "pkg-utils watch --strict",
-    "format": "prettier --write --cache --ignore-unknown ."
+    "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
     "@mux/mux-video-react": "^0.7.7",
@@ -68,12 +68,12 @@
     "@sanity/ui": "^1",
     "@sanity/uuid": "^3",
     "classnames": "^2.3.2",
-    "jsonwebtoken-esm": "^2.0.1",
-    "media-chrome": "^0.18.6",
+    "jsonwebtoken-esm": "^1.0.5",
+    "media-chrome": "^0.21.0",
     "motion": "^10",
     "rxjs": "^7",
     "scroll-into-view-if-needed": "^3",
-    "suspend-react": "^0.0.9",
+    "suspend-react": "^0.0.10",
     "swr": "^2.1.0",
     "use-device-pixel-ratio": "^1.1.2",
     "use-error-boundary": "^2.0.6"
@@ -81,16 +81,16 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
-    "@sanity/pkg-utils": "^2.2.8",
+    "@sanity/pkg-utils": "^2.2.13",
     "@sanity/plugin-kit": "^3.1.7",
     "@sanity/semantic-release-preset": "^4.0.0",
-    "@sanity/vision": "^3.5.1",
+    "@sanity/vision": "^3.6.0",
     "@types/react": "^18.0.28",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.36.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-config-sanity": "^6.0.0",
@@ -100,8 +100,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.2",
-    "next": "^13.2.3",
+    "lint-staged": "^13.2.0",
+    "next": "^13.2.4",
     "next-sanity": "^4.1.5",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
@@ -109,15 +109,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^4.1.2",
-    "sanity": "^3.5.1",
-    "styled-components": "^5.3.8",
+    "rimraf": "^5.0.0",
+    "sanity": "^3.6.0",
+    "styled-components": "^5.3.9",
     "type-fest": "^3.6.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.2"
   },
   "peerDependencies": {
     "react": "^18",
-    "react-is": "^18",
     "sanity": "^3",
     "styled-components": "^5.2"
   },

package/src/components/Input.tsx

@@ -1,4 +1,4 @@
-import React, {memo} from 'react'
+import React, {memo, Suspense} from 'react'
 
 import {useAssetDocumentValues} from '../hooks/useAssetDocumentValues'
 import {useClient} from '../hooks/useClient'
@@ -8,7 +8,8 @@ import {useSecretsDocumentValues} from '../hooks/useSecretsDocumentValues'
 import type {Config, MuxInputProps} from '../util/types'
 import Uploader from './__legacy__Uploader'
 import ConfigureApi from './ConfigureApi'
-import {InputFallback} from './Input.styled'
+import ErrorBoundaryCard from './ErrorBoundaryCard'
+import {AspectRatioCard, InputFallback} from './Input.styled'
 import Onboard from './Onboard'
 
 export interface InputProps extends MuxInputProps {
@@ -34,36 +35,40 @@ const Input = (props: InputProps) => {
   const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading
 
   return (
-    <>
-      {isLoading ? (
-        <InputFallback />
-      ) : (
-        <>
-          {secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? (
-            <Onboard setDialogState={setDialogState} />
+    <AspectRatioCard>
+      <ErrorBoundaryCard schemaType={props.schemaType}>
+        <Suspense fallback={<InputFallback />}>
+          {isLoading ? (
+            <InputFallback />
           ) : (
-            <Uploader
-              {...props}
-              config={props.config}
-              onChange={props.onChange}
-              client={client}
-              secrets={secretDocumentValues.value.secrets}
-              asset={assetDocumentValues.value}
-              dialogState={dialogState}
-              setDialogState={setDialogState}
-              needsSetup={secretDocumentValues.value.needsSetup}
-            />
-          )}
+            <>
+              {secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? (
+                <Onboard setDialogState={setDialogState} />
+              ) : (
+                <Uploader
+                  {...props}
+                  config={props.config}
+                  onChange={props.onChange}
+                  client={client}
+                  secrets={secretDocumentValues.value.secrets}
+                  asset={assetDocumentValues.value}
+                  dialogState={dialogState}
+                  setDialogState={setDialogState}
+                  needsSetup={secretDocumentValues.value.needsSetup}
+                />
+              )}
 
-          {dialogState === 'secrets' && (
-            <ConfigureApi
-              setDialogState={setDialogState}
-              secrets={secretDocumentValues.value.secrets}
-            />
+              {dialogState === 'secrets' && (
+                <ConfigureApi
+                  setDialogState={setDialogState}
+                  secrets={secretDocumentValues.value.secrets}
+                />
+              )}
+            </>
           )}
-        </>
-      )}
-    </>
+        </Suspense>
+      </ErrorBoundaryCard>
+    </AspectRatioCard>
   )
 }
 

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 React, {Component} from 'react'
+import React, {lazy, Component} from 'react'
 import {type Observable, Subject} from 'rxjs'
 import {takeUntil, tap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
@@ -12,12 +12,17 @@ import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
 import {extractDroppedFiles} from '../util/extractFiles'
 import type {Config, MuxInputProps, Secrets, VideoAssetDocument} from '../util/types'
 import InputBrowser from './InputBrowser'
-import Player from './Player'
 import PlayerActionsMenu from './PlayerActionsMenu'
 import {UploadCard} from './Uploader.styled'
 import UploadPlaceholder from './UploadPlaceholder'
 import {UploadProgress} from './UploadProgress'
 
+// TODO: Without this lazy load call a build error occurs in the Player component from the import
+// of media-chrome components. media-chrome ships separate ESM and CJS compatible modules in versions >=1.0.0.
+// Once the plugin is updated to media-chrome >= 1.0.0, remove this lazy load.
+// import Player from './Player'
+const Player = lazy(() => import('./Player'))
+
 interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
   config: Config
   client: SanityClient

package/src/index.ts

@@ -1,8 +1,10 @@
 import {definePlugin} from 'sanity'
 
-import createFormInput from './components/FormInput'
-import FormPreview from './components/FormPreview'
-import {type Config} from './util/types'
+import {muxVideoCustomRendering} from './plugin'
+import {muxVideo, muxVideoAsset} from './schema'
+import type {Config} from './util/types'
+
+export type {VideoAssetDocument} from './util/types'
 
 export const defaultConfig: Config = {
   mp4_support: 'none',
@@ -10,57 +12,14 @@ export const defaultConfig: Config = {
 
 export const muxInput = definePlugin<Partial<Config> | void>((userConfig) => {
   const config: Config = {...defaultConfig, ...userConfig}
-  const InputComponent = createFormInput(config)
   return {
     name: 'mux-input',
-    form: {
-      components: {
-        input: InputComponent,
-        preview: FormPreview,
-      },
-    },
     schema: {
       types: [
+        muxVideoAsset,
         {
-          name: 'mux.video',
-          type: 'object',
-          title: 'Video asset reference',
-          fields: [
-            {
-              title: 'Video',
-              name: 'asset',
-              type: 'reference',
-              weak: true,
-              to: [{type: 'mux.videoAsset'}],
-            },
-          ],
-        },
-        {
-          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',
-            },
-          ],
+          ...muxVideo,
+          ...muxVideoCustomRendering(config),
         },
       ],
     },

package/src/plugin.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Input from './components/Input'
+import {VideoThumbnail} from './components/VideoSource.styled'
+import type {Config, MuxInputProps, VideoAssetDocument} from './util/types'
+
+export function muxVideoCustomRendering(config: Config) {
+  return {
+    components: {
+      input: (props: MuxInputProps) => <Input config={config} {...props} />,
+    },
+    preview: {
+      select: {
+        filename: 'asset.filename',
+        playbackId: 'asset.playbackId',
+        status: 'asset.status',
+        assetId: 'asset.assetId',
+        thumbTime: 'asset.thumbTime',
+        data: 'asset.data',
+      },
+      prepare: (asset: Partial<VideoAssetDocument>) => {
+        const {filename, playbackId, status} = asset
+        return {
+          title: filename || playbackId || '',
+          subtitle: status ? `status: ${status}` : null,
+          media: asset.playbackId ? <VideoThumbnail asset={asset} width={64} /> : null,
+        }
+      },
+    },
+  }
+}

package/src/schema.tsx

@@ -0,0 +1,42 @@
+export const muxVideo = {
+  name: 'mux.video',
+  type: 'object',
+  title: 'Video asset reference',
+  fields: [
+    {
+      title: 'Video',
+      name: 'asset',
+      type: 'reference',
+      weak: true,
+      to: [{type: 'mux.videoAsset'}],
+    },
+  ],
+}
+
+export 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',
+    },
+  ],
+}