add recording duration calculator

src/components/Recorder.tsx

@@ -5,6 +5,7 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { MicrophoneIcon, PauseIcon } from "@heroicons/react/24/outline";
 import { TrashIcon } from "@radix-ui/react-icons";
 import { StopIcon } from "@heroicons/react/24/solid";
+import StopTime from "~/components/StopTime";
 
 export default function Recorder() {
   const [steam, setStream] = useState<null | MediaStream>(null);
@@ -184,7 +185,7 @@ export default function Recorder() {
             className="flex cursor-pointer flex-row items-center justify-center rounded pr-2 text-lg hover:bg-gray-200"
           >
             <StopIcon className="h-8 w-8 text-[#ff623f]" aria-hidden="true" />
-            <span className="ml-1 text-sm">0:15</span>
+            <StopTime running={!pause} />
           </div>
           <div className="mx-2 h-6 w-px bg-[#E7E9EB]"></div>
           <div

src/components/StopTime.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+
+export default function StopTime({ running }: { running?: boolean }) {
+  const [secs, setSecs] = useState<number>(0);
+
+  const calculateTimeDuration = (secs: number): string => {
+    const hr = Math.floor(secs / 3600).toString();
+    let min = Math.floor((secs - parseInt(hr) * 3600) / 60).toString();
+    let sec = Math.floor(
+      secs - parseInt(hr) * 3600 - parseInt(min) * 60
+    ).toString();
+
+    if (parseInt(min) < 10) {
+      min = "0" + min;
+    }
+
+    if (parseInt(sec) < 10) {
+      sec = "0" + sec;
+    }
+
+    if (parseInt(hr) <= 0) {
+      return min + ":" + sec;
+    }
+
+    return hr + ":" + min + ":" + sec;
+  };
+
+  useEffect(() => {
+    if (!running) return;
+    const interval = setInterval(() => setSecs((sec) => sec + 1), 1000);
+    return () => clearInterval(interval);
+  }, [running]);
+
+  return <span className="ml-1 text-sm">{calculateTimeDuration(secs)}</span>;
+}