refactor: extract time-to-end

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

@@ -9,6 +9,7 @@ import {
   Settings,
   SimpleTimerState,
   SupportedEvent,
+  TimerType,
   ViewSettings,
 } from 'ontime-types';
 import { useStore } from 'zustand';
@@ -74,16 +75,14 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
     const selectedId = eventNow?.id ?? null;
     const nextId = eventNext?.id ?? null;
 
-    /******************************************/
-    /***  + TimeManagerType                     ***/
-    /***  WRAP INFORMATION RELATED TO TIME  ***/
-    /***  --------------------------------  ***/
-    /******************************************/
-
-    const TimeManagerType = {
+    /**
+     * Contains an extended timer object with properties from the current event
+     */
+    const timeManagerType: ViewExtendedTimer = {
       ...timer,
       clock,
-      timerType: eventNow?.timerType ?? null,
+      timerType: eventNow?.timerType ?? TimerType.CountDown,
+      isTimeToEnd: eventNow?.isTimeToEnd ?? false,
     };
 
     return (
@@ -108,7 +107,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
           runtime={runtime}
           selectedId={selectedId}
           settings={settings}
-          time={TimeManagerType}
+          time={timeManagerType}
           viewSettings={viewSettings}
         />
       </>

apps/client/src/features/viewers/common/viewUtils.ts

@@ -5,16 +5,22 @@ import type { ViewExtendedTimer } from '../../../common/models/TimeManager.type'
 import { timerPlaceholder, timerPlaceholderMin } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';
 
-type TimerTypeParams = Pick<ViewExtendedTimer, 'timerType' | 'current' | 'elapsed' | 'clock'>;
+type TimerTypeParams = Pick<ViewExtendedTimer, 'isTimeToEnd' | 'timerType' | 'current' | 'elapsed' | 'clock'>;
 
 export function getTimerByType(freezeEnd: boolean, timerObject?: TimerTypeParams): number | null {
   if (!timerObject) {
     return null;
   }
 
+  if (timerObject.isTimeToEnd) {
+    if (timerObject.current === null) {
+      return null;
+    }
+    return freezeEnd ? Math.max(timerObject.current, 0) : timerObject.current;
+  }
+
   switch (timerObject.timerType) {
     case TimerType.CountDown:
-    case TimerType.TimeToEnd:
       if (timerObject.current === null) {
         return null;
       }

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

@@ -124,7 +124,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
 
   const isPlaying = time.playback !== Playback.Pause;
 
-  const shouldShowModifiers = time.timerType === TimerType.CountDown || time.timerType === TimerType.TimeToEnd;
+  const shouldShowModifiers = time.timerType === TimerType.CountDown || time.isTimeToEnd;
   const finished = time.phase === TimerPhase.Overtime;
   const showEndMessage = shouldShowModifiers && finished && viewSettings.endMessage && !hideEndMessage;
   const showFinished =

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

@@ -118,7 +118,7 @@ export default function Timer(props: TimerProps) {
   const finished = time.phase === TimerPhase.Overtime;
   const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0);
 
-  const shouldShowModifiers = time.timerType === TimerType.CountDown || time.timerType === TimerType.TimeToEnd;
+  const shouldShowModifiers = time.timerType === TimerType.CountDown || time.isTimeToEnd;
   const showEndMessage = shouldShowModifiers && finished && viewSettings.endMessage;
   const showProgress =
     eventNow !== null &&