From a103f8b347b82f6b1d44473401dd4be5eee36ae9 Mon Sep 17 00:00:00 2001
From: Alex Christoffer Rasmussen <ac@omnivox.dk>
Date: Wed, 31 Jul 2024 14:00:40 +0200
Subject: [PATCH] show time in block (#1158)

---
 apps/client/src/common/hooks/useSocket.ts      | 2 ++
 apps/client/src/features/overview/Overview.tsx | 9 +++++++++
 2 files changed, 11 insertions(+)

diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts
index d99ea84af..f36bf53e6 100644
--- a/apps/client/src/common/hooks/useSocket.ts
+++ b/apps/client/src/common/hooks/useSocket.ts
@@ -180,6 +180,8 @@ export const useRuntimePlaybackOverview = () => {
     numEvents: state.runtime.numEvents,
     selectedEventIndex: state.runtime.selectedEventIndex,
     offset: state.runtime.offset,
+
+    currentBlock: state.currentBlock,
   });
 
   return useRuntimeStore(featureSelector);
diff --git a/apps/client/src/features/overview/Overview.tsx b/apps/client/src/features/overview/Overview.tsx
index ccf457134..162e3e75a 100644
--- a/apps/client/src/features/overview/Overview.tsx
+++ b/apps/client/src/features/overview/Overview.tsx
@@ -33,6 +33,7 @@ function _EditorOverview({ children }: { children: React.ReactNode }) {
             <TimeRow label='Actual start' value={formatedTime(actualStart)} className={style.start} />
           </div>
           <ProgressOverview />
+          <CurrentBlockOverview />
           <RuntimeOverview />
           <div>
             <TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
@@ -94,6 +95,14 @@ function TitlesOverview() {
   );
 }
 
+function CurrentBlockOverview() {
+  const { currentBlock, clock } = useRuntimePlaybackOverview();
+
+  const timeInBlock = formatedTime(currentBlock.startedAt === null ? null : clock - currentBlock.startedAt);
+
+  return <TimeColumn label='Time in block' value={timeInBlock} className={style.clock} />;
+}
+
 function TimerOverview() {
   const { current } = useTimer();