From facce4f096b5eec901e2f385e1b0fc6be44de2c1 Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Mon, 20 Nov 2023 17:44:39 +0100
Subject: [PATCH 01/24] trigger doRoll if clock is less than startAt

---
 apps/server/src/services/TimerService.ts      |  2 +-
 .../src/services/__tests__/rollUtils.test.ts  | 20 +++++++++++++++++++
 apps/server/src/services/rollUtils.ts         |  7 ++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/apps/server/src/services/TimerService.ts b/apps/server/src/services/TimerService.ts
index 4f3714cc0..64c8ae577 100644
--- a/apps/server/src/services/TimerService.ts
+++ b/apps/server/src/services/TimerService.ts
@@ -339,7 +339,7 @@ export class TimerService {
         this.timer.expectedFinish >= this.timer.startedAt
           ? this.timer.expectedFinish
           : this.timer.expectedFinish + dayInMs,
-
+      _startAt: this.timer.startedAt,
       clock: this.timer.clock,
       secondaryTimer: this.timer.secondaryTimer,
       secondaryTarget: this.secondaryTarget,
diff --git a/apps/server/src/services/__tests__/rollUtils.test.ts b/apps/server/src/services/__tests__/rollUtils.test.ts
index 329ece996..5622661c6 100644
--- a/apps/server/src/services/__tests__/rollUtils.test.ts
+++ b/apps/server/src/services/__tests__/rollUtils.test.ts
@@ -703,4 +703,24 @@ describe('typical scenarios', () => {
 
     expect(updateRoll(timers)).toStrictEqual(expected);
   });
+
+  it('rolls backwards', () => {
+    const timers = {
+      selectedEventId: '1',
+      current: 11,
+      _startAt: 10,
+      _finishAt: 15,
+      clock: 9,
+      secondaryTimer: null,
+      secondaryTarget: null,
+    };
+
+    const expected = {
+      updatedTimer: timers._finishAt - timers.clock,
+      updatedSecondaryTimer: null,
+      doRollLoad: true,
+      isFinished: false,
+    };
+    expect(updateRoll(timers)).toStrictEqual(expected);
+  });
 });
