step by step

transloadit · Jan 13, 2024 · b6c6405 · b6c6405
1 parent 996bffd
commit b6c6405
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 34 deletions.
diff --git a/packages/@uppy/audio/src/Audio.tsx b/packages/@uppy/audio/src/Audio.tsx
@@ -15,6 +15,7 @@ import packageJson from '../package.json'
 
 interface AudioOptions extends UIPluginOptions {
   target?: HTMLElement | string
+  showAudioSourceDropdown: boolean
 }
 interface AudioState {
   audioReady: boolean
@@ -23,6 +24,8 @@ interface AudioState {
   cameraError: null
   audioSources: MediaDeviceInfo[]
   currentDeviceId?: null | string | MediaStreamTrack
+  isRecording: boolean
+  showAudioSourceDropdown: boolean
   [id: string]: unknown
 }
 
@@ -106,7 +109,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
   }
 
   // eslint-disable-next-line consistent-return
-  #start = (options?: { deviceId?: number }): Promise<never> | void => {
+  #start = (options?: { deviceId?: string }): Promise<never> | void => {
     if (!this.#supportsUserMedia) {
       return Promise.reject(new Error('Microphone access not supported'))
     }
@@ -329,7 +332,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     return Promise.resolve(file)
   }
 
-  #changeSource = (deviceId?: number): void => {
+  #changeSource = (deviceId?: string): void => {
     this.#stop()
     this.#start({ deviceId })
   }
