From ea9747284fdaa324cae64e9d2b4ff9ec1054bcd0 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Fri, 25 Oct 2024 20:27:38 +0200
Subject: [PATCH] refactor: improve visibility of time-to-end

---
 .../client/src/features/control/message/TimerPreview.tsx | 7 +++++++
 .../features/rundown/event-block/EventBlock.module.scss  | 8 +++++++-
 .../src/features/rundown/event-block/EventBlock.tsx      | 9 ++++++++-
 .../src/features/rundown/event-block/EventBlockInner.tsx | 6 ++++--
 .../rundown/event-block/RundownIndicators.module.scss    | 6 ++++++
 .../features/rundown/event-block/RundownIndicators.tsx   | 4 +++-
 6 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/features/control/message/TimerPreview.tsx b/apps/client/src/features/control/message/TimerPreview.tsx
index f4cd9c4e91..ecf2703c1b 100644
--- a/apps/client/src/features/control/message/TimerPreview.tsx
+++ b/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';
   })();
 
diff --git a/apps/client/src/features/rundown/event-block/EventBlock.module.scss b/apps/client/src/features/rundown/event-block/EventBlock.module.scss
index 2328b52e0b..71a83ac899 100644
--- a/apps/client/src/features/rundown/event-block/EventBlock.module.scss
+++ b/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,
diff --git a/apps/client/src/features/rundown/event-block/EventBlock.tsx b/apps/client/src/features/rundown/event-block/EventBlock.tsx
index cf8f21fb83..4ff10d36c1 100644
--- a/apps/client/src/features/rundown/event-block/EventBlock.tsx
+++ b/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}>
diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
index 4adab46def..f09688f83e 100644
--- a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
+++ b/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,6 +151,8 @@ 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} />;
   }
@@ -158,7 +160,7 @@ function TimerIcon(props: { type: TimerType; className: string }) {
     return <IoTime className={className} />;
   }
   if (type === TimerType.TimeToEnd) {
-    return <IoFlag className={className} />;
+    return <IoFlag className={maybeActiveClasses} />;
   }
   return <IoArrowDown className={className} />;
 }
diff --git a/apps/client/src/features/rundown/event-block/RundownIndicators.module.scss b/apps/client/src/features/rundown/event-block/RundownIndicators.module.scss
index 5544a2d150..dbe08590c5 100644
--- a/apps/client/src/features/rundown/event-block/RundownIndicators.module.scss
+++ b/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;
+}
diff --git a/apps/client/src/features/rundown/event-block/RundownIndicators.tsx b/apps/client/src/features/rundown/event-block/RundownIndicators.tsx
index 82a34e3360..d97e4fa2e9 100644
--- a/apps/client/src/features/rundown/event-block/RundownIndicators.tsx
+++ b/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>
   );
 }