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
+
(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..5713788a36 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 20%);
.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'
>
-