From bed4d95b21a2fc5b315f925fe4543840b6227726 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Fri, 5 Jan 2024 22:40:20 +0100
Subject: [PATCH 01/15] @uppy/audio: refactor to TypeScript

---
 .../@uppy/audio/src/{Audio.jsx => Audio.tsx}  | 192 +++++++++++-------
 ...SourceSelect.jsx => AudioSourceSelect.tsx} |   0
 .../{DiscardButton.jsx => DiscardButton.tsx}  |   0
 ...ssionsScreen.jsx => PermissionsScreen.tsx} |   0
 .../{RecordButton.jsx => RecordButton.tsx}    |   0
 ...ecordingLength.jsx => RecordingLength.tsx} |   2 +-
 ...ecordingScreen.jsx => RecordingScreen.tsx} |  12 +-
 .../{SubmitButton.jsx => SubmitButton.tsx}    |   0
 .../audio-oscilloscope/{index.js => index.ts} |   0
 ...tSeconds.test.js => formatSeconds.test.ts} |   2 +-
 .../{formatSeconds.js => formatSeconds.ts}    |   0
 packages/@uppy/audio/src/index.js             |   1 -
 packages/@uppy/audio/src/index.ts             |   1 +
 .../@uppy/audio/src/{locale.js => locale.ts}  |   4 +-
 ....test.js => supportsMediaRecorder.test.ts} |   2 +-
 ...iaRecorder.js => supportsMediaRecorder.ts} |   0
 packages/@uppy/audio/tsconfig.build.json      |  35 ++++
 packages/@uppy/audio/tsconfig.json            |  30 +++
 18 files changed, 197 insertions(+), 84 deletions(-)
 rename packages/@uppy/audio/src/{Audio.jsx => Audio.tsx} (62%)
 rename packages/@uppy/audio/src/{AudioSourceSelect.jsx => AudioSourceSelect.tsx} (100%)
 rename packages/@uppy/audio/src/{DiscardButton.jsx => DiscardButton.tsx} (100%)
 rename packages/@uppy/audio/src/{PermissionsScreen.jsx => PermissionsScreen.tsx} (100%)
 rename packages/@uppy/audio/src/{RecordButton.jsx => RecordButton.tsx} (100%)
 rename packages/@uppy/audio/src/{RecordingLength.jsx => RecordingLength.tsx} (88%)
 rename packages/@uppy/audio/src/{RecordingScreen.jsx => RecordingScreen.tsx} (90%)
 rename packages/@uppy/audio/src/{SubmitButton.jsx => SubmitButton.tsx} (100%)
 rename packages/@uppy/audio/src/audio-oscilloscope/{index.js => index.ts} (100%)
 rename packages/@uppy/audio/src/{formatSeconds.test.js => formatSeconds.test.ts} (88%)
 rename packages/@uppy/audio/src/{formatSeconds.js => formatSeconds.ts} (100%)
 delete mode 100644 packages/@uppy/audio/src/index.js
 create mode 100644 packages/@uppy/audio/src/index.ts
 rename packages/@uppy/audio/src/{locale.js => locale.ts} (96%)
 rename packages/@uppy/audio/src/{supportsMediaRecorder.test.js => supportsMediaRecorder.test.ts} (92%)
 rename packages/@uppy/audio/src/{supportsMediaRecorder.js => supportsMediaRecorder.ts} (100%)
 create mode 100644 packages/@uppy/audio/tsconfig.build.json
 create mode 100644 packages/@uppy/audio/tsconfig.json

diff --git a/packages/@uppy/audio/src/Audio.jsx b/packages/@uppy/audio/src/Audio.tsx
similarity index 62%
rename from packages/@uppy/audio/src/Audio.jsx
rename to packages/@uppy/audio/src/Audio.tsx
index f383508bd7..e7088c73fe 100644
--- a/packages/@uppy/audio/src/Audio.jsx
+++ b/packages/@uppy/audio/src/Audio.tsx
@@ -1,44 +1,65 @@
 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 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 {}
+
 /**
  * Audio recording plugin
  */
-export default class Audio extends UIPlugin {
+export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
+  AudioOptions,
+  M,
+  B
+> {
   static VERSION = packageJson.version
 
-  #stream = null
+  private recordingLengthTimer: ReturnType<typeof setInterval>
+
+  #stream?: MediaStream
 
   #audioActive = false
 
-  #recordingChunks = null
+  #recordingChunks?: Blob[]
 
-  #recorder = null
+  #recorder?: MediaRecorder
 
-  #capturedMediaFile = null
+  #capturedMediaFile?: File
 
-  #mediaDevices = null
+  #mediaDevices
 
-  #supportsUserMedia = null
+  #supportsUserMedia
 
-  constructor (uppy, opts) {
+  constructor(uppy: Uppy<M, B>, 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 = () => (
-      <svg className="uppy-DashboardTab-iconAudio" aria-hidden="true" focusable="false" width="32px" height="32px" viewBox="0 0 32 32">
-        <path d="M21.143 12.297c.473 0 .857.383.857.857v2.572c0 3.016-2.24 5.513-5.143 5.931v2.64h2.572a.857.857 0 110 1.714H12.57a.857.857 0 110-1.714h2.572v-2.64C12.24 21.24 10 18.742 10 15.726v-2.572a.857.857 0 111.714 0v2.572A4.29 4.29 0 0016 20.01a4.29 4.29 0 004.286-4.285v-2.572c0-.474.384-.857.857-.857zM16 6.5a3 3 0 013 3v6a3 3 0 01-6 0v-6a3 3 0 013-3z" fill="currentcolor" fill-rule="nonzero" />
+    this.icon = (): JSX.Element => (
+      <svg
+        className="uppy-DashboardTab-iconAudio"
+        aria-hidden="true"
+        focusable="false"
+        width="32px"
+        height="32px"
+        viewBox="0 0 32 32"
+      >
+        <path
+          d="M21.143 12.297c.473 0 .857.383.857.857v2.572c0 3.016-2.24 5.513-5.143 5.931v2.64h2.572a.857.857 0 110 1.714H12.57a.857.857 0 110-1.714h2.572v-2.64C12.24 21.24 10 18.742 10 15.726v-2.572a.857.857 0 111.714 0v2.572A4.29 4.29 0 0016 20.01a4.29 4.29 0 004.286-4.285v-2.572c0-.474.384-.857.857-.857zM16 6.5a3 3 0 013 3v6a3 3 0 01-6 0v-6a3 3 0 013-3z"
+          fill="currentcolor"
+          fill-rule="nonzero"
+        />
       </svg>
     )
 
@@ -59,44 +80,43 @@ export default class Audio extends UIPlugin {
     })
   }
 
-  #hasAudioCheck () {
+  #hasAudioCheck(): Promise<boolean> {
     if (!this.#mediaDevices) {
       return Promise.resolve(false)
     }
 
-    return this.#mediaDevices.enumerateDevices().then(devices => {
-      return devices.some(device => device.kind === 'audioinput')
+    return this.#mediaDevices.enumerateDevices().then((devices) => {
+      return devices.some((device) => device.kind === 'audioinput')
     })
   }
 
   // eslint-disable-next-line consistent-return
-  #start = (options = null) => {
+  #start = (options?: { deviceId?: number }): Promise<never> | void => {
     if (!this.#supportsUserMedia) {
       return Promise.reject(new Error('Microphone access not supported'))
     }
 
     this.#audioActive = true
 
-    this.#hasAudioCheck().then(hasAudio => {
+    this.#hasAudioCheck().then((hasAudio) => {
       this.setPluginState({
         hasAudio,
       })
 
       // ask user for access to their camera
