Merge pull request #127 from Monadical-SAS/jose/dev

Minor UI

www/app/components/dashboard.js

@@ -1,18 +1,16 @@
-import { Mulberry32 } from "../utils.js";
 import React, { useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faChevronRight,
   faChevronDown,
+  faLinkSlash,
 } from "@fortawesome/free-solid-svg-icons";
 
 export function Dashboard({
-  isRecording,
-  onRecord,
   transcriptionText,
   finalSummary,
   topics,
-  stream,
+  disconnected,
 }) {
   const [openIndex, setOpenIndex] = useState(null);
   const [autoscrollEnabled, setAutoscrollEnabled] = useState(true);
@@ -109,6 +107,15 @@ export function Dashboard({
         )}
       </div>
 
+      {disconnected && (
+        <div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 flex justify-center items-center">
+          <div className="text-white text-2xl">
+            <FontAwesomeIcon icon={faLinkSlash} className="mr-2" />
+            Disconnected
+          </div>
+        </div>
+      )}
+
       <footer className="h-[7svh] w-full bg-gray-800 text-white text-center py-4 text-2xl">
         &nbsp;{transcriptionText}&nbsp;
       </footer>

www/app/components/record.js

@@ -2,10 +2,14 @@ import React, { useRef, useEffect, useState } from "react";
 
 import WaveSurfer from "wavesurfer.js";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
+
 import Dropdown from "react-dropdown";
 import "react-dropdown/style.css";
 
 import CustomRecordPlugin from "./CustomRecordPlugin";
+import { formatTime } from "../utils";
 
 const AudioInputsDropdown = (props) => {
   const [ddOptions, setDdOptions] = useState([]);
@@ -51,6 +55,9 @@ export default function Recorder(props) {
   const [isRecording, setIsRecording] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [deviceId, setDeviceId] = useState(null);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [timeInterval, setTimeInterval] = useState(null);
+  const [duration, setDuration] = useState(0);
 
   useEffect(() => {
     document.getElementById("play-btn").disabled = true;
@@ -76,6 +83,7 @@ export default function Recorder(props) {
       _wavesurfer.on("pause", () => {
         setIsPlaying(false);
       });
+      _wavesurfer.on("timeupdate", setCurrentTime);
 
       setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create()));
       setWavesurfer(_wavesurfer);
@@ -87,6 +95,33 @@ export default function Recorder(props) {
     }
   }, []);
 
+  useEffect(() => {
+    if (record) {
+      return record.on("stopRecording", () => {
+        const link = document.getElementById("download-recording");
+        link.href = record.getRecordedUrl();
+        link.download = "reflector-recording.webm";
+        link.style.visibility = "visible";
+      });
+    }
+  }, [record]);
+
+  useEffect(() => {
+    if (isRecording) {
+      const interval = setInterval(() => {
+        setCurrentTime((prev) => prev + 1);
+      }, 1000);
+      setTimeInterval(interval);
+      return () => clearInterval(interval);
+    } else {
+      clearInterval(timeInterval);
+      setCurrentTime((prev) => {
+        setDuration(prev);
+        return 0;
+      });
+    }
+  }, [isRecording]);
+
   const handleRecClick = async () => {
     if (!record) return console.log("no record");
 
@@ -113,8 +148,15 @@ export default function Recorder(props) {
     wavesurfer?.playPause();
   };
 
+  const timeLabel = () => {
+    if (isRecording) return formatTime(currentTime);
+    else if (duration)
+      return `${formatTime(currentTime)}/${formatTime(duration)}`;
+    else "";
+  };
+
   return (
-    <div className="flex flex-col items-center justify-center max-w-[75vw] w-full">
+    <div className="relative flex flex-col items-center justify-center max-w-[75vw] w-full">
       <div className="flex my-2 mx-auto">
         <AudioInputsDropdown setDeviceId={setDeviceId} disabled={isRecording} />
         &nbsp;
@@ -135,10 +177,21 @@ export default function Recorder(props) {
         >
           {isPlaying ? "Pause" : "Play"}
         </button>
+        <a
+          id="download-recording"
+          title="Download recording"
+          className="invisible w-9 m-auto text-center cursor-pointer text-blue-300 hover:text-blue-700"
+        >
+          <FontAwesomeIcon icon={faDownload} />
+        </a>
       </div>
       <div ref={waveformRef} className="w-full shadow-xl rounded-2xl"></div>
-      {/* TODO: Download audio <a> tag */}
-      {/* TODO: current time / audio duration */}
+      <div className="absolute bottom-0 right-2 text-xs text-black">
+        {isRecording && (
+          <div className="inline-block bg-red-500 rounded-full w-2 h-2 my-auto mr-1 animate-ping"></div>
+        )}
+        {timeLabel()}
+      </div>
     </div>
   );
 }

www/app/page.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Recorder from "./components/record.js";
 import { Dashboard } from "./components/dashboard.js";
 import useWebRTC from "./components/webrtc.js";
@@ -9,6 +9,17 @@ import "../public/button.css";
 
 const App = () => {
   const [stream, setStream] = useState(null);
+  const [disconnected, setDisconnected] = useState(false);
+
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_ENV === "development") {
+      document.onkeyup = (e) => {
+        if (e.key === "d") {
+          setDisconnected((prev) => !prev);
+        }
+      };
+    }
+  }, []);
 
   const transcript = useTranscript();
   const webRTC = useWebRTC(stream, transcript.response?.id);
@@ -33,6 +44,7 @@ const App = () => {
         finalSummary={webSockets.finalSummary}
         topics={webSockets.topics}
         stream={stream}
+        disconnected={disconnected}
       />
     </div>
   );

www/app/utils.js

@@ -17,3 +17,15 @@ export function Mulberry32(seed) {
     return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
   };
 }
+
+export const formatTime = (seconds) => {
+  let hours = Math.floor(seconds / 3600);
+  let minutes = Math.floor((seconds % 3600) / 60);
+  let secs = Math.floor(seconds % 60);
+
+  let timeString = `${hours > 0 ? hours + ":" : ""}${minutes
+    .toString()
+    .padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+
+  return timeString;
+};