clock element

www/app/components/record.js

@@ -9,6 +9,7 @@ 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([]);
@@ -54,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;
@@ -79,6 +83,7 @@ export default function Recorder(props) {
       _wavesurfer.on("pause", () => {
         setIsPlaying(false);
       });
+      _wavesurfer.on("timeupdate", setCurrentTime);
 
       setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create()));
       setWavesurfer(_wavesurfer);
@@ -101,6 +106,22 @@ export default function Recorder(props) {
     }
   }, [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");
 
@@ -127,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;
@@ -158,7 +186,12 @@ export default function Recorder(props) {
         </a>
       </div>
       <div ref={waveformRef} className="w-full shadow-xl rounded-2xl"></div>
-      {/* TODO: current time / audio duration */}
+      <div className="absolute bottom-0 right-1 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/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;
+};