-      return this.#mediaDevices.getUserMedia({ audio: true })
+      return this.#mediaDevices
+        .getUserMedia({ audio: true })
         .then((stream) => {
           this.#stream = stream
 
           let currentDeviceId = null
           const tracks = stream.getAudioTracks()
 
-          if (!options || !options.deviceId) {
+          if (!options?.deviceId) {
             currentDeviceId = tracks[0].getSettings().deviceId
           } else {
-            tracks.forEach((track) => {
-              if (track.getSettings().deviceId === options.deviceId) {
-                currentDeviceId = track.getSettings().deviceId
-              }
+            currentDeviceId = tracks.findLast((track) => {
+              return track.getSettings().deviceId === options.deviceId
             })
           }
 
@@ -118,24 +138,34 @@ export default class Audio extends UIPlugin {
     })
   }
 
-  #startRecording = () => {
+  #startRecording = (): void => {
     // only used if supportsMediaRecorder() returned true
     // eslint-disable-next-line compat/compat
-    this.#recorder = new MediaRecorder(this.#stream)
+    this.#recorder = new MediaRecorder(this.#stream!)
     this.#recordingChunks = []
     let stoppingBecauseOfMaxSize = false
     this.#recorder.addEventListener('dataavailable', (event) => {
-      this.#recordingChunks.push(event.data)
+      this.#recordingChunks!.push(event.data)
 
       const { restrictions } = this.uppy.opts
-      if (this.#recordingChunks.length > 1
-          && restrictions.maxFileSize != null
-          && !stoppingBecauseOfMaxSize) {
-        const totalSize = this.#recordingChunks.reduce((acc, chunk) => acc + chunk.size, 0)
+      if (
+        this.#recordingChunks!.length > 1 &&
+        restrictions.maxFileSize != null &&
+        !stoppingBecauseOfMaxSize
+      ) {
+        const totalSize = this.#recordingChunks!.reduce(
+          (acc, chunk) => acc + chunk.size,
+          0,
+        )
         // Exclude the initial chunk from the average size calculation because it is likely to be a very small outlier
-        const averageChunkSize = (totalSize - this.#recordingChunks[0].size) / (this.#recordingChunks.length - 1)
+        const averageChunkSize =
+          (totalSize - this.#recordingChunks![0].size) /
+          (this.#recordingChunks!.length - 1)
         const expectedEndChunkSize = averageChunkSize * 3
-        const maxSize = Math.max(0, restrictions.maxFileSize - expectedEndChunkSize)
+        const maxSize = Math.max(
+          0,
+          restrictions.maxFileSize - expectedEndChunkSize,
+        )
 
         if (totalSize > maxSize) {
           stoppingBecauseOfMaxSize = true
@@ -150,9 +180,13 @@ export default class Audio extends UIPlugin {
     this.#recorder.start(500)
 
     // Start the recordingLengthTimer if we are showing the recording length.
+    // TODO: switch this to a private field
     this.recordingLengthTimer = setInterval(() => {
-      const currentRecordingLength = this.getPluginState().recordingLengthSeconds
-      this.setPluginState({ recordingLengthSeconds: currentRecordingLength + 1 })
+      const currentRecordingLength = this.getPluginState()
+        .recordingLengthSeconds as number
+      this.setPluginState({
+        recordingLengthSeconds: currentRecordingLength + 1,
+      })
     }, 1000)
 
     this.setPluginState({
@@ -160,43 +194,49 @@ export default class Audio extends UIPlugin {
     })
   }
 
-  #stopRecording = () => {
+  #stopRecording = (): Promise<void> => {
     const stopped = new Promise((resolve) => {
-      this.#recorder.addEventListener('stop', () => {
+      this.#recorder!.addEventListener('stop', () => {
         resolve()
       })
-      this.#recorder.stop()
+      this.#recorder!.stop()
 
       clearInterval(this.recordingLengthTimer)
       this.setPluginState({ recordingLengthSeconds: 0 })
     })
 
-    return stopped.then(() => {
-      this.setPluginState({
-        isRecording: false,
-      })
-      return this.#getAudio()
-    }).then((file) => {
-      try {
-        this.#capturedMediaFile = file
-        // create object url for capture result preview
+    return stopped
+      .then(() => {
         this.setPluginState({
-          recordedAudio: URL.createObjectURL(file.data),
+          isRecording: false,
         })
-      } catch (err) {
-        // Logging the error, exept restrictions, which is handled in Core
-        if (!err.isRestriction) {
-          this.uppy.log(err)
+        return this.#getAudio()
+      })
+      .then((file) => {
+        try {
+          this.#capturedMediaFile = file
+          // create object url for capture result preview
+          this.setPluginState({
+            recordedAudio: URL.createObjectURL(file.data),
+          })
+        } catch (err) {
+          // Logging the error, exept restrictions, which is handled in Core
+          if (!err.isRestriction) {
+            this.uppy.log(err)
+          }
         }
-      }
-    }).then(() => {
-      this.#recordingChunks = null
-      this.#recorder = null
-    }, (error) => {
-      this.#recordingChunks = null
-      this.#recorder = null
-      throw error
-    })
+      })
+      .then(
+        () => {
+          this.#recordingChunks = null
+          this.#recorder = null
+        },
+        (error) => {
+          this.#recordingChunks = null
+          this.#recorder = null
+          throw error
+        },
+      )
   }
 
   #discardRecordedAudio = () => {
@@ -244,16 +284,22 @@ export default class Audio extends UIPlugin {
     })
   }
 
-  #getAudio () {
+  #getAudio() {
     // Sometimes in iOS Safari, Blobs (especially the first Blob in the recordingChunks Array)
     // have empty 'type' attributes (e.g. '') so we need to find a Blob that has a defined 'type'
     // attribute in order to determine the correct MIME type.
-    const mimeType = this.#recordingChunks.find(blob => blob.type?.length > 0).type
+    const mimeType = this.#recordingChunks.find(
+      (blob) => blob.type?.length > 0,
+    ).type
 
     const fileExtension = getFileTypeExtension(mimeType)
 
     if (!fileExtension) {
-      return Promise.reject(new Error(`Could not retrieve recording: Unsupported media type "${mimeType}"`))
+      return Promise.reject(
+        new Error(
+          `Could not retrieve recording: Unsupported media type "${mimeType}"`,
+        ),
+      )
     }
 
     const name = `audio-${Date.now()}.${fileExtension}`
@@ -268,20 +314,20 @@ export default class Audio extends UIPlugin {
     return Promise.resolve(file)
   }
 
-  #changeSource = (deviceId) => {
+  #changeSource = (deviceId): void => {
     this.#stop()
     this.#start({ deviceId })
   }
 
   #updateSources = () => {
-    this.#mediaDevices.enumerateDevices().then(devices => {
+    this.#mediaDevices.enumerateDevices().then((devices) => {
       this.setPluginState({
         audioSources: devices.filter((device) => device.kind === 'audioinput'),
       })
     })
   }
 
