Migrate to typescript

www/app/lib/CustomRecordPlugin.js

@@ -0,0 +1,128 @@
+// Override the startRecording method so we can pass the desired stream
+// Checkout: https://github.com/katspaugh/wavesurfer.js/blob/fa2bcfe/src/plugins/record.ts
+
+import RecordPlugin from "wavesurfer.js/dist/plugins/record";
+
+const MIME_TYPES = [
+  "audio/webm",
+  "audio/wav",
+  "audio/mpeg",
+  "audio/mp4",
+  "audio/mp3",
+];
+const findSupportedMimeType = () =>
+  MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType));
+
+class CustomRecordPlugin extends RecordPlugin {
+  static create(options) {
+    return new CustomRecordPlugin(options || {});
+  }
+  render(stream) {
+    if (!this.wavesurfer) return () => undefined;
+
+    const container = this.wavesurfer.getWrapper();
+    const canvas = document.createElement("canvas");
+    canvas.width = container.clientWidth;
+    canvas.height = container.clientHeight;
+    canvas.style.zIndex = "10";
+    container.appendChild(canvas);
+
+    const canvasCtx = canvas.getContext("2d");
+    const audioContext = new AudioContext();
+    const source = audioContext.createMediaStreamSource(stream);
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 2 ** 5;
+    source.connect(analyser);
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+
+    let animationId, previousTimeStamp;
+    const BUFFER_SIZE = 2 ** 8;
+    const dataBuffer = new Array(BUFFER_SIZE).fill(canvas.height);
+
+    const drawWaveform = (timeStamp) => {
+      if (!canvasCtx) return;
+
+      analyser.getByteTimeDomainData(dataArray);
+      canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+      canvasCtx.fillStyle = "#cc3347";
+
+      if (previousTimeStamp === undefined) {
+        previousTimeStamp = timeStamp;
+        dataBuffer.push(Math.min(...dataArray));
+        dataBuffer.splice(0, 1);
+      }
+      const elapsed = timeStamp - previousTimeStamp;
+      if (elapsed > 10) {
+        previousTimeStamp = timeStamp;
+        dataBuffer.push(Math.min(...dataArray));
+        dataBuffer.splice(0, 1);
+      }
+
+      // Drawing
+      const sliceWidth = canvas.width / dataBuffer.length;
+      let x = 0;
+
+      for (let i = 0; i < dataBuffer.length; i++) {
+        const valueNormalized = dataBuffer[i] / canvas.height;
+        const y = (valueNormalized * canvas.height) / 2;
+        const sliceHeight = canvas.height + 1 - y * 2;
+
+        canvasCtx.fillRect(x, y, (sliceWidth * 2) / 3, sliceHeight);
+        x += sliceWidth;
+      }
+
+      animationId = requestAnimationFrame(drawWaveform);
+    };
+
+    drawWaveform();
+
+    return () => {
+      if (animationId) {
+        cancelAnimationFrame(animationId);
+      }
+
+      if (source) {
+        source.disconnect();
+        source.mediaStream.getTracks().forEach((track) => track.stop());
+      }
+
+      if (audioContext) {
+        audioContext.close();
+      }
+
+      canvas?.remove();
+    };
+  }
+  startRecording(stream) {
+    this.preventInteraction();
+    this.cleanUp();
+
+    const onStop = this.render(stream);
+    const mediaRecorder = new MediaRecorder(stream, {
+      mimeType: this.options.mimeType || findSupportedMimeType(),
+      audioBitsPerSecond: this.options.audioBitsPerSecond,
+    });
+    const recordedChunks = [];
+
+    mediaRecorder.addEventListener("dataavailable", (event) => {
+      if (event.data.size > 0) {
+        recordedChunks.push(event.data);
+      }
+    });
+
+    mediaRecorder.addEventListener("stop", () => {
+      onStop();
+      this.loadBlob(recordedChunks, mediaRecorder.mimeType);
+      this.emit("stopRecording");
+    });
+
+    mediaRecorder.start();
+
+    this.emit("startRecording");
+
+    this.mediaRecorder = mediaRecorder;
+  }
+}
+
+export default CustomRecordPlugin;

www/app/lib/random.tsx

@@ -1,15 +1,15 @@
-export function getRandomNumber(min, max) {
+export function getRandomNumber(min: number, max: number): number {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-export function SeededRand(seed) {
+export function SeededRand(seed: number): number {
   seed ^= seed << 13;
   seed ^= seed >> 17;
   seed ^= seed << 5;
   return seed / 2 ** 32;
 }
 
-export function Mulberry32(seed) {
+export function Mulberry32(seed: number) {
   return function () {
     var t = (seed += 0x6d2b79f5);
     t = Math.imul(t ^ (t >>> 15), t | 1);

www/app/lib/time.tsx

@@ -1,4 +1,4 @@
-export const formatTime = (seconds) => {
+export const formatTime = (seconds: number): string => {
   let hours = Math.floor(seconds / 3600);
   let minutes = Math.floor((seconds % 3600) / 60);
   let secs = Math.floor(seconds % 60);