Last touches for new audiowave integration

app/components/CustomRecordPlugin.js

@@ -1,43 +1,50 @@
 // 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"
+import RecordPlugin from "wavesurfer.js/dist/plugins/record";
 
-const MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3']
+const MIME_TYPES = [
-const findSupportedMimeType = () => MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType))
+  "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 || {})
+    return new CustomRecordPlugin(options || {});
   }
   startRecording(stream) {
-    this.preventInteraction()
+    this.preventInteraction();
-    this.cleanUp()
+    this.cleanUp();
 
-    const onStop = this.render(stream)
+    const onStop = this.render(stream);
     const mediaRecorder = new MediaRecorder(stream, {
       mimeType: this.options.mimeType || findSupportedMimeType(),
       audioBitsPerSecond: this.options.audioBitsPerSecond,
-    })
+    });
-    const recordedChunks = []
+    const recordedChunks = [];
 
-    mediaRecorder.addEventListener('dataavailable', (event) => {
+    mediaRecorder.addEventListener("dataavailable", (event) => {
       if (event.data.size > 0) {
-        recordedChunks.push(event.data)
+        recordedChunks.push(event.data);
       }
-    })
+    });
 
-    mediaRecorder.addEventListener('stop', () => {
+    mediaRecorder.addEventListener("stop", () => {
-      onStop()
+      onStop();
-      this.loadBlob(recordedChunks, mediaRecorder.mimeType)
+      this.loadBlob(recordedChunks, mediaRecorder.mimeType);
-      this.emit('stopRecording')
+      this.emit("stopRecording");
-    })
+    });
 
-    mediaRecorder.start()
+    mediaRecorder.start();
 
-    this.emit('startRecording')
+    this.emit("startRecording");
 
-    this.mediaRecorder = mediaRecorder
+    this.mediaRecorder = mediaRecorder;
   }
 }
 

app/components/dashboard.js

@@ -34,14 +34,14 @@ export function Dashboard({
               <div className="w-1/4">
                 {item.title}{" "}
                 <span
-                  className={`inline-block transform transition-transform duration-200 ${openIndex === index ? "rotate-90" : ""
+                  className={`inline-block transform transition-transform duration-200 ${
-                    }`}
+                    openIndex === index ? "rotate-90" : ""
+                  }`}
                 >
                   {">"}
                 </span>
               </div>
-              <div className="w-1/4 flex flex-row space-x-0.5">
+              <div className="w-1/4 flex flex-row space-x-0.5"></div>
-              </div>
             </div>
             {openIndex === index && (
               <div className="mt-2 p-2 bg-white">{item.transcript}</div>
@@ -53,8 +53,7 @@ export function Dashboard({
           <div className="flex justify-between">
             <div className="w-1/4">Live</div>
             <div className="w-1/4">Transcript</div>
-            <div className="w-1/4 flex flex-row space-x-0.5">
+            <div className="w-1/4 flex flex-row space-x-0.5"></div>
-            </div>
           </div>
           <div className="mt-2 p-2 bg-white temp-transcription">
             {transcriptionText}

app/components/record.js

@@ -2,106 +2,117 @@ import React, { useRef, useEffect, useState } from "react";
 
 import WaveSurfer from "wavesurfer.js";
 
-import Dropdown from 'react-dropdown'
+import Dropdown from "react-dropdown";
-import 'react-dropdown/style.css'
+import "react-dropdown/style.css";
-
-import CustomRecordPlugin from './CustomRecordPlugin'
 
+import CustomRecordPlugin from "./CustomRecordPlugin";
 
 export default function Recorder(props) {
-  const waveformRef = useRef()
+  const waveformRef = useRef();
-  const [wavesurfer, setWavesurfer] = useState(null)
+  const [wavesurfer, setWavesurfer] = useState(null);
-  const [record, setRecord] = useState(null)
+  const [record, setRecord] = useState(null);
-  const [isRecording, setIsRecording] = useState(false)
+  const [isRecording, setIsRecording] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false);
-  const [deviceId, setDeviceId] = useState(null)
+  const [deviceId, setDeviceId] = useState(null);
-  const [ddOptions, setDdOptions] = useState([])
+  const [ddOptions, setDdOptions] = useState([]);
 
   useEffect(() => {
-    document.getElementById('play-btn').disabled = true
+    document.getElementById("play-btn").disabled = true;
 
-    navigator.mediaDevices.enumerateDevices().then(devices => {
+    navigator.mediaDevices.enumerateDevices().then((devices) => {
       const audioDevices = devices
-        .filter(d => d.kind === 'audioinput')
+        .filter((d) => d.kind === "audioinput")
-        .map(d => ({value: d.deviceId, label: d.label}))
+        .map((d) => ({ value: d.deviceId, label: d.label }));
 
-      if (audioDevices.length < 1) return console.log("no audio input devices")
+      if (audioDevices.length < 1) return console.log("no audio input devices");
 
-      setDdOptions(audioDevices)
+      setDdOptions(audioDevices);
-      setDeviceId(audioDevices[0].value)
+      setDeviceId(audioDevices[0].value);
-    })
+    });
 
-    if(waveformRef.current) {
+    if (waveformRef.current) {
       const _wavesurfer = WaveSurfer.create({
         container: waveformRef.current,
-        waveColor: "#333",
+        waveColor: "#cc3347",
-        progressColor: "#0178FF",
+        progressColor: "#0178FFπ",
         cursorColor: "OrangeRed",
         hideScrollbar: true,
         autoCenter: true,
         barWidth: 2,
-      })
+      });
-      const wsWrapper = _wavesurfer.getWrapper()
+      const wsWrapper = _wavesurfer.getWrapper();
-      wsWrapper.style.cursor = 'pointer'
+      wsWrapper.style.cursor = "pointer";
-      wsWrapper.style.backgroundColor = 'lightgray'
+      wsWrapper.style.backgroundColor = "lightgray";
-      wsWrapper.style.borderRadius = '15px'
+      wsWrapper.style.borderRadius = "15px";
 
-      _wavesurfer.on('play', () => {
+      _wavesurfer.on("play", () => {
-        setIsPlaying(true)
+        setIsPlaying(true);
-      })
+      });
-      _wavesurfer.on('pause', () => {
+      _wavesurfer.on("pause", () => {
-        setIsPlaying(false)
+        setIsPlaying(false);
-      })
+      });
 
-      setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create()))
+      setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create()));
-      setWavesurfer(_wavesurfer)
+      setWavesurfer(_wavesurfer);
       return () => {
-        _wavesurfer.destroy()
+        _wavesurfer.destroy();
-        setIsRecording(false)
+        setIsRecording(false);
-        setIsPlaying(false)
+        setIsPlaying(false);
-      }
+      };
     }
-  }, [])
+  }, []);
 
   const handleRecClick = async () => {
-    if (!record) return console.log("no record")
+    if (!record) return console.log("no record");
 
-    if(record?.isRecording()) {
+    if (record?.isRecording()) {
-      record.stopRecording()
+      record.stopRecording();
-      setIsRecording(false)
+      setIsRecording(false);
-      document.getElementById('play-btn').disabled = false
+      document.getElementById("play-btn").disabled = false;
     } else {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId } })
