refactor: cleanup store (#727)

* refactor: isolate clock

* refactor: isolate private

* refactor: remove duplicate

* chore: rename loaded > runtime

* fix: handle no events loaded

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 // skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
 
-import { runtime } from '@/common/stores/runtime';
+import { runtimeStore } from '@/common/stores/runtime';
 import { hasConnected, reconnectAttempts, shouldReconnect } from '@/common/utils/socket';
 
 import style from './ErrorBoundary.module.scss';
@@ -29,7 +29,7 @@ class ErrorBoundary extends React.Component {
 
     Sentry.withScope((scope) => {
       scope.setExtras('error', error);
-      scope.setExtras('store', runtime.getState());
+      scope.setExtras('store', runtimeStore.getState());
       scope.setExtras('hasSocket', { hasConnected, shouldReconnect, reconnectAttempts });
       const eventId = Sentry.captureException(error);
       this.setState({ eventId, info });

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -1,14 +1,16 @@
+import { MaybeNumber } from 'ontime-types';
+
 import { clamp } from '../../utils/math';
 
 import './MultiPartProgressBar.scss';
 
 interface MultiPartProgressBar {
-  now: number | null;
+  now: MaybeNumber;
   complete: number;
   normalColor: string;
-  warning?: number | null;
+  warning?: MaybeNumber;
   warningColor: string;
-  danger?: number | null;
+  danger?: MaybeNumber;
   dangerColor: string;
   hidden?: boolean;
   className?: string;

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

@@ -5,9 +5,9 @@ import { socketSendJson } from '../utils/socket';
 
 export const useRundownEditor = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
-    selectedEventId: state.loaded.selectedEventId,
-    nextEventId: state.loaded.nextEventId,
+    playback: state.timer.playback,
+    selectedEventId: state.eventNow?.id ?? null,
+    nextEventId: state.eventNext?.id ?? null,
   });
 
   return useRuntimeStore(featureSelector);
@@ -15,8 +15,8 @@ export const useRundownEditor = () => {
 
 export const useOperator = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
-    selectedEventId: state.loaded.selectedEventId,
+    playback: state.timer.playback,
+    selectedEventId: state.eventNow?.id ?? null,
   });
 
   return useRuntimeStore(featureSelector);
@@ -50,9 +50,9 @@ export const setMessage = {
 
 export const usePlaybackControl = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
-    selectedEventIndex: state.loaded.selectedEventIndex,
-    numEvents: state.loaded.numEvents,
+    playback: state.timer.playback,
+    selectedEventIndex: state.runtime.selectedEventIndex,
+    numEvents: state.runtime.numEvents,
   });
 
   return useRuntimeStore(featureSelector);
@@ -80,12 +80,24 @@ export const setPlayback = {
   },
 };
 
+export const useInfoPanel = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    eventNow: state.eventNow,
+    eventNext: state.eventNext,
+    playback: state.timer.playback,
+    selectedEventIndex: state.runtime.selectedEventIndex,
+    numEvents: state.runtime.numEvents,
+  });
+
+  return useRuntimeStore(featureSelector);
+};
+
 export const useCuesheet = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
-    selectedEventId: state.loaded.selectedEventId,
-    selectedEventIndex: state.loaded.selectedEventIndex,
-    numEvents: state.loaded.numEvents,
+    playback: state.timer.playback,
+    selectedEventId: state.eventNow?.id ?? null,
+    selectedEventIndex: state.runtime.selectedEventIndex,
+    numEvents: state.runtime.numEvents,
     titleNow: state.eventNow?.title || '',
   });
 
@@ -107,14 +119,33 @@ export const useTimer = () => {
   return useRuntimeStore(featureSelector);
 };
 
+export const useClock = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    clock: state.clock,
+  });
+  return useRuntimeStore(featureSelector);
+};
+
+/** Used by the progress bar components */
+export const useProgressData = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    addedTime: state.timer.addedTime,
+    current: state.timer.current,
+    duration: state.timer.duration,
+    timeWarning: state.eventNow?.timeWarning ?? null,
+    timeDanger: state.eventNow?.timeDanger ?? null,
+  });
+  return useRuntimeStore(featureSelector);
+};
+
 export const setClientName = (newName: string) => socketSendJson('set-client-name', newName);
 
 export const useRuntimeOverview = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
-    clock: state.timer.clock,
-    numEvents: state.loaded.numEvents,
-    selectedEventIndex: state.loaded.selectedEventIndex,
+    playback: state.timer.playback,
+    clock: state.clock,
+    selectedEventIndex: state.runtime.selectedEventIndex,
+    numEvents: state.runtime.numEvents,
   });
 
   return useRuntimeStore(featureSelector);

apps/client/src/common/models/TimeManager.type.ts

@@ -1,21 +1,19 @@
-import { Playback, TimerType } from 'ontime-types';
+import { MaybeNumber, Playback, TimerType } from 'ontime-types';
 
