refactor: improve visibility of time-to-end

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

@@ -25,6 +25,7 @@ export default function TimerPreview() {
     if (showTimerMessage) return 'Message';
     if (phase === TimerPhase.Pending) return 'Standby to start';
     if (phase === TimerPhase.Overtime && data.endMessage) return 'Custom end message';
+    if (timerType === TimerType.TimeToEnd) return 'Time to end';
     return 'Timer';
   })();
 

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -90,6 +90,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           delay={delay}
           timeStrategy={timeStrategy}
           linkStart={linkStart}
+          timerType={timerType}
         />
       </div>
       <div className={style.titleSection}>

apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx

@@ -82,6 +82,7 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             timeStrategy={timeStrategy}
             linkStart={linkStart}
             delay={delay}
+            timerType={timerType}
           />
         </div>
         <div className={style.delayLabel}>{delayLabel}</div>

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx

@@ -5,7 +5,7 @@ import { IoLink } from '@react-icons/all-files/io5/IoLink';
 import { IoLockClosed } from '@react-icons/all-files/io5/IoLockClosed';
 import { IoLockOpenOutline } from '@react-icons/all-files/io5/IoLockOpenOutline';
 import { IoUnlink } from '@react-icons/all-files/io5/IoUnlink';
-import { MaybeString, TimeStrategy } from 'ontime-types';
+import { MaybeString, TimerType, TimeStrategy } from 'ontime-types';
 
 import TimeInputWithButton from '../../../common/components/input/time-input/TimeInputWithButton';
 import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -22,12 +22,13 @@ interface EventBlockTimerProps {
   timeStrategy: TimeStrategy;
   linkStart: MaybeString;
   delay: number;
+  timerType: TimerType;
 }
 
 type TimeActions = 'timeStart' | 'timeEnd' | 'duration';
 
 const TimeInputFlow = (props: EventBlockTimerProps) => {
-  const { eventId, timeStart, timeEnd, duration, timeStrategy, linkStart, delay } = props;
+  const { eventId, timeStart, timeEnd, duration, timeStrategy, linkStart, delay, timerType } = props;
   const { updateEvent, updateTimer } = useEventAction();
 
   // In sync with EventEditorTimes
@@ -43,7 +44,15 @@ const TimeInputFlow = (props: EventBlockTimerProps) => {
     updateEvent({ id: eventId, linkStart: doLink ? 'true' : null });
   };
 
-  const overMidnight = timeStart > timeEnd;
+  const warnings = [];
+  if (timeStart > timeEnd) {
+    warnings.push('Over midnight');
+  }
+
+  if (timerType === TimerType.TimeToEnd) {
+    warnings.push('Time to end');
+  }
+
   const hasDelay = delay !== 0;
 
   const isLockedEnd = timeStrategy === TimeStrategy.LockEnd;
@@ -110,9 +119,9 @@ const TimeInputFlow = (props: EventBlockTimerProps) => {
         </Tooltip>
       </TimeInputWithButton>
 
-      {overMidnight && (
+      {warnings.length > 0 && (
         <div className={style.timerNote}>
-          <Tooltip label='Over midnight' openDelay={tooltipDelayFast} variant='ontime-ondark' shouldWrapChildren>
+          <Tooltip label={warnings.join(' - ')} openDelay={tooltipDelayFast} variant='ontime-ondark' shouldWrapChildren>
             <IoAlertCircleOutline />
           </Tooltip>
         </div>