refactor: simplify client logic on timer phases

apps/client/src/common/models/TimeManager.type.ts

@@ -1,4 +1,4 @@
-import { MaybeNumber, Playback, TimerType } from 'ontime-types';
+import { MaybeNumber, Playback, TimerPhase, TimerType } from 'ontime-types';
 
 // first set extends TimerState
 export type ViewExtendedTimer = {
@@ -8,12 +8,11 @@ export type ViewExtendedTimer = {
   elapsed: MaybeNumber;
   expectedFinish: MaybeNumber;
   finishedAt: MaybeNumber;
+  phase: TimerPhase;
   playback: Playback;
   secondaryTimer: MaybeNumber;
   startedAt: MaybeNumber;
 
   clock: number;
-  timeDanger: MaybeNumber;
-  timeWarning: MaybeNumber;
   timerType: TimerType;
 };

apps/client/src/declarations/declaration.d.ts

@@ -17,4 +17,10 @@ declare global {
   }
 }
 
+declare module 'react' {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}
+
 export default {};

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { Tooltip } from '@chakra-ui/react';
-import { Playback } from 'ontime-types';
+import { Playback, TimerPhase } from 'ontime-types';
 import { dayInMs, millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils';
 
 import { useTimer } from '../../../../common/hooks/useSocket';
@@ -44,7 +44,7 @@ export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProp
 
   const isRolling = playback === Playback.Roll;
   const isWaiting = timer.secondaryTimer !== null && timer.secondaryTimer > 0 && timer.current === null;
-  const isOvertime = timer.current !== null && timer.current < 0;
+  const isOvertime = timer.phase === TimerPhase.Negative;
   const hasAddedTime = Boolean(timer.addedTime);
 
   const rollLabel = isRolling ? 'Roll mode active' : '';

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -82,8 +82,6 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
       ...timer,
       clock,
       timerType: eventNow?.timerType ?? null,
-      timeWarning: eventNow?.timeWarning ?? null,
-      timeDanger: eventNow?.timeWarning ?? null,
     };
 
     // prevent render until we get all the data we need

apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss

@@ -20,11 +20,11 @@
   }
 
   .timer {
+    opacity: 1;
     font-family: var(--font-family-bold-override, $timer-bold-font-family) ;
     font-size: 20vw;
     position: relative;
-    color: var(--timer-color-override, $timer-color);
+    color: var(--timer-color-override, var(--phase-color));
-    opacity: 1;
     transition: $viewer-transition-time;
     transition-property: opacity;
     background-color: transparent;

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -1,5 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
-import { Playback, TimerType, ViewSettings } from 'ontime-types';
+import { Playback, TimerPhase, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/constants';
 import { MINIMAL_TIMER_OPTIONS } from '../../../common/components/view-params-editor/constants';
@@ -126,13 +126,13 @@ export default function MinimalTimer(props: MinimalTimerProps) {
 
   const isPlaying = time.playback !== Playback.Pause;
 
-  const showEndMessage = (time.current ?? 0) < 0 && viewSettings.endMessage && !hideEndMessage;
+  const finished = time.phase === TimerPhase.Negative;
-  const finished = time.playback === Playback.Play && (time.current ?? 0) < 0 && time.startedAt;
+  const showEndMessage = finished && viewSettings.endMessage && !hideEndMessage;
   const showFinished = finished && !userOptions?.hideOvertime && (time.timerType !== TimerType.Clock || showEndMessage);
 
   const showProgress = time.playback !== Playback.Stop;
-  const showWarning = (time.current ?? 1) < (time.timeWarning ?? 0);
+  const showWarning = time.phase === TimerPhase.Warning;
-  const showDanger = (time.current ?? 1) < (time.timeDanger ?? 0);
+  const showDanger = time.phase === TimerPhase.Danger;
 
   let timerColor = viewSettings.normalColor;
   if (!timerIsTimeOfDay && showProgress && showWarning) timerColor = viewSettings.warningColor;
@@ -150,7 +150,6 @@ export default function MinimalTimer(props: MinimalTimerProps) {
 
   const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
   const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
-
   return (
     <div
       className={showFinished ? `${baseClasses} minimal-timer--finished` : baseClasses}
@@ -168,12 +167,12 @@ export default function MinimalTimer(props: MinimalTimerProps) {
         <div
           className={timerClasses}
           style={{
-            color: timerColor,
             fontSize: `${timerFontSize}vw`,
             fontFamily: userOptions.font,
             top: userOptions.top,
             left: userOptions.left,
             backgroundColor: userOptions.textBackground,
+            '--phase-color': timerColor,
           }}
         >
           {display}

apps/client/src/features/viewers/timer/Timer.scss

@@ -109,7 +109,7 @@
     .timer {
       opacity: 1;
       font-family: var(--font-family-override, $viewer-font-family);
-      color: var(--timer-color-override, $timer-color);
+      color: var(--timer-color-override, var(--phase-color));
       line-height: 0.9em;
       text-align: center;
       letter-spacing: 0.05em;

apps/client/src/features/viewers/timer/Timer.tsx

@@ -7,6 +7,7 @@ import {
   Playback,
   Settings,
   TimerMessage,
+  TimerPhase,
   TimerType,
   ViewSettings,
 } from 'ontime-types';
@@ -110,14 +111,14 @@ export default function Timer(props: TimerProps) {
 
   const timerIsTimeOfDay = time.timerType === TimerType.Clock;
 
-  const finished = time.playback === Playback.Play && (time.current ?? 0) < 0 && time.startedAt;
+  const finished = time.phase === TimerPhase.Negative;
   const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0);
 
-  const showEndMessage = (time.current ?? 1) < 0 && viewSettings.endMessage;
+  const showEndMessage = finished && viewSettings.endMessage;
   const showProgress = time.playback !== Playback.Stop;
   const showFinished = finished && (time.timerType !== TimerType.Clock || showEndMessage);
-  const showWarning = (time.current ?? 1) < (eventNow?.timeWarning ?? 0);
+  const showWarning = time.phase === TimerPhase.Warning;
-  const showDanger = (time.current ?? 1) < (eventNow?.timeDanger ?? 0);
+  const showDanger = time.phase === TimerPhase.Danger;
   const showBlinking = pres.blink;
   const showBlackout = pres.blackout;
   const showClock = time.timerType !== TimerType.Clock;
@@ -173,7 +174,7 @@ export default function Timer(props: TimerProps) {
             className={timerClasses}
             style={{
               fontSize: `${timerFontSize}vw`,
-              color: timerColor,
+              '--phase-color': timerColor,
             }}
           >
             {display}