-export type TimeManagerType = {
-  clock: number;
-  current: null | number;
-  elapsed: null | number;
-  duration: null | number;
-  timerBehaviour?: string;
-  timerType: TimerType;
-  expectedFinish: null | number;
+// first set extends TimerState
+export type ViewExtendedTimer = {
   addedTime: number;
-  startedAt: null | number;
-  finishedAt: null | number;
-  secondaryTimer: null | number;
-
-  finished: boolean;
+  current: MaybeNumber;
+  duration: MaybeNumber;
+  elapsed: MaybeNumber;
+  expectedFinish: MaybeNumber;
+  finishedAt: MaybeNumber;
   playback: Playback;
+  secondaryTimer: MaybeNumber;
+  startedAt: MaybeNumber;
 
-  timeWarning: number | null;
-  timeDanger: number | null;
+  clock: number;
+  timeDanger: MaybeNumber;
+  timeWarning: MaybeNumber;
+  timerType: TimerType;
 };

apps/client/src/common/stores/runtime.ts

@@ -3,22 +3,19 @@ import { Playback, RuntimeStore } from 'ontime-types';
 import { createWithEqualityFn, useStoreWithEqualityFn } from 'zustand/traditional';
 
 export const runtimeStorePlaceholder: RuntimeStore = {
+  clock: 0,
   timer: {
-    clock: 0,
+    addedTime: 0,
     current: null,
+    duration: null,
     elapsed: null,
     expectedFinish: null,
-    addedTime: 0,
-    startedAt: null,
     finishedAt: null,
+    playback: Playback.Stop,
     secondaryTimer: null,
-    duration: null,
-    timerType: null,
-    endAction: null,
-    timeWarning: null,
-    timeDanger: null,
+    startedAt: null,
   },
-  playback: Playback.Stop,
+  onAir: false,
   message: {
     timer: {
       text: '',
@@ -39,14 +36,9 @@ export const runtimeStorePlaceholder: RuntimeStore = {
       visible: false,
     },
   },
-  onAir: false,
-  loaded: {
+  runtime: {
     numEvents: 0,
     selectedEventIndex: null,
-    selectedEventId: null,
-    selectedPublicEventId: null,
-    nextEventId: null,
-    nextPublicEventId: null,
   },
   eventNow: null,
   eventNext: null,
@@ -56,7 +48,7 @@ export const runtimeStorePlaceholder: RuntimeStore = {
 
 const deepCompare = <T>(a: T, b: T) => isEqual(a, b);
 
-export const runtime = createWithEqualityFn<RuntimeStore>(
+export const runtimeStore = createWithEqualityFn<RuntimeStore>(
   () => ({
     ...runtimeStorePlaceholder,
   }),
@@ -64,4 +56,4 @@ export const runtime = createWithEqualityFn<RuntimeStore>(
 );
 
 export const useRuntimeStore = <T>(selector: (state: RuntimeStore) => T) =>
-  useStoreWithEqualityFn(runtime, selector, deepCompare);
+  useStoreWithEqualityFn(runtimeStore, selector, deepCompare);

apps/client/src/common/utils/socket.ts

@@ -4,7 +4,7 @@ import { isProduction, RUNTIME, websocketUrl } from '../api/apiConstants';
 import { ontimeQueryClient } from '../queryClient';
 import { socketClientName } from '../stores/connectionName';
 import { addLog } from '../stores/logger';
-import { runtime } from '../stores/runtime';
+import { runtimeStore } from '../stores/runtime';
 
 export let websocket: WebSocket | null = null;
 let reconnectTimeout: NodeJS.Timeout | null = null;
@@ -63,40 +63,40 @@ export const connectSocket = (preferredClientName?: string) => {
           break;
         }
         case 'ontime': {
-          runtime.setState(payload as RuntimeStore);
+          runtimeStore.setState(payload as RuntimeStore);
           if (!isProduction) {
             ontimeQueryClient.setQueryData(RUNTIME, data.payload);
           }
           break;
         }
         case 'ontime-playback': {
-          const state = runtime.getState();
-          state.playback = payload;
-          runtime.setState(state);
+          const state = runtimeStore.getState();
+          state.timer.playback = payload;
+          runtimeStore.setState(state);
           break;
         }
         case 'ontime-timer': {
-          const state = runtime.getState();
+          const state = runtimeStore.getState();
           state.timer = payload;
-          runtime.setState(state);
+          runtimeStore.setState(state);
           break;
         }
-        case 'ontime-loaded': {
-          const state = runtime.getState();
-          state.loaded = payload;
-          runtime.setState(state);
+        case 'ontime-runtime': {
+          const state = runtimeStore.getState();
+          state.runtime = payload;
+          runtimeStore.setState(state);
           break;
         }
         case 'ontime-message': {
-          const state = runtime.getState();
+          const state = runtimeStore.getState();
           state.message = payload;
-          runtime.setState(state);
+          runtimeStore.setState(state);
           break;
         }
         case 'ontime-onAir': {
-          const state = runtime.getState();
+          const state = runtimeStore.getState();
           state.onAir = payload;
-          runtime.setState(state);
+          runtimeStore.setState(state);
           break;
         }
       }