breaking: convert offset > over-under

change offset direction and relabel to over-under

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

@@ -2,7 +2,7 @@ import { memo, PropsWithChildren } from 'react';
 
 import { useIsMobileScreen } from '../../common/hooks/useIsMobileScreen';
 
-import { ClockOverview, MetadataTimes, RuntimeOverview, StartTimes, TimerOverview } from './composite/TimeElements';
+import { ClockOverview, MetadataTimes, OffsetOverview, StartTimes, TimerOverview } from './composite/TimeElements';
 import TitleOverview from './composite/TitleOverview';
 import { OverviewWrapper } from './OverviewWrapper';
 
@@ -18,7 +18,7 @@ function CuesheetMobile({ children }: PropsWithChildren) {
   return (
     <OverviewWrapper navElements={children}>
       <TimerOverview />
-      <RuntimeOverview />
+      <OffsetOverview />
     </OverviewWrapper>
   );
 }
@@ -29,7 +29,7 @@ function CuesheetDesktop({ children }: PropsWithChildren) {
       <TitleOverview />
       <StartTimes />
       <TimerOverview />
-      <RuntimeOverview />
+      <OffsetOverview />
       <MetadataTimes />
       <ClockOverview />
     </OverviewWrapper>

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

@@ -1,6 +1,6 @@
 import { memo, PropsWithChildren } from 'react';
 
-import { ClockOverview, MetadataTimes, ProgressOverview, RuntimeOverview, StartTimes } from './composite/TimeElements';
+import { ClockOverview, MetadataTimes, OffsetOverview, ProgressOverview, StartTimes } from './composite/TimeElements';
 import TitleOverview from './composite/TitleOverview';
 import { OverviewWrapper } from './OverviewWrapper';
 
@@ -11,7 +11,7 @@ function EditorOverview({ children }: PropsWithChildren) {
       <TitleOverview />
       <StartTimes />
       <ProgressOverview />
-      <RuntimeOverview />
+      <OffsetOverview />
       <MetadataTimes />
       <ClockOverview />
     </OverviewWrapper>

apps/client/src/features/overview/composite/TimeElements.tsx

@@ -13,9 +13,10 @@ import {
   useTimer,
 } from '../../../common/hooks/useSocket';
 import { useEntry } from '../../../common/hooks-query/useRundown';
+import { getOffsetState, getOffsetText } from '../../../common/utils/offset';
 import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
 import { formatTime, useTimeUntilStart } from '../../../common/utils/time';
-import { calculateEndAndDaySpan, formattedTime, getOffsetText } from '../overview.utils';
+import { calculateEndAndDaySpan, formattedTime } from '../overview.utils';
 
 import { TimeColumn } from './TimeLayout';
 
@@ -193,14 +194,16 @@ export function ProgressOverview() {
   return <TimeColumn label='Progress' value={progressText} />;
 }
 
-export function RuntimeOverview() {
+export function OffsetOverview() {
   const { offset, playback } = useRuntimePlaybackOverview();
 
   const isPlaying = isPlaybackActive(playback);
-  const offsetText = getOffsetText(isPlaying ? offset : null);
-  const offsetClasses = cx([style.offset, isPlaying && (offset < 0 ? style.behind : style.ahead)]);
+  const correctedOffset = offset * -1;
+  const offsetState = getOffsetState(correctedOffset);
+  const offsetClasses = cx([style.offset, offsetState && style[offsetState]]);
+  const offsetText = getOffsetText(isPlaying ? correctedOffset : null);
 
-  return <TimeColumn label='Offset' value={offsetText} className={offsetClasses} testId='offset' />;
+  return <TimeColumn label='Over / under' value={offsetText} className={offsetClasses} testId='offset' />;
 }
 
 export function ClockOverview() {

apps/client/src/features/overview/overview.utils.ts

@@ -1,7 +1,7 @@
 import { MaybeNumber, TimerType } from 'ontime-types';
 import { dayInMs, millisToString } from 'ontime-utils';
 
-import { enDash, timerPlaceholder, timerPlaceholderMin } from '../../common/utils/styleUtils';
+import { timerPlaceholder, timerPlaceholderMin } from '../../common/utils/styleUtils';
 
 /**
  * Encapsulates the logic for formatting time in overview
@@ -24,15 +24,3 @@ export function calculateEndAndDaySpan(end: MaybeNumber): [MaybeNumber, number]
 
   return [end, 0];
 }
-
-/**
- * Formats offset text
- * @param offset
- * @returns
- */
-export function getOffsetText(offset: MaybeNumber): string {
-  if (offset === null) {
-    return enDash;
-  }
-  return millisToString(offset, { fallback: enDash });
-}