@@ -363,6 +366,8 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
       <RecordingScreen
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...audioState}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore TODO: remove unused
         audioActive={this.#audioActive}
         onChangeSource={this.#changeSource}
         onStartRecording={this.#startRecording}

diff --git a/packages/@uppy/audio/src/AudioSourceSelect.tsx b/packages/@uppy/audio/src/AudioSourceSelect.tsx
@@ -1,11 +1,23 @@
 import { h } from 'preact'
 
-export default ({ currentDeviceId, audioSources, onChangeSource }) => {
+export interface AudioSourceSelectProps {
+  currentDeviceId: string
+  audioSources: MediaDeviceInfo[]
+  onChangeSource: (value: string) => void
+}
+
+export default ({
+  currentDeviceId,
+  audioSources,
+  onChangeSource,
+}: AudioSourceSelectProps): JSX.Element => {
   return (
     <div className="uppy-Audio-videoSource">
       <select
         className="uppy-u-reset uppy-Audio-audioSource-select"
-        onChange={(event) => { onChangeSource(event.target.value) }}
+        onChange={(event) => {
+          onChangeSource(event.target.value)
+        }}
       >
         {audioSources.map((audioSource) => (
           <option

diff --git a/packages/@uppy/audio/src/RecordingScreen.tsx b/packages/@uppy/audio/src/RecordingScreen.tsx
@@ -1,14 +1,34 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import { h } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
+import type { Uppy } from '@uppy/core/lib/Uppy'
 import RecordButton from './RecordButton.tsx'
 import RecordingLength from './RecordingLength.tsx'
-import AudioSourceSelect from './AudioSourceSelect.tsx'
+import AudioSourceSelect, {
+  type AudioSourceSelectProps,
+} from './AudioSourceSelect.tsx'
 import AudioOscilloscope from './audio-oscilloscope/index.ts'
 import SubmitButton from './SubmitButton.tsx'
 import DiscardButton from './DiscardButton.tsx'
 
-export default function RecordingScreen (props) {
+interface RecordingScreenProps extends AudioSourceSelectProps {
+  stream: MediaStream | null | undefined
+  recordedAudio: string
+  recording: boolean
+  supportsRecording: boolean
+  showAudioSourceDropdown: boolean
+  onSubmit: () => void
+  i18n: Uppy<any, any>['i18n']
+  onStartRecording: () => void
+  onStopRecording: () => void
+  onStop: () => void
+  onDiscardRecordedAudio: () => void
+  recordingLengthSeconds: number
+}
+
+export default function RecordingScreen(
+  props: RecordingScreenProps,
+): JSX.Element {
   const {
     stream,
     recordedAudio,
@@ -62,33 +82,24 @@ export default function RecordingScreen (props) {
 
   const hasRecordedAudio = recordedAudio != null
   const shouldShowRecordButton = !hasRecordedAudio && supportsRecording
-  const shouldShowAudioSourceDropdown = showAudioSourceDropdown
-    && !hasRecordedAudio
-    && audioSources
-    && audioSources.length > 1
+  const shouldShowAudioSourceDropdown =
+    showAudioSourceDropdown &&
+    !hasRecordedAudio &&
+    audioSources &&
+    audioSources.length > 1
 
   return (
     <div className="uppy-Audio-container">
       <div className="uppy-Audio-audioContainer">
-        {hasRecordedAudio
-          ? (
-            <audio
-              className="uppy-Audio-player"
-              controls
-              src={recordedAudio}
-            />
-          ) : (
-            <canvas
-              ref={canvasEl}
-              className="uppy-Audio-canvas"
-            />
-          )}
+        {hasRecordedAudio ? (
+          <audio className="uppy-Audio-player" controls src={recordedAudio} />
+        ) : (
+          <canvas ref={canvasEl} className="uppy-Audio-canvas" />
+        )}
       </div>
       <div className="uppy-Audio-footer">
         <div className="uppy-Audio-audioSourceContainer">
-          {shouldShowAudioSourceDropdown
-            ? AudioSourceSelect(props)
-            : null}
+          {shouldShowAudioSourceDropdown ? AudioSourceSelect(props) : null}
         </div>
         <div className="uppy-Audio-buttonContainer">
           {shouldShowRecordButton && (
@@ -102,12 +113,17 @@ export default function RecordingScreen (props) {
 
           {hasRecordedAudio && <SubmitButton onSubmit={onSubmit} i18n={i18n} />}
 
-          {hasRecordedAudio && <DiscardButton onDiscard={onDiscardRecordedAudio} i18n={i18n} />}
+          {hasRecordedAudio && (
+            <DiscardButton onDiscard={onDiscardRecordedAudio} i18n={i18n} />
+          )}
         </div>
 
         <div className="uppy-Audio-recordingLength">
           {!hasRecordedAudio && (
-            <RecordingLength recordingLengthSeconds={recordingLengthSeconds} i18n={i18n} />
+            <RecordingLength
+              recordingLengthSeconds={recordingLengthSeconds}
+              i18n={i18n}
+            />
           )}
         </div>
       </div>

diff --git a/packages/@uppy/audio/src/locale.ts b/packages/@uppy/audio/src/locale.ts
@@ -1,4 +1,4 @@
-import type { Locale } from "@uppy/utils/lib/Translator";
+import type { Locale } from '@uppy/utils/lib/Translator'
 
 export default {
   strings: {
@@ -12,13 +12,16 @@ export default {
     // Title on the “allow access” screen
     allowAudioAccessTitle: 'Please allow access to your microphone',
     // Description on the “allow access” screen
-    allowAudioAccessDescription: 'In order to record audio, please allow microphone access for this site.',
+    allowAudioAccessDescription:
+      'In order to record audio, please allow microphone access for this site.',
     // Title on the “device not available” screen
     noAudioTitle: 'Microphone Not Available',
     // Description on the “device not available” screen
-    noAudioDescription: 'In order to record audio, please connect a microphone or another audio input device',
+    noAudioDescription:
+      'In order to record audio, please connect a microphone or another audio input device',
     // Message about file size will be shown in an Informer bubble
-    recordingStoppedMaxSize: 'Recording stopped because the file size is about to exceed the limit',
+    recordingStoppedMaxSize:
+      'Recording stopped because the file size is about to exceed the limit',
     // Used as the label for the counter that shows recording length (`1:25`).
     // This is not visibly rendered but is picked up by screen readers.
     recordingLength: 'Recording length %{recording_length}',
@@ -28,5 +31,5 @@ export default {
     // Used as the label for the discard cross button.
     // This is not visibly rendered but is picked up by screen readers.
     discardRecordedFile: 'Discard recorded file',
-  },
-} as Locale
+  } as Locale<0>['strings'],
+} as any as Locale