From 5cb8020ab91e31eb52721f485ef23afd2e6b0287 Mon Sep 17 00:00:00 2001
From: Fabian Posenau <19673098+kellhogs@users.noreply.github.com>
Date: Sun, 4 Jun 2023 21:25:56 +0200
Subject: [PATCH] Timer/blinking and blackout buttons (#406)

*feat: timer blink

*feat: blackout

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com>
---
 apps/client/src/common/hooks/useSocket.ts     |  2 +
 apps/client/src/common/stores/runtime.ts      |  2 +
 .../src/features/control/message/InputRow.tsx |  9 +++--
 .../message/MessageControl.module.scss        | 12 +++++-
 .../control/message/MessageControl.tsx        | 40 ++++++++++++++-----
 .../viewers/minimal-timer/MinimalTimer.scss   |  1 +
 .../viewers/minimal-timer/MinimalTimer.tsx    | 19 ++++++---
 .../src/features/viewers/timer/Timer.scss     |  1 +
 .../src/features/viewers/timer/Timer.tsx      | 15 ++++---
 apps/client/src/theme/_v2Styles.scss          | 12 ++++++
 apps/client/src/theme/_viewerCommon.scss      |  4 ++
 apps/client/src/theme/_viewerDefs.scss        |  2 +
 .../src/controllers/integrationController.ts  | 14 +++++++
 .../message-service/MessageService.ts         | 33 ++++++++++++++-
 apps/test-db/db.json                          |  6 +--
 e2e/tests/000-smoke-tests.spec.ts             | 18 ++++-----
 .../features/201-message-control.spec.ts      | 28 +++++++------
 e2e/tests/fixtures/test-db.json               |  6 +--
 package.json                                  |  2 +-
 .../runtime/MessageControl.type.ts            |  5 +++
 .../definitions/runtime/RuntimeStore.type.ts  |  4 +-
 packages/types/src/index.ts                   |  3 +-
 playwright.config.ts                          |  4 ++
 pnpm-lock.yaml                                | 20 ++++++----
 24 files changed, 196 insertions(+), 66 deletions(-)

diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts
index 7703f8343..606b5e9a3 100644
--- a/apps/client/src/common/hooks/useSocket.ts
+++ b/apps/client/src/common/hooks/useSocket.ts
@@ -32,6 +32,8 @@ export const setMessage = {
   lowerText: (payload: string) => socketSendJson('set-lower-message-text', payload),
   lowerVisible: (payload: boolean) => socketSendJson('set-lower-message-visible', payload),
   onAir: (payload: boolean) => socketSendJson('set-onAir', payload),
+  timerBlink: (payload: boolean) => socketSendJson('set-timer-blink', payload),
+  timerBlackout: (payload: boolean) => socketSendJson('set-timer-blackout', payload),
 };
 
 export const usePlaybackControl = () => {
diff --git a/apps/client/src/common/stores/runtime.ts b/apps/client/src/common/stores/runtime.ts
index f75b9d29f..321e3b5f2 100644
--- a/apps/client/src/common/stores/runtime.ts
+++ b/apps/client/src/common/stores/runtime.ts
@@ -22,6 +22,8 @@ export const runtimeStorePlaceholder = {
   timerMessage: {
     text: '',
     visible: false,
+    timerBlink: false,
+    timerBlackout: false,
   },
   publicMessage: {
     text: '',
diff --git a/apps/client/src/features/control/message/InputRow.tsx b/apps/client/src/features/control/message/InputRow.tsx
index 369bd8d99..9683dec02 100644
--- a/apps/client/src/features/control/message/InputRow.tsx
+++ b/apps/client/src/features/control/message/InputRow.tsx
@@ -3,6 +3,7 @@ import { IoEye } from '@react-icons/all-files/io5/IoEye';
 import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline';
 
 import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
+import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './InputRow.module.scss';
@@ -14,17 +15,19 @@ interface InputRowProps {
   visible?: boolean;
   actionHandler: (action: string, payload: object) => void;
   changeHandler: (newValue: string) => void;
+  className?: string;
 }
 
 export default function InputRow(props: InputRowProps) {
-  const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
+  const { label, placeholder, text, visible, actionHandler, changeHandler, className } = props;
 
   const handleInputChange = (newValue: string) => {
     changeHandler(newValue);
   };
+  const classes = cx([style.inputRow, className]);
 
   return (
-    <div className={style.inputRow}>
+    <div className={classes}>
       <label className={`${style.label} ${visible ? style.active : ''}`}>{label}</label>
       <div className={style.inputItems}>
         <Input
@@ -39,7 +42,7 @@ export default function InputRow(props: InputRowProps) {
           tooltip={visible ? 'Make invisible' : 'Make visible'}
           aria-label={`Toggle ${label}`}
           openDelay={tooltipDelayMid}
-          icon={visible? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
+          icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
           variant={visible ? 'ontime-filled' : 'ontime-subtle'}
           size='sm'
         />
diff --git a/apps/client/src/features/control/message/MessageControl.module.scss b/apps/client/src/features/control/message/MessageControl.module.scss
index 6dd841962..ab966b116 100644
--- a/apps/client/src/features/control/message/MessageControl.module.scss
+++ b/apps/client/src/features/control/message/MessageControl.module.scss
@@ -7,12 +7,18 @@
 }
 
 .onAirSection {
-  margin-top: $section-spacing;
   display: flex;
   flex-direction: column;
   gap: $element-spacing;
 }
 
+.buttonSection {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $element-spacing;
+  margin-top: -0.5rem;
+}
+
 .label {
   font-size: $inner-section-text-size;
   color: $label-gray;
@@ -21,3 +27,7 @@
     color: $action-text-color;
   }
 }
+
+.padTop {
+  margin-top: $section-spacing;
+}
diff --git a/apps/client/src/features/control/message/MessageControl.tsx b/apps/client/src/features/control/message/MessageControl.tsx
index 8bea4648a..640e9eb21 100644
--- a/apps/client/src/features/control/message/MessageControl.tsx
+++ b/apps/client/src/features/control/message/MessageControl.tsx
@@ -1,6 +1,10 @@
 import { Button } from '@chakra-ui/react';
+import { IoEye } from '@react-icons/all-files/io5/IoEye';
+import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline';
 import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
 import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
+import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
+import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline';
 
 import { setMessage, useMessageControl } from '../../../common/hooks/useSocket';
 
@@ -13,14 +17,6 @@ export default function MessageControl() {
 
   return (
     <div className={style.messageContainer}>
-      <InputRow
-        label='Timer screen message'
-        placeholder='Shown in stage timer'
-        text={data.timerMessage.text || ''}
-        visible={data.timerMessage.visible || false}
-        changeHandler={(newValue) => setMessage.presenterText(newValue)}
-        actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)}
-      />
       <InputRow
         label='Public / Backstage screen message'
         placeholder='Shown in public and backstage screens'
@@ -37,7 +33,33 @@ export default function MessageControl() {
         changeHandler={(newValue) => setMessage.lowerText(newValue)}
         actionHandler={() => setMessage.lowerVisible(!data.lowerMessage.visible)}
       />
-      <div className={style.onAirSection}>
+      <InputRow
+        label='Timer message'
+        placeholder='Shown in stage timer'
+        text={data.timerMessage.text || ''}
+        visible={data.timerMessage.visible || false}
+        changeHandler={(newValue) => setMessage.presenterText(newValue)}
+        actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)}
+      />
+      <div className={style.buttonSection}>
+        <label className={style.label}>Timer messsage blink</label>
+        <label className={style.label}>Blackout timer screens</label>
+        <Button
+          className={`${data.timerMessage.timerBlink ? style.blink : ''}`}
+          variant={data.timerMessage.timerBlink ? 'ontime-filled' : 'ontime-subtle'}
+          leftIcon={data.timerMessage.timerBlink ? <IoSunny size='24px' /> : <IoSunnyOutline size='24px' />}
+          onClick={() => setMessage.timerBlink(!data.timerMessage.timerBlink)}
+          data-testid='toggle timer blink'
+        />
+        <Button
+          className={style.blackoutButton}
+          variant={data.timerMessage.timerBlackout ? 'ontime-filled' : 'ontime-subtle'}
+          leftIcon={data.timerMessage.timerBlackout ? <IoEye size='24px' /> : <IoEyeOffOutline size='24px' />}
+          onClick={() => setMessage.timerBlackout(!data.timerMessage.timerBlackout)}
+          data-testid='toggle timer blackout'
+        />
+      </div>
+      <div className={`${style.onAirSection} ${style.padTop}`}>
         <label className={style.label}>Toggle On Air state</label>
         <Button
           variant={data.onAir ? 'ontime-filled' : 'ontime-subtle'}
diff --git a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss
index 53cebb5d5..bc0d70d65 100644
--- a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss
+++ b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss
@@ -6,6 +6,7 @@
   overflow: hidden;
   width: 100%; /* restrict the page width to viewport */
   height: 100vh;
+  transition: opacity 0.5s ease-in-out;
 
   background: var(--background-color-override, $viewer-background-color);
   color: var(--color-override, $viewer-color);
diff --git a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
index aa7f102ab..5935d0f9e 100644
--- a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
+++ b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { EventData, Message, Playback, TimerType, ViewSettings } from 'ontime-types';
+import { EventData, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
@@ -14,7 +14,7 @@ import './MinimalTimer.scss';
 
 interface MinimalTimerProps {
   isMirrored: boolean;
-  pres: Message;
+  pres: TimerMessage;
   time: TimeManagerType;
   viewSettings: ViewSettings;
   general: EventData;
@@ -136,6 +136,9 @@ export default function MinimalTimer(props: MinimalTimerProps) {
   const showProgress = time.playback !== Playback.Stop;
   const showWarning = (time.current ?? 1) < viewSettings.warningThreshold;
   const showDanger = (time.current ?? 1) < viewSettings.dangerThreshold;
+  const showBlinking = pres.timerBlink;
+  const showBlackout = pres.timerBlackout;
+
   const timerColor = userOptions.textColour
     ? userOptions.textColour
     : showProgress && showDanger
@@ -153,8 +156,10 @@ export default function MinimalTimer(props: MinimalTimerProps) {
 
   const timerFontSize = (89 / (stageTimerCharacters - 1)) * (userOptions.size || 1);
 
-  const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
-  const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
+  const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''} ${
+    showBlinking ? (showOverlay ? '' : 'blink') : ''
+  }`;
+  const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''} ${showBlackout ? 'blackout' : ''}`;
 
   return (
     <div
@@ -169,11 +174,13 @@ export default function MinimalTimer(props: MinimalTimerProps) {
       <NavigationMenu />
       {!hideMessagesOverlay && (
         <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
-          <div className='message'>{pres.text}</div>
+          <div className={`message ${showBlinking ? 'blink' : ''}`}>{pres.text}</div>
         </div>
       )}
       {showEndMessage ? (
-        <div className='end-message'>{viewSettings.endMessage}</div>
+        <div className={`end-message ${showBlinking ? (showOverlay ? '' : 'blink') : ''}`}>
+          {viewSettings.endMessage}
+        </div>
       ) : (
         <div
           className={timerClasses}
diff --git a/apps/client/src/features/viewers/timer/Timer.scss b/apps/client/src/features/viewers/timer/Timer.scss
index 665add342..5d53cd3cb 100644
--- a/apps/client/src/features/viewers/timer/Timer.scss
+++ b/apps/client/src/features/viewers/timer/Timer.scss
@@ -6,6 +6,7 @@
   overflow: hidden;
   width: 100%; /* restrict the page width to viewport */
   height: 100vh;
+  transition: opacity 0.5s ease-in-out;
 
   font-family: var(--font-family-override, $viewer-font-family);
   background: var(--background-color-override, $viewer-background-color);
diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx
index 9929501d8..6e144651a 100644
--- a/apps/client/src/features/viewers/timer/Timer.tsx
+++ b/apps/client/src/features/viewers/timer/Timer.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { EventData, Message, Playback, TimerType, ViewSettings } from 'ontime-types';
+import { EventData, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
@@ -39,7 +39,7 @@ const titleVariants = {
 interface TimerProps {
   isMirrored: boolean;
   general: EventData;
-  pres: Message;
+  pres: TimerMessage;
   title: TitleManager;
   time: TimeManagerType;
   viewSettings: ViewSettings;
@@ -73,14 +73,16 @@ export default function Timer(props: TimerProps) {
   const showFinished = finished && (time.timerType !== TimerType.Clock || showEndMessage);
   const showWarning = (time.current ?? 1) < viewSettings.warningThreshold;
   const showDanger = (time.current ?? 1) < viewSettings.dangerThreshold;
+  const showBlinking = pres.timerBlink;
+  const showBlackout = pres.timerBlackout;
+  const showClock = time.timerType !== TimerType.Clock;
+
   const timerColor =
     showProgress && showDanger
       ? viewSettings.dangerColor
       : showProgress && showWarning
       ? viewSettings.warningColor
       : viewSettings.normalColor;
-  const showClock = time.timerType !== TimerType.Clock;
-  const baseClasses = `stage-timer ${isMirrored ? 'mirror' : ''}`;
 
   const stageTimer = getTimerByType(time);
   let display = formatTimerDisplay(stageTimer);
@@ -89,6 +91,7 @@ export default function Timer(props: TimerProps) {
     display = `-${display}`;
   }
 
+  const baseClasses = `stage-timer ${isMirrored ? 'mirror' : ''} ${showBlackout ? 'blackout' : ''}`;
   const timerFontSize = 89 / (stageTimerCharacters - 1);
   const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
 
@@ -96,7 +99,7 @@ export default function Timer(props: TimerProps) {
     <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
       <NavigationMenu />
       <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
-        <div className='message'>{pres.text}</div>
+        <div className={`message ${showBlinking ? 'blink' : ''}`}>{pres.text}</div>
       </div>
 
       <div className={`clock-container ${showClock ? '' : 'clock-container--hidden'}`}>
@@ -104,7 +107,7 @@ export default function Timer(props: TimerProps) {
         <div className='clock'>{clock}</div>
       </div>
 
-      <div className='timer-container'>
+      <div className={`timer-container ${showBlinking ? (showOverlay ? '' : 'blink') : ''}`}>
         {showEndMessage ? (
           <div className='end-message'>{viewSettings.endMessage}</div>
         ) : (
diff --git a/apps/client/src/theme/_v2Styles.scss b/apps/client/src/theme/_v2Styles.scss
index 2da81b12b..74b0c7771 100644
--- a/apps/client/src/theme/_v2Styles.scss
+++ b/apps/client/src/theme/_v2Styles.scss
@@ -3,6 +3,8 @@
 $transition-time-action: 0.1s;
 $transition-time-feedback: 0.3s;
 
+$blinking-time: 1.2s;
+
 $component-border-radius-md: 3px;
 $component-border-radius-sm: 2px;
 
@@ -51,3 +53,13 @@ $secondary-text-gray: $gray-400;
 $section-white: $ui-white;
 $inner-section-text-size: 14px;
 $text-body-size: 15px;
+
+.blink {
+  animation: blink $blinking-time linear infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 20%;
+  }
+}
\ No newline at end of file
diff --git a/apps/client/src/theme/_viewerCommon.scss b/apps/client/src/theme/_viewerCommon.scss
index d14ad5915..d0822b85c 100644
--- a/apps/client/src/theme/_viewerCommon.scss
+++ b/apps/client/src/theme/_viewerCommon.scss
@@ -1,3 +1,7 @@
 .mirror {
   transform: rotate(180deg);
 }
+
+.blackout {
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/apps/client/src/theme/_viewerDefs.scss b/apps/client/src/theme/_viewerDefs.scss
index 8bc21bd73..54dda0329 100644
--- a/apps/client/src/theme/_viewerDefs.scss
+++ b/apps/client/src/theme/_viewerDefs.scss
@@ -5,6 +5,7 @@
 // General
 $viewer-transition-time: 0.5s;
 
+
 // Text
 $viewer-font-family: "Open Sans", "Segoe UI", sans-serif; // --font-family-override
 $viewer-opacity-disabled: 0.6;
@@ -26,3 +27,4 @@ $element-border-radius: 8px;
 $timer-color: rgba(white, 80%); // --timer-color-override
 $timer-finished-color: $playback-negative;
 $timer-bold-font-family: "Arial Black", sans-serif; // --card-background-color-override
+
diff --git a/apps/server/src/controllers/integrationController.ts b/apps/server/src/controllers/integrationController.ts
index e0a184308..72093fbc5 100644
--- a/apps/server/src/controllers/integrationController.ts
+++ b/apps/server/src/controllers/integrationController.ts
@@ -32,6 +32,20 @@ export function dispatchFromAdapter(type: string, payload: unknown, source?: 'os
       break;
     }
 
+    case 'set-timer-blink': {
+      if (typeof payload !== 'undefined') {
+        messageService.setTimerBlink(Boolean(payload));
+      }
+      break;
+    }
+
+    case 'set-timer-blackout': {
+      if (typeof payload !== 'undefined') {
+        messageService.setTimerBlackout(Boolean(payload));
+      }
+      break;
+    }
+
     case 'set-timer-message-text': {
       if (typeof payload !== 'string') {
         throw new Error(`Unable to parse payload: ${payload}`);
diff --git a/apps/server/src/services/message-service/MessageService.ts b/apps/server/src/services/message-service/MessageService.ts
index 91c418950..c1878cee8 100644
--- a/apps/server/src/services/message-service/MessageService.ts
+++ b/apps/server/src/services/message-service/MessageService.ts
@@ -1,11 +1,12 @@
 import { Message } from 'ontime-types';
 
 import { eventStore } from '../../stores/EventStore.js';
+import { TimerMessage } from 'ontime-types/src/definitions/runtime/MessageControl.type.js';
 
 let instance;
 
 class MessageService {
-  timerMessage: Message;
+  timerMessage: TimerMessage;
   publicMessage: Message;
   lowerMessage: Message;
   onAir: boolean;
@@ -21,6 +22,8 @@ class MessageService {
     this.timerMessage = {
       text: '',
       visible: false,
+      timerBlink: false,
+      timerBlackout: false,
     };
 
     this.publicMessage = {
@@ -103,6 +106,34 @@ class MessageService {
     return this.getAll();
   }
 
+  /**
+   * @description set state of timer blink, toggles if parameters are offered
+   */
+
+  setTimerBlink(status?: boolean) {
+    if (typeof status === 'undefined') {
+      this.timerMessage.timerBlink = !this.timerMessage.timerBlink;
+    } else {
+      this.timerMessage.timerBlink = status;
+    }
+    eventStore.set('timerMessage', this.timerMessage);
+    return this.getAll();
+  }
+
+  /**
+   * @description set state of timer blackout, toggles if parameters are offered
+   */
+
+  setTimerBlackout(status?: boolean) {
+    if (typeof status === 'undefined') {
+      this.timerMessage.timerBlackout = !this.timerMessage.timerBlackout;
+    } else {
+      this.timerMessage.timerBlackout = status;
+    }
+    eventStore.set('timerMessage', this.timerMessage);
+    return this.getAll();
+  }
+
   /**
    * @description Returns feature data
    */
diff --git a/apps/test-db/db.json b/apps/test-db/db.json
index 7a55beca7..92586f98f 100644
--- a/apps/test-db/db.json
+++ b/apps/test-db/db.json
@@ -5,7 +5,7 @@
       "subtitle": "",
       "presenter": "",
       "note": "",
-      "endAction": "continue",
+      "endAction": "none",
       "timerType": "count-down",
       "timeStart": 32400000,
       "timeEnd": 36000000,
@@ -38,7 +38,7 @@
       "subtitle": "",
       "presenter": "",
       "note": "",
-      "endAction": "continue",
+      "endAction": "none",
       "timerType": "count-down",
       "timeStart": 36000000,
       "timeEnd": 39600000,
@@ -70,7 +70,7 @@
       "subtitle": "",
       "presenter": "",
       "note": "",
-      "endAction": "continue",
+      "endAction": "none",
       "timerType": "count-down",
       "timeStart": 39600000,
       "timeEnd": 720000,
diff --git a/e2e/tests/000-smoke-tests.spec.ts b/e2e/tests/000-smoke-tests.spec.ts
index ed3f39e56..abeeeb07b 100644
--- a/e2e/tests/000-smoke-tests.spec.ts
+++ b/e2e/tests/000-smoke-tests.spec.ts
@@ -7,11 +7,11 @@ test.describe('pages routes are available', () => {
       await page.goto('http://localhost:4001/editor');
 
       await expect(page).toHaveTitle(/ontime/);
-      await page.getByTestId('event-editor').click();
-      await page.getByTestId('panel-rundown').click();
-      await page.getByTestId('panel-timer-control').click();
-      await page.getByTestId('panel-messages-control').click();
-      await page.getByTestId('panel-info').click();
+      await expect(page.getByTestId('event-editor')).toBeVisible()
+      await expect(page.getByTestId('panel-rundown')).toBeVisible()
+      await expect(page.getByTestId('panel-timer-control')).toBeVisible()
+      await expect(page.getByTestId('panel-messages-control')).toBeVisible()
+      await expect(page.getByTestId('panel-info')).toBeVisible()
     });
     test('cuesheet', async ({ page }) => {
       await page.goto('http://localhost:4001/cuesheet');
@@ -24,19 +24,19 @@ test.describe('pages routes are available', () => {
   test.describe('detached views', () => {
     test('rundown', async ({ page }) => {
       await page.goto('http://localhost:4001/rundown');
-      await page.getByTestId('panel-rundown').click();
+      await expect(page.getByTestId('panel-rundown')).toBeVisible()
     });
     test('timer control', async ({ page }) => {
       await page.goto('http://localhost:4001/timercontrol');
-      await page.getByTestId('panel-timer-control').click();
+      await expect(page.getByTestId('panel-timer-control')).toBeVisible()
     });
     test('message control', async ({ page }) => {
       await page.goto('http://localhost:4001/messagecontrol');
-      await page.getByTestId('panel-messages-control').click();
+      await expect(page.getByTestId('panel-messages-control')).toBeVisible()
     });
     test('info', async ({ page }) => {
       await page.goto('http://localhost:4001/info');
-      await page.getByTestId('panel-info').click();
+      await expect(page.getByTestId('panel-info')).toBeVisible()
     });
   });
 });
diff --git a/e2e/tests/features/201-message-control.spec.ts b/e2e/tests/features/201-message-control.spec.ts
index d1e94abd1..b36d3c85a 100644
--- a/e2e/tests/features/201-message-control.spec.ts
+++ b/e2e/tests/features/201-message-control.spec.ts
@@ -6,34 +6,36 @@ test('test', async ({ context }) => {
 
   await editorPage.goto('http://localhost:4001/messagecontrol');
 
-  // stage timer message
-  await editorPage.getByPlaceholder('Shown in stage timer').click();
-  await expect(editorPage.getByPlaceholder('Shown in stage timer')).toBeEnabled();
-
-  await editorPage.getByPlaceholder('Shown in stage timer').fill('testing stage');
-  await editorPage.getByRole('button', { name: /toggle timer screen message/i }).click({ timeout: 5000 });
-
-  await featurePage.goto('http://localhost:4001/timer');
-  await featurePage.getByText('testing stage').click();
-
   // public screen message
   await editorPage.getByPlaceholder('Shown in public and backstage screens').click();
   await editorPage.getByPlaceholder('Shown in public and backstage screens').fill('testing public');
   await editorPage.getByRole('button', { name: 'Toggle Public / Backstage screen message' }).click();
 
   await featurePage.goto('http://localhost:4001/public');
-  await featurePage.getByText('testing public').click({ timeout: 10000 });
+  await featurePage.waitForLoadState('load', { timeout: 5000 });
+  await featurePage.getByText('testing public').click({ timeout: 5000 });
 
   // lower third message
   await editorPage.getByPlaceholder('Shown in lower third').click();
   await editorPage.getByPlaceholder('Shown in lower third').fill('testing lower');
   await editorPage.getByRole('button', { name: /toggle lower third message/i }).click();
+
   await featurePage.goto('http://localhost:4001/lower');
-  // increase the timeout to accommodate animation
-  await featurePage.getByText('testing lower').click({ timeout: 10000 });
+  await featurePage.waitForLoadState('load', { timeout: 5000 });
+  await featurePage.getByText('testing lower').click({ timeout: 5000 });
+
+  // stage timer message
+  await editorPage.getByPlaceholder('Shown in stage timer').click();
+  await editorPage.getByPlaceholder('Shown in stage timer').fill('testing stage');
+  await editorPage.getByRole('button', { name: /toggle timer message/i }).click({ timeout: 5000 });
+
+  await featurePage.goto('http://localhost:4001/timer');
+  await featurePage.waitForLoadState('load', { timeout: 5000 });
+  await featurePage.getByText('testing stage').click();
 
   // on air state
   await editorPage.getByTestId('toggle on air').click();
+
   await featurePage.goto('http://localhost:4001/studio');
   await featurePage.getByText('ON AIR').click();
   const onAirActive = await featurePage.locator('data-testid=on-air-enabled');
diff --git a/e2e/tests/fixtures/test-db.json b/e2e/tests/fixtures/test-db.json
index ef3739e6e..f9f9c6692 100644
--- a/e2e/tests/fixtures/test-db.json
+++ b/e2e/tests/fixtures/test-db.json
@@ -5,7 +5,7 @@
       "subtitle": "",
       "presenter": "",
       "note": "",
-      "endAction": "continue",
+      "endAction": "none",
       "timerType": "count-down",
       "timeStart": 32400000,
       "timeEnd": 36000000,
@@ -38,7 +38,7 @@
       "subtitle": "",
       "presenter": "",
       "note": "",
-      "endAction": "continue",
+      "endAction": "none",
       "timerType": "count-down",
       "timeStart": 36000000,
       "timeEnd": 39600000,
@@ -70,7 +70,7 @@
       "subtitle": "",
       "presenter": "",
       "note": "",
-      "endAction": "continue",
+      "endAction": "none",
       "timerType": "count-down",
       "timeStart": 39600000,
       "timeEnd": 720000,
diff --git a/package.json b/package.json
index e21a04e30..5e3642f7f 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "cleanup": "rm -rf node_modules && rm -rf **/node_modules && rm -rf **/**/node_modules"
   },
   "devDependencies": {
-    "@playwright/test": "^1.32.3",
+    "@playwright/test": "^1.34.3",
     "@types/node": "^18.11.18",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
diff --git a/packages/types/src/definitions/runtime/MessageControl.type.ts b/packages/types/src/definitions/runtime/MessageControl.type.ts
index bbedf6828..3020f421f 100644
--- a/packages/types/src/definitions/runtime/MessageControl.type.ts
+++ b/packages/types/src/definitions/runtime/MessageControl.type.ts
@@ -2,3 +2,8 @@ export type Message = {
   text: string;
   visible: boolean;
 };
+
+export type TimerMessage = Message & {
+  timerBlink: boolean;
+  timerBlackout: boolean;
+}
diff --git a/packages/types/src/definitions/runtime/RuntimeStore.type.ts b/packages/types/src/definitions/runtime/RuntimeStore.type.ts
index f5cba42d6..591082f0e 100644
--- a/packages/types/src/definitions/runtime/RuntimeStore.type.ts
+++ b/packages/types/src/definitions/runtime/RuntimeStore.type.ts
@@ -1,5 +1,5 @@
 import { Playback } from './Playback.type.js';
-import { Message } from './MessageControl.type.js';
+import { Message, TimerMessage } from './MessageControl.type.js';
 import { TimerState } from './TimerState.type.js';
 import { TitleBlock } from './TitleBlock.type.js';
 import { Loaded } from './Playlist.type.js';
@@ -10,7 +10,7 @@ export type RuntimeStore = {
   playback: Playback;
 
   // messages service
-  timerMessage: Message;
+  timerMessage: TimerMessage;
   publicMessage: Message;
   lowerMessage: Message;
   onAir: boolean;
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index c6fde6c19..302a3fe92 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -2,7 +2,7 @@ import { Alias } from './definitions/core/Alias.type.js';
 import { DatabaseModel } from './definitions/DataModel.type.js';
 import { EndAction } from './definitions/EndAction.type.js';
 import { EventData } from './definitions/core/EventData.type.js';
-import { Message } from './definitions/runtime/MessageControl.type.js';
+import { Message, TimerMessage } from './definitions/runtime/MessageControl.type.js';
 import {
   OntimeBaseEvent,
   OntimeBlock,
@@ -61,6 +61,7 @@ export { Playback };
 export { TimerLifeCycle };
 
 export type { Message };
+export type { TimerMessage };
 export type { Loaded };
 export type { RuntimeStore };
 export type { TimerState };
diff --git a/playwright.config.ts b/playwright.config.ts
index 42a7b257b..bb29eb601 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -23,11 +23,15 @@ const config: PlaywrightTestConfig = {
   },
   use: {
     screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
     viewport: { width: 1920, height: 1080 },
     actionTimeout: 5000,
     baseURL: 'http://localhost:4001',
     ignoreHTTPSErrors: true,
     trace: 'on-first-retry',
+    launchOptions: {
+      slowMo: process.env.CI ? undefined : 250
+    }
   },
   projects: [
     {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2eb39434..e07297b7d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,7 +4,7 @@ importers:
 
   .:
     specifiers:
-      '@playwright/test': ^1.32.3
+      '@playwright/test': ^1.34.3
       '@types/node': ^18.11.18
       '@typescript-eslint/eslint-plugin': ^5.48.0
       '@typescript-eslint/parser': ^5.48.0
@@ -16,7 +16,7 @@ importers:
       turbo: ^1.8.8
       typescript: ^4.8.3
     devDependencies:
-      '@playwright/test': 1.32.3
+      '@playwright/test': 1.34.3
       '@types/node': 18.11.18
       '@typescript-eslint/eslint-plugin': 5.48.0_k73wpmdolxikpyqun3p36akaaq
       '@typescript-eslint/parser': 5.48.0_iukboom6ndih5an6iafl45j2fe
@@ -2167,13 +2167,13 @@ packages:
       fastq: 1.15.0
     dev: true
 
-  /@playwright/test/1.32.3:
-    resolution: {integrity: sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==}
+  /@playwright/test/1.34.3:
+    resolution: {integrity: sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
-      '@types/node': 18.15.11
-      playwright-core: 1.32.3
+      '@types/node': 18.16.16
+      playwright-core: 1.34.3
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -2804,6 +2804,10 @@ packages:
     resolution: {integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==}
     dev: true
 
+  /@types/node/18.16.16:
+    resolution: {integrity: sha512-NpaM49IGQQAUlBhHMF82QH80J08os4ZmyF9MkpCzWAGuOHqE4gTEbhzd7L3l5LmWuZ6E0OiC1FweQ4tsiW35+g==}
+    dev: true
+
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
@@ -6786,8 +6790,8 @@ packages:
       pathe: 1.1.0
     dev: true
 
-  /playwright-core/1.32.3:
-    resolution: {integrity: sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg==}
+  /playwright-core/1.34.3:
+    resolution: {integrity: sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true