refactor: improve visibility of time-to-end

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

@@ -24,6 +24,13 @@ 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 (
+        <>
+          Timer
+          <br /> (Time to end)
+        </>
+      );
     return 'Timer';
   })();
 

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -1,6 +1,8 @@
 @use '../blockMixins' as *;
 
 $skip-opacity: 0.2;
+$skip-border: color-mix(in srgb, $red-700, transparent 60%); // 60 is opacity disabled
+$active-border: color-mix(in srgb, $active-indicator, transparent 60%);  // 60 is opacity disabled
 
 .eventBlock {
   @include block-styling;
@@ -55,6 +57,10 @@ $skip-opacity: 0.2;
     outline: 1px solid $block-cursor-color;
   }
 
+  &.timeToEnd {
+    border: 1px solid $active-border;
+  }
+
   &.past:not(.skip) {
     .timerNote,
     .statusElements,
@@ -69,7 +75,7 @@ $skip-opacity: 0.2;
   }
 
   &.skip {
-    border: 1px solid $white-3;
+    border: 1px solid $skip-border;
 
     .timerNote,
     .eventTitle,

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

@@ -244,6 +244,7 @@ export default function EventBlock(props: EventBlockProps) {
     playback ? style[playback] : null,
     isSelected ? style.selected : null,
     hasCursor ? style.hasCursor : null,
+    timerType === TimerType.TimeToEnd ? style.timeToEnd : null,
   ]);
 
   const handleFocusClick = (event: MouseEvent) => {
@@ -271,7 +272,13 @@ export default function EventBlock(props: EventBlockProps) {
       onContextMenu={onContextMenu}
       id='event-block'
     >
-      <RundownIndicators timeStart={timeStart} previousStart={previousStart} previousEnd={previousEnd} delay={delay} />
+      <RundownIndicators
+        timeStart={timeStart}
+        previousStart={previousStart}
+        previousEnd={previousEnd}
+        delay={delay}
+        timeToEnd={timerType === TimerType.TimeToEnd}
+      />
 
       <div className={style.binder} style={{ ...binderColours }} tabIndex={-1}>
         <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>

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

@@ -111,7 +111,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
         </div>
         <div className={style.eventStatus} tabIndex={-1}>
           <Tooltip label={`Time type: ${timerType}`} openDelay={tooltipDelayMid}>
-            <span>
+            <span className={cx([timerType === TimerType.TimeToEnd && style.active])}>
               <TimerIcon type={timerType} className={style.statusIcon} />
             </span>
           </Tooltip>
@@ -151,14 +151,16 @@ function EndActionIcon(props: { action: EndAction; className: string }) {
 
 function TimerIcon(props: { type: TimerType; className: string }) {
   const { type, className } = props;
+  const maybeActiveClasses = cx([type === TimerType.TimeToEnd && style.active, className]);
+
   if (type === TimerType.CountUp) {
     return <IoArrowUp className={className} />;
   }
   if (type === TimerType.Clock) {
     return <IoTime className={className} />;
   }
   if (type === TimerType.TimeToEnd) {
-    return <IoFlag className={className} />;
+    return <IoFlag className={maybeActiveClasses} />;
   }
   return <IoArrowDown className={className} />;
 }

apps/client/src/features/rundown/event-block/RundownIndicators.module.scss

@@ -27,3 +27,9 @@ $gap-left: calc(2rem + 0.25rem + 3rem);
 .gap {
   @include indicator($blue-500);
 }
+
+.timeToEnd {
+  @include indicator($gray-1200);
+  outline: 1px solid $active-indicator;
+  outline-offset: -1px;
+}

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

@@ -7,10 +7,11 @@ interface RundownIndicatorProps {
   previousStart?: number;
   previousEnd?: number;
   delay: number;
+  timeToEnd?: boolean;
 }
 
 export default function RundownIndicators(props: RundownIndicatorProps) {
-  const { timeStart, previousStart, previousEnd, delay } = props;
+  const { timeStart, previousStart, previousEnd, delay, timeToEnd } = props;
 
   const hasOverlap = formatOverlap(timeStart, previousStart, previousEnd);
   const hasDelay = formatDelay(timeStart, delay);
@@ -19,6 +20,7 @@ export default function RundownIndicators(props: RundownIndicatorProps) {
     <div className={style.indicators}>
       {hasDelay && <div className={style.delay}>{hasDelay}</div>}
       {hasOverlap && <div className={style.gap}>{hasOverlap}</div>}
+      {timeToEnd && <div className={style.timeToEnd}>Time to end</div>}
     </div>
   );
 }