Refactor: split runtime state (#1725)

* refactor: runtime types

* refactor: runtimeState functions to use the split type

* refactor: RuntimeService to use the new split data

* refactor: use the split data in the UI

* update comments

* refactor: rename runtime to offset

* fix utils test

apps/client/src/views/backstage/Backstage.tsx

@@ -44,7 +44,7 @@ export default function BackstageLoader() {
 function Backstage({ events, customFields, projectData, isMirrored, settings }: BackstageData) {
   const { getLocalizedString } = useTranslation();
   const { secondarySource, extraInfo } = useBackstageOptions();
-  const { eventNext, eventNow, runtime, selectedEventId, time } = useBackstageSocket();
+  const { eventNext, eventNow, rundown, selectedEventId, time } = useBackstageSocket();
   const [blinkClass, setBlinkClass] = useState(false);
   const { height: screenHeight } = useViewportSize();
 
@@ -76,13 +76,13 @@ function Backstage({ events, customFields, projectData, isMirrored, settings }:
   const scheduledStart = (() => {
     if (showNow) return undefined;
     if (!hasEvents) return undefined;
-    return formatTime(runtime.plannedStart, { format12: 'hh:mm a', format24: 'HH:mm' });
+    return formatTime(rundown.plannedStart, { format12: 'hh:mm a', format24: 'HH:mm' });
   })();
 
   const scheduledEnd = (() => {
     if (showNow) return undefined;
     if (!hasEvents) return undefined;
-    return formatTime(runtime.plannedEnd, { format12: 'hh:mm a', format24: 'HH:mm' });
+    return formatTime(rundown.plannedEnd, { format12: 'hh:mm a', format24: 'HH:mm' });
   })();
 
   let displayTimer = millisToString(time.current, { fallback: timerPlaceholderMin });

apps/client/src/views/studio/StudioTimers.tsx

@@ -17,9 +17,13 @@ interface StudioTimersProps {
 
 export default function StudioTimers({ viewSettings }: StudioTimersProps) {
   const { getLocalizedString } = useTranslation();
-  const { eventNow, eventNext, message, time, runtime } = useStudioTimersSocket();
+  const { eventNow, eventNext, message, time, offset, rundown } = useStudioTimersSocket();
 
-  const schedule = getFormattedScheduleTimes(runtime);
+  const schedule = getFormattedScheduleTimes({
+    offset: offset.absolute,
+    actualStart: rundown.actualStart,
+    expectedEnd: offset.expectedRundownEnd,
+  });
   const event = getFormattedEventData(eventNow, time);
   const eventNextTitle = eventNext?.title || '-';
   const formattedTimerMessage = (message.timer.visible && message.timer.text) || '-';
@@ -33,7 +37,7 @@ export default function StudioTimers({ viewSettings }: StudioTimersProps) {
     time.phase === TimerPhase.Danger,
   );
 
-  const offsetState = getOffsetState(runtime.offsetAbs);
+  const offsetState = getOffsetState(offset.absolute);
 
   return (
     <div className='studio__timers'>

apps/client/src/views/studio/studioTimers.utils.ts

@@ -1,16 +1,19 @@
-import { OntimeEvent, Runtime, TimerState } from 'ontime-types';
+import { MaybeNumber, OntimeEvent, TimerState } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import { getOffsetText } from '../../common/utils/offset';
 import { formatTime } from '../../common/utils/time';
 
 const timeFormat = { format12: 'h:mm a', format24: 'HH:mm' };
-export function getFormattedScheduleTimes(runtime: Runtime) {
-  const correctedOffset = runtime.offsetAbs !== null ? runtime.offsetAbs * -1 : null;
+export function getFormattedScheduleTimes(data: {
+  offset: number;
+  actualStart: MaybeNumber;
+  expectedEnd: MaybeNumber;
+}) {
   return {
-    actualStart: formatTime(runtime.actualStart, timeFormat),
-    expectedEnd: formatTime(runtime.expectedEnd, timeFormat),
-    offset: getOffsetText(correctedOffset),
+    actualStart: formatTime(data.actualStart, timeFormat),
+    expectedEnd: formatTime(data.expectedEnd, timeFormat),
+    offset: getOffsetText(data.offset),
   };
 }