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/features/cuesheet/cuesheet-progress/CuesheetProgress.tsx

@@ -1,22 +1,22 @@
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
-import { useTimer } from '../../../common/hooks/useSocket';
+import { useProgressData } from '../../../common/hooks/useSocket';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
 
 import styles from './CuesheetProgress.module.scss';
 
 export default function CuesheetProgress() {
   const { data } = useViewSettings();
-  const timer = useTimer();
-  const totalTime = (timer.duration ?? 0) + (timer.addedTime ?? 0);
+  const { addedTime, current, duration, timeWarning, timeDanger } = useProgressData();
+  const totalTime = (duration ?? 0) + (addedTime ?? 0);
 
   return (
     <MultiPartProgressBar
-      now={timer.current}
+      now={current}
       complete={totalTime}
       normalColor={data!.normalColor}
-      warning={timer.timeWarning}
+      warning={timeWarning}
       warningColor={data!.warningColor}
-      danger={timer.timeDanger}
+      danger={timeDanger}
       dangerColor={data!.dangerColor}
       className={styles.progressOverride}
     />

apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeaderTimers.tsx

@@ -1,21 +1,22 @@
-import { useTimer } from '../../../common/hooks/useSocket';
+import { useClock, useTimer } from '../../../common/hooks/useSocket';
 import ClockTime from '../../viewers/common/clock-time/ClockTime';
 import RunningTime from '../../viewers/common/running-time/RunningTime';
 
 import style from './CuesheetTableHeader.module.scss';
 
 export default function CuesheetTableHeaderTimers() {
-  const timer = useTimer();
+  const { current } = useTimer();
+  const { clock } = useClock();
 
   return (
     <>
       <div className={style.timer}>
         <div className={style.timerLabel}>Running Timer</div>
-        <RunningTime className={style.value} value={timer.current} hideLeadingZero />
+        <RunningTime className={style.value} value={current} hideLeadingZero />
       </div>
       <div className={style.clock}>
         <div className={style.clockLabel}>Time Now</div>
-        <ClockTime className={style.value} value={timer.clock} />
+        <ClockTime className={style.value} value={clock} />
       </div>
     </>
   );

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -30,8 +30,8 @@ interface OperatorEventProps {
 
 // extract this to contain re-renders
 function RollingTime() {
-  const timer = useTimer();
-  return <RunningTime value={timer.current} />;
+  const { current } = useTimer();
+  return <RunningTime value={current} />;
 }
 
 function OperatorEvent(props: OperatorEventProps) {

apps/client/src/features/operator/status-bar/StatusBarProgress.tsx

@@ -1,7 +1,7 @@
 import { ViewSettings } from 'ontime-types';
 
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
-import { useTimer } from '../../../common/hooks/useSocket';
+import { useProgressData } from '../../../common/hooks/useSocket';
 
 import styles from './StatusBar.module.scss';
 
@@ -11,18 +11,17 @@ interface StatusBarProgressProps {
 
 export default function StatusBarProgress(props: StatusBarProgressProps) {
   const { viewSettings } = props;
-
-  const timer = useTimer();
-  const totalTime = (timer.duration ?? 0) + (timer.addedTime ?? 0);
+  const { addedTime, current, duration, timeWarning, timeDanger } = useProgressData();
+  const totalTime = (duration ?? 0) + (addedTime ?? 0);
 
   return (
     <MultiPartProgressBar
-      now={timer.current}
+      now={current}
       complete={totalTime}
       normalColor={viewSettings.normalColor}
-      warning={timer?.timeWarning}
+      warning={timeWarning}
       warningColor={viewSettings.warningColor}
-      danger={timer?.timeDanger}
+      danger={timeDanger}
       dangerColor={viewSettings.dangerColor}
       className={styles.progressOverride}
     />

apps/client/src/features/operator/status-bar/StatusBarTimers.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { MaybeNumber, Playback } from 'ontime-types';
 
 import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
-import { useTimer } from '../../../common/hooks/useSocket';
+import { useClock, useTimer } from '../../../common/hooks/useSocket';
 import { cx } from '../../../common/utils/styleUtils';
 import ClockTime from '../../viewers/common/clock-time/ClockTime';
 import RunningTime from '../../viewers/common/running-time/RunningTime';
@@ -23,6 +23,7 @@ export default function StatusBarTimers(props: StatusBarTimersProps) {
   const { projectTitle, playback, selectedEventId, firstStart, firstId, lastEnd, lastId } = props;
 
   const timer = useTimer();
+  const { clock } = useClock();
 
   const getTimeStart = (): MaybeNumber => {
     if (firstStart === undefined) {
@@ -61,7 +62,7 @@ export default function StatusBarTimers(props: StatusBarTimersProps) {
       {PlaybackIconComponent}
       <div className={styles.timeNow}>
         <span className={styles.label}>Time now</span>
-        <ClockTime className={styles.timer} value={timer.clock} />
+        <ClockTime className={styles.timer} value={clock} />
       </div>
       <div className={styles.elapsedTime}>
         <span className={styles.label}>Elapsed time</span>

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -1,5 +1,5 @@
 import { ComponentType, useMemo } from 'react';
-import { TimeManagerType } from 'common/models/TimeManager.type';
+import { ViewExtendedTimer } from 'common/models/TimeManager.type';
 import { Message, OntimeEvent, ProjectData, Settings, SupportedEvent, TimerMessage, ViewSettings } from 'ontime-types';
 import { useStore } from 'zustand';
 
@@ -7,7 +7,7 @@ import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
-import { runtime } from '../../common/stores/runtime';
+import { runtimeStore } from '../../common/stores/runtime';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 
 type WithDataProps = {
@@ -20,7 +20,7 @@ type WithDataProps = {
   publicEventNow: OntimeEvent | null;
   eventNext: OntimeEvent | null;
   publicEventNext: OntimeEvent | null;
-  time: TimeManagerType;
+  time: ViewExtendedTimer;
   events: OntimeEvent[];
   backstageEvents: OntimeEvent[];
   selectedId: string | null;
@@ -55,11 +55,11 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
     }, [rundownData]);
 
     // websocket data
-    const { timer, message, playback, onAir, eventNext, publicEventNext, publicEventNow, eventNow, loaded } =
-      useStore(runtime);
-    const publicSelectedId = loaded.selectedPublicEventId;
-    const selectedId = loaded.selectedEventId;
-    const nextId = loaded.nextEventId;
+    const { clock, timer, message, onAir, eventNext, publicEventNext, publicEventNow, eventNow } =
+      useStore(runtimeStore);
+    const publicSelectedId = publicEventNow?.id ?? null;
+    const selectedId = eventNow?.id ?? null;
+    const nextId = eventNext?.id ?? null;
 
     /******************************************/
     /***  + TimeManagerType                     ***/
@@ -69,7 +69,10 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
 
     const TimeManagerType = {
       ...timer,
-      playback,
+      clock,
+      timerType: eventNow?.timerType ?? null,
+      timeWarning: eventNow?.timeWarning ?? null,
+      timeDanger: eventNow?.timeWarning ?? null,
     };
 
     // prevent render until we get all the data we need

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -14,7 +14,7 @@ import TitleCard from '../../../common/components/title-card/TitleCard';
 import { getBackstageOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import { titleVariants } from '../common/animation';
@@ -27,7 +27,7 @@ interface BackstageProps {
   publ: Message;
   eventNow: OntimeEvent | null;
   eventNext: OntimeEvent | null;
-  time: TimeManagerType;
+  time: ViewExtendedTimer;
   backstageEvents: OntimeEvent[];
   selectedId: string | null;
   general: ProjectData;

apps/client/src/features/viewers/clock/Clock.tsx

@@ -7,7 +7,7 @@ import NavigationMenu from '../../../common/components/navigation-menu/Navigatio
 import { getClockOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { OverridableOptions } from '../../../common/models/View.types';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
@@ -16,7 +16,7 @@ import './Clock.scss';
 
 interface ClockProps {
   isMirrored: boolean;
-  time: TimeManagerType;
+  time: ViewExtendedTimer;
   viewSettings: ViewSettings;
   settings: Settings | undefined;
 }

apps/client/src/features/viewers/common/viewerUtils.ts

@@ -1,8 +1,8 @@
 import { TimerType } from 'ontime-types';
 
-import type { TimeManagerType } from '../../../common/models/TimeManager.type';
+import type { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 
-type TimerTypeParams = Pick<TimeManagerType, 'timerType' | 'current' | 'elapsed' | 'clock'>;
+type TimerTypeParams = Pick<ViewExtendedTimer, 'timerType' | 'current' | 'elapsed' | 'clock'>;
 
 export function getTimerByType(timerObject?: TimerTypeParams): number | null {
   if (!timerObject) {

apps/client/src/features/viewers/countdown/Countdown.tsx

@@ -8,7 +8,7 @@ import NavigationMenu from '../../../common/components/navigation-menu/Navigatio
 import { getCountdownOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
@@ -21,7 +21,7 @@ import './Countdown.scss';
 interface CountdownProps {
   isMirrored: boolean;
   backstageEvents: OntimeEvent[];
-  time: TimeManagerType;
+  time: ViewExtendedTimer;
   selectedId: string | null;
   viewSettings: ViewSettings;
   settings: Settings | undefined;

apps/client/src/features/viewers/countdown/countdown.helpers.ts

@@ -1,6 +1,6 @@
 import { OntimeEvent, Playback } from 'ontime-types';
 
-import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 
 export enum TimerMessage {
   toStart = 'to_start',
@@ -19,7 +19,7 @@ export const sanitiseTitle = (title: string | null) => (title ? title : '{no tit
  * Returns a parsed timer and relevant status message
  */
 export const fetchTimerData = (
-  time: TimeManagerType,
+  time: ViewExtendedTimer,
   follow: OntimeEvent,
   selectedId: string | null,
 ): { message: TimerMessage; timer: number } => {

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -8,7 +8,7 @@ import NavigationMenu from '../../../common/components/navigation-menu/Navigatio
 import { MINIMAL_TIMER_OPTIONS } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { OverridableOptions } from '../../../common/models/View.types';
 import { isStringBoolean } from '../../../common/utils/viewUtils';
 import { useTranslation } from '../../../translation/TranslationProvider';
@@ -19,7 +19,7 @@ import './MinimalTimer.scss';
 interface MinimalTimerProps {
   isMirrored: boolean;
   pres: TimerMessage;
-  time: TimeManagerType;
+  time: ViewExtendedTimer;
   viewSettings: ViewSettings;
 }
 

apps/client/src/features/viewers/public/Public.tsx

@@ -12,7 +12,7 @@ import TitleCard from '../../../common/components/title-card/TitleCard';
 import { getPublicOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import { titleVariants } from '../common/animation';
@@ -25,7 +25,7 @@ interface BackstageProps {
   publ: Message;
   publicEventNow: OntimeEvent | null;
   publicEventNext: OntimeEvent | null;
-  time: TimeManagerType;
+  time: ViewExtendedTimer;
   events: OntimeEvent[];
   publicSelectedId: string | null;
   general: ProjectData;

apps/client/src/features/viewers/studio/StudioClock.tsx

@@ -10,7 +10,7 @@ import { getStudioClockOptions } from '../../../common/components/view-params-ed
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import useFitText from '../../../common/hooks/useFitText';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import { isStringBoolean } from '../../../common/utils/viewUtils';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
@@ -22,7 +22,7 @@ import './StudioClock.scss';
 interface StudioClockProps {
   isMirrored: boolean;
   eventNext: OntimeEvent | null;
-  time: TimeManagerType;
+  time: ViewExtendedTimer;
   backstageEvents: OntimeRundown;
   selectedId: string | null;
   nextId: string | null;

apps/client/src/features/viewers/timer/Timer.tsx

@@ -11,7 +11,7 @@ import TitleCard from '../../../common/components/title-card/TitleCard';
 import { getTimerOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { TimeManagerType } from '../../../common/models/TimeManager.type';
+import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import { isStringBoolean } from '../../../common/utils/viewUtils';
 import { useTranslation } from '../../../translation/TranslationProvider';
@@ -42,7 +42,7 @@ interface TimerProps {
   external: Message;
   eventNow: OntimeEvent | null;
   eventNext: OntimeEvent | null;
-  time: TimeManagerType;
+  time: ViewExtendedTimer;
   viewSettings: ViewSettings;
   settings: Settings | undefined;
 }