diff --git a/packages/@uppy/audio/src/Audio.jsx b/packages/@uppy/audio/src/Audio.tsx similarity index 56% rename from packages/@uppy/audio/src/Audio.jsx rename to packages/@uppy/audio/src/Audio.tsx index f383508bd7..620555483c 100644 --- a/packages/@uppy/audio/src/Audio.jsx +++ b/packages/@uppy/audio/src/Audio.tsx @@ -1,44 +1,83 @@ import { h } from 'preact' -import { UIPlugin } from '@uppy/core' +import { UIPlugin, type UIPluginOptions } from '@uppy/core' +import type { Body, Meta } from '@uppy/utils/lib/UppyFile' +import type { Uppy, MinimalRequiredUppyFile } from '@uppy/core/lib/Uppy.ts' import getFileTypeExtension from '@uppy/utils/lib/getFileTypeExtension' -import supportsMediaRecorder from './supportsMediaRecorder.js' -import RecordingScreen from './RecordingScreen.jsx' -import PermissionsScreen from './PermissionsScreen.jsx' -import locale from './locale.js' - +import supportsMediaRecorder from './supportsMediaRecorder.ts' +import RecordingScreen from './RecordingScreen.tsx' +import PermissionsScreen from './PermissionsScreen.tsx' +import locale from './locale.ts' +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore We don't want TS to generate types for the package.json import packageJson from '../package.json' +interface AudioOptions extends UIPluginOptions { + target?: HTMLElement | string + showAudioSourceDropdown: boolean +} +interface AudioState { + audioReady: boolean + recordingLengthSeconds: number + hasAudio: boolean + cameraError: null + audioSources: MediaDeviceInfo[] + currentDeviceId?: null | string | MediaStreamTrack + isRecording: boolean + showAudioSourceDropdown: boolean + [id: string]: unknown +} + /** * Audio recording plugin */ -export default class Audio extends UIPlugin { +export default class Audio extends UIPlugin< + AudioOptions, + M, + B, + AudioState +> { static VERSION = packageJson.version - #stream = null + private recordingLengthTimer: ReturnType + + private icon + + #stream: MediaStream | null = null #audioActive = false - #recordingChunks = null + #recordingChunks: Blob[] | null = null - #recorder = null + #recorder: MediaRecorder | null = null - #capturedMediaFile = null + #capturedMediaFile: MinimalRequiredUppyFile | null = null - #mediaDevices = null + #mediaDevices - #supportsUserMedia = null + #supportsUserMedia - constructor (uppy, opts) { + constructor(uppy: Uppy, opts: AudioOptions) { super(uppy, opts) this.#mediaDevices = navigator.mediaDevices this.#supportsUserMedia = this.#mediaDevices != null this.id = this.opts.id || 'Audio' this.type = 'acquirer' this.icon = () => ( -