timer

src/renderer/recorder/recorder-insession.tsx

@@ -26,6 +26,7 @@ export const RecorderInsession = forwardRef<HTMLDivElement>((_, ref) => {
     addHighlight,
     setMeta,
     reset,
+    meta,
   } = useRecorderState();
   const promptTimestampedNote = usePromptText(
     "Add note at current time",
@@ -62,9 +63,11 @@ export const RecorderInsession = forwardRef<HTMLDivElement>((_, ref) => {
         </EntityTitle>
       )}
       <Flex justify="center" gap=".5rem" align="center">
-        <Badge style={{ width: "4.5rem" }}>
+        <Badge style={{ minWidth: "3.5rem" }}>
           <HiOutlineClock />
-          <Timer isRunning={!isPaused} />
+          <Timer
+            start={(Date.now() - new Date(meta.started).getTime()) / 1000}
+          />
         </Badge>
         {isPaused ? (
           <RecordingActionButton tooltip="Resume recording" onClick={resume}>

src/renderer/recorder/timer.tsx

@@ -1,18 +1,17 @@
 import { FC, useEffect, useState } from "react";
 import { timeToDisplayString } from "../../utils";
 
-export const Timer: FC<{ isRunning: boolean }> = ({ isRunning }) => {
-  const [time, setTime] = useState(0);
+export const Timer: FC<{ start: number }> = ({ start }) => {
+  const [time, setTime] = useState(start);
 
   useEffect(() => {
-    if (!isRunning) return () => {};
     const interval = setInterval(() => {
       setTime((prev) => prev + 1);
     }, 1000);
     return () => {
       clearInterval(interval);
     };
-  }, [isRunning]);
+  }, []);
 
-  return <>{timeToDisplayString(time)}</>;
+  return <>{timeToDisplayString(time, false)}</>;
 };

src/utils.ts

@@ -14,16 +14,17 @@ export const blobToBuffer = async (blob: Blob) => {
   });
 };
 
-export const timeToDisplayString = (time: number) => {
+export const timeToDisplayString = (time: number, withMs = true) => {
   const hours = Math.floor(time / 3600);
   const minutes = Math.floor((time % 3600) / 60);
   const seconds = Math.floor(time % 60);
   const ms = Math.floor((time % 1) * 10);
 
   const hoursString = hours > 0 ? `${hours}:` : "";
+  const msString = withMs ? `.${String(ms).padStart(1, "0")}` : "";
   return `${hoursString}${String(minutes).padStart(2, "0")}:${String(
     seconds,
-  ).padStart(2, "0")}.${String(ms).padStart(1, "0")}`;
+  ).padStart(2, "0")}${msString}`;
 };
 
 export const isNotNull = <T>(x: T | null): x is T => x !== null;