chore: consume types from microphone-stream package (#18)

Author: trivikr

packages/frontend/package.json

@@ -12,7 +12,7 @@
     "@aws-sdk/util-create-request": "3.4.1",
     "@aws-sdk/util-format-url": "3.4.1",
     "@reach/router": "1.3.4",
-    "microphone-stream": "5.1.0",
+    "microphone-stream": "5.2.0",
     "react": "17.0.1",
     "react-bootstrap": "1.4.0",
     "react-dom": "17.0.1"

packages/frontend/src/content/RecordAudioButton.tsx

@@ -2,8 +2,7 @@ import React, { useState } from "react";
 import { Button, Alert } from "react-bootstrap";
 import { MicFill, MicMute } from "react-bootstrap-icons";
 
-// @ts-ignore https://github.com/saebekassebil/microphone-stream/issues/39
-import * as MicrophoneStream from "microphone-stream";
+import MicrophoneStream from "microphone-stream";
 
 import { pcmEncode } from "../libs/audioUtils";
 import { getStreamTranscriptionResponse } from "../libs/getStreamTranscriptionResponse";
@@ -14,19 +13,19 @@ const RecordAudioButton = (props: {
   setNoteContent: Function;
 }) => {
   const { isRecording, setIsRecording, setNoteContent } = props;
-  const [micStream, setMicStream] = useState<any>();
+  const [micStream, setMicStream] = useState<MicrophoneStream | undefined>();
   const [errorMsg, setErrorMsg] = useState("");
 
   const toggleTrascription = async () => {
     if (isRecording) {
       setIsRecording(false);
       if (micStream) {
         micStream.stop();
-        setMicStream(null);
+        setMicStream(undefined);
       }
     } else {
       setIsRecording(true);
-      let mic: any;
+      let mic;
       try {
         const audio = await navigator.mediaDevices.getUserMedia({
           audio: true,
@@ -42,21 +41,22 @@ const RecordAudioButton = (props: {
       } finally {
         if (mic) {
           mic.stop();
-          setMicStream(null);
+          setMicStream(undefined);
         }
         setIsRecording(false);
       }
     }
   };
 
-  const streamAudioToWebSocket = async (micStream: any) => {
-    const pcmEncodeChunk = (audioChunk: any) => {
+  const streamAudioToWebSocket = async (micStream: MicrophoneStream) => {
+    const pcmEncodeChunk = (audioChunk: Buffer) => {
       const raw = MicrophoneStream.toRaw(audioChunk);
       if (raw == null) return;
       return Buffer.from(pcmEncode(raw));
     };
 
     const transcribeInput = async function* () {
+      // @ts-ignore Type 'MicrophoneStream' is not an array type or a string type.
       for await (const chunk of micStream) {
         yield { AudioEvent: { AudioChunk: pcmEncodeChunk(chunk) } };
       }
@@ -81,7 +81,9 @@ const RecordAudioButton = (props: {
 
               const transcriptionToRemove = partialTranscription;
               // fix encoding for accented characters.
-              const transcription = decodeURIComponent(escape(Transcript || ""));
+              const transcription = decodeURIComponent(
+                escape(Transcript || "")
+              );
 
               setNoteContent(
                 (noteContent: any) =>

yarn.lock

@@ -767,7 +767,7 @@ __metadata:
     "@types/react": 17.0.0
     "@types/react-dom": 17.0.0
     local-web-server: ^4.2.1
-    microphone-stream: 5.1.0
+    microphone-stream: 5.2.0
     react: 17.0.1
     react-bootstrap: 1.4.0
     react-bootstrap-icons: 1.3.0
@@ -15105,13 +15105,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"microphone-stream@npm:5.1.0":
-  version: 5.1.0
-  resolution: "microphone-stream@npm:5.1.0"
+"microphone-stream@npm:5.2.0":
+  version: 5.2.0
+  resolution: "microphone-stream@npm:5.2.0"
   dependencies:
     buffer-from: ^1.1.1
     readable-stream: ^3.6.0
-  checksum: b64869f02fba7e00025d32fcf6bbc2b7ef6f0e52c63e98e2f9a4cf108e9bc2b72c193092e056b1e39fb068aab757cf3a3f5155a74dfedbc8702825d344ca80c8
+  checksum: fc28b6150bac409b6c124411f370b3962acac7c68fa6da04e85795f1d8fb40977de583db4f856d6ba658f692d30a9f5931a308d3fc52cf6d3c9814738815c6f7
   languageName: node
   linkType: hard