+      const stream = await navigator.mediaDevices.getUserMedia({
-      await record.startRecording(stream)
+        audio: { deviceId },
-      props.setStream(stream)
+      });
-      setIsRecording(true)
+      await record.startRecording(stream);
+      props.setStream(stream);
+      setIsRecording(true);
     }
-  }
+  };
 
   const handlePlayClick = () => {
-    wavesurfer?.playPause()
+    wavesurfer?.playPause();
-  }
+  };
 
   const handleDropdownChange = (e) => {
-    setDeviceId(e.value)
+    setDeviceId(e.value);
-  }
+  };
-
 
   return (
     <div className="flex flex-col items-center justify-center max-w-[75vw] w-full">
       <div className="flex my-2 mx-auto">
-        <Dropdown options={ddOptions} onChange={handleDropdownChange} value={ddOptions[0]} />
+        <Dropdown
+          options={ddOptions}
+          onChange={handleDropdownChange}
+          value={ddOptions[0]}
+        />
         &nbsp;
-        <button onClick={handleRecClick} data-color={isRecording ? "red" : "blue"}>
+        <button
+          onClick={handleRecClick}
+          data-color={isRecording ? "red" : "blue"}
+        >
           {isRecording ? "Stop" : "Record"}
         </button>
         &nbsp;
-        <button id="play-btn" onClick={handlePlayClick} data-color={isPlaying ? "orange" : "green"}>
+        <button
+          id="play-btn"
+          onClick={handlePlayClick}
+          data-color={isPlaying ? "orange" : "green"}
+        >
           {isPlaying ? "Pause" : "Play"}
         </button>
       </div>
       <div ref={waveformRef} className="w-full"></div>
       {/* TODO: Download audio <a> tag */}
     </div>
-  )
+  );
 }

app/components/webrtc.js

@@ -37,7 +37,7 @@ const useWebRTC = (stream, setIsRecording) => {
 
     peer.on("connect", () => {
       console.log("WebRTC connected");
-      setData(prevData => ({ ...prevData, peer: peer }));
+      setData((prevData) => ({ ...prevData, peer: peer }));
     });
 
     peer.on("data", (data) => {

app/page.js

@@ -18,11 +18,10 @@ const App = () => {
         .then(setStream)
         .catch((err) => console.error(err));
     } else if (!recording && serverData.peer) {
-      serverData.peer.send(JSON.stringify({ cmd: 'STOP' }));
+      serverData.peer.send(JSON.stringify({ cmd: "STOP" }));
     }
   };
 
-
   const serverData = useWebRTC(stream, setIsRecording);
 
   return (