update colors + tweak code

www/app/components/CustomRecordPlugin.js

@@ -45,7 +45,7 @@ class CustomRecordPlugin extends RecordPlugin {
 
       analyser.getByteTimeDomainData(dataArray)
       canvasCtx.clearRect(0, 0, canvas.width, canvas.height)
-      canvasCtx.fillStyle = 'black'
+      canvasCtx.fillStyle = '#cc3347'
 
       if (previousTimeStamp === undefined) {
         previousTimeStamp = timeStamp

www/app/components/record.js

@@ -7,19 +7,14 @@ import "react-dropdown/style.css";
 
 import CustomRecordPlugin from "./CustomRecordPlugin";
 
-const queryAndPromptAudio = async () => {
-  const permissionStatus = await navigator.permissions.query({ name: 'microphone' })
-  if (permissionStatus.state == 'prompt') {
-    await navigator.mediaDevices.getUserMedia({ audio: true })
-  }
-}
 
 const AudioInputsDropdown = (props) => {
   const [ddOptions, setDdOptions] = useState([]);
 
   useEffect(() => {
     const init = async () => {
-      await queryAndPromptAudio()
+      // Request permission to use audio inputs
+      await navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => stream.getTracks().forEach((t) => t.stop()))
 
       const devices = await navigator.mediaDevices.enumerateDevices()
       const audioDevices = devices
@@ -62,8 +57,8 @@ export default function Recorder(props) {
     if (waveformRef.current) {
       const _wavesurfer = WaveSurfer.create({
         container: waveformRef.current,
-        waveColor: "#cc3347",
+        waveColor: "#777",
-        progressColor: "#0178FFπ",
+        progressColor: "#222",
         cursorColor: "OrangeRed",
         hideScrollbar: true,
         autoCenter: true,
@@ -95,8 +90,7 @@ export default function Recorder(props) {
     if (!record) return console.log("no record");
 
     if (record?.isRecording()) {
-
+      props.onStop();
-      props.serverData.peer.send(JSON.stringify({ cmd: "STOP" }));
       record.stopRecording();
       setIsRecording(false);
       document.getElementById("play-btn").disabled = false;

www/app/components/webrtc.js

@@ -30,7 +30,7 @@ const useWebRTC = (stream, setIsRecording) => {
           .then((response) => response.json())
           .then((answer) => peer.signal(answer))
           .catch((e) => {
-            alert(e);
+            console.log("Error signaling:", e);
           });
       }
     });

www/app/page.js

@@ -12,6 +12,8 @@ const App = () => {
   // transcription, summary, etc
   const serverData = useWebRTC(stream, () => { });
 
+  const sendStopCmd = () => serverData?.peer?.send(JSON.stringify({ cmd: "STOP" }))
+
   return (
     <div className="flex flex-col items-center h-[100svh]">
       <div className="text-center py-6 mt-10">
@@ -19,7 +21,7 @@ const App = () => {
         <p className="text-gray-500">Capture The Signal, Not The Noise</p>
       </div>
 
-      <Recorder setStream={setStream} serverData={serverData} />
+      <Recorder setStream={setStream} onStop={sendStopCmd} />
       <Dashboard
         transcriptionText={serverData.text ?? "(No transcription yet)"}
         finalSummary={serverData.finalSummary}