+
{transcriptionText}
@@ -66,7 +67,6 @@ export function Dashboard({
{finalSummary.summary}
)}
-
);
diff --git a/app/components/record.js b/app/components/record.js
index 3e5a17f5..de9897cb 100644
--- a/app/components/record.js
+++ b/app/components/record.js
@@ -2,105 +2,117 @@ import React, { useRef, useEffect, useState } from "react";
import WaveSurfer from "wavesurfer.js";
-import Dropdown from 'react-dropdown'
-import 'react-dropdown/style.css'
-
-import CustomRecordPlugin from './CustomRecordPlugin'
+import Dropdown from "react-dropdown";
+import "react-dropdown/style.css";
+import CustomRecordPlugin from "./CustomRecordPlugin";
export default function Recorder(props) {
- const waveformRef = useRef()
- const [wavesurfer, setWavesurfer] = useState(null)
- const [record, setRecord] = useState(null)
- const [isRecording, setIsRecording] = useState(false)
- const [isPlaying, setIsPlaying] = useState(false)
- const [deviceId, setDeviceId] = useState(null)
- const [ddOptions, setDdOptions] = useState([])
+ const waveformRef = useRef();
+ const [wavesurfer, setWavesurfer] = useState(null);
+ const [record, setRecord] = useState(null);
+ const [isRecording, setIsRecording] = useState(false);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [deviceId, setDeviceId] = useState(null);
+ const [ddOptions, setDdOptions] = useState([]);
useEffect(() => {
- document.getElementById('play-btn').disabled = true
+ document.getElementById("play-btn").disabled = true;
- navigator.mediaDevices.enumerateDevices().then(devices => {
+ navigator.mediaDevices.enumerateDevices().then((devices) => {
const audioDevices = devices
- .filter(d => d.kind === 'audioinput')
- .map(d => ({value: d.deviceId, label: d.label}))
-
- if (audioDevices.length < 1) return console.log("no audio input devices")
+ .filter((d) => d.kind === "audioinput")
+ .map((d) => ({ value: d.deviceId, label: d.label }));
- setDdOptions(audioDevices)
- setDeviceId(audioDevices[0].value)
- })
+ if (audioDevices.length < 1) return console.log("no audio input devices");
- if(waveformRef.current) {
+ setDdOptions(audioDevices);
+ setDeviceId(audioDevices[0].value);
+ });
+
+ if (waveformRef.current) {
const _wavesurfer = WaveSurfer.create({
container: waveformRef.current,
- waveColor: "#333",
- progressColor: "#0178FF",
+ waveColor: "#cc3347",
+ progressColor: "#0178FFπ",
cursorColor: "OrangeRed",
hideScrollbar: true,
autoCenter: true,
barWidth: 2,
- })
- const wsWrapper = _wavesurfer.getWrapper()
- wsWrapper.style.cursor = 'pointer'
- wsWrapper.style.backgroundColor = 'lightgray'
- wsWrapper.style.borderRadius = '15px'
+ });
+ const wsWrapper = _wavesurfer.getWrapper();
+ wsWrapper.style.cursor = "pointer";
+ wsWrapper.style.backgroundColor = "lightgray";
+ wsWrapper.style.borderRadius = "15px";
- _wavesurfer.on('play', () => {
- setIsPlaying(true)
- })
- _wavesurfer.on('pause', () => {
- setIsPlaying(false)
- })
+ _wavesurfer.on("play", () => {
+ setIsPlaying(true);
+ });
+ _wavesurfer.on("pause", () => {
+ setIsPlaying(false);
+ });
- setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create()))
- setWavesurfer(_wavesurfer)
+ setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create()));
+ setWavesurfer(_wavesurfer);
return () => {
- _wavesurfer.destroy()
- setIsRecording(false)
- setIsPlaying(false)
- }
+ _wavesurfer.destroy();
+ setIsRecording(false);
+ setIsPlaying(false);
+ };
}
- }, [])
+ }, []);
const handleRecClick = async () => {
- if (!record) return console.log("no record")
+ if (!record) return console.log("no record");
- if(record?.isRecording()) {
- record.stopRecording()
- setIsRecording(false)
- document.getElementById('play-btn').disabled = false
+ if (record?.isRecording()) {
+ record.stopRecording();
+ setIsRecording(false);
+ document.getElementById("play-btn").disabled = false;
} else {
- const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId } })
- await record.startRecording(stream)
- props.setStream(stream)
- setIsRecording(true)
+ const stream = await navigator.mediaDevices.getUserMedia({
+ audio: { deviceId },
+ });
+ await record.startRecording(stream);
+ props.setStream(stream);
+ setIsRecording(true);
}
- }
+ };
const handlePlayClick = () => {
- wavesurfer?.playPause()
- }
+ wavesurfer?.playPause();
+ };
const handleDropdownChange = (e) => {
- setDeviceId(e.value)
- }
+ setDeviceId(e.value);
+ };
return (
-
+
-
+
-
{/* TODO: Download audio
tag */}
- )
+ );
}
diff --git a/app/components/webrtc.js b/app/components/webrtc.js
index 927b8a95..4a310905 100644
--- a/app/components/webrtc.js
+++ b/app/components/webrtc.js
@@ -37,7 +37,7 @@ const useWebRTC = (stream, setIsRecording) => {
peer.on("connect", () => {
console.log("WebRTC connected");
- setData(prevData => ({ ...prevData, peer: peer }));
+ setData((prevData) => ({ ...prevData, peer: peer }));
});
peer.on("data", (data) => {
diff --git a/app/layout.js b/app/layout.js
index 0e91a9e4..858afbeb 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -16,7 +16,15 @@ export default function RootLayout({ children }) {
Test
- {children}
+
+
+ {children}
+
+
+
+