breaking: convert offset > over-under

change offset direction and relabel to over-under

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DurationInput.tsx

@@ -103,7 +103,7 @@ function DurationInput({
       onClick={handleFakeFocus}
       onFocus={handleFakeFocus}
       muted={!lockedValue}
-      delayed={delayed}
+      offset={delayed ? 'behind' : undefined}
       ref={textRef}
     >
       {children}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.module.scss

@@ -14,7 +14,11 @@
 
   overflow: hidden;
 
-  &.delayed {
+  &.ahead {
+    color: $playback-ahead;
+  }
+
+  &.behind {
     color: $ontime-delay-text;
   }
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TextLikeInput.tsx

@@ -5,29 +5,30 @@ import { cx } from '../../../../common/utils/styleUtils';
 import style from './TextLikeInput.module.scss';
 
 interface TextLikeInputProps extends HTMLAttributes<HTMLSpanElement> {
-  delayed?: boolean;
+  offset?: 'ahead' | 'behind';
   muted?: boolean;
 }
 
-const TextLikeInput = forwardRef((props: PropsWithChildren<TextLikeInputProps>, textRef) => {
-  const { delayed, muted, children, className, ...elementProps } = props;
-  const ref = useRef<HTMLDivElement | null>(null);
-  const classes = cx([style.textInput, delayed && style.delayed, muted && style.muted, className]);
+const TextLikeInput = forwardRef(
+  ({ offset, muted, children, className, ...elementProps }: PropsWithChildren<TextLikeInputProps>, textRef) => {
+    const ref = useRef<HTMLDivElement | null>(null);
+    const classes = cx([style.textInput, offset && style[offset], muted && style.muted, className]);
 
-  useImperativeHandle(textRef, () => {
-    return {
-      focusParentElement() {
-        ref.current?.parentElement?.focus();
-      },
-    };
-  });
+    useImperativeHandle(textRef, () => {
+      return {
+        focusParentElement() {
+          ref.current?.parentElement?.focus();
+        },
+      };
+    });
 
-  return (
-    <div className={classes} {...elementProps} tabIndex={0} ref={ref}>
-      {children}
-    </div>
-  );
-});
+    return (
+      <div className={classes} tabIndex={0} {...elementProps} ref={ref}>
+        {children}
+      </div>
+    );
+  },
+);
 
 TextLikeInput.displayName = 'TextLikeInput';
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/TimeInput.tsx

@@ -105,7 +105,7 @@ function TimeInputDuration({
       onClick={handleFakeFocus}
       onFocus={handleFakeFocus}
       muted={!lockedValue}
-      delayed={delayed}
+      offset={delayed ? 'behind' : undefined}
       ref={textRef}
     >
       {children}

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

@@ -2,6 +2,7 @@ import { OntimeEvent, Playback, Runtime, TimerPhase, TimerState, ViewSettings }
 import { millisToString } from 'ontime-utils';
 
 import { useAuxTimersTime } from '../../common/hooks/useSocket';
+import { getOffsetState } from '../../common/utils/offset';
 import { cx } from '../../common/utils/styleUtils';
 import { useTranslation } from '../../translation/TranslationProvider';
 import { getTimerColour } from '../utils/presentation.utils';
@@ -45,6 +46,8 @@ export default function StudioTimers({
     time.phase === TimerPhase.Danger,
   );
 
+  const offsetState = getOffsetState(runtime.offset);
+
   return (
     <div className='studio__timers'>
       <div className='card' id='card-schedule'>
@@ -54,15 +57,8 @@ export default function StudioTimers({
             <div className='runtime-timer'>{schedule.actualStart}</div>
           </div>
           <div>
-            <div className='label center'>Offset</div>
-            <div
-              className={cx([
-                'runtime-timer',
-                'center',
-                !eventNow && 'muted',
-                runtime.offset <= 0 ? 'behind' : 'ahead',
-              ])}
-            >
+            <div className='label center'>Over / under</div>
+            <div className={cx(['runtime-timer', 'center', !eventNow && 'muted', offsetState && offsetState])}>
               {schedule.offset}
             </div>
           </div>

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

@@ -1,14 +1,16 @@
 import { OntimeEvent, Runtime, 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.offset !== null ? runtime.offset * -1 : null;
   return {
     actualStart: formatTime(runtime.actualStart, timeFormat),
     expectedEnd: formatTime(runtime.expectedEnd, timeFormat),
-    offset: millisToString(runtime.offset),
+    offset: getOffsetText(correctedOffset),
   };
 }