breaking: convert offset > over-under

change offset direction and relabel to over-under

apps/client/src/features/control/message/TimerPreview.tsx

@@ -42,8 +42,8 @@ export default function TimerPreview() {
 
   const overrideColour = (() => {
     // override fallback colours from starter project
-    if (phase === TimerPhase.Warning) return data.warningColor ?? '#FFAB33';
-    if (phase === TimerPhase.Danger) return data.dangerColor ?? '#ED3333';
+    if (phase === TimerPhase.Warning) return data.warningColor ?? '#ffa528';
+    if (phase === TimerPhase.Danger) return data.dangerColor ?? '#ff7300';
     return data.normalColor ?? '#FFFC';
   })();
 

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 });
-}

apps/client/src/features/rundown/entry-editor/BlockEditor.tsx

@@ -53,7 +53,8 @@ export default function BlockEditor({ block }: BlockEditorProps) {
   );
 
   const isEditor = window.location.pathname.includes('editor');
-  const planOffset = typeof block.targetDuration !== 'number' ? null : block.targetDuration - block.duration;
+  const planOffset = typeof block.targetDuration !== 'number' ? null : block.duration - block.targetDuration;
+  const planOffsetLabel = planOffset !== null && planOffset > 0 ? 'behind' : 'ahead';
 
   return (
     <div className={style.content}>
@@ -94,11 +95,8 @@ export default function BlockEditor({ block }: BlockEditorProps) {
           </div>
           <div>
             <Editor.Label htmlFor='eventId'>Plan offset</Editor.Label>
-            {
-              // TODO: update remote data
-              // TODO: remove tab index
-            }
-            <TextLikeInput delayed={Boolean(planOffset)} className={style.textLikeInput}>
+            <TextLikeInput offset={planOffsetLabel} className={style.textLikeInput} tabIndex={-1}>
+              {planOffset !== null && planOffset > 0 ? '+' : ''}
               {millisToString(planOffset, { fallback: enDash })}
             </TextLikeInput>
           </div>