From 9c9428c456f99addd467ecd11b4de6e3103ba3f8 Mon Sep 17 00:00:00 2001
From: Jose B <jose.zdy@gmail.com>
Date: Mon, 14 Aug 2023 03:02:56 -0500
Subject: [PATCH] reduce waveform height + fix weird math

---
 www/app/components/CustomRecordPlugin.js | 9 +++++----
 www/app/components/dashboard.js          | 2 +-
 www/app/components/record.js             | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/www/app/components/CustomRecordPlugin.js b/www/app/components/CustomRecordPlugin.js
index 7e29ea7c..ab99170f 100644
--- a/www/app/components/CustomRecordPlugin.js
+++ b/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;
diff --git a/www/app/components/dashboard.js b/www/app/components/dashboard.js
index 94bae58c..6f4f4b68 100644
--- a/www/app/components/dashboard.js
+++ b/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>
diff --git a/www/app/components/record.js b/www/app/components/record.js
index 445f7e50..13f45257 100644
--- a/www/app/components/record.js
+++ b/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";