From bb5be1dcca96be52bf10aa47f2a9020b688009ee Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Wed, 19 Apr 2023 00:35:57 +0200
Subject: [PATCH] add recording duration calculator

---
 src/components/Recorder.tsx |  3 ++-
 src/components/StopTime.tsx | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/components/StopTime.tsx

diff --git a/src/components/Recorder.tsx b/src/components/Recorder.tsx
index 5a28dc1..322a294 100644
--- a/src/components/Recorder.tsx
+++ b/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
diff --git a/src/components/StopTime.tsx b/src/components/StopTime.tsx
new file mode 100644
index 0000000..a44f51e
--- /dev/null
+++ b/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>;
+}