adding block now/next data (#1661)

* adding block now/next data

* add to ui

* add blockNext

* indicate in UI

* fix test

* restore block start at value

* one loop

* stricter null comparison

* test fails

* dev throw if id cant be found

* fix spelling

* revert client stuff

* rename

* add comment

apps/client/src/common/hooks/useSocket.ts

@@ -17,6 +17,7 @@ export const setClientRemote = {
 export const useRundownEditor = createSelector((state: RuntimeStore) => ({
   playback: state.timer.playback,
   selectedEventId: state.eventNow?.id ?? null,
+  selectedBlockId: state.blockNow?.id ?? null,
   nextEventId: state.eventNext?.id ?? null,
 }));
 
@@ -131,7 +132,7 @@ export const useSelectedEventId = createSelector((state: RuntimeStore) => ({
 }));
 
 export const useCurrentBlockId = createSelector((state: RuntimeStore) => ({
-  currentBlockId: state.currentBlock.block?.id ?? null,
+  currentBlockId: state.blockNow?.id ?? null,
 }));
 
 export const setEventPlayback = {
@@ -172,7 +173,7 @@ export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) =
   selectedEventIndex: state.runtime.selectedEventIndex,
   offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
 
-  currentBlock: state.currentBlock,
+  blockStartedAt: state.blockNow?.startedAt ?? null,
 }));
 
 export const useTimelineStatus = createSelector((state: RuntimeStore) => ({

apps/client/src/features/overview/Overview.tsx

@@ -131,18 +131,11 @@ function TitlesOverview() {
 }
 
 function CurrentBlockOverview() {
-  const { currentBlock, clock } = useRuntimePlaybackOverview();
+  const { blockStartedAt: blockStartAt, clock } = useRuntimePlaybackOverview();
 
-  const timeInBlock = formatedTime(currentBlock.startedAt === null ? null : clock - currentBlock.startedAt);
+  const timeInBlock = formatedTime(blockStartAt ? clock - blockStartAt : null);
 
-  return (
-    <TimeColumn
-      label='Time in block'
-      value={timeInBlock}
-      className={style.clock}
-      muted={currentBlock.startedAt === null}
-    />
-  );
+  return <TimeColumn label='Time in block' value={timeInBlock} className={style.clock} muted={blockStartAt === null} />;
 }
 
 function TimerOverview() {