pre-commit now does yarn format and several other tasks

www/app/components/CustomRecordPlugin.js

@@ -18,81 +18,81 @@ class CustomRecordPlugin extends RecordPlugin {
     return new CustomRecordPlugin(options || {});
   }
   render(stream) {
-    if (!this.wavesurfer) return () => undefined
+    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 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)
+    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 BUFFER_SIZE = 2 ** 8;
+    const dataBuffer = new Array(BUFFER_SIZE).fill(canvas.height);
 
     const drawWaveform = (timeStamp) => {
-      if (!canvasCtx) return
+      if (!canvasCtx) return;
 
-      analyser.getByteTimeDomainData(dataArray)
-      canvasCtx.clearRect(0, 0, canvas.width, canvas.height)
-      canvasCtx.fillStyle = '#cc3347'
+      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)
+        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)
+        previousTimeStamp = timeStamp;
+        dataBuffer.push(Math.min(...dataArray));
+        dataBuffer.splice(0, 1);
       }
 
       // Drawing
-      const sliceWidth = canvas.width / dataBuffer.length
-      let x = 0
+      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
+        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
+        canvasCtx.fillRect(x, y, (sliceWidth * 2) / 3, sliceHeight);
+        x += sliceWidth;
       }
 
-      animationId = requestAnimationFrame(drawWaveform)
-    }
+      animationId = requestAnimationFrame(drawWaveform);
+    };
 
-    drawWaveform()
+    drawWaveform();
 
     return () => {
       if (animationId) {
-        cancelAnimationFrame(animationId)
+        cancelAnimationFrame(animationId);
       }
 
       if (source) {
-        source.disconnect()
-        source.mediaStream.getTracks().forEach((track) => track.stop())
+        source.disconnect();
+        source.mediaStream.getTracks().forEach((track) => track.stop());
       }
 
       if (audioContext) {
-        audioContext.close()
+        audioContext.close();
       }
 
-      canvas?.remove()
-    }
+      canvas?.remove();
+    };
   }
   startRecording(stream) {
     this.preventInteraction();

www/app/components/dashboard.js

@@ -1,7 +1,10 @@
 import { Mulberry32 } from "../utils.js";
 import React, { useState, useEffect } from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChevronRight,
+  faChevronDown,
+} from "@fortawesome/free-solid-svg-icons";
 
 export function Dashboard({
   isRecording,
@@ -47,7 +50,6 @@ export function Dashboard({
           </div>
         ))}
 
-
         {finalSummary && (
           <div className="mt-2 p-2 bg-white temp-transcription rounded">
             <h2>Final Summary</h2>

www/app/components/record.js

@@ -7,27 +7,28 @@ import "react-dropdown/style.css";
 
 import CustomRecordPlugin from "./CustomRecordPlugin";
 
-
 const AudioInputsDropdown = (props) => {
   const [ddOptions, setDdOptions] = useState([]);
 
   useEffect(() => {
     const init = async () => {
       // Request permission to use audio inputs
-      await navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => stream.getTracks().forEach((t) => t.stop()))
+      await navigator.mediaDevices
+        .getUserMedia({ audio: true })
+        .then((stream) => stream.getTracks().forEach((t) => t.stop()));
 
-      const devices = await navigator.mediaDevices.enumerateDevices()
+      const devices = await navigator.mediaDevices.enumerateDevices();
       const audioDevices = devices
         .filter((d) => d.kind === "audioinput" && d.deviceId != "")
-        .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)
-      props.setDeviceId(audioDevices[0].value)
-    }
-    init()
-  }, [])
+      setDdOptions(audioDevices);
+      props.setDeviceId(audioDevices[0].value);
+    };
+    init();
+  }, []);
 
   const handleDropdownChange = (e) => {
     props.setDeviceId(e.value);
@@ -40,8 +41,8 @@ const AudioInputsDropdown = (props) => {
       value={ddOptions[0]}
       disabled={props.disabled}
     />
-  )
-}
+  );
+};
 
 export default function Recorder(props) {
   const waveformRef = useRef();

www/app/components/webrtc.js

@@ -64,7 +64,7 @@ const useWebRTC = (stream) => {
               duration: serverData.duration,
               summary: serverData.summary,
             },
-            text: ''
+            text: "",
           }));
           break;
         default: