breaking: convert offset > over-under

change offset direction and relabel to over-under

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