-  render () {
+  render() {
     if (!this.#audioActive) {
       this.#start()
     }
@@ -318,7 +364,7 @@ export default class Audio extends UIPlugin {
     )
   }
 
-  install () {
+  install() {
     this.setPluginState({
       audioReady: false,
       recordingLengthSeconds: 0,
@@ -355,7 +401,7 @@ export default class Audio extends UIPlugin {
     }
   }
 
-  uninstall () {
+  uninstall() {
     if (this.#stream) {
       this.#stop()
     }
diff --git a/packages/@uppy/audio/src/AudioSourceSelect.jsx b/packages/@uppy/audio/src/AudioSourceSelect.tsx
similarity index 100%
rename from packages/@uppy/audio/src/AudioSourceSelect.jsx
rename to packages/@uppy/audio/src/AudioSourceSelect.tsx
diff --git a/packages/@uppy/audio/src/DiscardButton.jsx b/packages/@uppy/audio/src/DiscardButton.tsx
similarity index 100%
rename from packages/@uppy/audio/src/DiscardButton.jsx
rename to packages/@uppy/audio/src/DiscardButton.tsx
diff --git a/packages/@uppy/audio/src/PermissionsScreen.jsx b/packages/@uppy/audio/src/PermissionsScreen.tsx
similarity index 100%
rename from packages/@uppy/audio/src/PermissionsScreen.jsx
rename to packages/@uppy/audio/src/PermissionsScreen.tsx
diff --git a/packages/@uppy/audio/src/RecordButton.jsx b/packages/@uppy/audio/src/RecordButton.tsx
similarity index 100%
rename from packages/@uppy/audio/src/RecordButton.jsx
rename to packages/@uppy/audio/src/RecordButton.tsx
diff --git a/packages/@uppy/audio/src/RecordingLength.jsx b/packages/@uppy/audio/src/RecordingLength.tsx
similarity index 88%
rename from packages/@uppy/audio/src/RecordingLength.jsx
rename to packages/@uppy/audio/src/RecordingLength.tsx
index 72895e1f93..d677472126 100644
--- a/packages/@uppy/audio/src/RecordingLength.jsx
+++ b/packages/@uppy/audio/src/RecordingLength.tsx
@@ -1,5 +1,5 @@
 import { h } from 'preact'
-import formatSeconds from './formatSeconds.js'
+import formatSeconds from './formatSeconds.ts'
 
 export default function RecordingLength ({ recordingLengthSeconds, i18n }) {
   const formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds)
diff --git a/packages/@uppy/audio/src/RecordingScreen.jsx b/packages/@uppy/audio/src/RecordingScreen.tsx
similarity index 90%
rename from packages/@uppy/audio/src/RecordingScreen.jsx
rename to packages/@uppy/audio/src/RecordingScreen.tsx
index b421d3f90b..60d56efd46 100644
--- a/packages/@uppy/audio/src/RecordingScreen.jsx
+++ b/packages/@uppy/audio/src/RecordingScreen.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import { h } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
-import RecordButton from './RecordButton.jsx'
-import RecordingLength from './RecordingLength.jsx'
-import AudioSourceSelect from './AudioSourceSelect.jsx'
-import AudioOscilloscope from './audio-oscilloscope/index.js'
-import SubmitButton from './SubmitButton.jsx'
-import DiscardButton from './DiscardButton.jsx'
+import RecordButton from './RecordButton.tsx'
+import RecordingLength from './RecordingLength.tsx'
+import AudioSourceSelect 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) {
   const {
diff --git a/packages/@uppy/audio/src/SubmitButton.jsx b/packages/@uppy/audio/src/SubmitButton.tsx
similarity index 100%
rename from packages/@uppy/audio/src/SubmitButton.jsx
rename to packages/@uppy/audio/src/SubmitButton.tsx
diff --git a/packages/@uppy/audio/src/audio-oscilloscope/index.js b/packages/@uppy/audio/src/audio-oscilloscope/index.ts
similarity index 100%
rename from packages/@uppy/audio/src/audio-oscilloscope/index.js
rename to packages/@uppy/audio/src/audio-oscilloscope/index.ts
diff --git a/packages/@uppy/audio/src/formatSeconds.test.js b/packages/@uppy/audio/src/formatSeconds.test.ts
similarity index 88%
rename from packages/@uppy/audio/src/formatSeconds.test.js
rename to packages/@uppy/audio/src/formatSeconds.test.ts
index 6ab1a4474f..dfbf2642a3 100644
--- a/packages/@uppy/audio/src/formatSeconds.test.js
+++ b/packages/@uppy/audio/src/formatSeconds.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import formatSeconds from './formatSeconds.js'
+import formatSeconds from './formatSeconds.ts'
 
 describe('formatSeconds', () => {
   it('should return a value of \'0:43\' when an argument of 43 seconds is supplied', () => {
diff --git a/packages/@uppy/audio/src/formatSeconds.js b/packages/@uppy/audio/src/formatSeconds.ts
similarity index 100%
rename from packages/@uppy/audio/src/formatSeconds.js
rename to packages/@uppy/audio/src/formatSeconds.ts
diff --git a/packages/@uppy/audio/src/index.js b/packages/@uppy/audio/src/index.js
deleted file mode 100644
index f741dc1ddc..0000000000
--- a/packages/@uppy/audio/src/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Audio.jsx'
diff --git a/packages/@uppy/audio/src/index.ts b/packages/@uppy/audio/src/index.ts
new file mode 100644
index 0000000000..6a6a2e2764
--- /dev/null
+++ b/packages/@uppy/audio/src/index.ts
@@ -0,0 +1 @@
+export { default } from './Audio.tsx'
diff --git a/packages/@uppy/audio/src/locale.js b/packages/@uppy/audio/src/locale.ts
similarity index 96%
rename from packages/@uppy/audio/src/locale.js
rename to packages/@uppy/audio/src/locale.ts
index 8ac8036ab9..bf9ae60027 100644
--- a/packages/@uppy/audio/src/locale.js
+++ b/packages/@uppy/audio/src/locale.ts
@@ -1,3 +1,5 @@
+import type { Locale } from "@uppy/utils/lib/Translator";
+
 export default {
   strings: {
     pluginNameAudio: 'Audio',
@@ -27,4 +29,4 @@ export default {
     // This is not visibly rendered but is picked up by screen readers.
     discardRecordedFile: 'Discard recorded file',
   },
-}
+} as Locale
diff --git a/packages/@uppy/audio/src/supportsMediaRecorder.test.js b/packages/@uppy/audio/src/supportsMediaRecorder.test.ts
similarity index 92%
rename from packages/@uppy/audio/src/supportsMediaRecorder.test.js
rename to packages/@uppy/audio/src/supportsMediaRecorder.test.ts
index 71976cd98d..08da98288f 100644
--- a/packages/@uppy/audio/src/supportsMediaRecorder.test.js
+++ b/packages/@uppy/audio/src/supportsMediaRecorder.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import { describe, expect, it } from 'vitest'
-import supportsMediaRecorder from './supportsMediaRecorder.js'
+import supportsMediaRecorder from './supportsMediaRecorder.ts'
 
 describe('supportsMediaRecorder', () => {
   it('should return true if MediaRecorder is supported', () => {
diff --git a/packages/@uppy/audio/src/supportsMediaRecorder.js b/packages/@uppy/audio/src/supportsMediaRecorder.ts
similarity index 100%
rename from packages/@uppy/audio/src/supportsMediaRecorder.js
rename to packages/@uppy/audio/src/supportsMediaRecorder.ts
diff --git a/packages/@uppy/audio/tsconfig.build.json b/packages/@uppy/audio/tsconfig.build.json
new file mode 100644
index 0000000000..74f1ac4a7d
--- /dev/null
+++ b/packages/@uppy/audio/tsconfig.build.json
@@ -0,0 +1,35 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "outDir": "./lib",
+    "paths": {
+      "@uppy/utils/lib/*": [
+        "../utils/src/*"
+      ],
+      "@uppy/core": [
+        "../core/src/index.js"
+      ],
+      "@uppy/core/lib/*": [
+        "../core/src/*"
+      ]
+    },
+    "resolveJsonModule": false,
+    "rootDir": "./src",
+    "skipLibCheck": true
+  },
+  "include": [
+    "./src/**/*.*"
+  ],
+  "exclude": [
+    "./src/**/*.test.ts"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}
diff --git a/packages/@uppy/audio/tsconfig.json b/packages/@uppy/audio/tsconfig.json
new file mode 100644
index 0000000000..ca9ae94fe9
--- /dev/null
+++ b/packages/@uppy/audio/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "noEmit": true,
+    "paths": {
+      "@uppy/utils/lib/*": [
+        "../utils/src/*"
+      ],
+      "@uppy/core": [
+        "../core/src/index.js"
+      ],
+      "@uppy/core/lib/*": [
+        "../core/src/*"
+      ]
+    }
+  },
+  "include": [
+    "./package.json",
+    "./src/**/*.*"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}

From 4bd2734702b94eede94d1c741fe01ac00f571968 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Fri, 12 Jan 2024 11:58:36 +0100
Subject: [PATCH 02/15] `Audio.tsx`

---
 packages/@uppy/audio/src/Audio.tsx    | 49 +++++++++++++++++----------
 packages/@uppy/core/src/BasePlugin.ts |  7 ++--
 packages/@uppy/core/src/UIPlugin.ts   |  3 +-
 packages/@uppy/core/src/Uppy.ts       |  2 +-
 4 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/packages/@uppy/audio/src/Audio.tsx b/packages/@uppy/audio/src/Audio.tsx
index e7088c73fe..d9298b1715 100644
--- a/packages/@uppy/audio/src/Audio.tsx
+++ b/packages/@uppy/audio/src/Audio.tsx
@@ -2,6 +2,7 @@ import { h } from 'preact'
 
 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.ts'
@@ -12,7 +13,18 @@ import locale from './locale.ts'
 // @ts-ignore We don't want TS to generate types for the package.json
 import packageJson from '../package.json'
 
-interface AudioOptions extends UIPluginOptions {}
+interface AudioOptions extends UIPluginOptions {
+  target?: HTMLElement | string
+}
+interface AudioState {
+  audioReady: boolean
+  recordingLengthSeconds: number
+  hasAudio: boolean
+  cameraError: null
+  audioSources: MediaDeviceInfo[]
+  currentDeviceId?: null | string | MediaStreamTrack
+  [id: string]: unknown
+}
 
 /**
  * Audio recording plugin
@@ -20,21 +32,24 @@ interface AudioOptions extends UIPluginOptions {}
 export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
   AudioOptions,
   M,
-  B
+  B,
+  AudioState
 > {
   static VERSION = packageJson.version
 
   private recordingLengthTimer: ReturnType<typeof setInterval>
 
-  #stream?: MediaStream
+  private icon
+
+  #stream?: MediaStream | null
 
   #audioActive = false
 
-  #recordingChunks?: Blob[]
+  #recordingChunks?: Blob[] | null
 
-  #recorder?: MediaRecorder
+  #recorder?: MediaRecorder | null
 
-  #capturedMediaFile?: File
+  #capturedMediaFile?: MinimalRequiredUppyFile<M, B> | null
 
   #mediaDevices
 
@@ -46,7 +61,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     this.#supportsUserMedia = this.#mediaDevices != null
     this.id = this.opts.id || 'Audio'
     this.type = 'acquirer'
-    this.icon = (): JSX.Element => (
+    this.icon = () => (
       <svg
         className="uppy-DashboardTab-iconAudio"
         aria-hidden="true"
@@ -195,7 +210,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
   }
 
   #stopRecording = (): Promise<void> => {
-    const stopped = new Promise((resolve) => {
+    const stopped = new Promise<void>((resolve) => {
       this.#recorder!.addEventListener('stop', () => {
         resolve()
       })
@@ -265,8 +280,8 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
 
     if (this.#recorder) {
       await new Promise((resolve) => {
-        this.#recorder.addEventListener('stop', resolve, { once: true })
-        this.#recorder.stop()
+        this.#recorder!.addEventListener('stop', resolve, { once: true })
+        this.#recorder!.stop()
 
         clearInterval(this.recordingLengthTimer)
       })
@@ -288,9 +303,9 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     // Sometimes in iOS Safari, Blobs (especially the first Blob in the recordingChunks Array)
     // have empty 'type' attributes (e.g. '') so we need to find a Blob that has a defined 'type'
     // attribute in order to determine the correct MIME type.
-    const mimeType = this.#recordingChunks.find(
+    const mimeType = this.#recordingChunks!.find(
       (blob) => blob.type?.length > 0,
-    ).type
+    )!.type
 
     const fileExtension = getFileTypeExtension(mimeType)
 
@@ -303,7 +318,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     }
 
     const name = `audio-${Date.now()}.${fileExtension}`
-    const blob = new Blob(this.#recordingChunks, { type: mimeType })
+    const blob = new Blob(this.#recordingChunks!, { type: mimeType })
     const file = {
       source: this.id,
       name,
@@ -314,7 +329,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     return Promise.resolve(file)
   }
 
-  #changeSource = (deviceId): void => {
+  #changeSource = (deviceId?: number): void => {
     this.#stop()
     this.#start({ deviceId })
   }
@@ -327,7 +342,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     })
   }
 
-  render() {
+  render(): JSX.Element {
     if (!this.#audioActive) {
       this.#start()
     }
@@ -364,7 +379,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     )
   }
 
-  install() {
+  install(): void {
     this.setPluginState({
       audioReady: false,
       recordingLengthSeconds: 0,
@@ -401,7 +416,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     }
   }
 
-  uninstall() {
+  uninstall(): void {
     if (this.#stream) {
       this.#stop()
     }
diff --git a/packages/@uppy/core/src/BasePlugin.ts b/packages/@uppy/core/src/BasePlugin.ts
index bbb33cc315..787c6b45b8 100644
--- a/packages/@uppy/core/src/BasePlugin.ts
+++ b/packages/@uppy/core/src/BasePlugin.ts
@@ -25,6 +25,7 @@ export default class BasePlugin<
   Opts extends PluginOpts,
   M extends Meta,
   B extends Body,
+  PluginState extends Record<string, unknown> = Record<string, unknown>,
 > {
   uppy: Uppy<M, B>
 
@@ -47,12 +48,12 @@ export default class BasePlugin<
     this.opts = opts ?? {}
   }
 
-  getPluginState(): Record<string, unknown> {
+  getPluginState(): PluginState {
     const { plugins } = this.uppy.getState()
-    return plugins?.[this.id] || {}
+    return (plugins?.[this.id] || {}) as PluginState
   }
 
-  setPluginState(update: unknown): void {
+  setPluginState(update?: Partial<PluginState>): void {
     if (!update) return
     const { plugins } = this.uppy.getState()
 
diff --git a/packages/@uppy/core/src/UIPlugin.ts b/packages/@uppy/core/src/UIPlugin.ts
index e84388a721..47f725da61 100644
--- a/packages/@uppy/core/src/UIPlugin.ts
+++ b/packages/@uppy/core/src/UIPlugin.ts
@@ -48,7 +48,8 @@ class UIPlugin<
   Opts extends UIPluginOptions,
   M extends Meta,
   B extends Body,
-> extends BasePlugin<Opts, M, B> {
+  PluginState extends Record<string, unknown> = Record<string, unknown>,
+> extends BasePlugin<Opts, M, B, PluginState> {
   #updateUI: (state: Partial<State<M, B>>) => void
 
   isTargetDOMEl: boolean
diff --git a/packages/@uppy/core/src/Uppy.ts b/packages/@uppy/core/src/Uppy.ts
index 0bc903f6a1..8ab01aa003 100644
--- a/packages/@uppy/core/src/Uppy.ts
+++ b/packages/@uppy/core/src/Uppy.ts
@@ -61,7 +61,7 @@ type UnknownProviderPlugin<M extends Meta, B extends Body> = UnknownPlugin<
 }
 
 // The user facing type for UppyFile used in uppy.addFile() and uppy.setOptions()
-type MinimalRequiredUppyFile<M extends Meta, B extends Body> = Required<
+export type MinimalRequiredUppyFile<M extends Meta, B extends Body> = Required<
   Pick<UppyFile<M, B>, 'name' | 'data' | 'type' | 'source'>
 > &
   Partial<

From 988837b4d7f8edbccff8d54ffe7765b380625357 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Sat, 13 Jan 2024 11:48:55 +0100
Subject: [PATCH 03/15] step by step

---
 packages/@uppy/audio/src/Audio.tsx            |  9 ++-
 .../@uppy/audio/src/AudioSourceSelect.tsx     | 16 ++++-
 packages/@uppy/audio/src/RecordingScreen.tsx  | 64 ++++++++++++-------
 packages/@uppy/audio/src/locale.ts            | 15 +++--
 4 files changed, 70 insertions(+), 34 deletions(-)

diff --git a/packages/@uppy/audio/src/Audio.tsx b/packages/@uppy/audio/src/Audio.tsx
index d9298b1715..7f41348922 100644
--- 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
index bc9184c2f2..512fb831fd 100644
--- 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
index 60d56efd46..037e49ed9a 100644
--- 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
index bf9ae60027..96bc022746 100644
--- 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

From 0834ed717099458455be023f8d0c0c16045ad0bd Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 16 Jan 2024 12:24:03 +0100
Subject: [PATCH 04/15] type AudioOscilloscope

---
 .../audio/src/audio-oscilloscope/index.ts     | 76 ++++++++++++++++---
 1 file changed, 64 insertions(+), 12 deletions(-)

diff --git a/packages/@uppy/audio/src/audio-oscilloscope/index.ts b/packages/@uppy/audio/src/audio-oscilloscope/index.ts
index 563c417cef..fa985517b1 100644
--- a/packages/@uppy/audio/src/audio-oscilloscope/index.ts
+++ b/packages/@uppy/audio/src/audio-oscilloscope/index.ts
@@ -1,34 +1,86 @@
-function isFunction (v) {
+// eslint-disable-next-line @typescript-eslint/ban-types
+function isFunction(v: any): v is Function {
   return typeof v === 'function'
 }
 
-function result (v) {
+function result<T>(v: T): T extends (...args: any) => any ? ReturnType<T> : T {
   return isFunction(v) ? v() : v
 }
 
+type MaybeFunction<T> = T | (() => T)
+
+interface AudioOscilloscopeOptions {
+  canvas?: {
+    width?: number
+    height?: number
+  }
+  canvasContext?: {
+    width?: MaybeFunction<number>
+    height?: MaybeFunction<number>
+    lineWidth?: MaybeFunction<number>
+    fillStyle?: MaybeFunction<string>
+    strokeStyle?: MaybeFunction<string>
+  }
+
+  // eslint-disable-next-line no-use-before-define
+  onDrawFrame?: (oscilloscope: AudioOscilloscope) => void
+}
+
 /* Audio Oscilloscope
   https://github.com/miguelmota/audio-oscilloscope
 */
 export default class AudioOscilloscope {
-  constructor (canvas, options = {}) {
-    const canvasOptions = options.canvas || {}
-    const canvasContextOptions = options.canvasContext || {}
+  private canvas: HTMLCanvasElement
+
+  private canvasContext: CanvasRenderingContext2D
+
+  private width: number
+
+  private height: number
+
+  private analyser: null | AnalyserNode
+
+  private bufferLength: number
+
+  private dataArray: Uint8Array
+
+  // eslint-disable-next-line no-use-before-define
+  private onDrawFrame: (oscilloscope: AudioOscilloscope) => void
+
+  private streamSource?: MediaStreamAudioSourceNode
+
+  private audioContext: BaseAudioContext
+
+  public source: AudioBufferSourceNode
+
+  constructor(
+    canvas: HTMLCanvasElement,
+    options: AudioOscilloscopeOptions = {},
+  ) {
+    const canvasOptions =
+      options.canvas || ({} as NonNullable<AudioOscilloscopeOptions['canvas']>)
+    const canvasContextOptions =
+      options.canvasContext ||
+      ({} as NonNullable<AudioOscilloscopeOptions['canvasContext']>)
     this.analyser = null
     this.bufferLength = 0
-    this.dataArray = []
     this.canvas = canvas
     this.width = result(canvasOptions.width) || this.canvas.width
     this.height = result(canvasOptions.height) || this.canvas.height
     this.canvas.width = this.width
     this.canvas.height = this.height
-    this.canvasContext = this.canvas.getContext('2d')
-    this.canvasContext.fillStyle = result(canvasContextOptions.fillStyle) || 'rgb(255, 255, 255)'
-    this.canvasContext.strokeStyle = result(canvasContextOptions.strokeStyle) || 'rgb(0, 0, 0)'
+    this.canvasContext = this.canvas.getContext('2d')!
+    this.canvasContext.fillStyle =
+      result(canvasContextOptions.fillStyle) || 'rgb(255, 255, 255)'
+    this.canvasContext.strokeStyle =
+      result(canvasContextOptions.strokeStyle) || 'rgb(0, 0, 0)'
     this.canvasContext.lineWidth = result(canvasContextOptions.lineWidth) || 1
-    this.onDrawFrame = isFunction(options.onDrawFrame) ? options.onDrawFrame : () => {}
+    this.onDrawFrame = isFunction(options.onDrawFrame)
+      ? options.onDrawFrame
+      : () => {} // eslint-disable-line @typescript-eslint/no-empty-function
   }
 
-  addSource (streamSource) {
+  addSource(streamSource: MediaStreamAudioSourceNode): void {
     this.streamSource = streamSource
     this.audioContext = this.streamSource.context
     this.analyser = this.audioContext.createAnalyser()
@@ -40,7 +92,7 @@ export default class AudioOscilloscope {
     this.streamSource.connect(this.analyser)
   }
 
-  draw () {
+  draw(): void {
     const { analyser, dataArray, bufferLength } = this
     const ctx = this.canvasContext
     const w = this.width

From ab1e03b6dc3b3c6f9a371ca2a8b1a1d63d9573ab Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 16 Jan 2024 12:24:41 +0100
Subject: [PATCH 05/15] prettier

---
 packages/@uppy/audio/tsconfig.build.json | 20 +++++---------------
 packages/@uppy/audio/tsconfig.json       | 17 ++++-------------
 2 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/packages/@uppy/audio/tsconfig.build.json b/packages/@uppy/audio/tsconfig.build.json
index 74f1ac4a7d..1b0ca41093 100644
--- a/packages/@uppy/audio/tsconfig.build.json
+++ b/packages/@uppy/audio/tsconfig.build.json
@@ -4,26 +4,16 @@
     "noImplicitAny": false,
     "outDir": "./lib",
     "paths": {
-      "@uppy/utils/lib/*": [
-        "../utils/src/*"
-      ],
-      "@uppy/core": [
-        "../core/src/index.js"
-      ],
-      "@uppy/core/lib/*": [
-        "../core/src/*"
-      ]
+      "@uppy/utils/lib/*": ["../utils/src/*"],
+      "@uppy/core": ["../core/src/index.js"],
+      "@uppy/core/lib/*": ["../core/src/*"]
     },
     "resolveJsonModule": false,
     "rootDir": "./src",
     "skipLibCheck": true
   },
-  "include": [
-    "./src/**/*.*"
-  ],
-  "exclude": [
-    "./src/**/*.test.ts"
-  ],
+  "include": ["./src/**/*.*"],
+  "exclude": ["./src/**/*.test.ts"],
   "references": [
     {
       "path": "../utils/tsconfig.build.json"
diff --git a/packages/@uppy/audio/tsconfig.json b/packages/@uppy/audio/tsconfig.json
index ca9ae94fe9..335ddda842 100644
--- a/packages/@uppy/audio/tsconfig.json
+++ b/packages/@uppy/audio/tsconfig.json
@@ -4,21 +4,12 @@
     "emitDeclarationOnly": false,
     "noEmit": true,
     "paths": {
-      "@uppy/utils/lib/*": [
-        "../utils/src/*"
-      ],
-      "@uppy/core": [
-        "../core/src/index.js"
-      ],
-      "@uppy/core/lib/*": [
-        "../core/src/*"
-      ]
+      "@uppy/utils/lib/*": ["../utils/src/*"],
+      "@uppy/core": ["../core/src/index.js"],
+      "@uppy/core/lib/*": ["../core/src/*"]
     }
   },
-  "include": [
-    "./package.json",
-    "./src/**/*.*"
-  ],
+  "include": ["./package.json", "./src/**/*.*"],
   "references": [
     {
       "path": "../utils/tsconfig.build.json"

From 625ecf96dd8588c56ef77ceab4e7f8dc45853c60 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 16 Jan 2024 12:38:17 +0100
Subject: [PATCH 06/15] RecordingScreen

---
 packages/@uppy/audio/src/RecordingScreen.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/@uppy/audio/src/RecordingScreen.tsx b/packages/@uppy/audio/src/RecordingScreen.tsx
index 037e49ed9a..b85299b7ff 100644
--- a/packages/@uppy/audio/src/RecordingScreen.tsx
+++ b/packages/@uppy/audio/src/RecordingScreen.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import { h } from 'preact'
-import { useEffect, useRef } from 'preact/hooks'
+import { useEffect, useRef, type MutableRef } from 'preact/hooks'
 import type { Uppy } from '@uppy/core/lib/Uppy'
 import RecordButton from './RecordButton.tsx'
 import RecordingLength from './RecordingLength.tsx'
@@ -45,8 +45,12 @@ export default function RecordingScreen(
     recordingLengthSeconds,
   } = props
 
-  const canvasEl = useRef(null)
-  const oscilloscope = useRef(null)
+  const canvasEl = useRef<HTMLCanvasElement>(
+    null,
+  ) as MutableRef<HTMLCanvasElement>
+  const oscilloscope = useRef<AudioOscilloscope>(
+    null,
+  ) as MutableRef<AudioOscilloscope | null>
 
   // componentDidMount / componentDidUnmount
   useEffect(() => {

From d7bf44507e793caa6f24e3da222555ca6956a890 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 16 Jan 2024 12:40:28 +0100
Subject: [PATCH 07/15] `formatSeconds`

---
 packages/@uppy/audio/src/formatSeconds.ts | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/@uppy/audio/src/formatSeconds.ts b/packages/@uppy/audio/src/formatSeconds.ts
index 3c6d0281e4..d79c9eb903 100644
--- a/packages/@uppy/audio/src/formatSeconds.ts
+++ b/packages/@uppy/audio/src/formatSeconds.ts
@@ -1,12 +1,7 @@
 /**
- * Takes an Integer value of seconds (e.g. 83) and converts it into a human-readable formatted string (e.g. '1:23').
- *
- * @param {Integer} seconds
- * @returns {string} the formatted seconds (e.g. '1:23' for 1 minute and 23 seconds)
- *
+ * Takes an Integer value of seconds (e.g. 83) and converts it into a
+ * human-readable formatted string (e.g. '1:23').
  */
-export default function formatSeconds (seconds) {
-  return `${Math.floor(
-    seconds / 60,
-  )}:${String(seconds % 60).padStart(2, 0)}`
+export default function formatSeconds(seconds: number): string {
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`
 }

From a4c4bd2c1a5749c4fe336eacaa077ab1a04b6a6e Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 16 Jan 2024 12:42:22 +0100
Subject: [PATCH 08/15] silence errors in test file

---
 packages/@uppy/audio/src/supportsMediaRecorder.test.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/@uppy/audio/src/supportsMediaRecorder.test.ts b/packages/@uppy/audio/src/supportsMediaRecorder.test.ts
index 08da98288f..8c1e12919e 100644
--- a/packages/@uppy/audio/src/supportsMediaRecorder.test.ts
+++ b/packages/@uppy/audio/src/supportsMediaRecorder.test.ts
@@ -1,24 +1,28 @@
-/* eslint-disable max-classes-per-file */
+/* eslint-disable max-classes-per-file, compat/compat */
 import { describe, expect, it } from 'vitest'
 import supportsMediaRecorder from './supportsMediaRecorder.ts'
 
 describe('supportsMediaRecorder', () => {
   it('should return true if MediaRecorder is supported', () => {
+    // @ts-expect-error just a test
     globalThis.MediaRecorder = class MediaRecorder {
-      start () {} // eslint-disable-line
+      start() {} // eslint-disable-line
     }
     expect(supportsMediaRecorder()).toEqual(true)
   })
 
   it('should return false if MediaRecorder is not supported', () => {
+    // @ts-expect-error just a test
     globalThis.MediaRecorder = undefined
     expect(supportsMediaRecorder()).toEqual(false)
 
+    // @ts-expect-error just a test
     globalThis.MediaRecorder = class MediaRecorder {}
     expect(supportsMediaRecorder()).toEqual(false)
 
+    // @ts-expect-error just a test
     globalThis.MediaRecorder = class MediaRecorder {
-      foo () {} // eslint-disable-line
+      foo() {} // eslint-disable-line
     }
     expect(supportsMediaRecorder()).toEqual(false)
   })

From da07ac366f7cf9787e1a895bf6289b12a779e518 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 16 Jan 2024 12:55:56 +0100
Subject: [PATCH 09/15] more types

---
 packages/@uppy/audio/src/DiscardButton.tsx    |  8 +++-
 .../@uppy/audio/src/PermissionsScreen.tsx     | 19 +++++++--
 packages/@uppy/audio/src/RecordButton.tsx     | 39 +++++++++++++++++--
 packages/@uppy/audio/src/RecordingLength.tsx  | 17 +++++++-
 packages/@uppy/audio/src/SubmitButton.tsx     | 14 ++++++-
 5 files changed, 85 insertions(+), 12 deletions(-)

diff --git a/packages/@uppy/audio/src/DiscardButton.tsx b/packages/@uppy/audio/src/DiscardButton.tsx
index 8561dcb04a..772955cba2 100644
--- a/packages/@uppy/audio/src/DiscardButton.tsx
+++ b/packages/@uppy/audio/src/DiscardButton.tsx
@@ -1,6 +1,12 @@
 import { h } from 'preact'
+import type { Uppy } from '@uppy/core'
 
-function DiscardButton ({ onDiscard, i18n }) {
+interface DiscardButtonProps {
+  onDiscard: () => void
+  i18n: Uppy<any, any>['i18n']
+}
+
+function DiscardButton({ onDiscard, i18n }: DiscardButtonProps): JSX.Element {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Audio-button"
diff --git a/packages/@uppy/audio/src/PermissionsScreen.tsx b/packages/@uppy/audio/src/PermissionsScreen.tsx
index 62b113b3f9..564dac338e 100644
--- a/packages/@uppy/audio/src/PermissionsScreen.tsx
+++ b/packages/@uppy/audio/src/PermissionsScreen.tsx
@@ -1,12 +1,25 @@
+import type { Uppy } from '@uppy/core'
 import { h } from 'preact'
 
-export default (props) => {
+interface PermissionsScreenProps {
+  icon: () => JSX.Element | null
+  hasAudio: boolean
+  i18n: Uppy<any, any>['i18n']
+}
+
+export default (props: PermissionsScreenProps): JSX.Element => {
   const { icon, hasAudio, i18n } = props
   return (
     <div className="uppy-Audio-permissons">
       <div className="uppy-Audio-permissonsIcon">{icon()}</div>
-      <h1 className="uppy-Audio-title">{hasAudio ? i18n('allowAudioAccessTitle') : i18n('noAudioTitle')}</h1>
-      <p>{hasAudio ? i18n('allowAudioAccessDescription') : i18n('noAudioDescription')}</p>
+      <h1 className="uppy-Audio-title">
+        {hasAudio ? i18n('allowAudioAccessTitle') : i18n('noAudioTitle')}
+      </h1>
+      <p>
+        {hasAudio
+          ? i18n('allowAudioAccessDescription')
+          : i18n('noAudioDescription')}
+      </p>
     </div>
   )
 }
diff --git a/packages/@uppy/audio/src/RecordButton.tsx b/packages/@uppy/audio/src/RecordButton.tsx
index b1610bb752..e17aef8f19 100644
--- a/packages/@uppy/audio/src/RecordButton.tsx
+++ b/packages/@uppy/audio/src/RecordButton.tsx
@@ -1,6 +1,19 @@
+import type { Uppy } from '@uppy/core'
 import { h } from 'preact'
 
-export default function RecordButton ({ recording, onStartRecording, onStopRecording, i18n }) {
+interface RecordButtonProps {
+  recording: boolean
+  onStartRecording: () => void
+  onStopRecording: () => void
+  i18n: Uppy<any, any>['i18n']
+}
+
+export default function RecordButton({
+  recording,
+  onStartRecording,
+  onStopRecording,
+  i18n,
+}: RecordButtonProps): JSX.Element {
   if (recording) {
     return (
       <button
@@ -11,7 +24,14 @@ export default function RecordButton ({ recording, onStartRecording, onStopRecor
         onClick={onStopRecording}
         data-uppy-super-focusable
       >
-        <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="100" height="100" viewBox="0 0 100 100">
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          className="uppy-c-icon"
+          width="100"
+          height="100"
+          viewBox="0 0 100 100"
+        >
           <rect x="15" y="15" width="70" height="70" />
         </svg>
       </button>
@@ -27,8 +47,19 @@ export default function RecordButton ({ recording, onStartRecording, onStopRecor
       onClick={onStartRecording}
       data-uppy-super-focusable
     >
-      <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="14px" height="20px" viewBox="0 0 14 20">
-        <path d="M7 14c2.21 0 4-1.71 4-3.818V3.818C11 1.71 9.21 0 7 0S3 1.71 3 3.818v6.364C3 12.29 4.79 14 7 14zm6.364-7h-.637a.643.643 0 0 0-.636.65V9.6c0 3.039-2.565 5.477-5.6 5.175-2.645-.264-4.582-2.692-4.582-5.407V7.65c0-.36-.285-.65-.636-.65H.636A.643.643 0 0 0 0 7.65v1.631c0 3.642 2.544 6.888 6.045 7.382v1.387H3.818a.643.643 0 0 0-.636.65v.65c0 .36.285.65.636.65h6.364c.351 0 .636-.29.636-.65v-.65c0-.36-.285-.65-.636-.65H7.955v-1.372C11.363 16.2 14 13.212 14 9.6V7.65c0-.36-.285-.65-.636-.65z" fill="#FFF" fill-rule="nonzero" />
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        className="uppy-c-icon"
+        width="14px"
+        height="20px"
+        viewBox="0 0 14 20"
+      >
+        <path
+          d="M7 14c2.21 0 4-1.71 4-3.818V3.818C11 1.71 9.21 0 7 0S3 1.71 3 3.818v6.364C3 12.29 4.79 14 7 14zm6.364-7h-.637a.643.643 0 0 0-.636.65V9.6c0 3.039-2.565 5.477-5.6 5.175-2.645-.264-4.582-2.692-4.582-5.407V7.65c0-.36-.285-.65-.636-.65H.636A.643.643 0 0 0 0 7.65v1.631c0 3.642 2.544 6.888 6.045 7.382v1.387H3.818a.643.643 0 0 0-.636.65v.65c0 .36.285.65.636.65h6.364c.351 0 .636-.29.636-.65v-.65c0-.36-.285-.65-.636-.65H7.955v-1.372C11.363 16.2 14 13.212 14 9.6V7.65c0-.36-.285-.65-.636-.65z"
+          fill="#FFF"
+          fill-rule="nonzero"
+        />
       </svg>
     </button>
   )
diff --git a/packages/@uppy/audio/src/RecordingLength.tsx b/packages/@uppy/audio/src/RecordingLength.tsx
index d677472126..6e2ef4b29e 100644
--- a/packages/@uppy/audio/src/RecordingLength.tsx
+++ b/packages/@uppy/audio/src/RecordingLength.tsx
@@ -1,11 +1,24 @@
 import { h } from 'preact'
+import type { Uppy } from '@uppy/core'
 import formatSeconds from './formatSeconds.ts'
 
-export default function RecordingLength ({ recordingLengthSeconds, i18n }) {
+interface RecordingLengthProps {
+  recordingLengthSeconds: number
+  i18n: Uppy<any, any>['i18n']
+}
+
+export default function RecordingLength({
+  recordingLengthSeconds,
+  i18n,
+}: RecordingLengthProps): JSX.Element {
   const formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds)
 
   return (
-    <span aria-label={i18n('recordingLength', { recording_length: formattedRecordingLengthSeconds })}>
+    <span
+      aria-label={i18n('recordingLength', {
+        recording_length: formattedRecordingLengthSeconds,
+      })}
+    >
       {formattedRecordingLengthSeconds}
     </span>
   )
diff --git a/packages/@uppy/audio/src/SubmitButton.tsx b/packages/@uppy/audio/src/SubmitButton.tsx
index c788874a48..acc027830a 100644
--- a/packages/@uppy/audio/src/SubmitButton.tsx
+++ b/packages/@uppy/audio/src/SubmitButton.tsx
@@ -1,6 +1,12 @@
 import { h } from 'preact'
+import type { Uppy } from '@uppy/core'
 
-function SubmitButton ({ onSubmit, i18n }) {
+interface SubmitButtonProps {
+  onSubmit: () => void
+  i18n: Uppy<any, any>['i18n']
+}
+
+function SubmitButton({ onSubmit, i18n }: SubmitButtonProps): JSX.Element {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Audio-button uppy-Audio-button--submit"
@@ -19,7 +25,11 @@ function SubmitButton ({ onSubmit, i18n }) {
         focusable="false"
         className="uppy-c-icon"
       >
-        <path fill="#fff" fillRule="nonzero" d="M10.66 0L12 1.31 4.136 9 0 4.956l1.34-1.31L4.136 6.38z" />
+        <path
+          fill="#fff"
+          fillRule="nonzero"
+          d="M10.66 0L12 1.31 4.136 9 0 4.956l1.34-1.31L4.136 6.38z"
+        />
       </svg>
     </button>
   )

From 36bc81fb05a527ea486f9eb574b88a03dbacf353 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 16 Jan 2024 14:40:58 +0100
Subject: [PATCH 10/15] lint

---
 packages/@uppy/audio/src/supportsMediaRecorder.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/@uppy/audio/src/supportsMediaRecorder.ts b/packages/@uppy/audio/src/supportsMediaRecorder.ts
index 487b4b520d..4cee898ed2 100644
--- a/packages/@uppy/audio/src/supportsMediaRecorder.ts
+++ b/packages/@uppy/audio/src/supportsMediaRecorder.ts
@@ -1,6 +1,8 @@
-export default function supportsMediaRecorder () {
+export default function supportsMediaRecorder(): boolean {
   /* eslint-disable compat/compat */
-  return typeof MediaRecorder === 'function'
-    && typeof MediaRecorder.prototype?.start === 'function'
+  return (
+    typeof MediaRecorder === 'function' &&
+    typeof MediaRecorder.prototype?.start === 'function'
+  )
   /* eslint-enable compat/compat */
 }

From 25814d8d1f8e1c52758940d3fa115f646841856b Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 16 Jan 2024 15:58:55 +0100
Subject: [PATCH 11/15] prettier

---
 packages/@uppy/audio/src/formatSeconds.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@uppy/audio/src/formatSeconds.test.ts b/packages/@uppy/audio/src/formatSeconds.test.ts
index dfbf2642a3..6e5c746611 100644
--- a/packages/@uppy/audio/src/formatSeconds.test.ts
+++ b/packages/@uppy/audio/src/formatSeconds.test.ts
@@ -2,11 +2,11 @@ import { describe, expect, it } from 'vitest'
 import formatSeconds from './formatSeconds.ts'
 
 describe('formatSeconds', () => {
-  it('should return a value of \'0:43\' when an argument of 43 seconds is supplied', () => {
+  it("should return a value of '0:43' when an argument of 43 seconds is supplied", () => {
     expect(formatSeconds(43)).toEqual('0:43')
   })
 
-  it('should return a value of \'1:43\' when an argument of 103 seconds is supplied', () => {
+  it("should return a value of '1:43' when an argument of 103 seconds is supplied", () => {
     expect(formatSeconds(103)).toEqual('1:43')
   })
 })

From 5fc089965e1c583a366ebec46660cc9933351b5d Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Tue, 16 Jan 2024 17:11:01 +0100
Subject: [PATCH 12/15] fewer `any`

---
 packages/@uppy/audio/src/DiscardButton.tsx     | 4 ++--
 packages/@uppy/audio/src/PermissionsScreen.tsx | 4 ++--
 packages/@uppy/audio/src/RecordButton.tsx      | 4 ++--
 packages/@uppy/audio/src/RecordingLength.tsx   | 4 ++--
 packages/@uppy/audio/src/RecordingScreen.tsx   | 4 ++--
 packages/@uppy/audio/src/SubmitButton.tsx      | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/@uppy/audio/src/DiscardButton.tsx b/packages/@uppy/audio/src/DiscardButton.tsx
index 772955cba2..f975db6454 100644
--- a/packages/@uppy/audio/src/DiscardButton.tsx
+++ b/packages/@uppy/audio/src/DiscardButton.tsx
@@ -1,9 +1,9 @@
 import { h } from 'preact'
-import type { Uppy } from '@uppy/core'
+import type { I18n } from '@uppy/utils/lib/Translator'
 
 interface DiscardButtonProps {
   onDiscard: () => void
-  i18n: Uppy<any, any>['i18n']
+  i18n: I18n
 }
 
 function DiscardButton({ onDiscard, i18n }: DiscardButtonProps): JSX.Element {
diff --git a/packages/@uppy/audio/src/PermissionsScreen.tsx b/packages/@uppy/audio/src/PermissionsScreen.tsx
index 564dac338e..89b0dede8e 100644
--- a/packages/@uppy/audio/src/PermissionsScreen.tsx
+++ b/packages/@uppy/audio/src/PermissionsScreen.tsx
@@ -1,10 +1,10 @@
-import type { Uppy } from '@uppy/core'
+import type { I18n } from '@uppy/utils/lib/Translator'
 import { h } from 'preact'
 
 interface PermissionsScreenProps {
   icon: () => JSX.Element | null
   hasAudio: boolean
-  i18n: Uppy<any, any>['i18n']
+  i18n: I18n
 }
 
 export default (props: PermissionsScreenProps): JSX.Element => {
diff --git a/packages/@uppy/audio/src/RecordButton.tsx b/packages/@uppy/audio/src/RecordButton.tsx
index e17aef8f19..89ecd05144 100644
--- a/packages/@uppy/audio/src/RecordButton.tsx
+++ b/packages/@uppy/audio/src/RecordButton.tsx
@@ -1,11 +1,11 @@
-import type { Uppy } from '@uppy/core'
+import type { I18n } from '@uppy/utils/lib/Translator'
 import { h } from 'preact'
 
 interface RecordButtonProps {
   recording: boolean
   onStartRecording: () => void
   onStopRecording: () => void
-  i18n: Uppy<any, any>['i18n']
+  i18n: I18n
 }
 
 export default function RecordButton({
diff --git a/packages/@uppy/audio/src/RecordingLength.tsx b/packages/@uppy/audio/src/RecordingLength.tsx
index 6e2ef4b29e..d339d3da0a 100644
--- a/packages/@uppy/audio/src/RecordingLength.tsx
+++ b/packages/@uppy/audio/src/RecordingLength.tsx
@@ -1,10 +1,10 @@
 import { h } from 'preact'
-import type { Uppy } from '@uppy/core'
+import type { I18n } from '@uppy/utils/lib/Translator'
 import formatSeconds from './formatSeconds.ts'
 
 interface RecordingLengthProps {
   recordingLengthSeconds: number
-  i18n: Uppy<any, any>['i18n']
+  i18n: I18n
 }
 
 export default function RecordingLength({
diff --git a/packages/@uppy/audio/src/RecordingScreen.tsx b/packages/@uppy/audio/src/RecordingScreen.tsx
index b85299b7ff..8042f66d16 100644
--- a/packages/@uppy/audio/src/RecordingScreen.tsx
+++ b/packages/@uppy/audio/src/RecordingScreen.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import { h } from 'preact'
 import { useEffect, useRef, type MutableRef } from 'preact/hooks'
-import type { Uppy } from '@uppy/core/lib/Uppy'
+import type { I18n } from '@uppy/utils/lib/Translator'
 import RecordButton from './RecordButton.tsx'
 import RecordingLength from './RecordingLength.tsx'
 import AudioSourceSelect, {
@@ -18,7 +18,7 @@ interface RecordingScreenProps extends AudioSourceSelectProps {
   supportsRecording: boolean
   showAudioSourceDropdown: boolean
   onSubmit: () => void
-  i18n: Uppy<any, any>['i18n']
+  i18n: I18n
   onStartRecording: () => void
   onStopRecording: () => void
   onStop: () => void
diff --git a/packages/@uppy/audio/src/SubmitButton.tsx b/packages/@uppy/audio/src/SubmitButton.tsx
index acc027830a..940620ab57 100644
--- a/packages/@uppy/audio/src/SubmitButton.tsx
+++ b/packages/@uppy/audio/src/SubmitButton.tsx
@@ -1,9 +1,9 @@
 import { h } from 'preact'
-import type { Uppy } from '@uppy/core'
+import type { I18n } from '@uppy/utils/lib/Translator'
 
 interface SubmitButtonProps {
   onSubmit: () => void
-  i18n: Uppy<any, any>['i18n']
+  i18n: I18n
 }
 
 function SubmitButton({ onSubmit, i18n }: SubmitButtonProps): JSX.Element {

From ad4fe4e80dec4cbf06767ceec6a5e337d78ce1a5 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Wed, 17 Jan 2024 10:49:14 +0100
Subject: [PATCH 13/15] (Mutable)Ref

---
 packages/@uppy/audio/src/RecordingScreen.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/@uppy/audio/src/RecordingScreen.tsx b/packages/@uppy/audio/src/RecordingScreen.tsx
index 8042f66d16..9e22e29668 100644
--- a/packages/@uppy/audio/src/RecordingScreen.tsx
+++ b/packages/@uppy/audio/src/RecordingScreen.tsx
@@ -45,12 +45,8 @@ export default function RecordingScreen(
     recordingLengthSeconds,
   } = props
 
-  const canvasEl = useRef<HTMLCanvasElement>(
-    null,
-  ) as MutableRef<HTMLCanvasElement>
-  const oscilloscope = useRef<AudioOscilloscope>(
-    null,
-  ) as MutableRef<AudioOscilloscope | null>
+  const canvasEl = useRef<HTMLCanvasElement>(null)
+  const oscilloscope = useRef<AudioOscilloscope | null>()
 
   // componentDidMount / componentDidUnmount
   useEffect(() => {
@@ -63,7 +59,7 @@ export default function RecordingScreen(
   // componentDidUpdate
   useEffect(() => {
     if (!recordedAudio) {
-      oscilloscope.current = new AudioOscilloscope(canvasEl.current, {
+      oscilloscope.current = new AudioOscilloscope(canvasEl.current!, {
         canvas: {
           width: 600,
           height: 600,

From d549ca1bcb7c6aa3aa802afc211835115fb00818 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Wed, 17 Jan 2024 14:10:10 +0100
Subject: [PATCH 14/15] remove unused import

---
 packages/@uppy/audio/src/RecordingScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@uppy/audio/src/RecordingScreen.tsx b/packages/@uppy/audio/src/RecordingScreen.tsx
index 9e22e29668..aece205898 100644
--- a/packages/@uppy/audio/src/RecordingScreen.tsx
+++ b/packages/@uppy/audio/src/RecordingScreen.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import { h } from 'preact'
-import { useEffect, useRef, type MutableRef } from 'preact/hooks'
+import { useEffect, useRef } from 'preact/hooks'
 import type { I18n } from '@uppy/utils/lib/Translator'
 import RecordButton from './RecordButton.tsx'
 import RecordingLength from './RecordingLength.tsx'

From 4c5ac84299d3ad12f75cc9e51e5a7f8b663ccb5f Mon Sep 17 00:00:00 2001
From: Antoine du Hamel <duhamelantoine1995@gmail.com>
Date: Wed, 17 Jan 2024 14:29:58 +0100
Subject: [PATCH 15/15] reduce output diff

---
 packages/@uppy/audio/src/Audio.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@uppy/audio/src/Audio.tsx b/packages/@uppy/audio/src/Audio.tsx
index 7f41348922..620555483c 100644
--- a/packages/@uppy/audio/src/Audio.tsx
+++ b/packages/@uppy/audio/src/Audio.tsx
@@ -44,15 +44,15 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
 
   private icon
 
-  #stream?: MediaStream | null
+  #stream: MediaStream | null = null
 
   #audioActive = false
 
-  #recordingChunks?: Blob[] | null
+  #recordingChunks: Blob[] | null = null
 
-  #recorder?: MediaRecorder | null
+  #recorder: MediaRecorder | null = null
 
-  #capturedMediaFile?: MinimalRequiredUppyFile<M, B> | null
+  #capturedMediaFile: MinimalRequiredUppyFile<M, B> | null = null
 
   #mediaDevices