ADditional features

app/components/audioVisualizer.js

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 
-function AudioVisualizer() {
+function AudioVisualizer(props) {
     const canvasRef = useRef(null);
 
     useEffect(() => {
@@ -29,6 +29,8 @@ function AudioVisualizer() {
                     analyser.getByteFrequencyData(dataArray);
                     context.fillStyle = '#000';
                     context.fillRect(0, 0, canvas.width, canvas.height);
+
+
                     for (let i = 0; i < bufferLength; i++) {
                         barHeight = dataArray[i];
 
@@ -49,7 +51,10 @@ function AudioVisualizer() {
         return () => cancelAnimationFrame(animationFrameId);
     }, []);
 
-    return <canvas className='w-full h-16' ref={canvasRef} />;
+    return <>
+        <p>Is recording: {props.isRecording ? "true" : "false"}</p>
+        <canvas className='w-full h-16' ref={canvasRef} />
+            </>;
 }
 
 export default AudioVisualizer;

app/components/dashboard.js

@@ -2,7 +2,7 @@ import { Mulberry32 } from '../utils.js'
 import React, { useState, useEffect } from 'react';
 import AudioVisualizer from './audioVisualizer.js';
 
-export function Dashboard()
+export function Dashboard(props)
 {
     const [openIndex, setOpenIndex] = useState(null);
     const [liveTranscript, setLiveTranscript] = useState("");
@@ -107,7 +107,15 @@ export function Dashboard()
                     {liveTranscript}
                 </div>
             </div>
-                <AudioVisualizer />
+                <AudioVisualizer isRecording={props.isRecording} />
+
+                <button
+                    onClick={() => props.onRecord(!props.isRecording)}
+                    className={`px-4 py-2 mb-4 text-2xl font-bold rounded ${props.isRecording ? 'bg-red-500' : 'bg-blue-500'}`}
+                >
+                    {props.isRecording ? 'STOP' : 'RESUME'}
+                </button>
+
         </div>
     </>
 );