diff --git a/apps/server/src/services/rollUtils.ts b/apps/server/src/services/rollUtils.ts
index 98a6feac2..b3c59c7f7 100644
--- a/apps/server/src/services/rollUtils.ts
+++ b/apps/server/src/services/rollUtils.ts
@@ -153,6 +153,7 @@ type CurrentTimers = {
   selectedEventId: string | null;
   current: number | null;
   _finishAt: number | null;
+  _startAt: number | null;
   clock: number | null;
   secondaryTimer: number | null;
   secondaryTarget: number | null;
@@ -164,7 +165,7 @@ type CurrentTimers = {
  * @returns {object} object with selection variables
  */
 export const updateRoll = (currentTimers: CurrentTimers) => {
-  const { selectedEventId, current, _finishAt, clock, secondaryTimer, secondaryTarget } = currentTimers;
+  const { selectedEventId, current, _finishAt, _startAt, clock, secondaryTimer, secondaryTarget } = currentTimers;
 
   // timers
   let updatedTimer = current;
@@ -182,10 +183,14 @@ export const updateRoll = (currentTimers: CurrentTimers) => {
       updatedTimer -= dayInMs;
     }
 
+    console.log(Math.floor(_startAt / 1000), Math.floor(clock / 1000));
+
     if (updatedTimer < 0) {
       isPrimaryFinished = true;
       // we need a new event
       doRollLoad = true;
+    } else if (clock < _startAt) {
+      doRollLoad = true;
     }
   } else if (secondaryTimer >= 0) {
     // if secondaryTimer is running we are in waiting to roll

From 22d89c6fbca5f2035ee1e4abe36421c6c285edfe Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Mon, 20 Nov 2023 17:51:50 +0100
Subject: [PATCH 02/24] add _startAt to all tests

---
 apps/server/src/services/__tests__/rollUtils.test.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/server/src/services/__tests__/rollUtils.test.ts b/apps/server/src/services/__tests__/rollUtils.test.ts
index 5622661c6..7c1b4a7c8 100644
--- a/apps/server/src/services/__tests__/rollUtils.test.ts
+++ b/apps/server/src/services/__tests__/rollUtils.test.ts
@@ -562,6 +562,7 @@ describe('typical scenarios', () => {
       selectedEventId: '1',
       current: 10,
       _finishAt: 15,
+      _startAt: 9,
       clock: 11,
       secondaryTimer: null,
       secondaryTarget: null,
@@ -589,6 +590,7 @@ describe('typical scenarios', () => {
       selectedEventId: null,
       current: null,
       _finishAt: null,
+      _startAt: null,
       clock: 11,
       secondaryTimer: 1,
       secondaryTarget: 15,
@@ -609,6 +611,7 @@ describe('typical scenarios', () => {
       selectedEventId: '1',
       current: 10,
       _finishAt: 11,
+      _startAt: 9,
       clock: 12,
       secondaryTimer: null,
       secondaryTarget: null,
@@ -629,6 +632,7 @@ describe('typical scenarios', () => {
       selectedEventId: null,
       current: null,
       _finishAt: null,
+      _startAt: null,
       clock: 16,
       secondaryTimer: 1,
       secondaryTarget: 15,
@@ -649,6 +653,7 @@ describe('typical scenarios', () => {
       selectedEventId: null,
       current: null,
       _finishAt: null,
+      _startAt: null,
       clock: 15,
       secondaryTimer: 0,
       secondaryTarget: 15,
@@ -669,6 +674,7 @@ describe('typical scenarios', () => {
       selectedEventId: '1',
       current: 25,
       _finishAt: 10 + dayInMs,
+      _startAt: 10,
       clock: dayInMs - 10,
       secondaryTimer: null,
       secondaryTarget: null,
@@ -689,6 +695,7 @@ describe('typical scenarios', () => {
       selectedEventId: '1',
       current: dayInMs,
       _finishAt: 10 + dayInMs,
+      _startAt: 10,
       clock: 10,
       secondaryTimer: null,
       secondaryTarget: null,

From 8cabb347e9ecd47152ff859692350383e32b805a Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Mon, 20 Nov 2023 18:24:11 +0100
Subject: [PATCH 03/24] remove test log

---
 apps/server/src/services/rollUtils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/server/src/services/rollUtils.ts b/apps/server/src/services/rollUtils.ts
index b3c59c7f7..1e82eecb4 100644
--- a/apps/server/src/services/rollUtils.ts
+++ b/apps/server/src/services/rollUtils.ts
@@ -183,7 +183,6 @@ export const updateRoll = (currentTimers: CurrentTimers) => {
       updatedTimer -= dayInMs;
     }
 
-    console.log(Math.floor(_startAt / 1000), Math.floor(clock / 1000));
 
     if (updatedTimer < 0) {
       isPrimaryFinished = true;

From e6b4f537af47a1e9a71bcb8d07af8cbc00e30361 Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Wed, 22 Nov 2023 19:05:08 +0100
Subject: [PATCH 04/24] rollSkipLimit

---
 apps/server/src/config/config.js              |  1 +
 .../src/services/__tests__/rollUtils.test.ts  | 61 +++++++++++++++++++
 apps/server/src/services/rollUtils.ts         |  6 +-
 3 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/apps/server/src/config/config.js b/apps/server/src/config/config.js
index f11da3cdc..42ec30e52 100644
--- a/apps/server/src/config/config.js
+++ b/apps/server/src/config/config.js
@@ -9,4 +9,5 @@ export const config = {
     filename: 'override.css',
   },
   restoreFile: 'ontime.restore',
+  rollSkipLimit: 3 * 32,
 };
diff --git a/apps/server/src/services/__tests__/rollUtils.test.ts b/apps/server/src/services/__tests__/rollUtils.test.ts
index 7c1b4a7c8..ced5f1adc 100644
--- a/apps/server/src/services/__tests__/rollUtils.test.ts
+++ b/apps/server/src/services/__tests__/rollUtils.test.ts
@@ -2,6 +2,7 @@ import { OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
 
 import { getRollTimers, normaliseEndTime, sortArrayByProperty, updateRoll } from '../rollUtils.js';
+import { config } from '../../config/config.js';
 
 // test sortArrayByProperty()
 describe('sort simple arrays of objects', () => {
@@ -585,6 +586,66 @@ describe('typical scenarios', () => {
     expect(updateRoll(timers)).toStrictEqual(expected);
   });
 
+  it('dose not skip isFinished under limit', () => {
+    const timers = {
+      selectedEventId: '1',
+      current: 13,
+      _finishAt: 15,
+      _startAt: 9,
+      clock: 14,
+      secondaryTimer: null,
+      secondaryTarget: null,
+    };
+
+    const expected = {
+      updatedTimer: timers._finishAt - timers.clock,
+      updatedSecondaryTimer: null,
+      doRollLoad: false,
+      isFinished: false,
+    };
+
+    expect(updateRoll(timers)).toStrictEqual(expected);
+
+    // test that it can jump time
+    timers._finishAt = 14;
+    timers.clock += config.rollSkipLimit - 1;
+    expected.updatedTimer = timers._finishAt - timers.clock;
+    expected.doRollLoad = true;
+    expected.isFinished = true;
+
+    expect(updateRoll(timers)).toStrictEqual(expected);
+  });
+
+  it('dose skips isFinished over limit', () => {
+    const timers = {
+      selectedEventId: '1',
+      current: 13,
+      _finishAt: 15,
+      _startAt: 9,
+      clock: 14,
+      secondaryTimer: null,
+      secondaryTarget: null,
+    };
+
+    const expected = {
+      updatedTimer: timers._finishAt - timers.clock,
+      updatedSecondaryTimer: null,
+      doRollLoad: false,
+      isFinished: false,
+    };
+
+    expect(updateRoll(timers)).toStrictEqual(expected);
+
+    // test that it can jump time
+    timers._finishAt = 14;
+    timers.clock += config.rollSkipLimit + 1;
+    expected.updatedTimer = timers._finishAt - timers.clock;
+    expected.doRollLoad = true;
+    expected.isFinished = false;
+
+    expect(updateRoll(timers)).toStrictEqual(expected);
+  });
+
   it('it updates secondary timer', () => {
     const timers = {
       selectedEventId: null,
diff --git a/apps/server/src/services/rollUtils.ts b/apps/server/src/services/rollUtils.ts
index 1e82eecb4..67c7363fa 100644
--- a/apps/server/src/services/rollUtils.ts
+++ b/apps/server/src/services/rollUtils.ts
@@ -1,5 +1,6 @@
 import { OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
+import { config } from '../config/config.js';
 
 /**
  * handle events that span over midnight
@@ -167,6 +168,7 @@ type CurrentTimers = {
 export const updateRoll = (currentTimers: CurrentTimers) => {
   const { selectedEventId, current, _finishAt, _startAt, clock, secondaryTimer, secondaryTarget } = currentTimers;
 
+  console.log(currentTimers);
   // timers
   let updatedTimer = current;
   let updatedSecondaryTimer = secondaryTimer;
@@ -183,12 +185,12 @@ export const updateRoll = (currentTimers: CurrentTimers) => {
       updatedTimer -= dayInMs;
     }
 
-
     if (updatedTimer < 0) {
-      isPrimaryFinished = true;
+      if (Math.abs(updatedTimer) < config.rollSkipLimit) isPrimaryFinished = true; //Dont trigger Finished if we are over the skip limit
       // we need a new event
       doRollLoad = true;
     } else if (clock < _startAt) {
+      // we have rolled back befor this evet start so we need a new one
       doRollLoad = true;
     }
   } else if (secondaryTimer >= 0) {

From b11041938d43d821be78c12afeb27c806ccfdbc8 Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Fri, 24 Nov 2023 14:05:12 +0100
Subject: [PATCH 05/24] self documenting

---
 apps/server/src/services/rollUtils.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/server/src/services/rollUtils.ts b/apps/server/src/services/rollUtils.ts
index 67c7363fa..3a5cd13c4 100644
--- a/apps/server/src/services/rollUtils.ts
+++ b/apps/server/src/services/rollUtils.ts
@@ -168,7 +168,6 @@ type CurrentTimers = {
 export const updateRoll = (currentTimers: CurrentTimers) => {
   const { selectedEventId, current, _finishAt, _startAt, clock, secondaryTimer, secondaryTarget } = currentTimers;
 
-  console.log(currentTimers);
   // timers
   let updatedTimer = current;
   let updatedSecondaryTimer = secondaryTimer;
@@ -186,7 +185,10 @@ export const updateRoll = (currentTimers: CurrentTimers) => {
     }
 
     if (updatedTimer < 0) {
-      if (Math.abs(updatedTimer) < config.rollSkipLimit) isPrimaryFinished = true; //Dont trigger Finished if we are over the skip limit
+      const hasSkipped = Math.abs(updatedTimer) > config.rollSkipLimit;
+      if (!hasSkipped) {
+        isPrimaryFinished = true;
+      }
       // we need a new event
       doRollLoad = true;
     } else if (clock < _startAt) {

From 41c26778cbe76c7eb939f0b6d188ad261e17afd3 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 25 Nov 2023 21:55:27 +0100
Subject: [PATCH 06/24] fix: prevent shortcut collision with menu (#619)

---
 .../src/common/components/navigation-menu/NavigationMenu.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
index 7924291ba..8d72fed80 100644
--- a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
+++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
@@ -12,7 +12,6 @@ import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
 import useFullscreen from '../../hooks/useFullscreen';
-import { useKeyDown } from '../../hooks/useKeyDown';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 
 import RenameClientModal from './rename-client-modal/RenameClientModal';
@@ -28,13 +27,14 @@ function NavigationMenu() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement | null>(null);
+
   useClickOutside(menuRef, () => setShowMenu(false));
 
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const toggleMenu = () => setShowMenu((prev) => !prev);
-  useKeyDown(toggleMenu, ' ', { isDisabled: searchParams.get('edit') === 'true' || isOpen });
 
+  // show on mouse move
   useEffect(() => {
     let fadeOut: NodeJS.Timeout | null = null;
     const setShowMenuTrue = () => {

From 0660f014c8f6fe4b620e9ad1707c187528bd3a73 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 25 Nov 2023 22:04:47 +0100
Subject: [PATCH 07/24] fix: prevent autocomplete (#620)

---
 apps/client/src/common/components/input/time-input/TimeInput.tsx | 1 +
 .../src/features/event-editor/composite/CountedTextInput.tsx     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/client/src/common/components/input/time-input/TimeInput.tsx b/apps/client/src/common/components/input/time-input/TimeInput.tsx
index 04fdf5b31..d584b8f02 100644
--- a/apps/client/src/common/components/input/time-input/TimeInput.tsx
+++ b/apps/client/src/common/components/input/time-input/TimeInput.tsx
@@ -212,6 +212,7 @@ export default function TimeInput(props: TimeInputProps) {
         onKeyDown={onKeyDownHandler}
         value={value}
         maxLength={8}
+        autoComplete='off'
       />
     </InputGroup>
   );
diff --git a/apps/client/src/features/event-editor/composite/CountedTextInput.tsx b/apps/client/src/features/event-editor/composite/CountedTextInput.tsx
index 7c9ebf351..e9dc52cc6 100644
--- a/apps/client/src/features/event-editor/composite/CountedTextInput.tsx
+++ b/apps/client/src/features/event-editor/composite/CountedTextInput.tsx
@@ -40,6 +40,7 @@ export default function CountedTextInput(props: CountedTextInputProps) {
         onChange={onChange}
         onBlur={onBlur}
         onKeyDown={onKeyDown}
+        autoComplete='off'
       />
     </div>
   );

From db56ac80497c71b71b9f6c76d35dcb3ad3b0cd32 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 25 Nov 2023 22:28:54 +0100
Subject: [PATCH 08/24] style: separe arguments in copy fields (#621)

---
 apps/client/src/features/event-editor/EventEditor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/features/event-editor/EventEditor.tsx b/apps/client/src/features/event-editor/EventEditor.tsx
index 1163b9a01..f9fe8f4cc 100644
--- a/apps/client/src/features/event-editor/EventEditor.tsx
+++ b/apps/client/src/features/event-editor/EventEditor.tsx
@@ -73,8 +73,8 @@ export default function EventEditor() {
         handleSubmit={handleSubmit}
       >
         <CopyTag label='Event ID'>{event.id}</CopyTag>
-        <CopyTag label='OSC trigger by id'>{`/ontime/gotoid/${event.id}`}</CopyTag>
-        <CopyTag label='OSC trigger by cue'>{`/ontime/gotocue/${event.cue}`}</CopyTag>
+        <CopyTag label='OSC trigger by id'>{`/ontime/gotoid "${event.id}"`}</CopyTag>
+        <CopyTag label='OSC trigger by cue'>{`/ontime/gotocue "${event.cue}"`}</CopyTag>
       </EventEditorDataRight>
     </div>
   );

From 1ccf2108ebe31d3bb11c96b5319555b0f2f87f99 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 25 Nov 2023 22:31:09 +0100
Subject: [PATCH 09/24] style: tweaks on info data (#622)

---
 apps/client/src/features/info/Info.module.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/features/info/Info.module.scss b/apps/client/src/features/info/Info.module.scss
index fadabd735..b64b5b141 100644
--- a/apps/client/src/features/info/Info.module.scss
+++ b/apps/client/src/features/info/Info.module.scss
@@ -5,6 +5,7 @@
   display: flex;
   justify-content: space-between;
   gap: 1rem;
+  font-size: $inner-section-text-size;
 
   .title {
     white-space: nowrap;
@@ -14,12 +15,12 @@
 
   .selected {
     min-width: max-content;
-    font-size: $inner-section-text-size;
     color: $label-gray;
   }
 }
 
 .description {
+  font-size: $inner-section-text-size;
   color: $label-gray;
   white-space: nowrap;
   overflow: hidden;

From 9e285ee8f3a7f95527afadf34634243c21441e1c Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 25 Nov 2023 22:31:22 +0100
Subject: [PATCH 10/24] chore: version bump (#616)

---
 apps/client/package.json   | 2 +-
 apps/electron/package.json | 2 +-
 apps/server/package.json   | 2 +-
 package.json               | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/client/package.json b/apps/client/package.json
index c89afbdf3..68b686d00 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "2.16.2",
+  "version": "2.21.3",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.7.0",
diff --git a/apps/electron/package.json b/apps/electron/package.json
index 33e8c5d24..0f7fdc9e9 100644
--- a/apps/electron/package.json
+++ b/apps/electron/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "2.16.2",
+  "version": "2.21.3",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",
diff --git a/apps/server/package.json b/apps/server/package.json
index 58cbe9152..5476b829d 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "2.16.2",
+  "version": "2.21.3",
   "exports": "./src/index.js",
   "dependencies": {
     "body-parser": "^1.20.0",
diff --git a/package.json b/package.json
index b4cb9d1df..766cafbc9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "2.16.2",
+  "version": "2.21.3",
   "description": "Time keeping for live events",
   "keywords": [
     "lighdev",

From f2504072ce576444617a0a5e91aafcb4e5694c9a Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 26 Nov 2023 19:02:16 +0100
Subject: [PATCH 11/24] feat: add change endpoint to ws (#618)

* feat: add change endpoint to ws
---
 apps/server/src/adapters/OscAdapter.ts        | 30 +++++++++++++++++--
 apps/server/src/adapters/WebsocketAdapter.ts  |  3 +-
 apps/server/src/app.ts                        |  6 ++--
 .../src/controllers/integrationController.ts  | 29 ++++++++----------
 4 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/apps/server/src/adapters/OscAdapter.ts b/apps/server/src/adapters/OscAdapter.ts
index 6bbdc0a7b..d07896983 100644
--- a/apps/server/src/adapters/OscAdapter.ts
+++ b/apps/server/src/adapters/OscAdapter.ts
@@ -3,7 +3,7 @@ import { LogOrigin, OSCSettings } from 'ontime-types';
 import { Server } from 'node-osc';
 
 import { IAdapter } from './IAdapter.js';
-import { dispatchFromAdapter } from '../controllers/integrationController.js';
+import { dispatchFromAdapter, type ChangeOptions } from '../controllers/integrationController.js';
 import { logger } from '../classes/Logger.js';
 
 export class OscServer implements IAdapter {
@@ -36,12 +36,36 @@ export class OscServer implements IAdapter {
         return;
       }
 
+      let transformedPayload: unknown = args;
+      // we need to transform the params for the change endpoint
+      // OSC: ontime/change/{eventID}/{propertyName} value
+      if (path === 'change') {
+        if (params.length < 2) {
+          logger.error(LogOrigin.Rx, 'OSC IN: No params provided for change');
+          return;
+        }
+
+        if (args === undefined) {
+          logger.error(LogOrigin.Rx, 'OSC IN: No valid payload provided for change');
+          return;
+        }
+
+        const eventId = params[0];
+        const property = params[1];
+        const value: string | number | boolean = args as string | number | boolean;
+
+        transformedPayload = {
+          eventId,
+          property,
+          value,
+        } satisfies ChangeOptions;
+      }
+
       try {
         const reply = dispatchFromAdapter(
           path,
           {
-            payload: args,
-            params,
+            payload: transformedPayload,
           },
           'osc',
         );
diff --git a/apps/server/src/adapters/WebsocketAdapter.ts b/apps/server/src/adapters/WebsocketAdapter.ts
index 53fe92b80..0383a1bf6 100644
--- a/apps/server/src/adapters/WebsocketAdapter.ts
+++ b/apps/server/src/adapters/WebsocketAdapter.ts
@@ -17,6 +17,7 @@
 import { LogOrigin } from 'ontime-types';
 
 import { WebSocket, WebSocketServer } from 'ws';
+import type { Server } from 'http';
 
 import getRandomName from '../utils/getRandomName.js';
 import { IAdapter } from './IAdapter.js';
@@ -43,7 +44,7 @@ export class SocketServer implements IAdapter {
     this.wss = null;
   }
 
-  init(server) {
+  init(server: Server) {
     this.wss = new WebSocketServer({ path: '/ws', server });
 
     this.wss.on('connection', (ws) => {
diff --git a/apps/server/src/app.ts b/apps/server/src/app.ts
index 9f142c381..2d0b359d2 100644
--- a/apps/server/src/app.ts
+++ b/apps/server/src/app.ts
@@ -3,7 +3,7 @@ import { LogOrigin, OSCSettings } from 'ontime-types';
 import 'dotenv/config';
 import express from 'express';
 import expressStaticGzip from 'express-static-gzip';
-import http from 'http';
+import http, { type Server } from 'http';
 import cors from 'cors';
 
 // import utils
@@ -107,8 +107,8 @@ enum OntimeStartOrder {
 }
 
 let step = OntimeStartOrder.InitAssets;
-let expressServer = null;
-let oscServer = null;
+let expressServer: Server | null = null;
+let oscServer: OscServer | null = null;
 
 const checkStart = (currentState: OntimeStartOrder) => {
   if (step !== currentState) {
diff --git a/apps/server/src/controllers/integrationController.ts b/apps/server/src/controllers/integrationController.ts
index a37579a37..243d60b65 100644
--- a/apps/server/src/controllers/integrationController.ts
+++ b/apps/server/src/controllers/integrationController.ts
@@ -1,5 +1,3 @@
-import { OntimeEvent } from 'ontime-types';
-
 import { messageService } from '../services/message-service/MessageService.js';
 import { PlaybackService } from '../services/PlaybackService.js';
 import { eventStore } from '../stores/EventStore.js';
@@ -7,19 +5,23 @@ import { parse, updateEvent } from './integrationController.config.js';
 import { isKeyOfType } from 'ontime-types/src/utils/guards.js';
 import { event } from '../models/eventsDefinition.js';
 
+export type ChangeOptions = {
+  eventId: string;
+  property: string;
+  value: unknown;
+};
+
 //TODO: re-throwing the error does not add any extra information or value
 export function dispatchFromAdapter(
   type: string,
   args: {
     payload: unknown;
-    params?: Array<string>;
   },
   _source?: 'osc' | 'ws',
 ) {
   const payload = args.payload;
   const typeComponents = type.toLowerCase().split('/');
   const mainType = typeComponents[0];
-  const params = args.params || [];
 
   switch (mainType) {
     case 'test-ontime': {
@@ -267,21 +269,14 @@ export function dispatchFromAdapter(
       return { topic: 'timer', payload: timer };
     }
 
-    // ontime/change/{eventID}/{propertyName}
+    // WS: {type: 'change', payload: { eventId, property, value } }
     case 'change': {
-      if (params.length < 2) {
-        throw new Error('Too few parameters, 3 expected');
+      const { eventId, property, value } = payload as ChangeOptions;
+      if (!isKeyOfType(property, event)) {
+        throw new Error(`Cannot update unknown event property ${property}`);
       }
-      if (payload === undefined) {
-        throw new Error('No payload found');
-      }
-      const eventID = params[0];
-      const propertyName = params[1] as keyof OntimeEvent;
-      if (!isKeyOfType(propertyName, event)) {
-        throw new Error(`Cannot update unknown event property ${propertyName}`);
-      }
-      const parsedPayload = parse(propertyName, payload);
-      return updateEvent(eventID, propertyName, parsedPayload);
+      const parsedPayload = parse(property, value);
+      return updateEvent(eventId, property, parsedPayload);
     }
 
     default: {

From 27f6d106770e931beef8b47d80bf7c0b5cc29d2a Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Sun, 26 Nov 2023 20:41:01 +0100
Subject: [PATCH 12/24] actually disable/enable osc output

---
 .../src/services/integration-service/OscIntegration.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/server/src/services/integration-service/OscIntegration.ts b/apps/server/src/services/integration-service/OscIntegration.ts
index f9c730a28..8c3071cf5 100644
--- a/apps/server/src/services/integration-service/OscIntegration.ts
+++ b/apps/server/src/services/integration-service/OscIntegration.ts
@@ -26,7 +26,15 @@ export class OscIntegration implements IIntegration {
    * Initializes oscClient
    */
   init(config: OSCSettings) {
-    const { targetIP, portOut, subscriptions } = config;
+    const { targetIP, portOut, subscriptions, enabledOut } = config;
+
+    if (!enabledOut) {
+      this.oscClient?.close();
+      return {
+        success: false,
+        message: 'OSC output disabled',
+      };
+    }
 
     this.initSubscriptions(subscriptions);
 

From 715fa664447cab273cef4b51b3c88a02d35ec4ac Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Sun, 26 Nov 2023 20:41:33 +0100
Subject: [PATCH 13/24] disable/enable from ui without restart

---
 apps/server/src/controllers/ontimeController.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/server/src/controllers/ontimeController.ts b/apps/server/src/controllers/ontimeController.ts
index 9ebb2ae1f..fd2463791 100644
--- a/apps/server/src/controllers/ontimeController.ts
+++ b/apps/server/src/controllers/ontimeController.ts
@@ -16,6 +16,7 @@ import { deleteAllEvents, notifyChanges } from '../services/rundown-service/Rund
 import { deepmerge } from 'ontime-utils';
 import { runtimeCacheStore } from '../stores/cachingStore.js';
 import { delayedRundownCacheKey } from '../services/rundown-service/delayedRundown.utils.js';
+import { integrationService } from '../services/integration-service/IntegrationService.js';
 
 // Create controller for GET request to '/ontime/poll'
 // Returns data for current state
@@ -315,10 +316,16 @@ export const postOSC = async (req, res) => {
     const oscSettings = req.body;
     await DataProvider.setOsc(oscSettings);
 
+    integrationService.unregister(oscIntegration);
+
     // TODO: this update could be more granular, checking that relevant data was changed
-    const { message } = oscIntegration.init(oscSettings);
+    const { success, message } = oscIntegration.init(oscSettings);
     logger.info(LogOrigin.Tx, message);
 
+    if (success) {
+      integrationService.register(oscIntegration);
+    }
+
     res.send(oscSettings).status(200);
   } catch (error) {
     res.status(400).send({ message: error.toString() });

From edb79d581910a046c87aa3d96359d92e1d56eb2e Mon Sep 17 00:00:00 2001
From: asharonbaltazar <58940073+asharonbaltazar@users.noreply.github.com>
Date: Sun, 26 Nov 2023 15:57:18 -0500
Subject: [PATCH 14/24] Default Values in `ParamEditor` (#610)

* add `defaultvalue` to `Field` types

* add `defaultValue` to constants; turn into functions for time values

* update constant imports/calls in view components

* use `defaultValue`s in `ParamInput`

* change `Clear` to `Reset`to better reflect actions

* make `defaultValue` optional rather than `undefined`

* update forgotten constants

* add `defaultValue` to boolean input

* change `101010` to `000000`

* add `prefix` property to types

* implement `prefix` for `ParamInput`s

* change `paramField` to `prop`

* add `onEditDrawerClose` to `resetParams`

* `ViewParamsEditor` omits default values

* undo close on reset

* move `useSettings` into `ViewWrapper`

* change `settings` to include `undefined`
---
 .../view-params-editor/ParamInput.tsx         | 38 +++++---
 .../view-params-editor/ViewParamsEditor.tsx   | 26 +++---
 .../view-params-editor/constants.ts           | 88 ++++++++++++++-----
 .../components/view-params-editor/types.ts    | 12 ++-
 .../client/src/features/operator/Operator.tsx |  4 +-
 .../src/features/viewers/ViewWrapper.tsx      |  6 +-
 .../features/viewers/backstage/Backstage.tsx  | 11 ++-
 .../src/features/viewers/clock/Clock.tsx      | 11 ++-
 .../features/viewers/countdown/Countdown.tsx  | 11 ++-
 .../src/features/viewers/public/Public.tsx    | 23 +++--
 .../features/viewers/studio/StudioClock.tsx   | 11 ++-
 .../src/features/viewers/timer/Timer.tsx      | 11 ++-
 12 files changed, 180 insertions(+), 72 deletions(-)

diff --git a/apps/client/src/common/components/view-params-editor/ParamInput.tsx b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
index 54fb5a183..9820e040b 100644
--- a/apps/client/src/common/components/view-params-editor/ParamInput.tsx
+++ b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
@@ -1,5 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
-import { Input, Select, Switch } from '@chakra-ui/react';
+import { Input, InputGroup, InputLeftElement, Select, Switch } from '@chakra-ui/react';
 
 import { isStringBoolean } from '../../utils/viewUtils';
 
@@ -9,16 +9,22 @@ interface EditFormInputProps {
   paramField: ParamField;
 }
 
-export default function ParamInput({ paramField }: EditFormInputProps) {
+export default function ParamInput(props: EditFormInputProps) {
   const [searchParams] = useSearchParams();
-  const { id, type } = paramField;
+  const { paramField } = props;
+  const { id, type, defaultValue } = paramField;
 
   if (type === 'option') {
     const optionFromParams = searchParams.get(id);
-    const defaultOptionValue = optionFromParams || undefined;
+    const defaultOptionValue = optionFromParams || defaultValue;
 
     return (
-      <Select placeholder='Select an option' variant='ontime' name={id} defaultValue={defaultOptionValue}>
+      <Select
+        placeholder={defaultValue ? undefined : 'Select an option'}
+        variant='ontime'
+        name={id}
+        defaultValue={defaultOptionValue}
+      >
         {Object.entries(paramField.values).map(([key, value]) => (
           <option key={key} value={key}>
             {value}
@@ -29,19 +35,31 @@ export default function ParamInput({ paramField }: EditFormInputProps) {
   }
 
   if (type === 'boolean') {
-    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) ?? false;
+    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) || defaultValue;
 
     // checked value should be 'true', so it can be captured by the form event
     return <Switch variant='ontime' name={id} defaultChecked={defaultCheckedValue} value='true' />;
   }
 
   if (type === 'number') {
-    const defaultNumberValue = searchParams.get(id) ?? '';
+    const { prefix } = paramField;
+    const defaultNumberValue = searchParams.get(id) ?? defaultValue;
 
-    return <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />;
+    return (
+      <InputGroup variant='ontime-filled'>
+        {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
+        <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />
+      </InputGroup>
+    );
   }
 
-  const defaultStringValue = searchParams.get(id) ?? '';
+  const defaultStringValue = searchParams.get(id) ?? defaultValue;
+  const { prefix } = paramField;
 
-  return <Input variant='ontime-filled' name={id} defaultValue={defaultStringValue} />;
+  return (
+    <InputGroup variant='ontime-filled'>
+      {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
+      <Input name={id} defaultValue={defaultStringValue} />
+    </InputGroup>
+  );
 }
diff --git a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
index c26dc4c74..55eb30f88 100644
--- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
+++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
@@ -22,9 +22,15 @@ import style from './ViewParamsEditor.module.scss';
 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
 type SavedViewParams = Record<string, ViewParamsObj>;
 
-const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj) =>
-  Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
+const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
+  const defaultValues = paramFields.map(({ defaultValue }) => String(defaultValue));
+
+  return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
     if (typeof value === 'string' && value.length) {
+      if (defaultValues.includes(value)) {
+        return newSearchParams;
+      }
+
       newSearchParams.set(id, value);
 
       return newSearchParams;
@@ -32,6 +38,7 @@ const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj) =>
 
     return newSearchParams;
   }, new URLSearchParams());
+};
 
 interface EditFormDrawerProps {
   paramFields: ParamField[];
@@ -72,31 +79,30 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
 
   */
 
-  const onEditDrawerClose = () => {
+  const onCloseWithoutSaving = () => {
     onClose();
 
     searchParams.delete('edit');
     setSearchParams(searchParams);
   };
 
-  const clearParams = () => {
+  const resetParams = () => {
     setStoredViewParams({ ...storedViewParams, [pathname]: {} });
     setSearchParams();
-    onClose();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
     formEvent.preventDefault();
 
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
-    const newSearchParams = getURLSearchParamsFromObj(newParamsObject);
+    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
 
     setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject });
     setSearchParams(newSearchParams);
   };
 
   return (
-    <Drawer isOpen={isOpen} placement='right' onClose={onEditDrawerClose} size='lg'>
+    <Drawer isOpen={isOpen} placement='right' onClose={onCloseWithoutSaving} size='lg'>
       <DrawerOverlay />
       <DrawerContent>
         <DrawerHeader className={style.drawerHeader}>
@@ -119,10 +125,10 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
         </DrawerBody>
 
         <DrawerFooter className={style.drawerFooter}>
-          <Button variant='ontime-ghosted' onClick={clearParams} type='reset'>
-            Clear
+          <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
+            Reset
           </Button>
-          <Button variant='ontime-subtle' onClick={onEditDrawerClose}>
+          <Button variant='ontime-subtle' onClick={onCloseWithoutSaving}>
             Cancel
           </Button>
           <Button variant='ontime-filled' form='edit-params-form' type='submit'>
diff --git a/apps/client/src/common/components/view-params-editor/constants.ts b/apps/client/src/common/components/view-params-editor/constants.ts
index bcb7c363e..4092a6002 100644
--- a/apps/client/src/common/components/view-params-editor/constants.ts
+++ b/apps/client/src/common/components/view-params-editor/constants.ts
@@ -1,46 +1,56 @@
 import { UserFields } from 'ontime-types';
+import { TimeFormat } from 'ontime-types/src/definitions/core/TimeFormat.type';
 
 import { ParamField } from './types';
 
-export const TIME_FORMAT_OPTION: ParamField = {
+export const getTimeOption = (timeFormat: TimeFormat): ParamField => ({
   id: 'format',
   title: '12  / 24 hour timer',
   description: 'Whether to show the time in 12 or 24 hour mode. Overrides the global setting from preferences',
   type: 'option',
   values: { '12': '12 hour AM/PM', '24': '24 hour' },
-};
+  defaultValue: timeFormat,
+});
 
-export const CLOCK_OPTIONS: ParamField[] = [
-  TIME_FORMAT_OPTION,
+export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
+  getTimeOption(timeFormat),
   {
     id: 'key',
     title: 'Key Colour',
     description: 'Background colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000000',
   },
   {
     id: 'text',
     title: 'Text Colour',
     description: 'Text colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: 'fffff',
   },
   {
     id: 'textbg',
     title: 'Text Background',
     description: 'Colour of text background in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000000',
   },
   {
     id: 'font',
     title: 'Font',
     description: 'Font family, will use the fonts available in the system',
     type: 'string',
+    defaultValue: 'Arial Black',
   },
   {
     id: 'size',
     title: 'Text Size',
     description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
     type: 'number',
+    defaultValue: 1,
   },
   {
     id: 'alignx',
@@ -48,12 +58,14 @@ export const CLOCK_OPTIONS: ParamField[] = [
     description: 'Moves the horizontally in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
   },
   {
     id: 'offsetx',
     title: 'Offset Horizontal',
     description: 'Offsets the timer horizontal position by a given amount in pixels',
     type: 'number',
+    defaultValue: 0,
   },
   {
     id: 'aligny',
@@ -61,46 +73,53 @@ export const CLOCK_OPTIONS: ParamField[] = [
     description: 'Moves the vertically in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
   },
   {
     id: 'offsety',
     title: 'Offset Vertical',
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
+    defaultValue: 0,
   },
 ];
 
-export const TIMER_OPTIONS: ParamField[] = [
-  TIME_FORMAT_OPTION,
+export const getTimerOptions = (timeFormat: TimeFormat): ParamField[] => [
+  getTimeOption(timeFormat),
   {
     id: 'hideClock',
     title: 'Hide Time Now',
     description: 'Hides the Time Now field',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideCards',
     title: 'Hide Cards',
     description: 'Hides the Now and Next cards',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideProgress',
     title: 'Hide progress bar',
     description: 'Hides the progress bar',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideMessage',
     title: 'Hide Presenter Message',
     description: 'Prevents the screen from displaying messages from the presenter',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideExternal',
     title: 'Hide External',
     description: 'Prevents the screen from displaying the external field',
     type: 'boolean',
+    defaultValue: false,
   },
 ];
 
@@ -109,31 +128,39 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     id: 'key',
     title: 'Key Colour',
     description: 'Background colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000000',
   },
   {
     id: 'text',
     title: 'Text Colour',
     description: 'Text colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: 'fffff',
   },
   {
     id: 'textbg',
     title: 'Text Background',
     description: 'Colour of text background in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000000',
   },
   {
     id: 'font',
     title: 'Font',
     description: 'Font family, will use the fonts available in the system',
     type: 'string',
+    defaultValue: 'Arial Black',
   },
   {
     id: 'size',
     title: 'Text Size',
     description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
     type: 'number',
+    defaultValue: 1,
   },
   {
     id: 'alignx',
@@ -141,12 +168,14 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Moves the horizontally in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
   },
   {
     id: 'offsetx',
     title: 'Offset Horizontal',
     description: 'Offsets the timer horizontal position by a given amount in pixels',
     type: 'number',
+    defaultValue: 0,
   },
   {
     id: 'aligny',
@@ -154,145 +183,162 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Moves the vertically in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
   },
   {
     id: 'offsety',
     title: 'Offset Vertical',
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
+    defaultValue: 0,
   },
   {
     id: 'hideovertime',
     title: 'Hide Overtime',
     description: 'Whether to suppress overtime styles (red borders and red text)',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hidemessages',
     title: 'Hide Message Overlay',
     description: 'Whether to hide the overlay from showing timer screen messages',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'hideendmessage',
     title: 'Hide End Message',
     description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
     type: 'boolean',
+    defaultValue: false,
   },
 ];
 
 export const LOWER_THIRDS_OPTIONS: ParamField[] = [
-  {
-    id: 'preset',
-    title: 'Preset',
-    description: 'Selects a style preset (0-1)',
-    type: 'number',
-  },
   {
     id: 'size',
     title: 'Size',
     description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
     type: 'number',
+    defaultValue: 1,
   },
   {
     id: 'transition',
     title: 'Transition',
-    description: 'Transition in time in seconds (default 5)',
+    description: 'Transition in time in seconds (default 3)',
     type: 'number',
+    defaultValue: 3,
   },
   {
     id: 'text',
     title: 'Text Colour',
     description: 'Text colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '#fffffa',
   },
   {
     id: 'bg',
     title: 'Text Background',
     description: 'Text background colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000033',
   },
   {
     id: 'key',
     title: 'Key Colour',
     description: 'Screen background colour in hexadecimal',
+    prefix: '#',
     type: 'string',
+    defaultValue: '00000033',
   },
   {
     id: 'fadeout',
     title: 'Fadeout',
     description: 'Time (in seconds) the lower third displays before fading out',
     type: 'number',
+    defaultValue: 3,
   },
 ];
 
-export const BACKSTAGE_OPTIONS: ParamField[] = [
-  TIME_FORMAT_OPTION,
+export const getBackstageOptions = (timeFormat: TimeFormat): ParamField[] => [
+  getTimeOption(timeFormat),
   {
     id: 'hidePast',
     title: 'Hide past events',
     description: 'Scheduler will only show upcoming events',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'stopCycle',
     title: 'Stop cycling through event pages',
     description: 'Schedule will not auto-cycle through events',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'eventsPerPage',
     title: 'Events per page',
     description: 'Sets the number of events on the page, can cause overlow',
     type: 'number',
+    defaultValue: 7,
   },
 ];
 
-export const PUBLIC_OPTIONS: ParamField[] = [
-  TIME_FORMAT_OPTION,
+export const getPublicOptions = (timeFormat: TimeFormat): ParamField[] => [
+  getTimeOption(timeFormat),
   {
     id: 'hidePast',
     title: 'Hide past events',
     description: 'Scheduler will only show upcoming events',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'stopCycle',
     title: 'Stop cycling through event pages',
     description: 'Schedule will not auto-cycle through events',
     type: 'boolean',
+    defaultValue: false,
   },
   {
     id: 'eventsPerPage',
     title: 'Events per page',
     description: 'Sets the number of events on the page, can cause overlow',
     type: 'number',
+    defaultValue: 7,
   },
 ];
-export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
-  TIME_FORMAT_OPTION,
+export const getStudioClockOptions = (timeFormat: TimeFormat): ParamField[] => [
+  getTimeOption(timeFormat),
   {
     id: 'seconds',
     title: 'Show Seconds',
     description: 'Shows seconds in clock',
     type: 'boolean',
+    defaultValue: false,
   },
 ];
 
-export const getOperatorOptions = (userFields: UserFields): ParamField[] => {
+export const getOperatorOptions = (userFields: UserFields, timeFormat: TimeFormat): ParamField[] => {
   return [
-    TIME_FORMAT_OPTION,
+    getTimeOption(timeFormat),
     {
       id: 'showseconds',
       title: 'Show seconds',
       description: 'Schedule shows hh:mm:ss',
       type: 'boolean',
+      defaultValue: false,
     },
     {
       id: 'hidepast',
       title: 'Hide Past Events',
       description: 'Whether to events that have passed',
       type: 'boolean',
+      defaultValue: false,
     },
     {
       id: 'main',
diff --git a/apps/client/src/common/components/view-params-editor/types.ts b/apps/client/src/common/components/view-params-editor/types.ts
index de00d86f7..79b4354cd 100644
--- a/apps/client/src/common/components/view-params-editor/types.ts
+++ b/apps/client/src/common/components/view-params-editor/types.ts
@@ -4,9 +4,13 @@ type BaseField = {
   description: string;
 };
 
-type OptionsField = { type: 'option'; values: Record<string, string> };
-type StringField = { type: 'string' };
-type BooleanField = { type: 'boolean' };
-type NumberField = { type: 'number' };
+type OptionsField = {
+  type: 'option';
+  values: Record<string, string>;
+  defaultValue?: string;
+};
+type StringField = { type: 'string'; defaultValue: string; prefix?: string };
+type NumberField = { type: 'number'; defaultValue: number; prefix?: string };
+type BooleanField = { type: 'boolean'; defaultValue: boolean };
 
 export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);
diff --git a/apps/client/src/features/operator/Operator.tsx b/apps/client/src/features/operator/Operator.tsx
index f52034c04..c00b2d6db 100644
--- a/apps/client/src/features/operator/Operator.tsx
+++ b/apps/client/src/features/operator/Operator.tsx
@@ -11,6 +11,7 @@ import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useOperator } from '../../common/hooks/useSocket';
 import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
+import useSettings from '../../common/hooks-query/useSettings';
 import useUserFields from '../../common/hooks-query/useUserFields';
 import { debounce } from '../../common/utils/debounce';
 import { isStringBoolean } from '../../common/utils/viewUtils';
@@ -40,6 +41,7 @@ export default function Operator() {
 
   const featureData = useOperator();
   const [searchParams] = useSearchParams();
+  const { data: settings } = useSettings();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
   const [editEvent, setEditEvent] = useState<PartialEdit | null>(null);
@@ -127,7 +129,7 @@ export default function Operator() {
   const subscribedAlias = subscribe ? userFields[subscribe] : '';
   const showSeconds = isStringBoolean(searchParams.get('showseconds'));
 
-  const operatorOptions = getOperatorOptions(userFields);
+  const operatorOptions = getOperatorOptions(userFields, settings?.timeFormat ?? '24');
   let isPast = Boolean(featureData.selectedEventId);
   const hidePast = isStringBoolean(searchParams.get('hidepast'));
 
diff --git a/apps/client/src/features/viewers/ViewWrapper.tsx b/apps/client/src/features/viewers/ViewWrapper.tsx
index 53503c8b9..636c08250 100644
--- a/apps/client/src/features/viewers/ViewWrapper.tsx
+++ b/apps/client/src/features/viewers/ViewWrapper.tsx
@@ -1,10 +1,11 @@
 import { ComponentType, useMemo } from 'react';
 import { TimeManagerType } from 'common/models/TimeManager.type';
-import { Message, OntimeEvent, ProjectData, SupportedEvent, TimerMessage, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, Settings, SupportedEvent, TimerMessage, ViewSettings } from 'ontime-types';
 import { useStore } from 'zustand';
 
 import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
+import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { runtime } from '../../common/stores/runtime';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
@@ -27,6 +28,7 @@ type WithDataProps = {
   nextId: string | null;
   general: ProjectData;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
   onAir: boolean;
 };
 
@@ -43,6 +45,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
     const { data: rundownData } = useRundown();
     const { data: project } = useProjectData();
     const { data: viewSettings } = useViewSettings();
+    const { data: settings } = useSettings();
 
     const publicEvents = useMemo(() => {
       if (Array.isArray(rundownData)) {
@@ -104,6 +107,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
         selectedId={selectedId}
         publicSelectedId={publicSelectedId}
         viewSettings={viewSettings}
+        settings={settings}
         nextId={nextId}
         general={project}
         onAir={onAir}
diff --git a/apps/client/src/features/viewers/backstage/Backstage.tsx b/apps/client/src/features/viewers/backstage/Backstage.tsx
index 01e1dab6f..1f9556da4 100644
--- a/apps/client/src/features/viewers/backstage/Backstage.tsx
+++ b/apps/client/src/features/viewers/backstage/Backstage.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Message, OntimeEvent, ProjectData, SupportedEvent, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
@@ -11,7 +11,7 @@ import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-import { BACKSTAGE_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getBackstageOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -37,10 +37,12 @@ interface BackstageProps {
   selectedId: string | null;
   general: ProjectData;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function Backstage(props: BackstageProps) {
-  const { isMirrored, publ, eventNow, eventNext, time, backstageEvents, selectedId, general, viewSettings } = props;
+  const { isMirrored, publ, eventNow, eventNext, time, backstageEvents, selectedId, general, viewSettings, settings } =
+    props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
   const [blinkClass, setBlinkClass] = useState(false);
@@ -89,11 +91,12 @@ export default function Backstage(props: BackstageProps) {
   }
 
   const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0);
+  const backstageOptions = getBackstageOptions(settings?.timeFormat ?? '24');
 
   return (
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={BACKSTAGE_OPTIONS} />
+      <ViewParamsEditor paramFields={backstageOptions} />
       <div className='project-header'>
         {general.title}
         <div className='clock-container'>
diff --git a/apps/client/src/features/viewers/clock/Clock.tsx b/apps/client/src/features/viewers/clock/Clock.tsx
index 871a053e8..89bbcc50c 100644
--- a/apps/client/src/features/viewers/clock/Clock.tsx
+++ b/apps/client/src/features/viewers/clock/Clock.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { ViewSettings } from 'ontime-types';
+import { Settings, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
-import { CLOCK_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getClockOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -18,6 +18,7 @@ interface ClockProps {
   isMirrored: boolean;
   time: TimeManagerType;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 const formatOptions = {
@@ -26,7 +27,7 @@ const formatOptions = {
 };
 
 export default function Clock(props: ClockProps) {
-  const { isMirrored, time, viewSettings } = props;
+  const { isMirrored, time, viewSettings, settings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
 
@@ -124,6 +125,8 @@ export default function Clock(props: ClockProps) {
   const clock = formatTime(time.clock, formatOptions);
   const clean = clock.replace('/:/g', '');
 
+  const clockOptions = getClockOptions(settings?.timeFormat ?? '24');
+
   return (
     <div
       className={`clock-view ${isMirrored ? 'mirror' : ''}`}
@@ -135,7 +138,7 @@ export default function Clock(props: ClockProps) {
       data-testid='clock-view'
     >
       <NavigationMenu />
-      <ViewParamsEditor paramFields={CLOCK_OPTIONS} />
+      <ViewParamsEditor paramFields={clockOptions} />
       <SuperscriptTime
         time={clock}
         className='clock'
diff --git a/apps/client/src/features/viewers/countdown/Countdown.tsx b/apps/client/src/features/viewers/countdown/Countdown.tsx
index b6ac0658b..9b34877f4 100644
--- a/apps/client/src/features/viewers/countdown/Countdown.tsx
+++ b/apps/client/src/features/viewers/countdown/Countdown.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent, ViewSettings } from 'ontime-types';
+import { OntimeEvent, OntimeRundownEntry, Playback, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
-import { TIME_FORMAT_OPTION } from '../../../common/components/view-params-editor/constants';
+import { getTimeOption } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -34,10 +34,11 @@ interface CountdownProps {
   time: TimeManagerType;
   selectedId: string | null;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function Countdown(props: CountdownProps) {
-  const { isMirrored, backstageEvents, time, selectedId, viewSettings } = props;
+  const { isMirrored, backstageEvents, time, selectedId, viewSettings, settings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
   const { getLocalizedString } = useTranslation();
@@ -109,10 +110,12 @@ export default function Countdown(props: CountdownProps) {
           isSelected || runningMessage === TimerMessage.waiting,
         );
 
+  const timeOption = getTimeOption(settings?.timeFormat ?? '24');
+
   return (
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={[TIME_FORMAT_OPTION]} />
+      <ViewParamsEditor paramFields={[timeOption]} />
       {follow === null ? (
         <CountdownSelect events={backstageEvents} />
       ) : (
diff --git a/apps/client/src/features/viewers/public/Public.tsx b/apps/client/src/features/viewers/public/Public.tsx
index a9b779e99..372206b12 100644
--- a/apps/client/src/features/viewers/public/Public.tsx
+++ b/apps/client/src/features/viewers/public/Public.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Message, OntimeEvent, ProjectData, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, Settings, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
@@ -9,7 +9,7 @@ import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-import { PUBLIC_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getPublicOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -35,11 +35,22 @@ interface BackstageProps {
   publicSelectedId: string | null;
   general: ProjectData;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function Public(props: BackstageProps) {
-  const { isMirrored, publ, publicEventNow, publicEventNext, time, events, publicSelectedId, general, viewSettings } =
-    props;
+  const {
+    isMirrored,
+    publ,
+    publicEventNow,
+    publicEventNext,
+    time,
+    events,
+    publicSelectedId,
+    general,
+    viewSettings,
+    settings,
+  } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
 
@@ -56,10 +67,12 @@ export default function Public(props: BackstageProps) {
   const clock = formatTime(time.clock, formatOptions);
   const qrSize = Math.max(window.innerWidth / 15, 128);
 
+  const publicOptions = getPublicOptions(settings?.timeFormat ?? '24');
+
   return (
     <div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={PUBLIC_OPTIONS} />
+      <ViewParamsEditor paramFields={publicOptions} />
       <div className='project-header'>
         {general.title}
         <div className='clock-container'>
diff --git a/apps/client/src/features/viewers/studio/StudioClock.tsx b/apps/client/src/features/viewers/studio/StudioClock.tsx
index c489071cf..79f92da4c 100644
--- a/apps/client/src/features/viewers/studio/StudioClock.tsx
+++ b/apps/client/src/features/viewers/studio/StudioClock.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import type { OntimeEvent, OntimeRundown, ViewSettings } from 'ontime-types';
+import type { OntimeEvent, OntimeRundown, Settings, ViewSettings } from 'ontime-types';
 import { SupportedEvent } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
-import { STUDIO_CLOCK_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getStudioClockOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import useFitText from '../../../common/hooks/useFitText';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
@@ -32,10 +32,11 @@ interface StudioClockProps {
   nextId: string | null;
   onAir: boolean;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function StudioClock(props: StudioClockProps) {
-  const { isMirrored, eventNext, time, backstageEvents, selectedId, nextId, onAir, viewSettings } = props;
+  const { isMirrored, eventNext, time, backstageEvents, selectedId, nextId, onAir, viewSettings, settings } = props;
 
   // deferring rendering seems to affect styling (font and useFitText)
   useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
@@ -75,10 +76,12 @@ export default function StudioClock(props: StudioClockProps) {
   const secondsNow = secondsInMillis(time.clock);
   const isNegative = (time.current ?? 0) < 0;
 
+  const studioClockOptions = getStudioClockOptions(settings?.timeFormat ?? '24');
+
   return (
     <div className={`studio-clock ${isMirrored ? 'mirror' : ''}`} data-testid='studio-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={STUDIO_CLOCK_OPTIONS} />
+      <ViewParamsEditor paramFields={studioClockOptions} />
       <div className='clock-container'>
         <div className={`studio-timer ${showSeconds ? 'studio-timer--with-seconds' : ''}`}>{clock}</div>
         <div
diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx
index 1b9b7a6ce..f05ddcffb 100644
--- a/apps/client/src/features/viewers/timer/Timer.tsx
+++ b/apps/client/src/features/viewers/timer/Timer.tsx
@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Message, OntimeEvent, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, Playback, Settings, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-import { TIMER_OPTIONS } from '../../../common/components/view-params-editor/constants';
+import { getTimerOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
@@ -48,10 +48,11 @@ interface TimerProps {
   eventNext: OntimeEvent | null;
   time: TimeManagerType;
   viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }
 
 export default function Timer(props: TimerProps) {
-  const { isMirrored, pres, eventNow, eventNext, time, viewSettings, external } = props;
+  const { isMirrored, pres, eventNow, eventNext, time, viewSettings, external, settings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
   const [searchParams] = useSearchParams();
@@ -128,10 +129,12 @@ export default function Timer(props: TimerProps) {
   const timerContainerClasses = `timer-container ${showBlinking ? (showOverlay ? '' : 'blink') : ''}`;
   const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
 
+  const timerOptions = getTimerOptions(settings?.timeFormat ?? '24');
+
   return (
     <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
       <NavigationMenu />
-      <ViewParamsEditor paramFields={TIMER_OPTIONS} />
+      <ViewParamsEditor paramFields={timerOptions} />
       {!userOptions.hideMessage && (
         <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
           <div className={`message ${showBlinking ? 'blink' : ''}`}>{pres.text}</div>

From 20d5d8b12927321a6ee2ebfb0a2cb6ac7f76c8c5 Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Mon, 27 Nov 2023 17:42:42 +0100
Subject: [PATCH 15/24] move skip logic to timerUtils

---
 apps/server/src/config/config.js              |  2 +-
 apps/server/src/services/TimerService.ts      |  9 +-
 .../src/services/__tests__/rollUtils.test.ts  | 88 -------------------
 .../src/services/__tests__/timerUtils.test.ts | 24 ++++-
 apps/server/src/services/rollUtils.ts         | 12 +--
 apps/server/src/services/timerUtils.ts        | 13 +++
 6 files changed, 45 insertions(+), 103 deletions(-)

diff --git a/apps/server/src/config/config.js b/apps/server/src/config/config.js
index 42ec30e52..158838f2d 100644
--- a/apps/server/src/config/config.js
+++ b/apps/server/src/config/config.js
@@ -9,5 +9,5 @@ export const config = {
     filename: 'override.css',
   },
   restoreFile: 'ontime.restore',
-  rollSkipLimit: 3 * 32,
+  timeSkipLimit: 3 * 32,
 };
diff --git a/apps/server/src/services/TimerService.ts b/apps/server/src/services/TimerService.ts
index 64c8ae577..47d096bb0 100644
--- a/apps/server/src/services/TimerService.ts
+++ b/apps/server/src/services/TimerService.ts
@@ -5,7 +5,7 @@ import { eventStore } from '../stores/EventStore.js';
 import { PlaybackService } from './PlaybackService.js';
 import { updateRoll } from './rollUtils.js';
 import { integrationService } from './integration-service/IntegrationService.js';
-import { getCurrent, getExpectedFinish } from './timerUtils.js';
+import { getCurrent, getExpectedFinish, skipedOutOfEvent } from './timerUtils.js';
 import { clock } from './Clock.js';
 import { logger } from '../classes/Logger.js';
 import type { RestorePoint } from './RestoreService.js';
@@ -339,7 +339,6 @@ export class TimerService {
         this.timer.expectedFinish >= this.timer.startedAt
           ? this.timer.expectedFinish
           : this.timer.expectedFinish + dayInMs,
-      _startAt: this.timer.startedAt,
       clock: this.timer.clock,
       secondaryTimer: this.timer.secondaryTimer,
       secondaryTarget: this.secondaryTarget,
@@ -405,7 +404,11 @@ export class TimerService {
     let shouldNotify = false;
     if (this.playback === Playback.Roll) {
       shouldNotify = true;
-      this.updateRoll();
+      if (skipedOutOfEvent(previousTime, this.timer.clock, this.timer.startedAt, this.timer.finishedAt)) {
+        PlaybackService.roll();
+      } else {
+        this.updateRoll();
+      }
     } else if (this.timer.startedAt !== null) {
       // we only update timer if a timer has been started
       shouldNotify = true;
diff --git a/apps/server/src/services/__tests__/rollUtils.test.ts b/apps/server/src/services/__tests__/rollUtils.test.ts
index ced5f1adc..329ece996 100644
--- a/apps/server/src/services/__tests__/rollUtils.test.ts
+++ b/apps/server/src/services/__tests__/rollUtils.test.ts
@@ -2,7 +2,6 @@ import { OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
 
 import { getRollTimers, normaliseEndTime, sortArrayByProperty, updateRoll } from '../rollUtils.js';
-import { config } from '../../config/config.js';
 
 // test sortArrayByProperty()
 describe('sort simple arrays of objects', () => {
@@ -563,7 +562,6 @@ describe('typical scenarios', () => {
       selectedEventId: '1',
       current: 10,
       _finishAt: 15,
-      _startAt: 9,
       clock: 11,
       secondaryTimer: null,
       secondaryTarget: null,
@@ -586,72 +584,11 @@ describe('typical scenarios', () => {
     expect(updateRoll(timers)).toStrictEqual(expected);
   });
 
-  it('dose not skip isFinished under limit', () => {
-    const timers = {
-      selectedEventId: '1',
-      current: 13,
-      _finishAt: 15,
-      _startAt: 9,
-      clock: 14,
-      secondaryTimer: null,
-      secondaryTarget: null,
-    };
-
-    const expected = {
-      updatedTimer: timers._finishAt - timers.clock,
-      updatedSecondaryTimer: null,
-      doRollLoad: false,
-      isFinished: false,
-    };
-
-    expect(updateRoll(timers)).toStrictEqual(expected);
-
-    // test that it can jump time
-    timers._finishAt = 14;
-    timers.clock += config.rollSkipLimit - 1;
-    expected.updatedTimer = timers._finishAt - timers.clock;
-    expected.doRollLoad = true;
-    expected.isFinished = true;
-
-    expect(updateRoll(timers)).toStrictEqual(expected);
-  });
-
-  it('dose skips isFinished over limit', () => {
-    const timers = {
-      selectedEventId: '1',
-      current: 13,
-      _finishAt: 15,
-      _startAt: 9,
-      clock: 14,
-      secondaryTimer: null,
-      secondaryTarget: null,
-    };
-
-    const expected = {
-      updatedTimer: timers._finishAt - timers.clock,
-      updatedSecondaryTimer: null,
-      doRollLoad: false,
-      isFinished: false,
-    };
-
-    expect(updateRoll(timers)).toStrictEqual(expected);
-
-    // test that it can jump time
-    timers._finishAt = 14;
-    timers.clock += config.rollSkipLimit + 1;
-    expected.updatedTimer = timers._finishAt - timers.clock;
-    expected.doRollLoad = true;
-    expected.isFinished = false;
-
-    expect(updateRoll(timers)).toStrictEqual(expected);
-  });
-
   it('it updates secondary timer', () => {
     const timers = {
       selectedEventId: null,
       current: null,
       _finishAt: null,
-      _startAt: null,
       clock: 11,
       secondaryTimer: 1,
       secondaryTarget: 15,
@@ -672,7 +609,6 @@ describe('typical scenarios', () => {
       selectedEventId: '1',
       current: 10,
       _finishAt: 11,
-      _startAt: 9,
       clock: 12,
       secondaryTimer: null,
       secondaryTarget: null,
@@ -693,7 +629,6 @@ describe('typical scenarios', () => {
       selectedEventId: null,
       current: null,
       _finishAt: null,
-      _startAt: null,
       clock: 16,
       secondaryTimer: 1,
       secondaryTarget: 15,
@@ -714,7 +649,6 @@ describe('typical scenarios', () => {
       selectedEventId: null,
       current: null,
       _finishAt: null,
-      _startAt: null,
       clock: 15,
       secondaryTimer: 0,
       secondaryTarget: 15,
@@ -735,7 +669,6 @@ describe('typical scenarios', () => {
       selectedEventId: '1',
       current: 25,
       _finishAt: 10 + dayInMs,
-      _startAt: 10,
       clock: dayInMs - 10,
       secondaryTimer: null,
       secondaryTarget: null,
@@ -756,7 +689,6 @@ describe('typical scenarios', () => {
       selectedEventId: '1',
       current: dayInMs,
       _finishAt: 10 + dayInMs,
-      _startAt: 10,
       clock: 10,
       secondaryTimer: null,
       secondaryTarget: null,
@@ -771,24 +703,4 @@ describe('typical scenarios', () => {
 
     expect(updateRoll(timers)).toStrictEqual(expected);
   });
-
-  it('rolls backwards', () => {
-    const timers = {
-      selectedEventId: '1',
-      current: 11,
-      _startAt: 10,
-      _finishAt: 15,
-      clock: 9,
-      secondaryTimer: null,
-      secondaryTarget: null,
-    };
-
-    const expected = {
-      updatedTimer: timers._finishAt - timers.clock,
-      updatedSecondaryTimer: null,
-      doRollLoad: true,
-      isFinished: false,
-    };
-    expect(updateRoll(timers)).toStrictEqual(expected);
-  });
 });
diff --git a/apps/server/src/services/__tests__/timerUtils.test.ts b/apps/server/src/services/__tests__/timerUtils.test.ts
index 2a6e15c67..9930da561 100644
--- a/apps/server/src/services/__tests__/timerUtils.test.ts
+++ b/apps/server/src/services/__tests__/timerUtils.test.ts
@@ -1,7 +1,8 @@
 import { dayInMs } from 'ontime-utils';
 import { TimerType } from 'ontime-types';
 
-import { getCurrent, getExpectedFinish } from '../timerUtils.js';
+import { getCurrent, getExpectedFinish, skipedOutOfEvent } from '../timerUtils.js';
+import { config } from '../../config/config.js';
 
 describe('getExpectedFinish()', () => {
   it('is null if we havent started', () => {
@@ -354,3 +355,24 @@ describe('getExpectedFinish() and getCurrentTime() combined', () => {
     expect(current).toBe(8);
   });
 });
+
+describe('skipedOutOfEvent()', () => {
+  it('without added times, they combine to be duration', () => {
+    const startedAt = 1000;
+    const duration = 1000;
+    const pausedTime = 0;
+    const finishedAt = null;
+    const addedTime = 0;
+    const timerType = TimerType.CountDown;
+    const expectedFinish = startedAt + duration;
+    const previousTime = 1000;
+    let clock = previousTime;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    clock += config.timeSkipLimit + 10;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    clock = expectedFinish + 1;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
+    clock = startedAt - config.timeSkipLimit - 1;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
+  });
+});
diff --git a/apps/server/src/services/rollUtils.ts b/apps/server/src/services/rollUtils.ts
index 3a5cd13c4..98a6feac2 100644
--- a/apps/server/src/services/rollUtils.ts
+++ b/apps/server/src/services/rollUtils.ts
@@ -1,6 +1,5 @@
 import { OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
-import { config } from '../config/config.js';
 
 /**
  * handle events that span over midnight
@@ -154,7 +153,6 @@ type CurrentTimers = {
   selectedEventId: string | null;
   current: number | null;
   _finishAt: number | null;
-  _startAt: number | null;
   clock: number | null;
   secondaryTimer: number | null;
   secondaryTarget: number | null;
@@ -166,7 +164,7 @@ type CurrentTimers = {
  * @returns {object} object with selection variables
  */
 export const updateRoll = (currentTimers: CurrentTimers) => {
-  const { selectedEventId, current, _finishAt, _startAt, clock, secondaryTimer, secondaryTarget } = currentTimers;
+  const { selectedEventId, current, _finishAt, clock, secondaryTimer, secondaryTarget } = currentTimers;
 
   // timers
   let updatedTimer = current;
@@ -185,15 +183,9 @@ export const updateRoll = (currentTimers: CurrentTimers) => {
     }
 
     if (updatedTimer < 0) {
-      const hasSkipped = Math.abs(updatedTimer) > config.rollSkipLimit;
-      if (!hasSkipped) {
-        isPrimaryFinished = true;
-      }
+      isPrimaryFinished = true;
       // we need a new event
       doRollLoad = true;
-    } else if (clock < _startAt) {
-      // we have rolled back befor this evet start so we need a new one
-      doRollLoad = true;
     }
   } else if (secondaryTimer >= 0) {
     // if secondaryTimer is running we are in waiting to roll
diff --git a/apps/server/src/services/timerUtils.ts b/apps/server/src/services/timerUtils.ts
index 8edad2a7f..5b402650c 100644
--- a/apps/server/src/services/timerUtils.ts
+++ b/apps/server/src/services/timerUtils.ts
@@ -1,5 +1,6 @@
 import { MaybeNumber, TimerType } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
+import { config } from '../config/config.js';
 
 /**
  * Calculates expected finish time of a running timer
@@ -64,3 +65,15 @@ export function getCurrent(
   }
   return startedAt + duration + addedTime + pausedTime - clock;
 }
+
+export function skipedOutOfEvent(previousTime: number, clock: number, startedAt: number, finishAt): boolean {
+  const skipTime = previousTime - clock;
+  const hasSkipped = Math.abs(skipTime) > config.timeSkipLimit;
+  if (hasSkipped) {
+    if (clock > finishAt || clock < startedAt) {
+      return true;
+    }
+    // otherwise we just skipped within the event
+  }
+  return false;
+}

From 4cbc09864cb3d2dfc4e167bc4fac019fc40dfa7b Mon Sep 17 00:00:00 2001
From: asharonbaltazar <58940073+asharonbaltazar@users.noreply.github.com>
Date: Mon, 27 Nov 2023 18:25:46 -0500
Subject: [PATCH 16/24] Params Input Placeholders (#627)

* add `placeholder?: string;` to `StringField` & `NumberField`

* add `placeholder` to inputs

* move values from `defaultValue` to `placeholder`
---
 .../view-params-editor/ParamInput.tsx         | 15 +++++--
 .../view-params-editor/constants.ts           | 44 +++++++++----------
 .../components/view-params-editor/types.ts    |  4 +-
 3 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/apps/client/src/common/components/view-params-editor/ParamInput.tsx b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
index 9820e040b..282e3212e 100644
--- a/apps/client/src/common/components/view-params-editor/ParamInput.tsx
+++ b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
@@ -42,24 +42,31 @@ export default function ParamInput(props: EditFormInputProps) {
   }
 
   if (type === 'number') {
-    const { prefix } = paramField;
+    const { prefix, placeholder } = paramField;
     const defaultNumberValue = searchParams.get(id) ?? defaultValue;
 
     return (
       <InputGroup variant='ontime-filled'>
         {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
-        <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />
+        <Input
+          type='number'
+          step='any'
+          variant='ontime-filled'
+          name={id}
+          defaultValue={defaultNumberValue}
+          placeholder={placeholder}
+        />
       </InputGroup>
     );
   }
 
   const defaultStringValue = searchParams.get(id) ?? defaultValue;
-  const { prefix } = paramField;
+  const { prefix, placeholder } = paramField;
 
   return (
     <InputGroup variant='ontime-filled'>
       {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
-      <Input name={id} defaultValue={defaultStringValue} />
+      <Input name={id} defaultValue={defaultStringValue} placeholder={placeholder} />
     </InputGroup>
   );
 }
diff --git a/apps/client/src/common/components/view-params-editor/constants.ts b/apps/client/src/common/components/view-params-editor/constants.ts
index 4092a6002..64443ad67 100644
--- a/apps/client/src/common/components/view-params-editor/constants.ts
+++ b/apps/client/src/common/components/view-params-editor/constants.ts
@@ -20,7 +20,7 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
     description: 'Background colour in hexadecimal',
     prefix: '#',
     type: 'string',
-    defaultValue: '00000000',
+    placeholder: '00000000 (default)',
   },
   {
     id: 'text',
@@ -28,7 +28,7 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
     description: 'Text colour in hexadecimal',
     prefix: '#',
     type: 'string',
-    defaultValue: 'fffff',
+    placeholder: 'fffff (default)',
   },
   {
     id: 'textbg',
@@ -36,21 +36,21 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
     description: 'Colour of text background in hexadecimal',
     prefix: '#',
     type: 'string',
-    defaultValue: '00000000',
+    placeholder: '00000000 (default)',
   },
   {
     id: 'font',
     title: 'Font',
     description: 'Font family, will use the fonts available in the system',
     type: 'string',
-    defaultValue: 'Arial Black',
+    placeholder: 'Arial Black (default)',
   },
   {
     id: 'size',
     title: 'Text Size',
     description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
     type: 'number',
-    defaultValue: 1,
+    placeholder: '1 (default)',
   },
   {
     id: 'alignx',
@@ -65,7 +65,7 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
     title: 'Offset Horizontal',
     description: 'Offsets the timer horizontal position by a given amount in pixels',
     type: 'number',
-    defaultValue: 0,
+    placeholder: '0 (default)',
   },
   {
     id: 'aligny',
@@ -80,7 +80,7 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
     title: 'Offset Vertical',
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
-    defaultValue: 0,
+    placeholder: '0 (default)',
   },
 ];
 
@@ -130,7 +130,7 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Background colour in hexadecimal',
     prefix: '#',
     type: 'string',
-    defaultValue: '00000000',
+    placeholder: '00000000 (default)',
   },
   {
     id: 'text',
@@ -138,7 +138,7 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Text colour in hexadecimal',
     prefix: '#',
     type: 'string',
-    defaultValue: 'fffff',
+    placeholder: 'fffff (default)',
   },
   {
     id: 'textbg',
@@ -146,21 +146,21 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Colour of text background in hexadecimal',
     prefix: '#',
     type: 'string',
-    defaultValue: '00000000',
+    placeholder: '00000000 (default)',
   },
   {
     id: 'font',
     title: 'Font',
     description: 'Font family, will use the fonts available in the system',
     type: 'string',
-    defaultValue: 'Arial Black',
+    placeholder: 'Arial Black (default)',
   },
   {
     id: 'size',
     title: 'Text Size',
     description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
     type: 'number',
-    defaultValue: 1,
+    placeholder: '1 (default)',
   },
   {
     id: 'alignx',
@@ -175,7 +175,7 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     title: 'Offset Horizontal',
     description: 'Offsets the timer horizontal position by a given amount in pixels',
     type: 'number',
-    defaultValue: 0,
+    placeholder: '0 (default)',
   },
   {
     id: 'aligny',
@@ -190,7 +190,7 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     title: 'Offset Vertical',
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
-    defaultValue: 0,
+    placeholder: '0 (default)',
   },
   {
     id: 'hideovertime',
@@ -221,14 +221,14 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
     title: 'Size',
     description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
     type: 'number',
-    defaultValue: 1,
+    placeholder: '1 (default)',
   },
   {
     id: 'transition',
     title: 'Transition',
     description: 'Transition in time in seconds (default 3)',
     type: 'number',
-    defaultValue: 3,
+    placeholder: '3 (default)',
   },
   {
     id: 'text',
@@ -236,7 +236,7 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
     description: 'Text colour in hexadecimal',
     prefix: '#',
     type: 'string',
-    defaultValue: '#fffffa',
+    placeholder: 'fffffa (default)',
   },
   {
     id: 'bg',
@@ -244,7 +244,7 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
     description: 'Text background colour in hexadecimal',
     prefix: '#',
     type: 'string',
-    defaultValue: '00000033',
+    placeholder: '00000033 (default)',
   },
   {
     id: 'key',
@@ -252,14 +252,14 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
     description: 'Screen background colour in hexadecimal',
     prefix: '#',
     type: 'string',
-    defaultValue: '00000033',
+    placeholder: '00000033 (default)',
   },
   {
     id: 'fadeout',
     title: 'Fadeout',
     description: 'Time (in seconds) the lower third displays before fading out',
     type: 'number',
-    defaultValue: 3,
+    placeholder: '3 (default)',
   },
 ];
 
@@ -284,7 +284,7 @@ export const getBackstageOptions = (timeFormat: TimeFormat): ParamField[] => [
     title: 'Events per page',
     description: 'Sets the number of events on the page, can cause overlow',
     type: 'number',
-    defaultValue: 7,
+    placeholder: '7 (default)',
   },
 ];
 
@@ -309,7 +309,7 @@ export const getPublicOptions = (timeFormat: TimeFormat): ParamField[] => [
     title: 'Events per page',
     description: 'Sets the number of events on the page, can cause overlow',
     type: 'number',
-    defaultValue: 7,
+    placeholder: '7 (default)',
   },
 ];
 export const getStudioClockOptions = (timeFormat: TimeFormat): ParamField[] => [
diff --git a/apps/client/src/common/components/view-params-editor/types.ts b/apps/client/src/common/components/view-params-editor/types.ts
index 79b4354cd..9405297da 100644
--- a/apps/client/src/common/components/view-params-editor/types.ts
+++ b/apps/client/src/common/components/view-params-editor/types.ts
@@ -9,8 +9,8 @@ type OptionsField = {
   values: Record<string, string>;
   defaultValue?: string;
 };
-type StringField = { type: 'string'; defaultValue: string; prefix?: string };
-type NumberField = { type: 'number'; defaultValue: number; prefix?: string };
+type StringField = { type: 'string'; defaultValue?: string; prefix?: string; placeholder?: string };
+type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
 type BooleanField = { type: 'boolean'; defaultValue: boolean };
 
 export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);

From ecd151a0a8be670def75179ef260f1bbf204e320 Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Tue, 28 Nov 2023 15:27:19 +0100
Subject: [PATCH 17/24] use expectedFinish

---
 apps/server/src/services/TimerService.ts | 2 +-
 apps/server/src/services/timerUtils.ts   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/server/src/services/TimerService.ts b/apps/server/src/services/TimerService.ts
index 47d096bb0..2d5a717ac 100644
--- a/apps/server/src/services/TimerService.ts
+++ b/apps/server/src/services/TimerService.ts
@@ -404,7 +404,7 @@ export class TimerService {
     let shouldNotify = false;
     if (this.playback === Playback.Roll) {
       shouldNotify = true;
-      if (skipedOutOfEvent(previousTime, this.timer.clock, this.timer.startedAt, this.timer.finishedAt)) {
+      if (skipedOutOfEvent(previousTime, this.timer.clock, this.timer.startedAt, this.timer.expectedFinish)) {
         PlaybackService.roll();
       } else {
         this.updateRoll();
diff --git a/apps/server/src/services/timerUtils.ts b/apps/server/src/services/timerUtils.ts
index 5b402650c..cd9ce5392 100644
--- a/apps/server/src/services/timerUtils.ts
+++ b/apps/server/src/services/timerUtils.ts
@@ -66,11 +66,11 @@ export function getCurrent(
   return startedAt + duration + addedTime + pausedTime - clock;
 }
 
-export function skipedOutOfEvent(previousTime: number, clock: number, startedAt: number, finishAt): boolean {
+export function skipedOutOfEvent(previousTime: number, clock: number, startedAt: number, expectedFinish): boolean {
   const skipTime = previousTime - clock;
   const hasSkipped = Math.abs(skipTime) > config.timeSkipLimit;
   if (hasSkipped) {
-    if (clock > finishAt || clock < startedAt) {
+    if (clock > expectedFinish || clock < startedAt) {
       return true;
     }
     // otherwise we just skipped within the event

From a67b89190d54b8584ee9c0e68f29ee984caba810 Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Tue, 28 Nov 2023 16:04:12 +0100
Subject: [PATCH 18/24] guard and test midnight

---
 .../src/services/__tests__/timerUtils.test.ts | 83 +++++++++++++++++--
 apps/server/src/services/timerUtils.ts        |  4 +
 2 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/apps/server/src/services/__tests__/timerUtils.test.ts b/apps/server/src/services/__tests__/timerUtils.test.ts
index 9930da561..204eedf57 100644
--- a/apps/server/src/services/__tests__/timerUtils.test.ts
+++ b/apps/server/src/services/__tests__/timerUtils.test.ts
@@ -357,22 +357,87 @@ describe('getExpectedFinish() and getCurrentTime() combined', () => {
 });
 
 describe('skipedOutOfEvent()', () => {
-  it('without added times, they combine to be duration', () => {
+  it('normal roll out of event', () => {
     const startedAt = 1000;
     const duration = 1000;
-    const pausedTime = 0;
-    const finishedAt = null;
-    const addedTime = 0;
-    const timerType = TimerType.CountDown;
     const expectedFinish = startedAt + duration;
-    const previousTime = 1000;
+    const previousTime = expectedFinish - config.timeSkipLimit / 2;
     let clock = previousTime;
     expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock += config.timeSkipLimit + 10;
+    clock += config.timeSkipLimit;
     expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock = expectedFinish + 1;
+  });
+
+  it('normal roll backwards out of event', () => {
+    const startedAt = 1000;
+    const duration = 1000;
+    const expectedFinish = startedAt + duration;
+    const previousTime = startedAt + config.timeSkipLimit / 2;
+    let clock = previousTime;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    clock -= config.timeSkipLimit;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+  });
+
+  it('normal roll out of event over midnight', () => {
+    const startedAt = dayInMs - config.timeSkipLimit;
+    const expectedFinish = 10;
+    const previousTime = dayInMs - 1;
+    let clock = previousTime;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    clock = config.timeSkipLimit - 2;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+  });
+
+  it('normal roll backwards out of event over midnight', () => {
+    const startedAt = dayInMs - config.timeSkipLimit;
+    const expectedFinish = 10;
+    const previousTime = startedAt + 1;
+    let clock = previousTime;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    clock -= config.timeSkipLimit;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+  });
+
+  it('skip out of event', () => {
+    const startedAt = 1000;
+    const duration = 1000;
+    const expectedFinish = startedAt + duration;
+    const previousTime = expectedFinish - config.timeSkipLimit / 2;
+    let clock = previousTime;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    clock += config.timeSkipLimit + 1;
     expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
-    clock = startedAt - config.timeSkipLimit - 1;
+  });
+
+  it('skip backwards out of event', () => {
+    const startedAt = 1000;
+    const duration = 1000;
+    const expectedFinish = startedAt + duration;
+    const previousTime = startedAt + config.timeSkipLimit / 2;
+    let clock = previousTime;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    clock -= config.timeSkipLimit + 1;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
+  });
+
+  it('skip out of event over midnight', () => {
+    const startedAt = dayInMs - config.timeSkipLimit;
+    const expectedFinish = 10;
+    const previousTime = dayInMs - 3;
+    let clock = previousTime;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    clock = config.timeSkipLimit - 2;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
+  });
+
+  it('skip backwards out of event over midnight', () => {
+    const startedAt = dayInMs - config.timeSkipLimit;
+    const expectedFinish = 10;
+    const previousTime = startedAt + 1;
+    let clock = previousTime;
+    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    clock -= config.timeSkipLimit + 1;
     expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
   });
 });
diff --git a/apps/server/src/services/timerUtils.ts b/apps/server/src/services/timerUtils.ts
index cd9ce5392..69e62b058 100644
--- a/apps/server/src/services/timerUtils.ts
+++ b/apps/server/src/services/timerUtils.ts
@@ -67,8 +67,12 @@ export function getCurrent(
 }
 
 export function skipedOutOfEvent(previousTime: number, clock: number, startedAt: number, expectedFinish): boolean {
+  if (previousTime > dayInMs - config.timeSkipLimit && clock < config.timeSkipLimit) {
+    clock += dayInMs;
+  }
   const skipTime = previousTime - clock;
   const hasSkipped = Math.abs(skipTime) > config.timeSkipLimit;
+  expectedFinish = expectedFinish >= startedAt ? expectedFinish : expectedFinish + dayInMs;
   if (hasSkipped) {
     if (clock > expectedFinish || clock < startedAt) {
       return true;

From 34e9b1ef074961a060e8535ee16e034efda14041 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Thu, 30 Nov 2023 21:35:09 +0100
Subject: [PATCH 19/24] refactor: clarify responsabilities

---
 apps/server/src/config/config.js              |   1 -
 apps/server/src/services/TimerService.ts      |  26 +++--
 .../src/services/__tests__/timerUtils.test.ts | 102 ++++++++++--------
 apps/server/src/services/timerUtils.ts        |  30 +++---
 4 files changed, 94 insertions(+), 65 deletions(-)

diff --git a/apps/server/src/config/config.js b/apps/server/src/config/config.js
index 158838f2d..f11da3cdc 100644
--- a/apps/server/src/config/config.js
+++ b/apps/server/src/config/config.js
@@ -9,5 +9,4 @@ export const config = {
     filename: 'override.css',
   },
   restoreFile: 'ontime.restore',
-  timeSkipLimit: 3 * 32,
 };
diff --git a/apps/server/src/services/TimerService.ts b/apps/server/src/services/TimerService.ts
index 2d5a717ac..aa939161c 100644
--- a/apps/server/src/services/TimerService.ts
+++ b/apps/server/src/services/TimerService.ts
@@ -5,7 +5,7 @@ import { eventStore } from '../stores/EventStore.js';
 import { PlaybackService } from './PlaybackService.js';
 import { updateRoll } from './rollUtils.js';
 import { integrationService } from './integration-service/IntegrationService.js';
-import { getCurrent, getExpectedFinish, skipedOutOfEvent } from './timerUtils.js';
+import { getCurrent, getExpectedFinish, skippedOutOfEvent } from './timerUtils.js';
 import { clock } from './Clock.js';
 import { logger } from '../classes/Logger.js';
 import type { RestorePoint } from './RestoreService.js';
@@ -18,10 +18,13 @@ type initialLoadingData = {
 
 type RestoreCallback = (newState: RestorePoint) => Promise<void>;
 
+export const timeSkipLimit = 3 * 32;
+
 export class TimerService {
   private readonly _interval: NodeJS.Timer;
   private _updateInterval: number;
   private _lastUpdate: number | null;
+  private _skipThreshold: number;
 
   playback: Playback;
   timer: TimerState;
@@ -40,11 +43,13 @@ export class TimerService {
    * @param {object} [timerConfig]
    * @param {number} [timerConfig.refresh]
    * @param {number} [timerConfig.updateInterval]
+   * @param {number} [timerConfig.skipThreshold]
    */
-  constructor(timerConfig: { refresh?: number; updateInterval?: number } = {}) {
+  constructor(timerConfig: { refresh: number; updateInterval: number; skipThreshold: number }) {
     this._clear();
-    this._interval = setInterval(() => this.update(), timerConfig?.refresh ?? 1000);
-    this._updateInterval = timerConfig?.updateInterval ?? 1000;
+    this._interval = setInterval(() => this.update(), timerConfig.refresh);
+    this._updateInterval = timerConfig.updateInterval;
+    this._skipThreshold = timerConfig.skipThreshold;
   }
 
   /**
@@ -404,7 +409,15 @@ export class TimerService {
     let shouldNotify = false;
     if (this.playback === Playback.Roll) {
       shouldNotify = true;
-      if (skipedOutOfEvent(previousTime, this.timer.clock, this.timer.startedAt, this.timer.expectedFinish)) {
+      if (
+        skippedOutOfEvent(
+          previousTime,
+          this.timer.clock,
+          this.timer.startedAt,
+          this.timer.expectedFinish,
+          this._skipThreshold,
+        )
+      ) {
         PlaybackService.roll();
       } else {
         this.updateRoll();
@@ -508,4 +521,5 @@ export class TimerService {
 }
 
 // calculate at 30fps, refresh at 1fps
-export const eventTimer = new TimerService({ refresh: 32, updateInterval: 1000 });
+// we consider a skip at 3 lost updates
+export const eventTimer = new TimerService({ refresh: 32, updateInterval: 1000, skipThreshold: 32 * 3 });
diff --git a/apps/server/src/services/__tests__/timerUtils.test.ts b/apps/server/src/services/__tests__/timerUtils.test.ts
index 204eedf57..acb17cc1a 100644
--- a/apps/server/src/services/__tests__/timerUtils.test.ts
+++ b/apps/server/src/services/__tests__/timerUtils.test.ts
@@ -1,8 +1,7 @@
 import { dayInMs } from 'ontime-utils';
 import { TimerType } from 'ontime-types';
 
-import { getCurrent, getExpectedFinish, skipedOutOfEvent } from '../timerUtils.js';
-import { config } from '../../config/config.js';
+import { getCurrent, getExpectedFinish, skippedOutOfEvent } from '../timerUtils.js';
 
 describe('getExpectedFinish()', () => {
   it('is null if we havent started', () => {
@@ -356,88 +355,105 @@ describe('getExpectedFinish() and getCurrentTime() combined', () => {
   });
 });
 
-describe('skipedOutOfEvent()', () => {
-  it('normal roll out of event', () => {
+describe('skippedOutOfEvent()', () => {
+  const testSkipLimit = 32;
+  it('does not consider an event end as a skip', () => {
     const startedAt = 1000;
     const duration = 1000;
     const expectedFinish = startedAt + duration;
-    const previousTime = expectedFinish - config.timeSkipLimit / 2;
+    const previousTime = expectedFinish - testSkipLimit / 2;
+
     let clock = previousTime;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock += config.timeSkipLimit;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
+
+    clock += testSkipLimit;
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
   });
 
-  it('normal roll backwards out of event', () => {
+  it('allows rolling backwards in an event', () => {
     const startedAt = 1000;
     const duration = 1000;
     const expectedFinish = startedAt + duration;
-    const previousTime = startedAt + config.timeSkipLimit / 2;
+    const previousTime = startedAt + testSkipLimit / 2;
+
     let clock = previousTime;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock -= config.timeSkipLimit;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
+
+    clock -= testSkipLimit;
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
   });
 
-  it('normal roll out of event over midnight', () => {
-    const startedAt = dayInMs - config.timeSkipLimit;
+  it('accounts for crossing midnight', () => {
+    const startedAt = dayInMs - testSkipLimit;
     const expectedFinish = 10;
     const previousTime = dayInMs - 1;
+
     let clock = previousTime;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock = config.timeSkipLimit - 2;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
+
+    clock = testSkipLimit - 2;
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
   });
 
-  it('normal roll backwards out of event over midnight', () => {
-    const startedAt = dayInMs - config.timeSkipLimit;
+  it('allows rolling backwards in an event across midnight', () => {
+    const startedAt = dayInMs - testSkipLimit;
     const expectedFinish = 10;
     const previousTime = startedAt + 1;
+
     let clock = previousTime;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock -= config.timeSkipLimit;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
+
+    clock -= testSkipLimit;
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
   });
 
-  it('skip out of event', () => {
+  it('finds skip forwards out of event', () => {
     const startedAt = 1000;
     const duration = 1000;
     const expectedFinish = startedAt + duration;
-    const previousTime = expectedFinish - config.timeSkipLimit / 2;
+    const previousTime = expectedFinish - testSkipLimit / 2;
+
     let clock = previousTime;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock += config.timeSkipLimit + 1;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
+
+    clock += testSkipLimit + 1;
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(true);
   });
 
-  it('skip backwards out of event', () => {
+  it('finds skip backwards out of event', () => {
     const startedAt = 1000;
     const duration = 1000;
     const expectedFinish = startedAt + duration;
-    const previousTime = startedAt + config.timeSkipLimit / 2;
+    const previousTime = startedAt + testSkipLimit / 2;
+
     let clock = previousTime;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock -= config.timeSkipLimit + 1;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
+
+    clock -= testSkipLimit + 1;
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(true);
   });
 
-  it('skip out of event over midnight', () => {
-    const startedAt = dayInMs - config.timeSkipLimit;
+  it('finds skip forwards out of event across midnight', () => {
+    const startedAt = dayInMs - testSkipLimit;
     const expectedFinish = 10;
     const previousTime = dayInMs - 3;
+
     let clock = previousTime;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock = config.timeSkipLimit - 2;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
+
+    clock = testSkipLimit - 2;
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(true);
   });
 
-  it('skip backwards out of event over midnight', () => {
-    const startedAt = dayInMs - config.timeSkipLimit;
+  it('finds skip backwards out of event across midnight', () => {
+    const startedAt = dayInMs - testSkipLimit;
     const expectedFinish = 10;
     const previousTime = startedAt + 1;
+
     let clock = previousTime;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(false);
-    clock -= config.timeSkipLimit + 1;
-    expect(skipedOutOfEvent(previousTime, clock, startedAt, expectedFinish)).toBe(true);
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(false);
+
+    clock -= testSkipLimit + 1;
+    expect(skippedOutOfEvent(previousTime, clock, startedAt, expectedFinish, testSkipLimit)).toBe(true);
   });
 });
diff --git a/apps/server/src/services/timerUtils.ts b/apps/server/src/services/timerUtils.ts
index 69e62b058..a657389f5 100644
--- a/apps/server/src/services/timerUtils.ts
+++ b/apps/server/src/services/timerUtils.ts
@@ -1,6 +1,5 @@
 import { MaybeNumber, TimerType } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
-import { config } from '../config/config.js';
 
 /**
  * Calculates expected finish time of a running timer
@@ -66,18 +65,19 @@ export function getCurrent(
   return startedAt + duration + addedTime + pausedTime - clock;
 }
 
-export function skipedOutOfEvent(previousTime: number, clock: number, startedAt: number, expectedFinish): boolean {
-  if (previousTime > dayInMs - config.timeSkipLimit && clock < config.timeSkipLimit) {
-    clock += dayInMs;
-  }
-  const skipTime = previousTime - clock;
-  const hasSkipped = Math.abs(skipTime) > config.timeSkipLimit;
-  expectedFinish = expectedFinish >= startedAt ? expectedFinish : expectedFinish + dayInMs;
-  if (hasSkipped) {
-    if (clock > expectedFinish || clock < startedAt) {
-      return true;
-    }
-    // otherwise we just skipped within the event
-  }
-  return false;
+export function skippedOutOfEvent(
+  previousTime: number,
+  clock: number,
+  startedAt: number,
+  expectedFinish: number,
+  skipLimit: number,
+): boolean {
+  const hasPassedMidnight = previousTime > dayInMs - skipLimit && clock < skipLimit;
+  const adjustedClock = hasPassedMidnight ? clock + dayInMs : clock;
+
+  const timeDifference = previousTime - adjustedClock;
+  const hasSkipped = Math.abs(timeDifference) > skipLimit;
+  const adjustedExpectedFinish = expectedFinish >= startedAt ? expectedFinish : expectedFinish + dayInMs;
+
+  return hasSkipped && (adjustedClock > adjustedExpectedFinish || adjustedClock < startedAt);
 }

From a93cd3e9b15af12f0c4c536e8b07956943f28a97 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Thu, 7 Dec 2023 17:57:04 +0100
Subject: [PATCH 20/24] style: prevent menu mirroring (#632)

---
 .../components/navigation-menu/NavigationMenu.module.scss     | 4 ----
 .../src/common/components/navigation-menu/NavigationMenu.tsx  | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
index c4e942229..323ace84e 100644
--- a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
+++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
@@ -10,10 +10,6 @@ $icon-color: $ui-white;
 $button-bg: $gray-1050;
 $button-size: 48px;
 
-.mirror {
-  transform: rotate(180deg);
-}
-
 .buttonContainer {
   display: flex;
   flex-direction: column;
diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
index 8d72fed80..078aafb96 100644
--- a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
+++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
@@ -22,7 +22,7 @@ function NavigationMenu() {
   const location = useLocation();
 
   const { isFullScreen, toggleFullScreen } = useFullscreen();
-  const { mirror, toggleMirror } = useViewOptionsStore();
+  const { toggleMirror } = useViewOptionsStore();
   const [showButton, setShowButton] = useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
   const [showMenu, setShowMenu] = useState(false);
@@ -63,7 +63,7 @@ function NavigationMenu() {
   };
 
   return createPortal(
-    <div id='navigation-menu-portal' ref={menuRef} className={mirror ? style.mirror : ''}>
+    <div id='navigation-menu-portal' ref={menuRef}>
       <RenameClientModal isOpen={isOpen} onClose={onClose} />
       <div className={`${style.buttonContainer} ${!showButton && !showMenu ? style.hidden : ''}`}>
         <button onClick={toggleMenu} aria-label='toggle menu' className={style.navButton}>

From 1343818917db25e3a4597d42828e53b25a95e621 Mon Sep 17 00:00:00 2001
From: Alex Christoffer Rasmussen <ac@omnivox.dk>
Date: Fri, 8 Dec 2023 12:55:04 +0100
Subject: [PATCH 21/24] Improve change api (#628)

* fix: jsdoc comments

* more human casting of string values to boolean

* add coerceColour to get named colors to work

* cue can't pass isKeyOfType event check

* dont mutate value

* alloow cue in eventDef

* lint

* css named or hex formatting

* "sideEffects": false

* test colour hex regex

* roll eventDef back to master

* parse property

* don't export cssColour names

* remove import

* only allow string types to colour

* handle transparent colour

* mix alpha with bg colour

* only allow updating events

* descriptive names

* add test for getAccessibleColour

* readability

* move isColourHex to regex-utils

* simplify and add test
---
 .../common/utils/__tests__/styleUtils.test.ts |  23 +-
 apps/client/src/common/utils/styleUtils.ts    |   8 +-
 .../client/src/features/cuesheet/Cuesheet.tsx |   5 +-
 .../cuesheet-table-elements/EventRow.tsx      |   6 +-
 .../integrationController.config.ts           |  20 +-
 .../src/controllers/integrationController.ts  |   9 +-
 .../src/utils/__tests__/coerceType.test.ts    |  21 ++
 apps/server/src/utils/coerceType.ts           | 198 +++++++++++++++++-
 packages/utils/index.ts                       |   1 +
 packages/utils/package.json                   |   3 +-
 .../utils/src/regex-utils/isColourHex.test.ts |  45 ++++
 packages/utils/src/regex-utils/isColourHex.ts |  10 +
 12 files changed, 322 insertions(+), 27 deletions(-)
 create mode 100644 apps/server/src/utils/__tests__/coerceType.test.ts
 create mode 100644 packages/utils/src/regex-utils/isColourHex.test.ts
 create mode 100644 packages/utils/src/regex-utils/isColourHex.ts

diff --git a/apps/client/src/common/utils/__tests__/styleUtils.test.ts b/apps/client/src/common/utils/__tests__/styleUtils.test.ts
index 0fe9c05f6..f5d753759 100644
--- a/apps/client/src/common/utils/__tests__/styleUtils.test.ts
+++ b/apps/client/src/common/utils/__tests__/styleUtils.test.ts
@@ -1,4 +1,4 @@
-import { cx } from '../styleUtils';
+import { cx, getAccessibleColour } from '../styleUtils';
 
 import style from './styleUtils.module.scss';
 
@@ -13,3 +13,24 @@ describe('cx()', () => {
     expect(merged).toMatchSnapshot();
   });
 });
+
+describe('getAccessibleColour()', () => {
+  it('handles named colours', () => {
+    const colour = 'red';
+    const { backgroundColor, color } = getAccessibleColour(colour);
+    expect(backgroundColor).toBe('#FF0000FF');
+    expect(color).toBe('#fffffa');
+  });
+  it('handles hex colours', () => {
+    const colour = '#0F0';
+    const { backgroundColor, color } = getAccessibleColour(colour);
+    expect(backgroundColor).toBe('#00FF00FF');
+    expect(color).toBe('black');
+  });
+  it('handles transparens', () => {
+    const colour = '#0F08';
+    const { backgroundColor, color } = getAccessibleColour(colour);
+    expect(backgroundColor).toBe('#0C940CFF');
+    expect(color).toBe('#fffffa');
+  });
+});
diff --git a/apps/client/src/common/utils/styleUtils.ts b/apps/client/src/common/utils/styleUtils.ts
index 5453221f7..a7bbbd7a2 100644
--- a/apps/client/src/common/utils/styleUtils.ts
+++ b/apps/client/src/common/utils/styleUtils.ts
@@ -13,13 +13,15 @@ type ColourCombination = {
 export const getAccessibleColour = (bgColour?: string): ColourCombination => {
   if (bgColour) {
     try {
-      const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa';
-      return { backgroundColor: bgColour, color: textColor };
+      const originalColour = Color(bgColour);
+      const backgroundColorMix = originalColour.alpha(1).mix(Color('#1a1a1a'), 1 - originalColour.alpha());
+      const textColor = backgroundColorMix.isLight() ? 'black' : '#fffffa';
+      return { backgroundColor: backgroundColorMix.hexa(), color: textColor };
     } catch (_error) {
       /* we do not handle errors here */
     }
   }
-  return { backgroundColor: '#000', color: '#fffffa' };
+  return { backgroundColor: '#1a1a1a', color: '#fffffa' };
 };
 
 /**
diff --git a/apps/client/src/features/cuesheet/Cuesheet.tsx b/apps/client/src/features/cuesheet/Cuesheet.tsx
index e9e00ed6a..bd9ed3358 100644
--- a/apps/client/src/features/cuesheet/Cuesheet.tsx
+++ b/apps/client/src/features/cuesheet/Cuesheet.tsx
@@ -5,6 +5,7 @@ import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundo
 
 import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useLocalStorage } from '../../common/hooks/useLocalStorage';
+import { getAccessibleColour } from '../../common/utils/styleUtils';
 
 import BlockRow from './cuesheet-table-elements/BlockRow';
 import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
@@ -120,8 +121,8 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                 } else if (row.original.colour) {
                   try {
                     // the colour is user defined and might be invalid
-                    const colour = new Color(row.original.colour).alpha(0.25);
-                    rowBgColour = colour.hsl().string();
+                    const accessibleBackgroundColor = Color(getAccessibleColour(row.original.colour).backgroundColor);
+                    rowBgColour = accessibleBackgroundColor.fade(0.75).hexa();
                   } catch (_error) {
                     /* we do not handle errors here */
                   }
diff --git a/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx b/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
index 3e575f42b..61bdba737 100644
--- a/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
@@ -19,8 +19,8 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
   const ownRef = useRef<HTMLTableRowElement>(null);
   const [isVisible, setIsVisible] = useState(false);
 
-  const bgColour = colour;
-  const textColour = getAccessibleColour(bgColour);
+  const textColour = getAccessibleColour(colour);
+  const bgColour = textColour.backgroundColor;
 
   useLayoutEffect(() => {
     const observer = new IntersectionObserver(
@@ -55,7 +55,7 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
       style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
       ref={selectedRef ?? ownRef}
     >
-      <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour?.color }}>
+      <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour.color }}>
         {eventIndex}
       </td>
       {isVisible ? children : null}
diff --git a/apps/server/src/controllers/integrationController.config.ts b/apps/server/src/controllers/integrationController.config.ts
index 27b93744c..6f43ac5f4 100644
--- a/apps/server/src/controllers/integrationController.config.ts
+++ b/apps/server/src/controllers/integrationController.config.ts
@@ -1,8 +1,9 @@
 import { LogOrigin, OntimeEvent } from 'ontime-types';
 import { EventLoader } from '../classes/event-loader/EventLoader.js';
 import { editEvent } from '../services/rundown-service/RundownService.js';
-import { coerceString, coerceNumber, coerceBoolean } from '../utils/coerceType.js';
+import { coerceString, coerceNumber, coerceBoolean, coerceColour } from '../utils/coerceType.js';
 import { logger } from '../classes/Logger.js';
+import { isKeyOfType, isOntimeEvent } from 'ontime-types/src/utils/guards.js';
 
 const whitelistedPayload = {
   title: coerceString,
@@ -16,7 +17,8 @@ const whitelistedPayload = {
   isPublic: coerceBoolean,
   skip: coerceBoolean,
 
-  colour: coerceString,
+  colour: coerceColour,
+
   user0: coerceString,
   user1: coerceString,
   user2: coerceString,
@@ -29,12 +31,12 @@ const whitelistedPayload = {
   user9: coerceString,
 };
 
-export function parse(field: string, value: unknown) {
-  if (!Object.hasOwn(whitelistedPayload, field)) {
-    throw new Error(`Field ${field} not permitted`);
+export function parse(property: string, value: unknown) {
+  if (!isKeyOfType(property, whitelistedPayload)) {
+    throw new Error(`Property ${property} not permitted`);
   }
-  const parserFn = whitelistedPayload[field];
-  return parserFn(value);
+  const parserFn = whitelistedPayload[property];
+  return { parsedProperty: property, parsedPayload: parserFn(value) };
 }
 
 /**
@@ -49,8 +51,10 @@ export function updateEvent(
   newValue: OntimeEvent[typeof propertyName],
 ) {
   const event = EventLoader.getEventWithId(eventId);
-
   if (event) {
+    if (!isOntimeEvent(event)) {
+      throw new Error(`Can only update events`);
+    }
     const propertiesToUpdate = { [propertyName]: newValue };
 
     // Handles the special case for duration
diff --git a/apps/server/src/controllers/integrationController.ts b/apps/server/src/controllers/integrationController.ts
index 243d60b65..e95acab7b 100644
--- a/apps/server/src/controllers/integrationController.ts
+++ b/apps/server/src/controllers/integrationController.ts
@@ -2,8 +2,6 @@ import { messageService } from '../services/message-service/MessageService.js';
 import { PlaybackService } from '../services/PlaybackService.js';
 import { eventStore } from '../stores/EventStore.js';
 import { parse, updateEvent } from './integrationController.config.js';
-import { isKeyOfType } from 'ontime-types/src/utils/guards.js';
-import { event } from '../models/eventsDefinition.js';
 
 export type ChangeOptions = {
   eventId: string;
@@ -272,11 +270,8 @@ export function dispatchFromAdapter(
     // WS: {type: 'change', payload: { eventId, property, value } }
     case 'change': {
       const { eventId, property, value } = payload as ChangeOptions;
-      if (!isKeyOfType(property, event)) {
-        throw new Error(`Cannot update unknown event property ${property}`);
-      }
-      const parsedPayload = parse(property, value);
-      return updateEvent(eventId, property, parsedPayload);
+      const { parsedPayload, parsedProperty } = parse(property, value);
+      return updateEvent(eventId, parsedProperty, parsedPayload);
     }
 
     default: {
diff --git a/apps/server/src/utils/__tests__/coerceType.test.ts b/apps/server/src/utils/__tests__/coerceType.test.ts
new file mode 100644
index 000000000..eeaa43b37
--- /dev/null
+++ b/apps/server/src/utils/__tests__/coerceType.test.ts
@@ -0,0 +1,21 @@
+import { coerceColour } from '../coerceType.js';
+
+describe('parses a colour string that is', () => {
+  it('valid hex', () => {
+    const color = coerceColour('#000');
+    expect(color).toBe('#000');
+  });
+  it('valid name', () => {
+    const color = coerceColour('darkgoldenrod');
+    expect(color).toBe('darkgoldenrod');
+  });
+  it('invalid hex', () => {
+    expect(() => coerceColour('#not a hex color')).toThrowError(Error('Invalid hex colour received'));
+  });
+  it('invalid name', () => {
+    expect(() => coerceColour('bad name')).toThrowError(Error('Invalid colour name received'));
+  });
+  it('not a string', () => {
+    expect(() => coerceColour(5)).toThrowError(Error('Invalid colour value received'));
+  });
+});
diff --git a/apps/server/src/utils/coerceType.ts b/apps/server/src/utils/coerceType.ts
index ff0dd8563..8360f3db2 100644
--- a/apps/server/src/utils/coerceType.ts
+++ b/apps/server/src/utils/coerceType.ts
@@ -1,5 +1,8 @@
+import { isColourHex } from 'ontime-utils';
+
+//TODO: write tests
 /**
- * @description Converts a value to a number if possible, throws otherwise
+ * @description Converts a value to a string if possible, throws otherwise
  * @param {unknown} value - Value to be converted to a string.
  * @returns {string} - The converted value as a string.
  * @throws {Error} Throws an error if the value is null or undefined.
@@ -11,8 +14,9 @@ export function coerceString(value: unknown): string {
   return String(value);
 }
 
+//TODO: write tests
 /**
- * @description Converts a value to a number if possible, throws otherwise
+ * @description Converts a value to a boolean if possible, throws otherwise
  * @param {unknown} value - Value to be converted to a boolean.
  * @returns {boolean} - The converted value as a boolean.
  * @throws {Error} Throws an error if the value is null or undefined.
@@ -21,9 +25,26 @@ export function coerceBoolean(value: unknown): boolean {
   if (value == null) {
     throw new Error('Invalid value received');
   }
+  if (typeof value === 'string') {
+    const lowerCaseValue = value.toLocaleLowerCase();
+    switch (lowerCaseValue) {
+      case 'true':
+      case '1':
+      case 'yes':
+        return true;
+      case 'false':
+      case '0':
+      case 'no':
+      case '':
+        return false;
+      default:
+        throw new Error('Invalid value received');
+    }
+  }
   return Boolean(value);
 }
 
+//TODO: write tests
 /**
  * @description Converts a value to a number if possible, throws otherwise
  * @param {unknown} value - Value to be converted to a number.
@@ -40,3 +61,176 @@ export function coerceNumber(value: unknown): number {
   }
   return parsedValue;
 }
+
+/**
+ * @description Converts a value to a colour if possible, throws otherwise
+ * @param {unknown} value - Value to be converted to a colour.
+ * @returns {string} - The converted value as a string.
+ * @throws {Error} Throws an error if the value is null or undefined.
+ */
+export function coerceColour(value: unknown): string {
+  if (typeof value !== 'string') {
+    throw new Error('Invalid colour value received');
+  }
+  const lowerCaseValue = value.toLocaleLowerCase();
+  if (lowerCaseValue.startsWith('#')) {
+    if (!isColourHex(lowerCaseValue)) {
+      throw new Error('Invalid hex colour received');
+    }
+  } else if (!(lowerCaseValue in cssColours)) {
+    throw new Error('Invalid colour name received');
+  }
+  return lowerCaseValue;
+}
+
+//https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
+const cssColours = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgreen: '#006400',
+  darkgrey: '#a9a9a9',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategray: '#2f4f4f',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  goldenrod: '#daa520',
+  gold: '#ffd700',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  grey: '#808080',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavenderblush: '#fff0f5',
+  lavender: '#e6e6fa',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightgrey: '#d3d3d3',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd3',
+} as const;
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index ac0060d56..aeb363dc7 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -15,6 +15,7 @@ export { formatDisplay } from './src/date-utils/formatDisplay.js';
 export { formatFromMillis } from './src/date-utils/formatFromMillis.js';
 export { isTimeString } from './src/date-utils/isTimeString.js';
 export { millisToString } from './src/date-utils/millisToString.js';
+export { isColourHex } from './src/regex-utils/isColourHex.js';
 
 // time utils
 export { dayInMs, mts } from './src/timeConstants.js';
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 96d41f8ce..7ead3ab0f 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -28,5 +28,6 @@
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
     "vitest": "^0.30.1"
-  }
+  },
+  "sideEffects": false
 }
diff --git a/packages/utils/src/regex-utils/isColourHex.test.ts b/packages/utils/src/regex-utils/isColourHex.test.ts
new file mode 100644
index 000000000..eeb525e14
--- /dev/null
+++ b/packages/utils/src/regex-utils/isColourHex.test.ts
@@ -0,0 +1,45 @@
+import { isColourHex } from './isColourHex';
+
+describe('test isColourHex() function', () => {
+  it('it validates colour hex strings', () => {
+    const ts = ['#FFF', '#FFFF', '#FFFFFF', '#FFFFFFFF'];
+    for (const s of ts) {
+      expect(isColourHex(s)).toBe(true);
+    }
+  });
+
+  it('it validates colour hex strings', () => {
+    const ts = ['#F90', '#1234', '#56789A', '#BCDEF012'];
+    for (const s of ts) {
+      expect(isColourHex(s)).toBe(true);
+    }
+  });
+
+  it('it validates colour hex strings', () => {
+    const ts = ['#f90', '#1234', '#56789a', '#bcdef012'];
+    for (const s of ts) {
+      expect(isColourHex(s)).toBe(true);
+    }
+  });
+
+  it('it fails digits bigger than F', () => {
+    const ts = ['#FFG'];
+    for (const s of ts) {
+      expect(isColourHex(s)).toBe(false);
+    }
+  });
+
+  it('it fails incorect amout of digits', () => {
+    const ts = ['#F', '#FF', '#FFFFF', '#FFFFFFF', '#FFFFFFFFF'];
+    for (const s of ts) {
+      expect(isColourHex(s)).toBe(false);
+    }
+  });
+
+  it('it fails missing #', () => {
+    const ts = ['FFF', 'FFFF', 'FFFFFF', 'FFFFFFFF'];
+    for (const s of ts) {
+      expect(isColourHex(s)).toBe(false);
+    }
+  });
+});
diff --git a/packages/utils/src/regex-utils/isColourHex.ts b/packages/utils/src/regex-utils/isColourHex.ts
new file mode 100644
index 000000000..5bba772f2
--- /dev/null
+++ b/packages/utils/src/regex-utils/isColourHex.ts
@@ -0,0 +1,10 @@
+/**
+ * @description Validates a colour hex string
+ * @param {string} text - colour hex string "#FFF" | "#FFFF" | "#FFFFFF" | "#FFFFFFFF"
+ * @returns {boolean} string represents time
+ */
+export const isColourHex = (text: string): boolean => {
+  const regexS = /^#((?:[a-f\d]{1}){3,4})$/i;
+  const regexD = /^#((?:[a-f\d]{2}){3,4})$/i;
+  return regexS.test(text) || regexD.test(text);
+};

From abe27d54a2f00326984dd0e4b6b8422051521d75 Mon Sep 17 00:00:00 2001
From: Alex Christoffer Rasmussen <ac@omnivox.dk>
Date: Fri, 8 Dec 2023 21:46:29 +0100
Subject: [PATCH 22/24] refactor: use add time in client (#636)

---
 apps/client/src/common/hooks/useSocket.ts                 | 4 ++--
 .../control/playback/playback-timer/PlaybackTimer.tsx     | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts
index 4ce6edc2b..62ef9b370 100644
--- a/apps/client/src/common/hooks/useSocket.ts
+++ b/apps/client/src/common/hooks/useSocket.ts
@@ -75,8 +75,8 @@ export const setPlayback = {
   reload: () => {
     socketSendJson('reload');
   },
-  delay: (amount: number) => {
-    socketSendJson('delay', amount);
+  addTime: (amount: number) => {
+    socketSendJson('addtime', amount);
   },
 };
 
diff --git a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx
index 47f14ae03..d9c4900a2 100644
--- a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx
+++ b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx
@@ -86,22 +86,22 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
       )}
       <div className={style.btn}>
         <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.delay(-1)} disabled={disableButtons} aspect='square'>
+          <TapButton onClick={() => setPlayback.addTime(-60)} disabled={disableButtons} aspect='square'>
             -1
           </TapButton>
         </Tooltip>
         <Tooltip label='Add 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.delay(1)} disabled={disableButtons} aspect='square'>
+          <TapButton onClick={() => setPlayback.addTime(60)} disabled={disableButtons} aspect='square'>
             +1
           </TapButton>
         </Tooltip>
         <Tooltip label='Remove 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.delay(-5)} disabled={disableButtons} aspect='square'>
+          <TapButton onClick={() => setPlayback.addTime(-5 * 60)} disabled={disableButtons} aspect='square'>
             -5
           </TapButton>
         </Tooltip>
         <Tooltip label='Add 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.delay(+5)} disabled={disableButtons} aspect='square'>
+          <TapButton onClick={() => setPlayback.addTime(+5 * 60)} disabled={disableButtons} aspect='square'>
             +5
           </TapButton>
         </Tooltip>

From 2586b0b10c6962abad31b734cd329a5aa7262300 Mon Sep 17 00:00:00 2001
From: Alex Christoffer Rasmussen <ac@omnivox.dk>
Date: Sun, 10 Dec 2023 16:56:42 +0100
Subject: [PATCH 23/24] feat: http integration (#575)

* addtime endpoint

* create universal Subscription

* add http integration

* catch error from HTTP integration emit

* unify osc and http validateSubscriptionEntry

* add necessary endpoint for http subscription

* make subscription part of modal generic

* add http subscription to integration modal

* remove log

* Revert "addtime endpoint"

This reverts commit 4c039220dcf869a2d394a20da06c1effcc45811e.

* reuse agent and test url compatibility

* simplify retun path

* add todo in UI

* test for http protocol

* import not needed yet

* lint

* fix merge

* lint

* fix httpPlaceholder

* wip: prepare endpoints

* wip: temporary fix to get form to work

* disable HTTP integration if enabledOut==false

* register/unregister http

* refactor: subscription types and form register

* refactor: validation

* cleanup

* cleanup

* try GOT

* allow https

* split url and searchParams allow for post option

* add options to post

* add retry count

* fix test

* Revert "fix test"

This reverts commit 927e88370fa3088320a287946b5f3c4b075e62fc.

* Revert "add options to post"

This reverts commit 0523a68ef4f0f529c936be113f295dfba23af32f.

* Revert "split url and searchParams allow for post option"

This reverts commit 54ab8d4ffec36acaaf16caaca3398136240107b0.

* missing retryCount in httpPlaceholder

* remove global this

* remove retry count

* remove https

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>
---
 apps/client/src/common/api/apiConstants.ts    |   1 +
 apps/client/src/common/api/ontimeApi.ts       |  18 ++
 .../src/common/hooks-query/useHttpSettings.ts |  33 ++++
 apps/client/src/common/models/Http.ts         |  35 ++--
 .../src/common/utils/__tests__/regex.test.ts  |  14 +-
 apps/client/src/common/utils/regex.ts         |   1 +
 .../integration-modal/IntegrationModal.tsx    |   9 +-
 .../http/HttpIntegration.tsx                  | 152 ++++++++++++++++
 .../http/HttpSubscriptionRow.tsx              |  95 ++++++++++
 .../integration-modal/integration.utils.ts    |  30 ++++
 .../{ => osc}/OscIntegration.tsx              |  47 ++---
 .../{ => osc}/OscSettings.tsx                 |  14 +-
 .../{ => osc}/OscSubscriptionRow.tsx          |  13 +-
 apps/server/package.json                      |   1 +
 apps/server/src/app.ts                        |  28 ++-
 .../src/classes/data-provider/DataProvider.ts |   9 +
 .../src/controllers/ontimeController.ts       |  78 ++++++---
 .../controllers/ontimeController.validate.ts  |  35 +++-
 apps/server/src/models/dataModel.ts           |  11 ++
 apps/server/src/routes/ontimeRouter.ts        |  11 +-
 .../integration-service/HttpIntegration.ts    |  99 +++++++++++
 .../integration-service/IIntegration.ts       |   6 +-
 .../integration-service/IntegrationService.ts |   6 +-
 .../integration-service/OscIntegration.ts     |   8 +-
 .../utils/__tests__/parserFunctions.test.js   |  91 ----------
 .../utils/__tests__/parserFunctions.test.ts   | 162 ++++++++++++++++++
 apps/server/src/utils/parser.ts               |   3 +-
 apps/server/src/utils/parserFunctions.ts      |  84 +++++++--
 apps/server/test-db/db.json                   |  11 ++
 apps/test-db/db.json                          |  25 ++-
 demo-db/db.json                               |  11 ++
 .../types/src/definitions/DataModel.type.ts   |   2 +
 .../src/definitions/core/HttpSettings.type.ts |   9 +
 .../src/definitions/core/OscSettings.type.ts  |   4 +-
 .../src/definitions/core/Subscription.type.ts |   3 +
 packages/types/src/index.ts                   |   4 +
 pnpm-lock.yaml                                | 122 ++++++++++---
 37 files changed, 1021 insertions(+), 264 deletions(-)
 create mode 100644 apps/client/src/common/hooks-query/useHttpSettings.ts
 create mode 100644 apps/client/src/features/modals/integration-modal/http/HttpIntegration.tsx
 create mode 100644 apps/client/src/features/modals/integration-modal/http/HttpSubscriptionRow.tsx
 create mode 100644 apps/client/src/features/modals/integration-modal/integration.utils.ts
 rename apps/client/src/features/modals/integration-modal/{ => osc}/OscIntegration.tsx (78%)
 rename apps/client/src/features/modals/integration-modal/{ => osc}/OscSettings.tsx (92%)
 rename apps/client/src/features/modals/integration-modal/{ => osc}/OscSubscriptionRow.tsx (87%)
 create mode 100644 apps/server/src/services/integration-service/HttpIntegration.ts
 delete mode 100644 apps/server/src/utils/__tests__/parserFunctions.test.js
 create mode 100644 apps/server/src/utils/__tests__/parserFunctions.test.ts
 create mode 100644 packages/types/src/definitions/core/HttpSettings.type.ts
 create mode 100644 packages/types/src/definitions/core/Subscription.type.ts

diff --git a/apps/client/src/common/api/apiConstants.ts b/apps/client/src/common/api/apiConstants.ts
index 9959d7275..4ad3a12f3 100644
--- a/apps/client/src/common/api/apiConstants.ts
+++ b/apps/client/src/common/api/apiConstants.ts
@@ -5,6 +5,7 @@ export const USERFIELDS = ['userFields'];
 export const RUNDOWN = ['rundown'];
 export const APP_INFO = ['appinfo'];
 export const OSC_SETTINGS = ['oscSettings'];
+export const HTTP_SETTINGS = ['httpSettings'];
 export const APP_SETTINGS = ['appSettings'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const RUNTIME = ['runtimeStore'];
diff --git a/apps/client/src/common/api/ontimeApi.ts b/apps/client/src/common/api/ontimeApi.ts
index 05c787d9d..5c45a0b2e 100644
--- a/apps/client/src/common/api/ontimeApi.ts
+++ b/apps/client/src/common/api/ontimeApi.ts
@@ -3,6 +3,7 @@ import {
   Alias,
   DatabaseModel,
   GetInfo,
+  HttpSettings,
   OntimeRundown,
   OSCSettings,
   OscSubscription,
@@ -104,6 +105,23 @@ export async function getOSC(): Promise<OSCSettings> {
   return res.data;
 }
 
+/**
+ * @description HTTP request to retrieve http settings
+ * @return {Promise}
+ */
+export async function getHTTP(): Promise<HttpSettings> {
+  const res = await axios.get(`${ontimeURL}/http`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate http settings
+ * @return {Promise}
+ */
+export async function postHTTP(data: HttpSettings) {
+  return axios.post(`${ontimeURL}/http`, data);
+}
+
 /**
  * @description HTTP request to mutate osc settings
  * @return {Promise}
diff --git a/apps/client/src/common/hooks-query/useHttpSettings.ts b/apps/client/src/common/hooks-query/useHttpSettings.ts
new file mode 100644
index 000000000..6435eb4fb
--- /dev/null
+++ b/apps/client/src/common/hooks-query/useHttpSettings.ts
@@ -0,0 +1,33 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { HttpSettings } from 'ontime-types';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { HTTP_SETTINGS } from '../api/apiConstants';
+import { logAxiosError } from '../api/apiUtils';
+import { getHTTP, postHTTP } from '../api/ontimeApi';
+import { httpPlaceholder } from '../models/Http';
+import { ontimeQueryClient } from '../queryClient';
+
+export function useHttpSettings() {
+  const { data, status, isFetching, isError, refetch } = useQuery({
+    queryKey: HTTP_SETTINGS,
+    queryFn: getHTTP,
+    placeholderData: httpPlaceholder,
+    retry: 5,
+    retryDelay: (attempt: number) => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
+  });
+
+  // we need to jump through some hoops because of the type op port
+  return { data: data! as unknown as HttpSettings, status, isFetching, isError, refetch };
+}
+
+export function usePostHttpSettings() {
+  const { isPending, mutateAsync } = useMutation({
+    mutationFn: postHTTP,
+    onError: (error) => logAxiosError('Error saving HTTP settings', error),
+    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: HTTP_SETTINGS }),
+  });
+  return { isPending, mutateAsync };
+}
diff --git a/apps/client/src/common/models/Http.ts b/apps/client/src/common/models/Http.ts
index 7c94e470e..f2393a1dd 100644
--- a/apps/client/src/common/models/Http.ts
+++ b/apps/client/src/common/models/Http.ts
@@ -1,26 +1,13 @@
-export const httpPlaceholder = {
-  onLoad: {
-    url: '',
-    enabled: false,
-  },
-  onStart: {
-    url: '',
-    enabled: false,
-  },
-  onUpdate: {
-    url: '',
-    enabled: false,
-  },
-  onPause: {
-    url: '',
-    enabled: false,
-  },
-  onStop: {
-    url: '',
-    enabled: false,
-  },
-  onFinish: {
-    url: '',
-    enabled: false,
+import { HttpSettings } from 'ontime-types';
+
+export const httpPlaceholder: HttpSettings = {
+  enabledOut: false,
+  subscriptions: {
+    onLoad: [],
+    onStart: [],
+    onUpdate: [],
+    onPause: [],
+    onStop: [],
+    onFinish: [],
   },
 };
diff --git a/apps/client/src/common/utils/__tests__/regex.test.ts b/apps/client/src/common/utils/__tests__/regex.test.ts
index 3ab98f6ad..84c65349d 100644
--- a/apps/client/src/common/utils/__tests__/regex.test.ts
+++ b/apps/client/src/common/utils/__tests__/regex.test.ts
@@ -1,4 +1,4 @@
-import { isIPAddress, isOnlyNumbers } from '../regex';
+import { isIPAddress, isOnlyNumbers, startsWithHttp } from '../regex';
 
 describe('simple tests for regex', () => {
   test('isOnlyNumbers', () => {
@@ -24,4 +24,16 @@ describe('simple tests for regex', () => {
       expect(isIPAddress.test(t)).toBe(false);
     });
   });
+
+  test('startsWithHttp', () => {
+    const right = ['http://test'];
+    const wrong = ['https://test', 'testing', '123.0.1'];
+
+    right.forEach((t) => {
+      expect(startsWithHttp.test(t)).toBe(true);
+    });
+    wrong.forEach((t) => {
+      expect(startsWithHttp.test(t)).toBe(false);
+    });
+  });
 });
diff --git a/apps/client/src/common/utils/regex.ts b/apps/client/src/common/utils/regex.ts
index ffc6ad5a7..0d31fa1d6 100644
--- a/apps/client/src/common/utils/regex.ts
+++ b/apps/client/src/common/utils/regex.ts
@@ -1,2 +1,3 @@
 export const isOnlyNumbers = /^\d+$/;
 export const isIPAddress = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/;
+export const startsWithHttp = /^http:\/\//;
diff --git a/apps/client/src/features/modals/integration-modal/IntegrationModal.tsx b/apps/client/src/features/modals/integration-modal/IntegrationModal.tsx
index e71e3fb19..ea7fad644 100644
--- a/apps/client/src/features/modals/integration-modal/IntegrationModal.tsx
+++ b/apps/client/src/features/modals/integration-modal/IntegrationModal.tsx
@@ -2,8 +2,9 @@ import { ModalBody, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/r
 
 import ModalWrapper from '../ModalWrapper';
 
-import OscIntegration from './OscIntegration';
-import OscSettings from './OscSettings';
+import HttpIntegration from './http/HttpIntegration';
+import OscIntegration from './osc/OscIntegration';
+import OscSettings from './osc/OscSettings';
 
 import styles from '../Modal.module.scss';
 
@@ -30,6 +31,7 @@ export default function IntegrationModal(props: IntegrationModalProps) {
           <TabList>
             <Tab>OSC</Tab>
             <Tab>OSC Integration</Tab>
+            <Tab>HTTP Integration</Tab>
           </TabList>
           <TabPanels>
             <TabPanel>
@@ -38,6 +40,9 @@ export default function IntegrationModal(props: IntegrationModalProps) {
             <TabPanel>
               <OscIntegration />
             </TabPanel>
+            <TabPanel>
+              <HttpIntegration />
+            </TabPanel>
           </TabPanels>
         </Tabs>
       </ModalBody>
diff --git a/apps/client/src/features/modals/integration-modal/http/HttpIntegration.tsx b/apps/client/src/features/modals/integration-modal/http/HttpIntegration.tsx
new file mode 100644
index 000000000..617005e84
--- /dev/null
+++ b/apps/client/src/features/modals/integration-modal/http/HttpIntegration.tsx
@@ -0,0 +1,152 @@
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Switch } from '@chakra-ui/react';
+import type { HttpSettings } from 'ontime-types';
+import { TimerLifeCycle } from 'ontime-types';
+
+import { useHttpSettings, usePostHttpSettings } from '../../../../common/hooks-query/useHttpSettings';
+import { useEmitLog } from '../../../../common/stores/logger';
+import ModalLoader from '../../modal-loader/ModalLoader';
+import OntimeModalFooter from '../../OntimeModalFooter';
+import { OntimeCycle, sectionText } from '../integration.utils';
+
+import HttpSubscriptionRow from './HttpSubscriptionRow';
+
+import styles from '../../Modal.module.scss';
+
+export default function HttpIntegration() {
+  const { data, isFetching } = useHttpSettings();
+  const { mutateAsync } = usePostHttpSettings();
+  const { emitError } = useEmitLog();
+  const {
+    control,
+    handleSubmit,
+    register,
+    reset,
+    formState: { isSubmitting, isDirty, isValid },
+  } = useForm<HttpSettings>({
+    mode: 'onBlur',
+    defaultValues: data,
+    values: data,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  const [showSection, setShowSection] = useState<OntimeCycle>(TimerLifeCycle.onLoad);
+
+  useEffect(() => {
+    if (data) {
+      reset(data);
+    }
+  }, [data, reset]);
+
+  const resetForm = () => {
+    reset(data);
+  };
+
+  const onSubmit = async (values: HttpSettings) => {
+    try {
+      const newSettings: HttpSettings = {
+        enabledOut: Boolean(values.enabledOut),
+        subscriptions: {
+          onLoad: values.subscriptions.onLoad ?? [],
+          onStart: values.subscriptions.onStart ?? [],
+          onPause: values.subscriptions.onPause ?? [],
+          onStop: values.subscriptions.onStop ?? [],
+          onUpdate: values.subscriptions.onUpdate ?? [],
+          onFinish: values.subscriptions.onFinish ?? [],
+        },
+      };
+
+      await mutateAsync(newSettings);
+    } catch (error) {
+      emitError(`Error setting HTML: ${error}`);
+    }
+  };
+
+  if (isFetching) {
+    return <ModalLoader />;
+  }
+
+  const placeholder = 'http://x.x.x.x:xxxx/api/path';
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={styles.sectionContainer} id='http-subscriptions'>
+      <div className={styles.splitSection}>
+        <div>
+          <span className={`${styles.sectionTitle} ${styles.main}`}>HTTP Output</span>
+          <span className={styles.sectionSubtitle}>Ontime data feedback</span>
+        </div>
+        <Switch {...register('enabledOut')} variant='ontime-on-light' />
+      </div>
+
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onLoad}
+        title={sectionText.onLoad.title}
+        subtitle={sectionText.onLoad.subtitle}
+        visible={showSection === TimerLifeCycle.onLoad}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onStart}
+        title={sectionText.onStart.title}
+        subtitle={sectionText.onStart.subtitle}
+        visible={showSection === TimerLifeCycle.onStart}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onPause}
+        title={sectionText.onPause.title}
+        subtitle={sectionText.onPause.subtitle}
+        visible={showSection === TimerLifeCycle.onPause}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onStop}
+        title={sectionText.onStop.title}
+        subtitle={sectionText.onStop.subtitle}
+        visible={showSection === TimerLifeCycle.onStop}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onUpdate}
+        title={sectionText.onUpdate.title}
+        subtitle={sectionText.onUpdate.subtitle}
+        visible={showSection === TimerLifeCycle.onUpdate}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <HttpSubscriptionRow
+        cycle={TimerLifeCycle.onFinish}
+        title={sectionText.onFinish.title}
+        subtitle={sectionText.onFinish.subtitle}
+        visible={showSection === TimerLifeCycle.onFinish}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+      />
+      <OntimeModalFooter
+        formId='http-subscriptions'
+        handleRevert={resetForm}
+        isDirty={isDirty}
+        isValid={isValid}
+        isSubmitting={isSubmitting}
+      />
+    </form>
+  );
+}
diff --git a/apps/client/src/features/modals/integration-modal/http/HttpSubscriptionRow.tsx b/apps/client/src/features/modals/integration-modal/http/HttpSubscriptionRow.tsx
new file mode 100644
index 000000000..e9b678fbc
--- /dev/null
+++ b/apps/client/src/features/modals/integration-modal/http/HttpSubscriptionRow.tsx
@@ -0,0 +1,95 @@
+import { Control, useFieldArray, UseFormRegister } from 'react-hook-form';
+import { Button, IconButton, Input, Switch } from '@chakra-ui/react';
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import { HttpSettings, TimerLifeCycle } from 'ontime-types';
+
+import { useEmitLog } from '../../../../common/stores/logger';
+import { startsWithHttp } from '../../../../common/utils/regex';
+
+import collapseStyles from '../../../../common/components/collapse-bar/CollapseBar.module.scss';
+import styles from '../../Modal.module.scss';
+
+interface SubscriptionRowProps {
+  cycle: TimerLifeCycle;
+  title: string;
+  subtitle: string;
+  visible: boolean;
+  setShowSection: (cycle: TimerLifeCycle) => void;
+  register: UseFormRegister<HttpSettings>;
+  control: Control<HttpSettings>;
+  placeholder: string;
+}
+
+export default function SubscriptionRow(props: SubscriptionRowProps) {
+  const { cycle, title, subtitle, visible, setShowSection, register, control, placeholder } = props;
+  const { emitError } = useEmitLog();
+  const { fields, append, remove } = useFieldArray({
+    name: `subscriptions.${cycle}`,
+    control,
+  });
+
+  const hasTooManyOptions = fields.length >= 3;
+  const headerStyle = `${styles.splitSection} ${visible ? '' : styles.showPointer}`;
+
+  const sectionTitle = `${title} ${fields.length ? fields.length : '-'} / 3`;
+
+  const handleAddNew = () => {
+    if (hasTooManyOptions) {
+      emitError(`Maximum amount of ${cycle} subscriptions reached (3)`);
+      return;
+    }
+    append({
+      message: '',
+      enabled: false,
+    });
+  };
+
+  return (
+    <>
+      <div className={headerStyle} onClick={() => setShowSection(cycle)}>
+        <div>
+          <span className={`${styles.sectionTitle} ${styles.main}`}>{sectionTitle}</span>
+          {visible && <span className={styles.sectionSubtitle}>{subtitle}</span>}
+        </div>
+        <FiChevronUp className={visible ? collapseStyles.moreCollapsed : collapseStyles.moreExpanded} />
+      </div>
+      {visible && (
+        <>
+          {fields.map((subscription, index) => (
+            <div key={subscription.id} className={styles.entryRow}>
+              <IconButton
+                icon={<IoRemove />}
+                onClick={() => remove(index)}
+                aria-label='delete'
+                size='xs'
+                colorScheme='red'
+              />
+              <Input
+                placeholder={placeholder}
+                size='xs'
+                variant='ontime-filled-on-light'
+                autoComplete='off'
+                {...register(`subscriptions.${cycle}.${index}.message`, {
+                  pattern: { value: startsWithHttp, message: 'Request address must start with http://' },
+                })}
+              />
+              <Switch variant='ontime-on-light' {...register(`subscriptions.${cycle}.${index}.enabled`)} />
+            </div>
+          ))}
+          <Button
+            onClick={handleAddNew}
+            className={styles.shiftRight}
+            isDisabled={hasTooManyOptions}
+            size='xs'
+            colorScheme='blue'
+            variant='outline'
+            padding='0 2em'
+          >
+            Add new
+          </Button>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/apps/client/src/features/modals/integration-modal/integration.utils.ts b/apps/client/src/features/modals/integration-modal/integration.utils.ts
new file mode 100644
index 000000000..8d35c42f7
--- /dev/null
+++ b/apps/client/src/features/modals/integration-modal/integration.utils.ts
@@ -0,0 +1,30 @@
+import { TimerLifeCycle } from 'ontime-types';
+
+export type OntimeCycle = keyof typeof TimerLifeCycle;
+
+export const sectionText: { [key in TimerLifeCycle]: { title: string; subtitle: string } } = {
+  onLoad: {
+    title: 'On Load',
+    subtitle: 'Triggers when a timer is loaded',
+  },
+  onStart: {
+    title: 'On Start',
+    subtitle: 'Triggers when a timer starts',
+  },
+  onPause: {
+    title: 'On Pause',
+    subtitle: 'Triggers when a running timer is paused',
+  },
+  onStop: {
+    title: 'On Stop',
+    subtitle: 'Triggers when a running timer is stopped',
+  },
+  onUpdate: {
+    title: 'On Every Second',
+    subtitle: 'Triggers when a running timer is updated (at least once a second, can be more)',
+  },
+  onFinish: {
+    title: 'On Finish',
+    subtitle: 'Triggers when a running reaches 0',
+  },
+};
diff --git a/apps/client/src/features/modals/integration-modal/OscIntegration.tsx b/apps/client/src/features/modals/integration-modal/osc/OscIntegration.tsx
similarity index 78%
rename from apps/client/src/features/modals/integration-modal/OscIntegration.tsx
rename to apps/client/src/features/modals/integration-modal/osc/OscIntegration.tsx
index 2875e9aab..0cbbf5c8c 100644
--- a/apps/client/src/features/modals/integration-modal/OscIntegration.tsx
+++ b/apps/client/src/features/modals/integration-modal/osc/OscIntegration.tsx
@@ -3,43 +3,15 @@ import { useForm } from 'react-hook-form';
 import type { OscSubscription } from 'ontime-types';
 import { TimerLifeCycle } from 'ontime-types';
 
-import useOscSettings, { usePostOscSubscriptions } from '../../../common/hooks-query/useOscSettings';
-import { useEmitLog } from '../../../common/stores/logger';
-import ModalLoader from '../modal-loader/ModalLoader';
-import OntimeModalFooter from '../OntimeModalFooter';
+import useOscSettings, { usePostOscSubscriptions } from '../../../../common/hooks-query/useOscSettings';
+import { useEmitLog } from '../../../../common/stores/logger';
+import ModalLoader from '../../modal-loader/ModalLoader';
+import OntimeModalFooter from '../../OntimeModalFooter';
+import { type OntimeCycle, sectionText } from '../integration.utils';
 
 import OscSubscriptionRow from './OscSubscriptionRow';
 
-import styles from '../Modal.module.scss';
-
-type OntimeCycle = keyof typeof TimerLifeCycle;
-
-const sectionText: { [key in TimerLifeCycle]: { title: string; subtitle: string } } = {
-  onLoad: {
-    title: 'On Load',
-    subtitle: 'Triggers when a timer is loaded',
-  },
-  onStart: {
-    title: 'On Start',
-    subtitle: 'Triggers when a timer starts',
-  },
-  onPause: {
-    title: 'On Pause',
-    subtitle: 'Triggers when a running timer is paused',
-  },
-  onStop: {
-    title: 'On Stop',
-    subtitle: 'Triggers when a running timer is stopped',
-  },
-  onUpdate: {
-    title: 'On Every Second',
-    subtitle: 'Triggers when a running timer is updated (at least once a second, can be more)',
-  },
-  onFinish: {
-    title: 'On Finish',
-    subtitle: 'Triggers when a running reaches 0',
-  },
-};
+import styles from '../../Modal.module.scss';
 
 export default function OscIntegration() {
   const { data, isFetching } = useOscSettings();
@@ -92,6 +64,7 @@ export default function OscIntegration() {
     return <ModalLoader />;
   }
 
+  const placeholder = 'OSC message';
   return (
     <form onSubmit={handleSubmit(onSubmit)} className={styles.sectionContainer} id='osc-subscriptions'>
       <OscSubscriptionRow
@@ -102,6 +75,7 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
       <OscSubscriptionRow
         cycle={TimerLifeCycle.onStart}
@@ -111,6 +85,7 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
       <OscSubscriptionRow
         cycle={TimerLifeCycle.onPause}
@@ -120,6 +95,7 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
       <OscSubscriptionRow
         cycle={TimerLifeCycle.onStop}
@@ -129,6 +105,7 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
       <OscSubscriptionRow
         cycle={TimerLifeCycle.onUpdate}
@@ -138,6 +115,7 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
       <OscSubscriptionRow
         cycle={TimerLifeCycle.onFinish}
@@ -147,6 +125,7 @@ export default function OscIntegration() {
         setShowSection={setShowSection}
         register={register}
         control={control}
+        placeholder={placeholder}
       />
       <OntimeModalFooter
         formId='osc-subscriptions'
diff --git a/apps/client/src/features/modals/integration-modal/OscSettings.tsx b/apps/client/src/features/modals/integration-modal/osc/OscSettings.tsx
similarity index 92%
rename from apps/client/src/features/modals/integration-modal/OscSettings.tsx
rename to apps/client/src/features/modals/integration-modal/osc/OscSettings.tsx
index fccd8403b..f454a3e77 100644
--- a/apps/client/src/features/modals/integration-modal/OscSettings.tsx
+++ b/apps/client/src/features/modals/integration-modal/osc/OscSettings.tsx
@@ -4,14 +4,14 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { FormControl, Input, Switch } from '@chakra-ui/react';
 
-import useOscSettings, { useOscSettingsMutation } from '../../../common/hooks-query/useOscSettings';
-import { PlaceholderSettings } from '../../../common/models/OscSettings';
-import { useEmitLog } from '../../../common/stores/logger';
-import { isIPAddress, isOnlyNumbers } from '../../../common/utils/regex';
-import ModalLoader from '../modal-loader/ModalLoader';
-import OntimeModalFooter from '../OntimeModalFooter';
+import useOscSettings, { useOscSettingsMutation } from '../../../../common/hooks-query/useOscSettings';
+import { PlaceholderSettings } from '../../../../common/models/OscSettings';
+import { useEmitLog } from '../../../../common/stores/logger';
+import { isIPAddress, isOnlyNumbers } from '../../../../common/utils/regex';
+import ModalLoader from '../../modal-loader/ModalLoader';
+import OntimeModalFooter from '../../OntimeModalFooter';
 
-import styles from '../Modal.module.scss';
+import styles from '../../Modal.module.scss';
 
 export default function OscSettings() {
   const { data, isFetching } = useOscSettings();
diff --git a/apps/client/src/features/modals/integration-modal/OscSubscriptionRow.tsx b/apps/client/src/features/modals/integration-modal/osc/OscSubscriptionRow.tsx
similarity index 87%
rename from apps/client/src/features/modals/integration-modal/OscSubscriptionRow.tsx
rename to apps/client/src/features/modals/integration-modal/osc/OscSubscriptionRow.tsx
index 1dd53bae2..e84acc4f9 100644
--- a/apps/client/src/features/modals/integration-modal/OscSubscriptionRow.tsx
+++ b/apps/client/src/features/modals/integration-modal/osc/OscSubscriptionRow.tsx
@@ -2,12 +2,12 @@ import { Control, useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Button, IconButton, Input, Switch } from '@chakra-ui/react';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
-import { OscSubscription, TimerLifeCycle } from 'ontime-types';
+import type { OscSubscription, TimerLifeCycle } from 'ontime-types';
 
-import { useEmitLog } from '../../../common/stores/logger';
+import { useEmitLog } from '../../../../common/stores/logger';
 
-import collapseStyles from '../../../common/components/collapse-bar/CollapseBar.module.scss';
-import styles from '../Modal.module.scss';
+import collapseStyles from '../../../../common/components/collapse-bar/CollapseBar.module.scss';
+import styles from '../../Modal.module.scss';
 
 interface OscSubscriptionRowProps {
   cycle: TimerLifeCycle;
@@ -17,10 +17,11 @@ interface OscSubscriptionRowProps {
   setShowSection: (cycle: TimerLifeCycle) => void;
   register: UseFormRegister<OscSubscription>;
   control: Control<OscSubscription>;
+  placeholder: string;
 }
 
 export default function OscSubscriptionRow(props: OscSubscriptionRowProps) {
-  const { cycle, title, subtitle, visible, setShowSection, register, control } = props;
+  const { cycle, title, subtitle, visible, setShowSection, register, control, placeholder } = props;
   const { emitError } = useEmitLog();
   const { fields, append, remove } = useFieldArray({
     name: cycle,
@@ -64,7 +65,7 @@ export default function OscSubscriptionRow(props: OscSubscriptionRowProps) {
                 colorScheme='red'
               />
               <Input
-                placeholder='OSC Message'
+                placeholder={placeholder}
                 size='xs'
                 variant='ontime-filled-on-light'
                 autoComplete='off'
diff --git a/apps/server/package.json b/apps/server/package.json
index 5476b829d..33a0842fc 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -12,6 +12,7 @@
     "express-session": "^1.17.3",
     "express-static-gzip": "^2.1.7",
     "express-validator": "^6.14.2",
+    "got": "^14.0.0",
     "lowdb": "^5.0.5",
     "multer": "^1.4.5-lts.1",
     "node-osc": "^9.0.2",
diff --git a/apps/server/src/app.ts b/apps/server/src/app.ts
index 2d0b359d2..c6cfb7187 100644
--- a/apps/server/src/app.ts
+++ b/apps/server/src/app.ts
@@ -1,4 +1,4 @@
-import { LogOrigin, OSCSettings } from 'ontime-types';
+import { HttpSettings, LogOrigin, OSCSettings } from 'ontime-types';
 
 import 'dotenv/config';
 import express from 'express';
@@ -29,6 +29,7 @@ import { eventLoader } from './classes/event-loader/EventLoader.js';
 import { integrationService } from './services/integration-service/IntegrationService.js';
 import { logger } from './classes/Logger.js';
 import { oscIntegration } from './services/integration-service/OscIntegration.js';
+import { httpIntegration } from './services/integration-service/HttpIntegration.js';
 import { populateStyles } from './modules/loadStyles.js';
 import { eventStore, getInitialPayload } from './stores/EventStore.js';
 import { PlaybackService } from './services/PlaybackService.js';
@@ -165,7 +166,6 @@ export const startServer = async () => {
 };
 
 /**
- * @description starts OSC server
  * @description starts OSC server
  * @param overrideConfig
  * @return {Promise<void>}
@@ -194,20 +194,30 @@ export const startOSCServer = async (overrideConfig = null) => {
 /**
  * starts integrations
  */
-export const startIntegrations = async (config?: { osc: OSCSettings }) => {
+export const startIntegrations = async (config?: { osc: OSCSettings; http: HttpSettings }) => {
   checkStart(OntimeStartOrder.InitIO);
 
-  const { osc } = config ?? DataProvider.getData();
+  const { osc, http } = config ?? DataProvider.getData();
 
   if (!osc) {
     return 'OSC Invalid configuration';
+  } else {
+    const { success, message } = oscIntegration.init(osc);
+    logger.info(LogOrigin.Tx, message);
+
+    if (success) {
+      integrationService.register(oscIntegration);
+    }
   }
+  if (!http) {
+    return 'HTTP Invalid configuration';
+  } else {
+    const { success, message } = httpIntegration.init(http);
+    logger.info(LogOrigin.Tx, message);
 
-  const { success, message } = oscIntegration.init(osc);
-  logger.info(LogOrigin.Tx, message);
-
-  if (success) {
-    integrationService.register(oscIntegration);
+    if (success) {
+      integrationService.register(httpIntegration);
+    }
   }
 };
 
diff --git a/apps/server/src/classes/data-provider/DataProvider.ts b/apps/server/src/classes/data-provider/DataProvider.ts
index 031a537d5..a3074cb85 100644
--- a/apps/server/src/classes/data-provider/DataProvider.ts
+++ b/apps/server/src/classes/data-provider/DataProvider.ts
@@ -62,6 +62,10 @@ export class DataProvider {
     return data.osc;
   }
 
+  static getHttp() {
+    return data.http;
+  }
+
   static getAliases() {
     return data.aliases;
   }
@@ -94,6 +98,11 @@ export class DataProvider {
     await this.persist();
   }
 
+  static async setHttp(newData) {
+    data.http = { ...newData };
+    await this.persist();
+  }
+
   static getRundown() {
     return [...data.rundown];
   }
diff --git a/apps/server/src/controllers/ontimeController.ts b/apps/server/src/controllers/ontimeController.ts
index fd2463791..a5a6d89a0 100644
--- a/apps/server/src/controllers/ontimeController.ts
+++ b/apps/server/src/controllers/ontimeController.ts
@@ -1,4 +1,5 @@
-import { Alias, DatabaseModel, GetInfo, LogOrigin, ProjectData } from 'ontime-types';
+import { LogOrigin } from 'ontime-types';
+import type { Alias, DatabaseModel, GetInfo, HttpSettings, ProjectData } from 'ontime-types';
 
 import { RequestHandler, Request, Response } from 'express';
 import fs from 'fs';
@@ -11,6 +12,7 @@ import { PlaybackService } from '../services/PlaybackService.js';
 import { eventStore } from '../stores/EventStore.js';
 import { isDocker, pathToStartStyles, resolveDbPath } from '../setup.js';
 import { oscIntegration } from '../services/integration-service/OscIntegration.js';
+import { httpIntegration } from '../services/integration-service/HttpIntegration.js';
 import { logger } from '../classes/Logger.js';
 import { deleteAllEvents, notifyChanges } from '../services/rundown-service/RundownService.js';
 import { deepmerge } from 'ontime-utils';
@@ -284,27 +286,6 @@ export const getOSC = async (req, res) => {
   res.status(200).send(osc);
 };
 
-export const postOscSubscriptions = async (req, res) => {
-  if (failEmptyObjects(req.body, res)) {
-    return;
-  }
-
-  try {
-    const oscSubscriptions = req.body;
-    const oscSettings = DataProvider.getOsc();
-    oscSettings.subscriptions = oscSubscriptions;
-    await DataProvider.setOsc(oscSettings);
-
-    // TODO: this update could be more granular, checking that relevant data was changed
-    const { message } = oscIntegration.init(oscSettings);
-    logger.info(LogOrigin.Tx, message);
-
-    res.send(oscSettings).status(200);
-  } catch (error) {
-    res.status(400).send({ message: error.toString() });
-  }
-};
-
 // Create controller for POST request to '/ontime/osc'
 // Returns ACK message
 export const postOSC = async (req, res) => {
@@ -332,6 +313,59 @@ export const postOSC = async (req, res) => {
   }
 };
 
+export const postOscSubscriptions = async (req, res) => {
+  if (failEmptyObjects(req.body, res)) {
+    return;
+  }
+
+  try {
+    const subscriptions = req.body;
+    const oscSettings = DataProvider.getOsc();
+    oscSettings.subscriptions = subscriptions;
+    await DataProvider.setOsc(oscSettings);
+
+    // TODO: this update could be more granular, checking that relevant data was changed
+    const { message } = oscIntegration.init(oscSettings);
+    logger.info(LogOrigin.Tx, message);
+
+    res.send(oscSettings).status(200);
+  } catch (error) {
+    res.status(400).send({ message: error.toString() });
+  }
+};
+
+// Create controller for GET request to '/ontime/http'
+export const getHTTP = async (_req, res: Response<HttpSettings>) => {
+  const http = DataProvider.getHttp();
+  res.status(200).send(http);
+};
+
+// Create controller for POST request to '/ontime/http'
+export const postHTTP = async (req, res) => {
+  if (failEmptyObjects(req.body, res)) {
+    return;
+  }
+
+  try {
+    const httpSettings = req.body;
+    await DataProvider.setHttp(httpSettings);
+
+    integrationService.unregister(httpIntegration);
+
+    // TODO: this update could be more granular, checking that relevant data was changed
+    const { success, message } = httpIntegration.init(httpSettings);
+    logger.info(LogOrigin.Tx, message);
+
+    if (success) {
+      integrationService.register(httpIntegration);
+    }
+
+    res.send(httpSettings).status(200);
+  } catch (error) {
+    res.status(400).send({ message: error.toString() });
+  }
+};
+
 export async function patchPartialProjectFile(req, res) {
   if (failEmptyObjects(req.body, res)) {
     return;
diff --git a/apps/server/src/controllers/ontimeController.validate.ts b/apps/server/src/controllers/ontimeController.validate.ts
index 8be1c8bf5..be0d541eb 100644
--- a/apps/server/src/controllers/ontimeController.validate.ts
+++ b/apps/server/src/controllers/ontimeController.validate.ts
@@ -1,5 +1,9 @@
 import { body, check, validationResult } from 'express-validator';
-import { validateOscObject, validateOscSubscriptionEntry } from '../utils/parserFunctions.js';
+import {
+  validateHttpSubscriptionObject,
+  validateOscSubscriptionObject,
+  validateOscSubscriptionCycle,
+} from '../utils/parserFunctions.js';
 
 /**
  * @description Validates object for POST /ontime/views
@@ -82,7 +86,22 @@ export const validateOSC = [
   body('enabledOut').exists().isBoolean(),
   body('subscriptions')
     .isObject()
-    .custom((value) => validateOscObject(value)),
+    .custom((value) => validateOscSubscriptionObject(value)),
+  (req, res, next) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
+    next();
+  },
+];
+
+/**
+ * @description Validates object for POST /ontime/http
+ */
+export const validateHTTP = [
+  body('enabledOut').exists().isBoolean(),
+  body('subscriptions')
+    .isObject()
+    .custom((value) => validateHttpSubscriptionObject(value)),
   (req, res, next) => {
     const errors = validationResult(req);
     if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
@@ -96,22 +115,22 @@ export const validateOSC = [
 export const validateOscSubscription = [
   body('onLoad')
     .isArray()
-    .custom((value) => validateOscSubscriptionEntry(value)),
+    .custom((value) => validateOscSubscriptionCycle(value)),
   body('onStart')
     .isArray()
-    .custom((value) => validateOscSubscriptionEntry(value)),
+    .custom((value) => validateOscSubscriptionCycle(value)),
   body('onPause')
     .isArray()
-    .custom((value) => validateOscSubscriptionEntry(value)),
+    .custom((value) => validateOscSubscriptionCycle(value)),
   body('onStop')
     .isArray()
-    .custom((value) => validateOscSubscriptionEntry(value)),
+    .custom((value) => validateOscSubscriptionCycle(value)),
   body('onUpdate')
     .isArray()
-    .custom((value) => validateOscSubscriptionEntry(value)),
+    .custom((value) => validateOscSubscriptionCycle(value)),
   body('onFinish')
     .isArray()
-    .custom((value) => validateOscSubscriptionEntry(value)),
+    .custom((value) => validateOscSubscriptionCycle(value)),
   (req, res, next) => {
     const errors = validationResult(req);
     if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
diff --git a/apps/server/src/models/dataModel.ts b/apps/server/src/models/dataModel.ts
index 749e1e120..c89e25478 100644
--- a/apps/server/src/models/dataModel.ts
+++ b/apps/server/src/models/dataModel.ts
@@ -57,4 +57,15 @@ export const dbModel: DatabaseModel = {
       onFinish: [],
     },
   },
+  http: {
+    enabledOut: false,
+    subscriptions: {
+      onLoad: [],
+      onStart: [],
+      onPause: [],
+      onStop: [],
+      onUpdate: [],
+      onFinish: [],
+    },
+  },
 };
diff --git a/apps/server/src/routes/ontimeRouter.ts b/apps/server/src/routes/ontimeRouter.ts
index 67f4fb033..080c7a0ef 100644
--- a/apps/server/src/routes/ontimeRouter.ts
+++ b/apps/server/src/routes/ontimeRouter.ts
@@ -6,6 +6,7 @@ import {
   getAliases,
   getInfo,
   getOSC,
+  getHTTP,
   getSettings,
   getUserFields,
   getViewSettings,
@@ -19,16 +20,18 @@ import {
   postUserFields,
   postViewSettings,
   previewExcel,
+  postHTTP,
 } from '../controllers/ontimeController.js';
 
 import {
   validateAliases,
   validateOSC,
-  validateOscSubscription,
   validatePatchProjectFile,
   validateSettings,
   validateUserFields,
   viewValidator,
+  validateHTTP,
+  validateOscSubscription,
 } from '../controllers/ontimeController.validate.js';
 import { projectSanitiser } from '../controllers/projectController.validate.js';
 
@@ -85,5 +88,11 @@ router.post('/osc', validateOSC, postOSC);
 // create route between controller and '/ontime/osc-subscriptions' endpoint
 router.post('/osc-subscriptions', validateOscSubscription, postOscSubscriptions);
 
+// create route between controller and '/ontime/http' endpoint
+router.get('/http', getHTTP);
+
+// create route between controller and '/ontime/http' endpoint
+router.post('/http', validateHTTP, postHTTP);
+
 // create route between controller and '/ontime/new' endpoint
 router.post('/new', projectSanitiser, postNew);
diff --git a/apps/server/src/services/integration-service/HttpIntegration.ts b/apps/server/src/services/integration-service/HttpIntegration.ts
new file mode 100644
index 000000000..755fa50b4
--- /dev/null
+++ b/apps/server/src/services/integration-service/HttpIntegration.ts
@@ -0,0 +1,99 @@
+import got from 'got';
+
+import { HttpSettings, HttpSubscription, HttpSubscriptionOptions, LogOrigin } from 'ontime-types';
+
+import IIntegration, { TimerLifeCycleKey } from './IIntegration.js';
+import { parseTemplateNested } from './integrationUtils.js';
+import { dbModel } from '../../models/dataModel.js';
+import { logger } from '../../classes/Logger.js';
+import { validateHttpSubscriptionObject } from '../../utils/parserFunctions.js';
+
+type Action = TimerLifeCycleKey | string;
+
+/**
+ * @description Class contains logic towards outgoing HTTP communications
+ * @class
+ */
+export class HttpIntegration implements IIntegration<HttpSubscriptionOptions> {
+  subscriptions: HttpSubscription;
+  constructor() {
+    this.subscriptions = dbModel.http.subscriptions;
+  }
+
+  /**
+   * Initializes httpClient
+   */
+  init(config: HttpSettings) {
+    const { subscriptions, enabledOut } = config;
+
+    if (!enabledOut) {
+      return {
+        success: false,
+        message: 'HTTP output disabled',
+      };
+    }
+
+    this.initSubscriptions(subscriptions);
+
+    try {
+      return {
+        success: true,
+        message: `HTTP integration client ready`,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        message: `Failed initialising HTTP integration: ${error}`,
+      };
+    }
+  }
+
+  initSubscriptions(subscriptionOptions: HttpSubscription) {
+    if (validateHttpSubscriptionObject(subscriptionOptions)) {
+      this.subscriptions = { ...subscriptionOptions };
+    }
+  }
+
+  dispatch(action: Action, state?: object) {
+    if (!action) {
+      return {
+        success: false,
+        message: 'HTTP called with no action',
+      };
+    }
+
+    // check subscriptions for action
+    const eventSubscriptions = this.subscriptions?.[action] || [];
+
+    eventSubscriptions.forEach((sub) => {
+      const { enabled, message } = sub;
+      if (enabled && message) {
+        const parsedMessage = parseTemplateNested(message, state || {});
+        try {
+          const parsedUrl = new URL(parsedMessage);
+          this.emit(parsedUrl);
+        } catch (err) {
+          logger.error(LogOrigin.Tx, `HTTP Integration: ${err}`);
+          return {
+            success: false,
+            message: `${err}`,
+          };
+        }
+      }
+    });
+  }
+
+  async emit(path: URL) {
+    try {
+      await got.get(path, {
+        retry: { limit: 0 },
+      });
+    } catch (err) {
+      logger.error(LogOrigin.Tx, `HTTP integration: ${err}`);
+    }
+  }
+
+  shutdown() {}
+}
+
+export const httpIntegration = new HttpIntegration();
diff --git a/apps/server/src/services/integration-service/IIntegration.ts b/apps/server/src/services/integration-service/IIntegration.ts
index 64f81bf75..4e4d57b15 100644
--- a/apps/server/src/services/integration-service/IIntegration.ts
+++ b/apps/server/src/services/integration-service/IIntegration.ts
@@ -1,9 +1,9 @@
-import { TimerLifeCycle, OscSubscription } from 'ontime-types';
+import { TimerLifeCycle, Subscription } from 'ontime-types';
 
 export type TimerLifeCycleKey = keyof typeof TimerLifeCycle;
 
-export default interface IIntegration {
-  subscriptions: OscSubscription;
+export default interface IIntegration<T> {
+  subscriptions: Subscription<T>;
   init: (config: unknown) => OperationReturn;
   dispatch: (action: TimerLifeCycleKey, state?: object) => OperationReturn;
   emit: (...args: unknown[]) => unknown;
diff --git a/apps/server/src/services/integration-service/IntegrationService.ts b/apps/server/src/services/integration-service/IntegrationService.ts
index aad3296d8..944409eab 100644
--- a/apps/server/src/services/integration-service/IntegrationService.ts
+++ b/apps/server/src/services/integration-service/IntegrationService.ts
@@ -2,17 +2,17 @@ import IIntegration, { TimerLifeCycleKey } from './IIntegration.js';
 import { eventStore } from '../../stores/EventStore.js';
 
 class IntegrationService {
-  private integrations: IIntegration[];
+  private integrations: IIntegration<unknown>[];
 
   constructor() {
     this.integrations = [];
   }
 
-  register(integrationService: IIntegration) {
+  register(integrationService: IIntegration<unknown>) {
     this.integrations.push(integrationService);
   }
 
-  unregister(integrationService: IIntegration) {
+  unregister(integrationService: IIntegration<unknown>) {
     this.integrations = this.integrations.filter((int) => int !== integrationService);
   }
 
diff --git a/apps/server/src/services/integration-service/OscIntegration.ts b/apps/server/src/services/integration-service/OscIntegration.ts
index 8c3071cf5..6cf8fe958 100644
--- a/apps/server/src/services/integration-service/OscIntegration.ts
+++ b/apps/server/src/services/integration-service/OscIntegration.ts
@@ -1,11 +1,11 @@
 import { ArgumentType, Client, Message } from 'node-osc';
-import { OSCSettings, OscSubscription } from 'ontime-types';
+import { OSCSettings, OscSubscription, OscSubscriptionOptions } from 'ontime-types';
 
 import IIntegration, { TimerLifeCycleKey } from './IIntegration.js';
 import { parseTemplateNested } from './integrationUtils.js';
 import { isObject } from '../../utils/varUtils.js';
 import { dbModel } from '../../models/dataModel.js';
-import { validateOscObject } from '../../utils/parserFunctions.js';
+import { validateOscSubscriptionObject } from '../../utils/parserFunctions.js';
 
 type Action = TimerLifeCycleKey | string;
 
@@ -13,7 +13,7 @@ type Action = TimerLifeCycleKey | string;
  * @description Class contains logic towards outgoing OSC communications
  * @class
  */
-export class OscIntegration implements IIntegration {
+export class OscIntegration implements IIntegration<OscSubscriptionOptions> {
   protected oscClient: null | Client;
   subscriptions: OscSubscription;
 
@@ -66,7 +66,7 @@ export class OscIntegration implements IIntegration {
   }
 
   initSubscriptions(subscriptionOptions: OscSubscription) {
-    if (validateOscObject(subscriptionOptions)) {
+    if (validateOscSubscriptionObject(subscriptionOptions)) {
       this.subscriptions = { ...subscriptionOptions };
     }
   }
diff --git a/apps/server/src/utils/__tests__/parserFunctions.test.js b/apps/server/src/utils/__tests__/parserFunctions.test.js
deleted file mode 100644
index b95cbd644..000000000
--- a/apps/server/src/utils/__tests__/parserFunctions.test.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { validateOscObject } from '../parserFunctions.ts';
-
-test('validateOscSubscription()', () => {
-  it('should return true when given a valid OscSubscription', () => {
-    const validSubscription = {
-      onLoad: [{ id: '1', message: 'test', enabled: true }],
-      onStart: [{ id: '2', message: 'test', enabled: false }],
-      onPause: [{ id: '3', message: 'test', enabled: true }],
-      onStop: [{ id: '4', message: 'test', enabled: false }],
-      onUpdate: [{ id: '5', message: 'test', enabled: true }],
-      onFinish: [{ id: '6', message: 'test', enabled: false }],
-    };
-
-    const result = validateOscObject(validSubscription);
-
-    expect(result).toBe(true);
-  });
-
-  it('should return false when given undefined', () => {
-    const result = validateOscObject(undefined);
-    expect(result).toBe(false);
-  });
-
-  it('should return false when given null', () => {
-    const result = validateOscObject(null);
-    expect(result).toBe(false);
-  });
-
-  it('should return false when given an empty object', () => {
-    const result = validateOscObject({});
-    expect(result).toBe(false);
-  });
-
-  it('should return false when given an empty array', () => {
-    const result = validateOscObject([]);
-    expect(result).toBe(false);
-  });
-
-  it('should return false when given an object that is not an OscSubscription', () => {
-    const invalidObject = { foo: 'bar' };
-
-    const result = validateOscObject(invalidObject);
-
-    expect(result).toBe(false);
-  });
-
-  it('should return false when given an OscSubscription with a missing property', () => {
-    const invalidSubscription = {
-      onLoad: [{ id: '1', message: 'test', enabled: true }],
-      onStart: [{ id: '2', message: 'test', enabled: false }],
-      onPause: [{ id: '3', message: 'test', enabled: true }],
-      // Missing onStop
-      onUpdate: [{ id: '5', message: 'test', enabled: true }],
-      onFinish: [{ id: '6', message: 'test', enabled: false }],
-    };
-
-    const result = validateOscObject(invalidSubscription);
-
-    expect(result).toBe(false);
-  });
-
-  it('should return false when given an OscSubscription with an invalid property value', () => {
-    const invalidSubscription = {
-      onLoad: [{ id: '1', message: 'test', enabled: true }],
-      onStart: [{ id: '2', message: 'test', enabled: false }],
-      onPause: [{ id: '3', message: 'test', enabled: true }],
-      onStop: [{ id: '4', message: 'test', enabled: false }],
-      onUpdate: [{ id: '5', message: 'test', enabled: true }],
-      onFinish: [{ id: '6', message: 'test', enabled: 'not a boolean' }],
-    };
-
-    const result = validateOscObject(invalidSubscription);
-
-    expect(result).toBe(false);
-  });
-
-  it('should return true if the message field is empty', () => {
-    const invalidSubscription = {
-      onLoad: [{ id: '1', message: 'test', enabled: true }],
-      onStart: [{ id: '2', message: '', enabled: false }],
-      onPause: [{ id: '3', message: '', enabled: true }],
-      onStop: [{ id: '4', message: 'test', enabled: false }],
-      onUpdate: [{ id: '5', message: 'test', enabled: true }],
-      onFinish: [{ id: '6', message: 'test', enabled: 'not a boolean' }],
-    };
-
-    const result = validateOscObject(invalidSubscription);
-
-    expect(result).toBe(true);
-  });
-});
diff --git a/apps/server/src/utils/__tests__/parserFunctions.test.ts b/apps/server/src/utils/__tests__/parserFunctions.test.ts
new file mode 100644
index 000000000..ba6f456fc
--- /dev/null
+++ b/apps/server/src/utils/__tests__/parserFunctions.test.ts
@@ -0,0 +1,162 @@
+import { HttpSubscription, OscSubscription } from 'ontime-types';
+import {
+  validateOscSubscriptionObject,
+  validateOscSubscriptionCycle,
+  validateHttpSubscriptionCycle,
+  validateHttpSubscriptionObject,
+} from '../parserFunctions.js';
+
+describe('validateOscSubscriptionCycle()', () => {
+  it('should return false when given an OscSubscription with an invalid property value', () => {
+    const invalidEntry = [{ message: 'test', enabled: 'not a boolean' }];
+
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    const result = validateOscSubscriptionCycle(invalidEntry);
+    expect(result).toBe(false);
+  });
+});
+
+describe('validateOscSubscriptionObject()', () => {
+  it('should return true when given a valid OscSubscription', () => {
+    const validSubscription: OscSubscription = {
+      onLoad: [{ message: 'test', enabled: true }],
+      onStart: [{ message: 'test', enabled: false }],
+      onPause: [{ message: 'test', enabled: true }],
+      onStop: [{ message: 'test', enabled: false }],
+      onUpdate: [{ message: 'test', enabled: true }],
+      onFinish: [{ message: 'test', enabled: false }],
+    };
+
+    const result = validateOscSubscriptionObject(validSubscription);
+    expect(result).toBe(true);
+  });
+
+  it('should return false when given undefined', () => {
+    const result = validateOscSubscriptionObject(undefined);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given null', () => {
+    const result = validateOscSubscriptionObject(null);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given an empty object', () => {
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    const result = validateOscSubscriptionObject({});
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given an empty array', () => {
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    const result = validateOscSubscriptionObject([]);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given an object that is not an OscSubscription', () => {
+    const invalidObject = { foo: 'bar' };
+
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    const result = validateOscSubscriptionObject(invalidObject);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given an OscSubscription with a missing property', () => {
+    const invalidSubscription = {
+      onLoad: [{ message: 'test', enabled: true }],
+      onStart: [{ message: 'test', enabled: false }],
+      onPause: [{ message: 'test', enabled: true }],
+      // Missing onStop
+      onUpdate: [{ message: 'test', enabled: true }],
+      onFinish: [{ message: 'test', enabled: false }],
+    };
+
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    const result = validateOscSubscriptionObject(invalidSubscription);
+    expect(result).toBe(false);
+  });
+});
+
+describe('validateHttpSubscriptionCycle()', () => {
+  it('should return false when given an HttpSubscription with an invalid property value', () => {
+    const invalidBoolean = [{ message: 'http://', enabled: 'not a boolean' }];
+    const invalidHttp = [{ message: 'test', enabled: true }];
+    const noFtp = [{ message: 'ftp://test', enabled: true }];
+    const noEmpty = [{ message: '', enabled: true }];
+
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    expect(validateHttpSubscriptionCycle(invalidBoolean)).toBe(false);
+
+    expect(validateHttpSubscriptionCycle(invalidHttp)).toBe(false);
+    expect(validateHttpSubscriptionCycle(noFtp)).toBe(false);
+    expect(validateHttpSubscriptionCycle(noEmpty)).toBe(false);
+  });
+  it('should return true when given an HttpSubscription matches definition', () => {
+    const validHttp = [{ message: 'http://', enabled: true }];
+    const invalidHttps = [{ message: 'https://', enabled: true }];
+
+    expect(validateHttpSubscriptionCycle(validHttp)).toBe(true);
+    expect(validateHttpSubscriptionCycle(invalidHttps)).toBe(false);
+  });
+});
+
+describe('validateHttpSubscriptionObject()', () => {
+  it('should return true when given a valid HttpSubscription', () => {
+    const validSubscription: HttpSubscription = {
+      onLoad: [{ message: 'http://', enabled: true }],
+      onStart: [{ message: 'http://', enabled: false }],
+      onPause: [{ message: 'http://', enabled: true }],
+      onStop: [{ message: 'http://', enabled: false }],
+      onUpdate: [{ message: 'http://', enabled: true }],
+      onFinish: [{ message: 'http://', enabled: false }],
+    };
+
+    const result = validateHttpSubscriptionObject(validSubscription);
+    expect(result).toBe(true);
+  });
+
+  it('should return false when given undefined', () => {
+    const result = validateHttpSubscriptionObject(undefined);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given null', () => {
+    const result = validateHttpSubscriptionObject(null);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given an empty object', () => {
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    const result = validateOscSubscriptionObject({});
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given an empty array', () => {
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    const result = validateHttpSubscriptionObject([]);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given an object that is not an HttpSubscription', () => {
+    const invalidObject = { foo: 'bar' };
+
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    const result = validateHttpSubscriptionObject(invalidObject);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when given an HttpSubscription with a missing property', () => {
+    const invalidSubscription = {
+      onLoad: [{ message: 'http://', enabled: true }],
+      onStart: [{ message: 'http://', enabled: false }],
+      onPause: [{ message: 'http://', enabled: true }],
+      // Missing onStop
+      onUpdate: [{ message: 'http://', enabled: true }],
+      onFinish: [{ message: 'http://', enabled: false }],
+    };
+
+    // @ts-expect-error -- since this comes from the client, we check things that typescript would have caught
+    const result = validateHttpSubscriptionObject(invalidSubscription);
+    expect(result).toBe(false);
+  });
+});
diff --git a/apps/server/src/utils/parser.ts b/apps/server/src/utils/parser.ts
index 4c28acd10..94431631a 100644
--- a/apps/server/src/utils/parser.ts
+++ b/apps/server/src/utils/parser.ts
@@ -29,6 +29,7 @@ import {
   parseAliases,
   parseProject,
   parseOsc,
+  parseHttp,
   parseRundown,
   parseSettings,
   parseUserFields,
@@ -275,7 +276,7 @@ export const parseJson = async (jsonData): Promise<DatabaseModel | null> => {
   // Import OSC settings if any
   returnData.osc = parseOsc(jsonData) ?? dbModel.osc;
   // Import HTTP settings if any
-  // returnData.http = parseHttp(jsonData, enforce);
+  returnData.http = parseHttp(jsonData) ?? dbModel.http;
 
   return returnData as DatabaseModel;
 };
diff --git a/apps/server/src/utils/parserFunctions.ts b/apps/server/src/utils/parserFunctions.ts
index 6ec324eb3..23cdeed93 100644
--- a/apps/server/src/utils/parserFunctions.ts
+++ b/apps/server/src/utils/parserFunctions.ts
@@ -2,14 +2,17 @@ import { generateId } from 'ontime-utils';
 import {
   Alias,
   OntimeRundown,
+  HttpSettings,
   OSCSettings,
-  OscSubscription,
-  OscSubscriptionOptions,
   ProjectData,
   Settings,
   TimerLifeCycle,
   UserFields,
   ViewSettings,
+  OscSubscription,
+  HttpSubscription,
+  OscSubscriptionOptions,
+  HttpSubscriptionOptions,
 } from 'ontime-types';
 
 import { block as blockDef, delay as delayDef } from '../models/eventsDefinition.js';
@@ -159,12 +162,12 @@ export const parseViewSettings = (data): ViewSettings => {
 };
 
 /**
- * Parses and validates subscription entry
+ * Parses and validates OSC subscription cycle options
  * @param data
  */
-export const validateOscSubscriptionEntry = (data: OscSubscriptionOptions): boolean => {
-  for (const subscription in data) {
-    if (typeof data[subscription].message !== 'string' || typeof data[subscription].enabled !== 'boolean') {
+export const validateOscSubscriptionCycle = (data: OscSubscriptionOptions[]): boolean => {
+  for (const subscriptionOption of data) {
+    if (typeof subscriptionOption.message !== 'string' || typeof subscriptionOption.enabled !== 'boolean') {
       return false;
     }
   }
@@ -172,22 +175,23 @@ export const validateOscSubscriptionEntry = (data: OscSubscriptionOptions): bool
 };
 
 /**
- * Parses and validates subscription object
+ * Parses and validates OSC subscription object
  * @param data
  */
-export const validateOscObject = (data: OscSubscription): boolean => {
+export const validateOscSubscriptionObject = (data: OscSubscription): boolean => {
   if (!data) {
     return false;
   }
+
   const timerKeys = Object.keys(TimerLifeCycle);
   for (const key of timerKeys) {
+    // must contains all keys and be an array
     if (!(key in data) || !Array.isArray(data[key])) {
       return false;
     }
-    for (const subscription of data[key]) {
-      if (typeof subscription.message !== 'string' || typeof subscription.enabled !== 'boolean') {
-        return false;
-      }
+    const isValid = validateOscSubscriptionCycle(data[key]);
+    if (!isValid) {
+      return false;
     }
   }
   return true;
@@ -200,8 +204,9 @@ export const parseOsc = (data: { osc?: Partial<OSCSettings> }): OSCSettings => {
   if ('osc' in data) {
     console.log('Found OSC definition, importing...');
 
+    // TODO: this can be improved by only merging known keys
     const loadedConfig = data.osc || {};
-    const validatedSubscriptions = validateOscObject(loadedConfig.subscriptions)
+    const validatedSubscriptions = validateOscSubscriptionObject(loadedConfig.subscriptions)
       ? loadedConfig.subscriptions
       : dbModel.osc.subscriptions;
 
@@ -216,20 +221,63 @@ export const parseOsc = (data: { osc?: Partial<OSCSettings> }): OSCSettings => {
   }
 };
 
+/**
+ * Parses and validates HTTP subscription cycle options
+ * @param data
+ */
+export const validateHttpSubscriptionCycle = (data: HttpSubscriptionOptions[]): boolean => {
+  for (const subscriptionOption of data) {
+    const isHttp = subscriptionOption.message?.startsWith('http://');
+    if (typeof subscriptionOption.message !== 'string' || !isHttp || typeof subscriptionOption.enabled !== 'boolean') {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Parses and validates HTTP subscription object
+ * @param data
+ */
+export const validateHttpSubscriptionObject = (data: HttpSubscription): boolean => {
+  if (!data) {
+    return false;
+  }
+  const timerKeys = Object.keys(TimerLifeCycle);
+  // must contains all keys and be an array
+  for (const key of timerKeys) {
+    if (!(key in data) || !Array.isArray(data[key])) {
+      return false;
+    }
+    const isValid = validateHttpSubscriptionCycle(data[key]);
+    if (!isValid) {
+      return false;
+    }
+  }
+  return true;
+};
+
 /**
  * Parse Http portion of an entry
  * @param {object} data - data object
  * @param {boolean} enforce - whether to create a definition if one is missing
  * @returns {object} - event object data
  */
-export const parseHttp = (data, enforce) => {
-  const newHttp = {};
+export const parseHttp = (data: { http?: Partial<HttpSettings> }): HttpSettings => {
   if ('http' in data) {
     console.log('Found HTTP definition, importing...');
-  } else if (enforce) {
-    /* Not yet */
+
+    // TODO: this can be improved by only merging known keys
+    const loadedConfig = data?.http || {};
+    const validatedSubscriptions = validateHttpSubscriptionObject(loadedConfig.subscriptions)
+      ? loadedConfig.subscriptions
+      : dbModel.http.subscriptions;
+
+    return {
+      enabledOut: loadedConfig.enabledOut ?? dbModel.http.enabledOut,
+      subscriptions: validatedSubscriptions,
+    };
   }
-  return newHttp;
 };
 
 /**
diff --git a/apps/server/test-db/db.json b/apps/server/test-db/db.json
index 3cbd679f6..b60b6d0e9 100644
--- a/apps/server/test-db/db.json
+++ b/apps/server/test-db/db.json
@@ -259,6 +259,17 @@
     "targetIP": "127.0.0.1",
     "enabled": true
   },
+  "http": {
+    "enabledOut": false,
+    "subscriptions": {
+      "onLoad": [],
+      "onStart": [],
+      "onPause": [],
+      "onStop": [],
+      "onUpdate": [],
+      "onFinish": []
+    }
+  },
   "aliases": [
     {
       "enabled": true,
diff --git a/apps/test-db/db.json b/apps/test-db/db.json
index e30ef9560..58e7738dc 100644
--- a/apps/test-db/db.json
+++ b/apps/test-db/db.json
@@ -29,8 +29,8 @@
       "user9": "",
       "type": "event",
       "revision": 0,
-      "id": "aa42f",
-      "cue": "1"
+      "cue": "1",
+      "id": "aa42f"
     },
     {
       "title": "title 2",
@@ -57,8 +57,8 @@
       "user9": "",
       "type": "event",
       "revision": 0,
-      "id": "d71bc",
-      "cue": "2"
+      "cue": "2",
+      "id": "d71bc"
     },
     {
       "title": "title 3",
@@ -85,8 +85,8 @@
       "user9": "",
       "type": "event",
       "revision": 0,
-      "id": "da5b4",
-      "cue": "3"
+      "cue": "3",
+      "id": "da5b4"
     }
   ],
   "project": {
@@ -99,7 +99,7 @@
   },
   "settings": {
     "app": "ontime",
-    "version": "2.0.0",
+    "version": "2.21.3",
     "serverPort": 4001,
     "editorKey": null,
     "operatorKey": null,
@@ -148,5 +148,16 @@
       "onUpdate": [],
       "onFinish": []
     }
+  },
+  "http": {
+    "enabledOut": true,
+    "subscriptions": {
+      "onLoad": [],
+      "onStart": [],
+      "onPause": [],
+      "onStop": [],
+      "onUpdate": [],
+      "onFinish": []
+    }
   }
 }
\ No newline at end of file
diff --git a/demo-db/db.json b/demo-db/db.json
index eab76a7dc..6bbc1d0ea 100644
--- a/demo-db/db.json
+++ b/demo-db/db.json
@@ -468,5 +468,16 @@
       ],
       "onFinish": []
     }
+  },
+  "http": {
+    "enabledOut": true,
+    "subscriptions": {
+      "onLoad": [],
+      "onStart": [],
+      "onPause": [],
+      "onStop": [],
+      "onUpdate": [],
+      "onFinish": []
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/types/src/definitions/DataModel.type.ts b/packages/types/src/definitions/DataModel.type.ts
index 71282e904..b72509771 100644
--- a/packages/types/src/definitions/DataModel.type.ts
+++ b/packages/types/src/definitions/DataModel.type.ts
@@ -5,6 +5,7 @@ import { OSCSettings } from './core/OscSettings.type.js';
 import { Settings } from './core/Settings.type.js';
 import { UserFields } from './core/UserFields.type.js';
 import { ViewSettings } from './core/Views.type.js';
+import { HttpSettings } from '../index.js';
 
 export type DatabaseModel = {
   rundown: OntimeRundown;
@@ -14,4 +15,5 @@ export type DatabaseModel = {
   aliases: Alias[];
   userFields: UserFields;
   osc: OSCSettings;
+  http: HttpSettings;
 };
diff --git a/packages/types/src/definitions/core/HttpSettings.type.ts b/packages/types/src/definitions/core/HttpSettings.type.ts
new file mode 100644
index 000000000..39c0898ad
--- /dev/null
+++ b/packages/types/src/definitions/core/HttpSettings.type.ts
@@ -0,0 +1,9 @@
+import { Subscription } from './Subscription.type.js';
+
+export type HttpSubscriptionOptions = { message: string; enabled: boolean };
+export type HttpSubscription = Subscription<HttpSubscriptionOptions>;
+
+export interface HttpSettings {
+  enabledOut: boolean;
+  subscriptions: HttpSubscription;
+}
diff --git a/packages/types/src/definitions/core/OscSettings.type.ts b/packages/types/src/definitions/core/OscSettings.type.ts
index faa518b3a..49e9bd076 100644
--- a/packages/types/src/definitions/core/OscSettings.type.ts
+++ b/packages/types/src/definitions/core/OscSettings.type.ts
@@ -1,7 +1,7 @@
-import { TimerLifeCycleKey } from './TimerLifecycle.type.js';
+import { Subscription } from './Subscription.type.js';
 
 export type OscSubscriptionOptions = { message: string; enabled: boolean };
-export type OscSubscription = { [key in TimerLifeCycleKey]: OscSubscriptionOptions[] };
+export type OscSubscription = Subscription<OscSubscriptionOptions>;
 
 export interface OSCSettings {
   portIn: number;
diff --git a/packages/types/src/definitions/core/Subscription.type.ts b/packages/types/src/definitions/core/Subscription.type.ts
new file mode 100644
index 000000000..c43f8b30f
--- /dev/null
+++ b/packages/types/src/definitions/core/Subscription.type.ts
@@ -0,0 +1,3 @@
+import { TimerLifeCycleKey } from './TimerLifecycle.type.js';
+
+export type Subscription<T> = { [key in TimerLifeCycleKey]: T[] };
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index e2afa6fe6..d0b5ef704 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -28,10 +28,14 @@ export type { Alias } from './definitions/core/Alias.type.js';
 // ---> User Fields
 export type { UserFields } from './definitions/core/UserFields.type.js';
 
+// ---> Integration, Subscription
+export type { Subscription } from './definitions/core/Subscription.type.js';
+
 // ---> OSC
 export type { OSCSettings, OscSubscription, OscSubscriptionOptions } from './definitions/core/OscSettings.type.js';
 
 // ---> HTTP
+export type { HttpSettings, HttpSubscription, HttpSubscriptionOptions } from './definitions/core/HttpSettings.type.js';
 
 // SERVER RESPONSES
 export type { NetworkInterface, GetInfo } from './api/ontime-controller/BackendResponse.type.js';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0405d819..c1977e673 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -270,6 +270,9 @@ importers:
       express-validator:
         specifier: ^6.14.2
         version: 6.14.2
+      got:
+        specifier: ^14.0.0
+        version: 14.0.0
       lowdb:
         specifier: ^5.0.5
         version: 5.0.5
@@ -2572,6 +2575,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /@sindresorhus/is@6.1.0:
+    resolution: {integrity: sha512-BuvU07zq3tQ/2SIgBsEuxKYDyDjC0n7Zir52bpHy2xnBbW81+po43aLFPLbeV3HRAheFbGud1qgcqSYfhtHMAg==}
+    engines: {node: '>=16'}
+    dev: false
+
   /@svgr/babel-plugin-add-jsx-attribute@6.5.1(@babel/core@7.20.12):
     resolution: {integrity: sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==}
     engines: {node: '>=10'}
@@ -2704,6 +2712,13 @@ packages:
       defer-to-connect: 2.0.1
     dev: true
 
+  /@szmarczak/http-timer@5.0.1:
+    resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      defer-to-connect: 2.0.1
+    dev: false
+
   /@tanstack/eslint-plugin-query@5.8.4(eslint@8.53.0)(typescript@5.2.2):
     resolution: {integrity: sha512-KVgcMc+Bn1qbwkxYVWQoiVSNEIN4IAiLj3cUH/SAHT8m8E59Y97o8ON1syp0Rcw094ItG8pEVZFyQuOaH6PDgQ==}
     peerDependencies:
@@ -2960,6 +2975,10 @@ packages:
     resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
     dev: true
 
+  /@types/http-cache-semantics@4.0.4:
+    resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
+    dev: false
+
   /@types/istanbul-lib-coverage@2.0.4:
     resolution: {integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==}
     dev: true
@@ -3035,10 +3054,6 @@ packages:
     resolution: {integrity: sha512-XAMpaw1s1+6zM+jn2tmw8MyaRDIJfXxqmIQIS0HfoGYPuf7dUWeiUKopwq13KFX9lEp1+THGtlaaYx39Nxr58g==}
     dev: true
 
-  /@types/node@18.15.11:
-    resolution: {integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==}
-    dev: true
-
   /@types/parse-json@4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
 
@@ -3965,6 +3980,24 @@ packages:
     engines: {node: '>=10.6.0'}
     dev: true
 
+  /cacheable-lookup@7.0.0:
+    resolution: {integrity: sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==}
+    engines: {node: '>=14.16'}
+    dev: false
+
+  /cacheable-request@10.2.14:
+    resolution: {integrity: sha512-zkDT5WAF4hSSoUgyfg5tFIxz8XQK+25W/TLVojJTMKBaxevLBBtLxgqguAuVQB8PVW79FVjHcU+GJ9tVbDZ9mQ==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      '@types/http-cache-semantics': 4.0.4
+      get-stream: 6.0.1
+      http-cache-semantics: 4.1.1
+      keyv: 4.5.4
+      mimic-response: 4.0.0
+      normalize-url: 8.0.0
+      responselike: 3.0.0
+    dev: false
+
   /cacheable-request@7.0.2:
     resolution: {integrity: sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==}
     engines: {node: '>=8'}
@@ -4403,7 +4436,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       mimic-response: 3.1.0
-    dev: true
 
   /deep-eql@4.1.3:
     resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
@@ -4469,7 +4501,6 @@ packages:
   /defer-to-connect@2.0.1:
     resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
     engines: {node: '>=10'}
-    dev: true
 
   /define-lazy-prop@3.0.0:
     resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
@@ -5412,6 +5443,11 @@ packages:
       is-callable: 1.2.7
     dev: true
 
+  /form-data-encoder@4.0.2:
+    resolution: {integrity: sha512-KQVhvhK8ZkWzxKxOr56CPulAhH3dobtuQ4+hNQ+HekH/Wp5gSOafqRAeTphQUJAIk0GBvHZgJ2ZGRWd5kphMuw==}
+    engines: {node: '>= 18'}
+    dev: false
+
   /form-data@4.0.0:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
@@ -5570,12 +5606,10 @@ packages:
   /get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
-    dev: true
 
   /get-stream@8.0.1:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
-    dev: true
 
   /get-symbol-description@1.0.0:
     resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
@@ -5682,6 +5716,23 @@ packages:
       responselike: 2.0.1
     dev: true
 
+  /got@14.0.0:
+    resolution: {integrity: sha512-X01vTgaX9SwaMq5DfImvS+3GMQFFs5HtrrlS9CuzUSzkxAf/tWGEyynuI+Qy7BjciMczZGjyVSmawYbP4eYhYA==}
+    engines: {node: '>=20'}
+    dependencies:
+      '@sindresorhus/is': 6.1.0
+      '@szmarczak/http-timer': 5.0.1
+      cacheable-lookup: 7.0.0
+      cacheable-request: 10.2.14
+      decompress-response: 6.0.0
+      form-data-encoder: 4.0.2
+      get-stream: 8.0.1
+      http2-wrapper: 2.2.1
+      lowercase-keys: 3.0.0
+      p-cancelable: 4.0.1
+      responselike: 3.0.0
+    dev: false
+
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     dev: true
@@ -5757,7 +5808,6 @@ packages:
 
   /http-cache-semantics@4.1.1:
     resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
-    dev: true
 
   /http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
@@ -5789,6 +5839,14 @@ packages:
       resolve-alpn: 1.2.1
     dev: true
 
+  /http2-wrapper@2.2.1:
+    resolution: {integrity: sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==}
+    engines: {node: '>=10.19.0'}
+    dependencies:
+      quick-lru: 5.1.1
+      resolve-alpn: 1.2.1
+    dev: false
+
   /https-proxy-agent@5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
@@ -6284,7 +6342,6 @@ packages:
 
   /json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-    dev: true
 
   /json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
@@ -6345,7 +6402,6 @@ packages:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
       json-buffer: 3.0.1
-    dev: true
 
   /lazy-val@1.0.5:
     resolution: {integrity: sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==}
@@ -6464,6 +6520,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /lowercase-keys@3.0.0:
+    resolution: {integrity: sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: false
+
   /lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
@@ -6601,7 +6662,11 @@ packages:
   /mimic-response@3.1.0:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
-    dev: true
+
+  /mimic-response@4.0.0:
+    resolution: {integrity: sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: false
 
   /min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
@@ -6789,6 +6854,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /normalize-url@8.0.0:
+    resolution: {integrity: sha512-uVFpKhj5MheNBJRTiMZ9pE/7hD1QTeEvugSJW/OmLzAp78PB5O6adfMNTvmfKhXBkvCzC+rqifWcVYpGFwTjnw==}
+    engines: {node: '>=14.16'}
+    dev: false
+
   /npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -6949,6 +7019,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /p-cancelable@4.0.1:
+    resolution: {integrity: sha512-wBowNApzd45EIKdO1LaU+LrMBwAcjfPaYtVzV3lmfM3gf8Z4CHZsiIqlM8TZZ8okYvh5A1cP6gTfCRQtwUpaUg==}
+    engines: {node: '>=14.16'}
+    dev: false
+
   /p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -7220,7 +7295,6 @@ packages:
   /quick-lru@5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: true
 
   /random-bytes@1.0.0:
     resolution: {integrity: sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ==}
@@ -7489,7 +7563,6 @@ packages:
 
   /resolve-alpn@1.2.1:
     resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
-    dev: true
 
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
@@ -7518,6 +7591,13 @@ packages:
       lowercase-keys: 2.0.0
     dev: true
 
+  /responselike@3.0.0:
+    resolution: {integrity: sha512-40yHxbNcl2+rzXvZuVkrYohathsSJlMTXKryG5y8uciHv1+xDLHQpgjG64JUO9nrEq2jGLH6IZ8BcZyw3wrweg==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      lowercase-keys: 3.0.0
+    dev: false
+
   /restore-cursor@4.0.0:
     resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -8525,7 +8605,7 @@ packages:
       - terser
     dev: true
 
-  /vite-node@0.30.1(@types/node@18.15.11)(sass@1.57.1):
+  /vite-node@0.30.1(@types/node@16.18.23)(sass@1.57.1):
     resolution: {integrity: sha512-vTikpU/J7e6LU/8iM3dzBo8ZhEiKZEKRznEMm+mJh95XhWaPrJQraT/QsT2NWmuEf+zgAoMe64PKT7hfZ1Njmg==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -8535,7 +8615,7 @@ packages:
       mlly: 1.2.0
       pathe: 1.1.0
       picocolors: 1.0.0
-      vite: 4.3.1(@types/node@18.15.11)(sass@1.57.1)
+      vite: 4.3.1(@types/node@16.18.23)(sass@1.57.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -8651,7 +8731,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@4.3.1(@types/node@18.15.11)(sass@1.57.1):
+  /vite@4.3.1(@types/node@16.18.23)(sass@1.57.1):
     resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -8676,7 +8756,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.15.11
+      '@types/node': 16.18.23
       esbuild: 0.17.5
       postcss: 8.4.21
       rollup: 3.20.7
@@ -8784,7 +8864,7 @@ packages:
     dependencies:
       '@types/chai': 4.3.4
       '@types/chai-subset': 1.3.3
-      '@types/node': 18.15.11
+      '@types/node': 16.18.23
       '@vitest/expect': 0.30.1
       '@vitest/runner': 0.30.1
       '@vitest/snapshot': 0.30.1
@@ -8806,8 +8886,8 @@ packages:
       strip-literal: 1.0.1
       tinybench: 2.4.0
       tinypool: 0.4.0
-      vite: 4.3.1(@types/node@18.15.11)(sass@1.57.1)
-      vite-node: 0.30.1(@types/node@18.15.11)(sass@1.57.1)
+      vite: 4.3.1(@types/node@16.18.23)(sass@1.57.1)
+      vite-node: 0.30.1(@types/node@16.18.23)(sass@1.57.1)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

From c4d65dbe5fc81002a46cb814aceb2af96b9d6ac1 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 10 Dec 2023 19:12:29 +0100
Subject: [PATCH 24/24] fix: display correct end time in backstage (#635)

---
 apps/client/src/features/viewers/backstage/Backstage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/features/viewers/backstage/Backstage.tsx b/apps/client/src/features/viewers/backstage/Backstage.tsx
index 1f9556da4..74a83c737 100644
--- a/apps/client/src/features/viewers/backstage/Backstage.tsx
+++ b/apps/client/src/features/viewers/backstage/Backstage.tsx
@@ -140,7 +140,7 @@ export default function Backstage(props: BackstageProps) {
                   {isNegative ? (
                     <div className='aux-timers__value'>{expectedFinish}</div>
                   ) : (
-                    <SuperscriptTime time={startedAt} className='aux-timers__value' />
+                    <SuperscriptTime time={expectedFinish} className='aux-timers__value' />
                   )}
                 </div>
                 <div className='timer-gap' />