reduce waveform height + fix weird math

www/app/components/CustomRecordPlugin.js

@@ -37,8 +37,9 @@ class CustomRecordPlugin extends RecordPlugin {
     const dataArray = new Uint8Array(bufferLength);
 
     let animationId, previousTimeStamp;
+    const DATA_SIZE = 128.0;
     const BUFFER_SIZE = 2 ** 8;
-    const dataBuffer = new Array(BUFFER_SIZE).fill(canvas.height);
+    const dataBuffer = new Array(BUFFER_SIZE).fill(DATA_SIZE);
 
     const drawWaveform = (timeStamp) => {
       if (!canvasCtx) return;
@@ -64,9 +65,9 @@ class CustomRecordPlugin extends RecordPlugin {
       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 y = (canvas.height * dataBuffer[i]) / (2 * DATA_SIZE);
+        const sliceHeight =
+          ((1 - canvas.height) * dataBuffer[i]) / DATA_SIZE + canvas.height;
 
         canvasCtx.fillRect(x, y, (sliceWidth * 2) / 3, sliceHeight);
         x += sliceWidth;

www/app/components/dashboard.js

@@ -48,7 +48,7 @@ export function Dashboard({
 
   return (
     <>
-      <div className="relative h-[60svh] w-3/4 flex flex-col">
+      <div className="relative h-[64svh] w-3/4 flex flex-col">
         <div className="text-center pb-1 pt-4">
           <h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1>
         </div>

www/app/components/record.js

@@ -71,6 +71,7 @@ export default function Recorder(props) {
         hideScrollbar: true,
         autoCenter: true,
         barWidth: 2,
+        height: 90,
       });
       const wsWrapper = _wavesurfer.getWrapper();
       wsWrapper.style.cursor = "pointer";