sanity-plugin-mux-input 2.2.3 → 2.3.0

package/src/util/types.ts

@@ -1,26 +1,80 @@
-import type {
-  ObjectInputProps,
-  PreviewLayoutKey,
-  PreviewProps,
-  SanityDocument,
-  SchemaType,
-} from 'sanity'
+import type {ObjectInputProps, PreviewLayoutKey, PreviewProps, SchemaType} from 'sanity'
 import type {PartialDeep} from 'type-fest'
 
-export interface Config {
+export interface MuxInputConfig {
   /**
-   * Enable static renditions by setting this to 'standard'
+   * Enable static renditions by setting this to 'standard'. Can be overwritten on a per-asset basis.
+   * Requires `"encoding_tier": "smart"`
    * @see {@link https://docs.mux.com/guides/video/enable-static-mp4-renditions#why-enable-mp4-support}
    * @defaultValue 'none'
    */
   mp4_support: 'none' | 'standard'
 
+  /**
+   * Max resolution tier can be used to control the maximum resolution_tier your asset is encoded, stored, and streamed at.
+   * Requires `"encoding_tier": "smart"`
+   * @see {@link https://docs.mux.com/guides/stream-videos-in-4k}
+   * @defaultValue '1080p'
+   */
+  max_resolution_tier: '2160p' | '1440p' | '1080p'
+
+  /**
+   * 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'
+
+  /**
+   * Normalize the audio track loudness level.
+   * @see {@link https://docs.mux.com/guides/adjust-audio-levels#how-to-turn-on-audio-normalization}
+   * @defaultValue false
+   */
+  normalize_audio: boolean
+
+  /**
+   * Enables signed URLs by default, if you configured them with your API token.
+   * @see {@link https://docs.mux.com/guides/secure-video-playback}
+   * @defaultValue false
+   */
+  defaultSigned?: boolean
+
+  /**
+   * Auto-generate captions for these languages by default.
+   * Requires `"encoding_tier": "smart"`
+   *
+   * @see {@link https://docs.mux.com/guides/secure-video-playback}
+   * @defaultValue false
+   */
+  defaultAutogeneratedSubtitleLangs?: SupportedMuxLanguage[]
+
+  /**
+   * Whether or not to allow content editors to override asset upload
+   * configuration settings when uploading a video to Mux.
+   *
+   * @see {@link https://docs.mux.com/guides/secure-video-playback}
+   * @defaultValue false
+   */
+  disableUploadConfig?: boolean
+
+  /**
+   * Whether or not to allow content editors to add text tracks alongside their
+   * asset when uploading a video to Mux.
+   *
+   * @see {@link https://docs.mux.com/guides/secure-video-playback}
+   * @defaultValue false
+   */
+  disableTextTrackConfig?: boolean
+}
+
+export interface PluginConfig extends MuxInputConfig {
   /**
    * How the videos browser should appear as a studio tool in Sanity's top navigation
    *
    * Pass `false` if you want to disable it.
+   * @defaultValue {title: 'Videos', icon: VideoIcon}
    **/
-  tool?:
+  tool:
     | false
     | {
         title?: string
@@ -28,6 +82,130 @@ export interface Config {
       }
 }
 
+export const SUPPORTED_MUX_LANGUAGES = [
+  {label: 'English', code: 'en', state: 'Stable'},
+  {label: 'Spanish', code: 'es', state: 'Stable'},
+  {label: 'Italian', code: 'it', state: 'Stable'},
+  {label: 'Portuguese', code: 'pt', state: 'Stable'},
+  {label: 'German', code: 'de', state: 'Stable'},
+  {label: 'French', code: 'fr', state: 'Stable'},
+  {label: 'Polish', code: 'pl', state: 'Beta'},
+  {label: 'Russian', code: 'ru', state: 'Beta'},
+  {label: 'Dutch', code: 'nl', state: 'Beta'},
+  {label: 'Catalan', code: 'ca', state: 'Beta'},
+  {label: 'Turkish', code: 'tr', state: 'Beta'},
+  {label: 'Swedish', code: 'sv', state: 'Beta'},
+  {label: 'Ukrainian', code: 'uk', state: 'Beta'},
+  {label: 'Norwegian', code: 'no', state: 'Beta'},
+  {label: 'Finnish', code: 'fi', state: 'Beta'},
+  {label: 'Slovak', code: 'sk', state: 'Beta'},
+  {label: 'Greek', code: 'el', state: 'Beta'},
+  {label: 'Czech', code: 'cs', state: 'Beta'},
+  {label: 'Croatian', code: 'hr', state: 'Beta'},
+  {label: 'Danish', code: 'da', state: 'Beta'},
+  {label: 'Romanian', code: 'ro', state: 'Beta'},
+  {label: 'Bulgarian', code: 'bg', state: 'Beta'},
+] as const
+
+export const ENCODING_TIERS = [
+  {label: 'Baseline', value: 'baseline'},
+  {label: 'Smart', value: 'smart'},
+] as const
+
+export const SUPPORTED_MUX_LANGUAGES_VALUES = SUPPORTED_MUX_LANGUAGES.map((l) => l.code)
+
+export type SupportedMuxLanguage = (typeof SUPPORTED_MUX_LANGUAGES_VALUES)[number]
+
+export interface TextTrack {
+  _id: string
+  name: string
+}
+
+export interface AutogeneratedTextTrack extends TextTrack {
+  type: 'autogenerated'
+  language_code: SupportedMuxLanguage
+}
+
+export interface CustomTextTrack extends TextTrack {
+  type: 'subtitles' | 'captions'
+  language_code: string
+  file: {
+    contents: string
+    type: string
+    name: string
+    size: number
+  }
+}
+
+export function isCustomTextTrack(track: Partial<UploadTextTrack>): track is CustomTextTrack {
+  return track.type !== 'autogenerated'
+}
+
+export function isAutogeneratedTrack(
+  track: Partial<UploadTextTrack>
+): track is AutogeneratedTextTrack {
+  return track.type === 'autogenerated'
+}
+
+export type UploadTextTrack = AutogeneratedTextTrack | CustomTextTrack
+
+export interface UploadConfig
+  extends Pick<
+    MuxInputConfig,
+    'encoding_tier' | 'max_resolution_tier' | 'mp4_support' | 'normalize_audio'
+  > {
+  text_tracks: UploadTextTrack[]
+  signed: boolean
+}
+
+/**
+ * Data sent to Mux to create a new asset.
+ * @docs {@link https://docs.mux.com/api-reference#video/operation/create-direct-upload}
+ */
+export interface MuxNewAssetSettings
+  extends Pick<
+    MuxInputConfig,
+    'encoding_tier' | 'max_resolution_tier' | 'mp4_support' | 'normalize_audio'
+  > {
+  /** An array of objects that each describe an input file to be used to create the asset.*/
+  input?: {
+    /** The URL of the file that Mux should download and use. */
+    url?: string
+    /** Generate subtitle tracks using automatic speech recognition with this configuration. This may only be provided for the first input object (the main input file).  */
+    generated_subtitles?: {
+      /** A name for this subtitle track. */
+      name: string
+      /** Arbitrary metadata set for the subtitle track. Max 255 characters. */
+      passthrough?: string
+      /** The language to generate subtitles in. */
+      language_code: SupportedMuxLanguage
+    }[]
+    /** The time offset in seconds from the beginning of the video indicating the clip's starting marker. */
+    start_time?: number
+    /** The time offset in seconds from the beginning of the video indicating the clip's ending marker. */
+    end_time?: number
+    /** This parameter is required for text type tracks. */
+    type: 'video' | 'audio' | 'text'
+    /** Type of text track. This parameter only supports subtitles value. */
+    text_type?: 'subtitles'
+    /** The language code value must be a valid BCP 47 specification compliant value. */
+    language_code?: string
+    /** The name of the track containing a human-readable description. This value must be unique within each group of text or audio track types. */
+    name?: string
+    /** Indicates the track provides Subtitles for the Deaf or Hard-of-hearing (SDH). */
+    closed_captions?: boolean
+    /// @TODO Huhh?>?? Below
+    /** This optional parameter should be used tracks with type of text and text_type set to subtitles. */
+    passthrough?: string
+  }[]
+
+  /** An array of playback policy names that you want applied to this asset and available through playback_ids. */
+  playback_policy: ('public' | 'signed')[]
+
+  /** Arbitrary user-supplied metadata that will be included in the asset details and related webhooks.  */
+  passthrough?: string
+}
+
 export interface Secrets {
   token: string | null
   secretKey: string | null
@@ -35,6 +213,7 @@ export interface Secrets {
   signingKeyId: string | null
   signingKeyPrivate: string | null
 }
+
 // This narrowed type indicates that there may be assets that are signed, and we have the secrets to access them
 // enabledSignedUrls might be false but that's only relevant for future uploads and their playback policy
 export interface SignableSecrets extends Omit<Secrets, 'signingKeyId' | 'signingKeyPrivate'> {
@@ -123,6 +302,7 @@ export type MuxTrack = MuxVideoTrack | MuxAudioTrack
 // Typings lifted from https://docs.mux.com/api-reference/video#tag/assets
 export interface MuxAsset {
   id: string
+  /** In seconds (instead of JS's default milliseconds) */
   created_at: string
   status: 'preparing' | 'ready' | 'errored'
   duration: number
@@ -183,8 +363,11 @@ export interface MuxAsset {
   }
 }
 
-export interface VideoAssetDocument extends SanityDocument {
-  type?: 'mux.videoAsset'
+export interface VideoAssetDocument {
+  _id: string
+  _type: 'mux.videoAsset'
+  _createdAt: string
+  _updatedAt?: string
   status?: string
   assetId?: string
   playbackId?: string

package/lib/index.cjs.js

@@ -1,5 +0,0 @@
-import cjs from './index.cjs';
-
-export const defaultConfig = cjs.defaultConfig;
-export const muxInput = cjs.muxInput;
-

package/src/components/__legacy__Uploader.tsx

@@ -1,280 +0,0 @@
-/* eslint-disable no-nested-ternary */
-// This component needs to be refactored into a functional component
-
-import React, {Component} from 'react'
-import {type Observable, Subject} from 'rxjs'
-import {takeUntil, tap} from 'rxjs/operators'
-import type {SanityClient} from 'sanity'
-import {PatchEvent, set, setIfMissing} from 'sanity'
-
-import {uploadFile, uploadUrl} from '../actions/upload'
-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'
-
-interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
-  config: Config
-  client: SanityClient
-  secrets: Secrets
-  asset: VideoAssetDocument | null | undefined
-  dialogState: DialogState
-  setDialogState: SetDialogState
-  needsSetup: boolean
-}
-
-interface State {
-  isDraggingOver: boolean
-  invalidPaste: boolean
-  invalidFile: boolean
-  fileInfo: {name?: string; type?: string} | null
-  uuid: null
-  uploadProgress: number | null
-  error: Error | null
-  url: string | null
-}
-
-class MuxVideoInputUploader extends Component<Props, State> {
-  state: State = {
-    isDraggingOver: false,
-    invalidPaste: false,
-    invalidFile: false,
-    uploadProgress: null,
-    fileInfo: null,
-    uuid: null,
-    error: null,
-    url: null,
-  }
-  dragEnteredEls: EventTarget[] = []
-
-  ctrlDown = false
-
-  // eslint-disable-next-line no-warning-comments
-  // @TODO add proper typings for the return values of uploadFile and uploadUrl
-  upload: any | null = null
-
-  container = React.createRef<HTMLDivElement>()
-
-  onCancelUploadButtonClick$: Observable<unknown> | undefined
-  handleCancelUploadButtonClick: React.MouseEventHandler<HTMLButtonElement> | undefined
-
-  componentWillUnmount() {
-    this.unSubscribeToUpload()
-  }
-
-  componentDidMount() {
-    const events$ = new Subject()
-    this.onCancelUploadButtonClick$ = events$.asObservable()
-    this.handleCancelUploadButtonClick = (event) => events$.next(event)
-  }
-
-  unSubscribeToUpload() {
-    if (this.upload && !this.upload.closed) {
-      this.upload.unsubscribe()
-    }
-  }
-
-  handleProgress = (evt: {percent: number}) => {
-    this.setState({uploadProgress: evt.percent})
-  }
-
-  onUpload = (files: FileList | File[]) => {
-    this.setState({uploadProgress: 0, fileInfo: null, uuid: null})
-    this.upload = uploadFile(this.props.config, this.props.client, files[0], {
-      enableSignedUrls: this.props.secrets.enableSignedUrls,
-    })
-      .pipe(
-        takeUntil(
-          this.onCancelUploadButtonClick$!.pipe(
-            tap(() => {
-              if (this.state.uuid) {
-                this.props.client.delete(this.state.uuid)
-              }
-            })
-          )
-        )
-      )
-      .subscribe({
-        complete: () => {
-          this.setState({error: null, uploadProgress: null, uuid: null})
-        },
-        next: (event) => {
-          this.handleUploadEvent(event)
-        },
-        error: (err) => {
-          this.setState({error: err, uploadProgress: null, uuid: null})
-        },
-      })
-  }
-
-  // eslint-disable-next-line no-warning-comments
-  // @TODO add proper typings for the Observable events
-  handleUploadEvent = (event: any) => {
-    switch (event.type) {
-      case 'success':
-        return this.handleUploadSuccess(event.asset)
-      case 'progress':
-        return this.handleProgress(event)
-      case 'file':
-        return this.setState({fileInfo: event.file})
-      case 'uuid':
-        // Means we created a mux.videoAsset document with an uuid
-        return this.setState({uuid: event.uuid})
-      case 'url':
-        return this.setState({url: event.url, uploadProgress: 100})
-      default:
-        return null
-    }
-  }
-
-  handleUploadSuccess = (asset: VideoAssetDocument) => {
-    this.setState({uploadProgress: 100})
-    this.props.onChange(
-      PatchEvent.from([
-        setIfMissing({asset: {}}),
-        set({_type: 'reference', _weak: true, _ref: asset._id}, ['asset']),
-      ])
-    )
-  }
-
-  handlePaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
-    const clipboardData = event.clipboardData || (window as any).clipboardData
-    const url = clipboardData.getData('text')
-    const options = {enableSignedUrls: this.props.secrets.enableSignedUrls}
-
-    this.upload = uploadUrl(this.props.config, this.props.client, url, options).subscribe({
-      complete: () => {
-        this.setState({error: null, uploadProgress: null, url: null})
-      },
-      next: (sEvent) => {
-        this.handleUploadEvent(sEvent)
-      },
-      error: (err) => {
-        let error
-        // Don't output error dialog when just invalid url
-        if (!err.message.toLowerCase().match('invalid url')) {
-          error = err
-        }
-        this.setState({invalidPaste: true, error}, () => {
-          setTimeout(() => {
-            this.setState({invalidPaste: false, uploadProgress: null})
-          }, 2000)
-        })
-      },
-    })
-  }
-
-  handleDrop: React.DragEventHandler<HTMLDivElement> = (event) => {
-    this.setState({isDraggingOver: false})
-    event.preventDefault()
-    event.stopPropagation()
-    extractDroppedFiles(event.nativeEvent.dataTransfer!).then((files) => {
-      if (files) {
-        // eslint-disable-next-line no-warning-comments
-        // @TODO fix the typing on files
-        this.onUpload(files as any)
-      }
-    })
-  }
-
-  handleDragOver: React.DragEventHandler<HTMLDivElement> = (event) => {
-    event.preventDefault()
-    event.stopPropagation()
-  }
-
-  handleDragEnter: React.DragEventHandler<HTMLDivElement> = (event) => {
-    event.stopPropagation()
-    this.dragEnteredEls.push(event.target)
-    this.setState({isDraggingOver: true})
-    const type = event.dataTransfer.items?.[0]?.type
-    this.setState({invalidFile: !type.startsWith('video/')})
-  }
-
-  handleDragLeave: React.DragEventHandler<HTMLDivElement> = (event) => {
-    event.stopPropagation()
-    const idx = this.dragEnteredEls.indexOf(event.target)
-    if (idx > -1) {
-      this.dragEnteredEls.splice(idx, 1)
-    }
-    if (this.dragEnteredEls.length === 0) {
-      this.setState({isDraggingOver: false})
-    }
-  }
-
-  render() {
-    if (this.state.uploadProgress !== null) {
-      return (
-        <UploadProgress
-          onCancel={this.handleCancelUploadButtonClick!}
-          progress={this.state.uploadProgress}
-          filename={this.state.fileInfo?.name || this.state.url}
-        />
-      )
-    }
-
-    if (this.state.error) {
-      // @TODO better error handling
-      throw this.state.error
-    }
-
-    return (
-      <>
-        <UploadCard
-          tone={
-            this.state.isDraggingOver && (this.state.invalidPaste || this.state.invalidFile)
-              ? 'critical'
-              : this.state.isDraggingOver
-              ? 'positive'
-              : undefined
-          }
-          onDrop={this.handleDrop}
-          onDragOver={this.handleDragOver}
-          onDragLeave={this.handleDragLeave}
-          onDragEnter={this.handleDragEnter}
-          onPaste={this.handlePaste}
-          ref={this.container}
-        >
-          {this.props.asset ? (
-            <Player
-              readOnly={this.props.readOnly}
-              asset={this.props.asset}
-              onChange={this.props.onChange}
-              buttons={
-                <PlayerActionsMenu
-                  asset={this.props.asset}
-                  dialogState={this.props.dialogState}
-                  setDialogState={this.props.setDialogState}
-                  onChange={this.props.onChange}
-                  onUpload={this.onUpload}
-                  readOnly={this.props.readOnly}
-                />
-              }
-            />
-          ) : (
-            <UploadPlaceholder
-              hovering={this.state.isDraggingOver}
-              onSelect={this.onUpload}
-              readOnly={this.props.readOnly!}
-              setDialogState={this.props.setDialogState}
-              needsSetup={this.props.needsSetup}
-            />
-          )}
-        </UploadCard>
-        {this.props.dialogState === 'select-video' && (
-          <InputBrowser
-            asset={this.props.asset}
-            onChange={this.props.onChange}
-            setDialogState={this.props.setDialogState}
-          />
-        )}
-      </>
-    )
-  }
-}
-
-export default MuxVideoInputUploader

package/src/index.ts

@@ -1,29 +0,0 @@
-import {definePlugin} from 'sanity'
-
-import createStudioTool from './components/StudioTool'
-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',
-}
-
-export const muxInput = definePlugin<Partial<Config> | void>((userConfig) => {
-  const config: Config = {...defaultConfig, ...userConfig}
-  return {
-    name: 'mux-input',
-    schema: {
-      types: [
-        muxVideoAsset,
-        {
-          ...muxVideo,
-          ...muxVideoCustomRendering(config),
-        },
-      ],
-    },
-    tools: config.tool === false ? undefined : [createStudioTool(config)],
-  }
-})