chore: version bump (#764 )

fix: issue where a end time can be overflowing (#761 )
fix: timer type clock is not negative in public displays (#747 )
2026-07-26 10:38:55 +00:00 · 2024-02-06 11:46:08 +01:00 · 2024-02-06 11:42:28 +01:00 · 2024-01-30 12:35:36 +01:00 · 2024-01-15 21:37:04 +01:00 · 2024-01-10 20:50:19 +01:00
450 changed files with 19787 additions and 10175 deletions
@@ -0,0 +1 @@
+ "ONTIME_VERSION.js"
@@ -1,4 +1,5 @@
 {
+  "root": true,
  "parserOptions": {
    "ecmaVersion": 2020
  },
@@ -6,8 +7,16 @@
    "es6": true,
    "jest": true
  },
+  "parser": "@typescript-eslint/parser",
  "extends": [
-    "eslint:recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "eslint-config-prettier"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
  ],
  "overrides": [
    {
@@ -21,6 +30,33 @@
    }
  ],
  "rules": {
-    "no-console": "warn"
+    "no-useless-concat": "warn",
+    "prefer-template": "warn",
+    "no-console": [
+      "warn",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto"
+      }
+    ]
  }
 }
@@ -16,17 +16,17 @@ jobs:
    - uses: actions/checkout@v3
    - name: Setup env
      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      
+
    - name: Setup Node.js environment
      uses: actions/setup-node@v3.6.0
      with:
        version: 16.16.0
-        
+
    - name: Setup pnpm
-      uses: pnpm/action-setup@v2.2.4
+      uses: pnpm/action-setup@v2
      with:
-        version: 7.26.3
-          
+        version: 8
+
    - name: Install dependencies
      run: pnpm install --frozen-lockfile

@@ -34,7 +34,7 @@ jobs:
      env:
        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
      run: pnpm turbo build:docker
-        
+
    - name: Docker Login
      uses: docker/login-action@v2.1.0
      with:
@@ -44,7 +44,8 @@ jobs:
    - name: Docker Setup Buildx
      uses: docker/setup-buildx-action@v2.5.0

-    - name: Build and push Docker images
+    - name: Build and push stable release
+      if: github.event.release.prerelease == false
      uses: docker/build-push-action@v4.0.0
      with:
        context: .
@@ -54,3 +55,14 @@ jobs:
        push: true
        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest

+    - name: Build and push pre-release
+      if: github.event.release.prerelease == true
+      uses: docker/build-push-action@v4.0.0
+      with:
+        context: .
+        file: ./Dockerfile
+        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+        # Push is a shorthand for --output=type=registry
+        push: true
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly
+
@@ -17,9 +17,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -35,7 +35,9 @@ jobs:
      - name: Release
        uses: softprops/action-gh-release@v1
        with:
-          files: './apps/electron/dist/ontime-macOS.dmg'
+          files: |
+            ./apps/electron/dist/ontime-macOS-x64.dmg
+            ./apps/electron/dist/ontime-macOS-arm64.dmg
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

@@ -50,9 +52,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -83,9 +85,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -20,23 +20,47 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

+      # Run code quality per package
+      - name: React - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/client
+
+      - name: Server - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/server
+
+      - name: Utils - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./packages/utils
+
+      - name: Types - Run linter
+        if: always()
+        run: pnpm lint
+        working-directory: ./packages/types
+
      # We choose to run tests separately
      - name: React - Run unit tests
+        if: always()
        run: pnpm test:pipeline
        working-directory: ./apps/client

      - name: Server - Run unit tests
+        if: always()
        run: pnpm test:pipeline
        working-directory: ./apps/server

      - name: Utils - Run unit tests
+        if: always()
        run: pnpm test:pipeline
        working-directory: ./packages/utils

@@ -52,9 +76,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint-staged
@@ -0,0 +1,10 @@
+build
+coverage
+dist
+node_modules
+
+playwright-report
+
+**/*.toml
+**/*.yml
+**/*.json
@@ -1,4 +1,5 @@
 {
+  "endOfLine": "lf",
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
@@ -1,32 +1,48 @@
 # GETTING STARTED

 Ontime consists of 3 distinct parts
- __client__: A React app for Ontime's UI and web clients 
+
+- __client__: A React app for Ontime's UI and web clients
 - __electron__: An electron app which facilitates the cross-platform distribution of Ontime
 - __server__: A node application which handles the domains services and integrations

-The steps below will assume you have locally installed the necessary dependencies. 
+The steps below will assume you have locally installed the necessary dependencies.
 Other dependencies will be installed as part of the setup
+
 - __node__ (>=16.16)
 - __pnpm__ (>=7)
 - __docker__ (only necessary to run and build docker images)

 ## LOCAL DEVELOPMENT

-The electron app is only necessary to distribute an installable version of the app and is not required for local development.
+The electron app is only necessary to distribute an installable version of the app and is not required for local
+development.
 Locally, we would need to run both the React client and the node.js server in development mode

 From the project root, run the following commands
+
 - __Install the project dependencies__ by running `pnpm i`
 - __Run dev mode__ by running `turbo dev`

+### Debugging backend
+
+To debug backend code in Node.js:
+
+- Open two separate terminals and navigate to the `apps/client` and `apps/server` directories.
+- In each terminal, run the command `pnpm dev` to start the development servers for both the client and server
+  applications.
+- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by
+  running `pnpm dev:inspect`.
+
 ## TESTING

-Generally we have 2 types of tests. 
+Generally we have 2 types of tests.
+
 - Unit tests for functions that contain business logic
 - End-to-end tests for core features

 ### Unit tests
+
 Unit tests are contained in mostly all the apps and packages (client, server and utils)

 You can run unit tests by running turbo `turbo test:pipeline` from the project root.
@@ -35,12 +51,22 @@ This will run all tests and close test runner.
 Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode

 ### E2E tests
-E2E tests are in a separate package. On running, [playwright](https://playwright.dev/) will spin up an instance of the webserver to test against
+
+E2E tests are in a separate package. On running, [playwright](https://playwright.dev/) will spin up an instance of the
+webserver to test against
 These tests also run against a separate version of the DB (test-db)

+Before running the E2E, you should first build the project with `pnpm build:local`.
+
 You can run playwright tests from project root with `pnpm e2e`

-When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually start the webserver with `pnpm dev:server`
+When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually
+start the webserver with `pnpm dev:server`
+
+Some other useful commands
+
+- `pnpm e2e --ui` open playwright UI
+- `pnpm e2e --headed` run tests with a visible browser window

 ## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)

@@ -48,8 +74,9 @@ Ontime uses Electron to distribute the application.
 You can generate a distribution for your OS by running the following steps.

 From the project root, run the following commands
+
 - __Install the project dependencies__ by running `pnpm i`
- __Build the UI and server__ by running `turbo build:local`
+- __Build the UI and server__ by running `turbo build:electron`
 - __Create the package__ by running `turbo dist-win`, `turbo dist-mac` or `turbo dist-linux`

 The build distribution assets will be at `.apps/electron/dist`
@@ -60,10 +87,13 @@ Ontime provides a docker-compose file to aid with building and running docker im
 While it should allow for a generic setup, it might need to be modified to fit your infrastructure.

 From the project root, run the following commands
+
 - __Install the project dependencies__ by running `pnpm i`
+- __Build packages__ by running `pnpm build:localdocker`
 - __Build docker image from__ by running `docker build -t getontime/ontime`
 - __Run docker image from compose__ by running `docker-compose up -d`

 Other useful commands
+
 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`
@@ -4,7 +4,7 @@
 ## Download the latest releases here

 <div style="display: flex; justify-content: space-around">
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/mac-download.png"/></a>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/mac-download.png"/></a>
  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe"><img alt="Download Windows" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/win-download.png"/></a>
  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage"><img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/linux-download.png"/></a>
  <a href="https://hub.docker.com/r/getontime/ontime"><img alt="Get from Dockerhub" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/dockerhub.png"/></a>
@@ -14,10 +14,11 @@

 Ontime is an application for creating and managing event running order and timers.

-The user inputs a list of events along with scheduling and event information. 
+The user inputs a list of events along with scheduling and event information.
 This will then populate a series of screens which are available to be rendered by any device in the Network.

-This makes for a simple and cheap way to distribute over a venue using a network infrastructure instead of video outputs.
+This makes for a simple and cheap way to distribute over a venue using a network infrastructure instead of video
+outputs.

 ![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.png)

@@ -28,7 +29,7 @@ This makes for a simple and cheap way to distribute over a venue using a network
 Once installed and running, Ontime starts a background server that is the heart of all processes.
 From the app, you can add / edit your running order and control the timer playback.

-Any device with a browser in the same network can choose one of the supported views to render the available data. 
+Any device with a browser in the same network can choose one of the supported views to render the available data.
 This is done by reaching the ontime server at the _default port 4001_ eg: `localhost:4001`
 or `192.168.1.3:4001`
 <br />
@@ -50,8 +51,9 @@ IP.ADDRESS:4001/public     > Public / Foyer view
 IP.ADDRESS:4001/lower      > Lower Thirds
 IP.ADDRESS:4001/studio     > Studio Clock
 ```
+
 ```
-For management views 
+For management views
 -------------------------------------------------------------
 IP.ADDRESS:4001/editor    > the control interface, same as the app
 IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
@@ -63,14 +65,14 @@ More documentation is available [in our docs](https://ontime.gitbook.io)

 - [x] Distribute data over network and render it in the browser
 - [x] Different screen types
-    - Stage Timer
-    - Minimal Timer
-    - Clock
-    - Backstage Info
-    - Public Info
-    - Studio Clock
-    - Countdown
-    - [Make your own?](#make-your-own-viewer)
+  - Stage Timer
+  - Minimal Timer
+  - Clock
+  - Backstage Info
+  - Public Info
+  - Studio Clock
+  - Countdown
+  - [Make your own?](#make-your-own-viewer)
 - [x] Configurable Lower Thirds
 - [x] Collaborative editing with the cuesheet view
 - [x] Send live messages to different screen types
@@ -83,17 +85,19 @@ More documentation is available [in our docs](https://ontime.gitbook.io)
 - [x] Roll mode: run standalone using the system clock
 - [x] [Headless run](#headless-run): run server in a separate machine, configure from a browser locally
 - [x] [Countdown to anything!](https://ontime.gitbook.io/v2/views/countdown): have
-  a countdown to any scheduled event
- [x] Multi-platform  (available on Windows, MacOS and Linux)
+      a countdown to any scheduled event
+- [x] Multi-platform (available on Windows, MacOS and Linux)
 - [x] [Companion integration](https://bitfocus.io/connections/getontime-ontime)

 ## Unopinionated

-We want Ontime to be unique by targeting freelancers instead of roles. 
+We want Ontime to be unique by targeting freelancers instead of roles.

-We believe most freelancers work in different fields and we want to give you a tool that you can leverage across your many environments and workflows.
+We believe most freelancers work in different fields and we want to give you a tool that you can leverage across your
+many environments and workflows.

-We are not interested in forcing workflows and have made Ontime so, it is flexible to whichever way you would like to work.
+We are not interested in forcing workflows and have made Ontime so, it is flexible to whichever way you would like to
+work.

 ## Rich APIs for workflow integrations

@@ -113,7 +117,8 @@ Taking advantage of the integrations, we currently use Ontime with:

 Ontime broadcasts its data over WebSockets. This allows you to consume its data outside the application.

-Writing a new view for the browser can be done with basic knowledge of HTML + CSS + Javascript (or any other language that can run in the browser).
+Writing a new view for the browser can be done with basic knowledge of HTML + CSS + Javascript (or any other language
+that can run in the browser).
 <br />
 See [this repository](https://github.com/cpvalente/ontime-viewer-template-v2) with a small template on
 how to get you started and read the docs about
@@ -121,26 +126,11 @@ the [Websocket API](https://ontime.gitbook.io/v2/control-and-feedback/ontime-api

 ### Headless run️

-You can self-host and run Ontime in a docker image. The run command will:
+You can self-host and run Ontime in a docker image.

- expose the necessary ports (listed in the Dockerfile)
- mount a local file to persist your data (in the example: ````$(pwd)/local-data````)
- the image name __getontime/ontime__
+The docker image along with documentation is [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)

-The docker image is
-in [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
-
-```bash
-docker pull getontime/ontime
-```
-
-and use the included docker compose to get started
-
-```bash
-docker-compose up
-```
-
-Related information available [in the docs](https://ontime.gitbook.io/v2/additional-notes/use-in-raspberry-pi)
+If you want to run this image in a Raspberry Pi, please see [the docs](https://ontime.gitbook.io/v2/additional-notes/use-in-raspberry-pi)

 ## Roadmap

@@ -148,32 +138,32 @@ Related information available [in the docs](https://ontime.gitbook.io/v2/additio

 Several features are planned in the roadmap, and we continuously adjust this to match how users interact with the app.
 <br />
-Have an idea? Reach out via [email](mail@getontime.no) or [open an issue](https://github.com/cpvalente/ontime/issues/new)
+Have an idea? Reach out via [email](mail@getontime.no)
+or [open an issue](https://github.com/cpvalente/ontime/issues/new)

 ### Issues

 We use Github's issue tracking for bug reporting and feature requests. <br />
-Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new). 
+Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new).

 #### Unsigned App

 When installing the app you would see warning screens from the Operating System like:

-```Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.```
+`Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.`

 or

-```Ontime can't be opened because it is from an unidentified developer```
+`Ontime can't be opened because it is from an unidentified developer`

 or in Linux

-```Could Not Display "ontime-linux.AppImage```
+`Could Not Display "ontime-linux.AppImage`

 You can circumvent this by allowing the execution of the app manually.

 - In Windows: click more and select "Run Anyway"
- in macOS: after attempting to run the installer, navigate to System Preferences ->  Security &
-  Privacy and allow the execution of the app
+- in macOS: the solution in macOS is different across versions, please refer to the [apple documentation](https://support.apple.com/en-gb/guide/mac-help/mh40616/mac)
 - In Linux: right-click the AppImage file -> Properties -> Permissions -> select Allow Executing
  File as a Program

@@ -185,6 +175,7 @@ please [open an issue](https://github.com/cpvalente/ontime/issues/new)
 #### Safari

 There are known issues with Safari versions lower than 13:
+
 - Spacing and text styles might have small inconsistencies
 - Table view does not work

@@ -194,7 +185,8 @@ There is no plan for any further work on this.

 Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
 <br /><br />
-If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a Pull Request.
+If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a
+Pull Request.
 <br />
 Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)

@@ -8,34 +8,18 @@
    "browser": true,
    "node": true
  },
-  "parser": "@typescript-eslint/parser",
  "extends": [
-    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "eslint-config-prettier",
-    "plugin:@tanstack/eslint-plugin-query/recommended",
-    "prettier"
+    "plugin:@tanstack/eslint-plugin-query/recommended"
  ],
  "plugins": [
    "react",
    "testing-library",
    "simple-import-sort",
-    "@tanstack/query",
-    "@typescript-eslint",
-    "prettier"
+    "@tanstack/query"
  ],
  "rules": {
-    "@typescript-eslint/no-non-null-assertion": "warn",
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
-    "no-useless-concat": "warn",
-    "prefer-template": "warn",
    "react/jsx-no-bind": [
      "error",
      {
@@ -1,4 +1,5 @@
 {
+  "endOfLine": "lf",
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
@@ -1,6 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard-scss",
-    "stylelint-config-prettier"
-  ]
-}
@@ -1,9 +1,9 @@
 {
  "name": "ontime-ui",
-  "version": "2.0.0",
+  "version": "2.28.16",
  "private": true,
  "dependencies": {
-    "@chakra-ui/react": "^2.5.5",
+    "@chakra-ui/react": "^2.7.0",
    "@dnd-kit/core": "^6.0.8",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
@@ -12,9 +12,10 @@
    "@react-icons/all-files": "^4.1.0",
    "@sentry/react": "^7.46.0",
    "@sentry/tracing": "^7.46.0",
-    "@tanstack/react-query": "^4.28.0",
-    "@tanstack/react-query-devtools": "^4.29.0",
-    "autosize": "^5.0.2",
+    "@tanstack/react-query": "^5.8.4",
+    "@tanstack/react-query-devtools": "^5.8.4",
+    "@tanstack/react-table": "^8.9.2",
+    "autosize": "^6.0.1",
    "axios": "^1.2.0",
    "color": "^4.2.3",
    "csv-stringify": "^6.2.3",
@@ -27,7 +28,6 @@
    "react-hook-form": "^7.43.5",
    "react-qr-code": "^2.0.11",
    "react-router-dom": "^6.3.0",
-    "react-table": "^7.7.0",
    "typeface-open-sans": "^1.1.13",
    "web-vitals": "^3.1.1",
    "zustand": "^4.3.6"
@@ -38,9 +38,11 @@
    "dev": "cross-env BROWSER=none vite",
    "build": "vite build",
    "build:local": "cross-env NODE_ENV=local vite build",
+    "build:electron": "cross-env NODE_ENV=local vite build",
    "build:docker": "vite build",
-    "lint": "eslint .",
-    "stylelint": "npx stylelint \"**/*.scss\"\n",
+    "build:localdocker": "cross-env NODE_ENV=local vite build",
+    "lint": "eslint . --quiet",
+    "lint-staged": "eslint",
    "test": "vitest",
    "test:pipeline": "vitest run",
    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"
@@ -59,23 +61,21 @@
  },
  "devDependencies": {
    "@sentry/vite-plugin": "^0.4.0",
-    "@tanstack/eslint-plugin-query": "^4.26.2",
+    "@tanstack/eslint-plugin-query": "^5.8.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^14.1.1",
    "@types/color": "^3.0.3",
-    "@types/luxon": "^3.2.0",
-    "@types/prop-types": "^15.7.5",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react": "^3.0.1",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-jest": "^27.1.7",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -83,13 +83,9 @@
    "jsdom": "^21.1.0",
    "ontime-types": "workspace:*",
    "ontime-utils": "workspace:*",
-    "prettier": "^2.8.3",
-    "prop-types": "^15.8.1",
+    "prettier": "^3.0.3",
    "sass": "^1.57.1",
-    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-standard-scss": "^6.1.0",
-    "typescript": "^4.9.4",
+    "typescript": "^5.2.2",
    "vite": "^4.3.1",
    "vite-plugin-compression2": "^0.9.0",
    "vite-plugin-svgr": "^2.4.0",
@@ -4,11 +4,12 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

+import { ContextMenu } from './common/components/context-menu/ContextMenu';
 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
 import { AppContextProvider } from './common/context/AppContext';
-import { ContextMenuProvider } from './common/context/ContextMenuContext';
 import useElectronEvent from './common/hooks/useElectronEvent';
 import { ontimeQueryClient } from './common/queryClient';
+import { socketClientName } from './common/stores/connectionName';
 import { connectSocket } from './common/utils/socket';
 import theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
@@ -18,7 +19,8 @@ import AppRouter from './AppRouter';
 // @ts-expect-error no types from font import
 import('typeface-open-sans');

-connectSocket();
+const preferredClientName = socketClientName.getState().name;
+connectSocket(preferredClientName);

 function App() {
  const { isElectron, sendToElectron } = useElectronEvent();
@@ -50,18 +52,18 @@ function App() {
    <ChakraProvider resetCSS theme={theme}>
      <QueryClientProvider client={ontimeQueryClient}>
        <AppContextProvider>
-          <ContextMenuProvider>
-            <BrowserRouter>
-              <div className='App'>
-                <ErrorBoundary>
-                  <TranslationProvider>
+          <BrowserRouter>
+            <div className='App'>
+              <ErrorBoundary>
+                <TranslationProvider>
+                  <ContextMenu>
                    <AppRouter />
-                  </TranslationProvider>
-                </ErrorBoundary>
-                <ReactQueryDevtools initialIsOpen={false} />
-              </div>
-            </BrowserRouter>
-          </ContextMenuProvider>
+                  </ContextMenu>
+                </TranslationProvider>
+              </ErrorBoundary>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </div>
+          </BrowserRouter>
        </AppContextProvider>
      </QueryClientProvider>
    </ChakraProvider>
@@ -1,11 +1,12 @@
-import { lazy, Suspense, useEffect } from 'react';
-import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';

-import useAliases from './common/hooks-query/useAliases';
+import withAlias from './features/AliasWrapper';
 import withData from './features/viewers/ViewWrapper';

 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
-const Table = lazy(() => import('./features/table/ProtectedTable'));
+const Cuesheet = lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
+const Operator = lazy(() => import('./features/operator/Operator'));

 const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
 const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
@@ -17,14 +18,14 @@ const Public = lazy(() => import('./features/viewers/public/Public'));
 const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerWrapper'));
 const StudioClock = lazy(() => import('./features/viewers/studio/StudioClock'));

-const STimer = withData(TimerView);
-const SMinimalTimer = withData(MinimalTimerView);
-const SClock = withData(ClockView);
-const SCountdown = withData(Countdown);
-const SBackstage = withData(Backstage);
-const SPublic = withData(Public);
-const SLowerThird = withData(Lower);
-const SStudio = withData(StudioClock);
+const STimer = withAlias(withData(TimerView));
+const SMinimalTimer = withAlias(withData(MinimalTimerView));
+const SClock = withAlias(withData(ClockView));
+const SCountdown = withAlias(withData(Countdown));
+const SBackstage = withAlias(withData(Backstage));
+const SPublic = withAlias(withData(Public));
+const SLowerThird = withAlias(withData(Lower));
+const SStudio = withAlias(withData(StudioClock));

 const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
 const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
@@ -33,22 +34,6 @@ const MessageControl = lazy(() => import('./features/control/message/MessageCont
 const Info = lazy(() => import('./features/info/InfoExport'));

 export default function AppRouter() {
-  const { data } = useAliases();
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  // navigate if is alias route
-  useEffect(() => {
-    if (!data) return;
-
-    for (const d of data) {
-      if (`/${d.alias}` === location.pathname && d.enabled) {
-        navigate(`/${d.pathAndParams}`);
-        break;
-      }
-    }
-  }, [data, location, navigate]);
-
  return (
    <Suspense fallback={null}>
      <Routes>
@@ -74,11 +59,14 @@ export default function AppRouter() {
        {/*/!* Lower cannot have fallback *!/*/}
        <Route path='/lower' element={<SLowerThird />} />

+        <Route path='/op' element={<Operator />} />
+        <Route path='/operator' element={<Operator />} />
+
        {/*/!* Protected Routes *!/*/}
        <Route path='/editor' element={<Editor />} />
-        <Route path='/cuesheet' element={<Table />} />
-        <Route path='/cuelist' element={<Table />} />
-        <Route path='/table' element={<Table />} />
+        <Route path='/cuesheet' element={<Cuesheet />} />
+        <Route path='/cuelist' element={<Cuesheet />} />
+        <Route path='/table' element={<Cuesheet />} />

        {/*/!* Protected Routes - Elements *!/*/}
        <Route
@@ -1,9 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-
-export const queryClientMock = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
@@ -1,22 +0,0 @@
-// Exported viewer link location
-const minimalLocation = 'minimal';
-const speakerLocation = 'speaker';
-const smLocation = 'sm';
-const publicLocation = 'public';
-const studioLocation = 'studio';
-const cuesheetLocation = 'cuesheet';
-const countdownLocation = 'countdown';
-const clockLocation = 'clock';
-const lowerLocation = 'lower';
-
-export const viewerLocations = [
-  { link: speakerLocation, label: 'Stage timer' },
-  { link: clockLocation, label: 'Clock' },
-  { link: minimalLocation, label: 'Minimal timer' },
-  { link: smLocation, label: 'Backstage screen' },
-  { link: publicLocation, label: 'Public screen' },
-  { link: lowerLocation, label: 'Lower thirds' },
-  { link: studioLocation, label: 'Studio clock' },
-  { link: countdownLocation, label: 'Countdown' },
-  { link: cuesheetLocation, label: 'Cuesheet' },
-];
@@ -1,22 +1,26 @@
-export const STATIC_PORT = 4001;
-
 // REST stuff
-export const EVENT_DATA = ['eventdata'];
+export const PROJECT_DATA = ['project'];
 export const ALIASES = ['aliases'];
 export const USERFIELDS = ['userFields'];
-export const RUNDOWN_TABLE_KEY = 'rundown';
-export const RUNDOWN_TABLE = [RUNDOWN_TABLE_KEY];
+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'];
+export const SHEET_STATE = ['sheetState'];

-export const serverPort = import.meta.env.DEV ? STATIC_PORT : window.location.port;
-export const serverURL = import.meta.env.DEV ? `http://localhost:${serverPort}` : window.location.origin;
-export const websocketUrl = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.hostname}:${serverPort}/ws`;
+const location = window.location;
+const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
+export const isProduction = import.meta.env.MODE === 'production';

-export const eventURL = `${serverURL}/eventdata`;
+const STATIC_PORT = 4001;
+export const serverPort = isProduction ? location.port : STATIC_PORT;
+export const serverURL = `${location.protocol}//${location.hostname}:${serverPort}`;
+export const websocketUrl = `${socketProtocol}://${location.hostname}:${serverPort}/ws`;
+
+export const projectDataURL = `${serverURL}/project`;
 export const rundownURL = `${serverURL}/events`;
 export const ontimeURL = `${serverURL}/ontime`;

@@ -0,0 +1,53 @@
+import axios, { AxiosError } from 'axios';
+import { LogLevel } from 'ontime-types';
+import { generateId, millisToString } from 'ontime-utils';
+
+import { ontimeQueryClient } from '../queryClient';
+import { addLog } from '../stores/logger';
+import { nowInMillis } from '../utils/time';
+
+export function maybeAxiosError(error: unknown) {
+  if (axios.isAxiosError(error)) {
+    const statusText = (error as AxiosError).response?.statusText ?? '';
+    let data = (error as AxiosError).response?.data ?? '';
+    if (typeof data === 'object') {
+      if ('message' in data) {
+        data = JSON.stringify(data.message);
+      } else {
+        data = JSON.stringify(data);
+      }
+    }
+    return `${statusText}: ${data}`;
+  } else {
+    if (typeof error !== 'string') {
+      return JSON.stringify(error);
+    }
+    return error;
+  }
+}
+
+export function logAxiosError(prepend: string, error: unknown) {
+  const message = `${prepend}: ${maybeAxiosError(error)}`;
+
+  addLog({
+    id: generateId(),
+    origin: 'SERVER',
+    time: millisToString(nowInMillis()),
+    level: LogLevel.Error,
+    text: message,
+  });
+}
+
+/**
+ * Utility function invalidates react-query caches
+ */
+export async function invalidateAllCaches() {
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['project'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['aliases'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['userFields'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['rundown'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['appinfo'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['oscSettings'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['appSettings'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['viewSettings'] });
+}
@@ -1,21 +0,0 @@
-import axios from 'axios';
-import { EventData } from 'ontime-types';
-
-import { eventURL } from './apiConstants';
-
-/**
- * @description HTTP request to fetch event data
- * @return {Promise}
- */
-export async function fetchEventData(): Promise<EventData> {
-  const res = await axios.get(eventURL);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate event data
- * @return {Promise}
- */
-export async function postEventData(data: EventData) {
-  return axios.post(eventURL, data);
-}
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { OntimeRundown, OntimeRundownEntry } from 'ontime-types';
+import { GetRundownCached, OntimeRundown, OntimeRundownEntry } from 'ontime-types';

 import { rundownURL } from './apiConstants';

@@ -7,6 +7,16 @@ import { rundownURL } from './apiConstants';
 * @description HTTP request to fetch all events
 * @return {Promise}
 */
+export async function fetchCachedRundown(): Promise<GetRundownCached> {
+  const res = await axios.get(`${rundownURL}/cached`);
+  return res.data;
+}
+
+/**
+ * @deprecated use fetchCachedRundown instead
+ * @description HTTP request to fetch all events
+ * @return {Promise}
+ */
 export async function fetchRundown(): Promise<OntimeRundown> {
  const res = await axios.get(rundownURL);
  return res.data;
@@ -28,14 +38,6 @@ export async function requestPutEvent(data: Partial<OntimeRundownEntry>) {
  return axios.put(rundownURL, data);
 }

-/**
- * @description HTTP request to modify event
- * @return {Promise}
- */
-export async function requestPatchEvent(data: OntimeRundownEntry) {
-  return axios.patch(rundownURL, data);
-}
-
 export type ReorderEntry = {
  eventId: string;
  from: number;
@@ -58,6 +60,19 @@ export async function requestApplyDelay(eventId: string) {
  return axios.patch(`${rundownURL}/applydelay/${eventId}`);
 }

+export type SwapEntry = {
+  from: string;
+  to: string;
+};
+
+/**
+ * @description HTTP request to swap two events
+ * @return {Promise}
+ */
+export async function requestEventSwap(data: SwapEntry) {
+  return axios.patch(`${rundownURL}/swap`, data);
+}
+
 /**
 * @description HTTP request to delete given event
 * @return {Promise}
@@ -1,16 +1,21 @@
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import {
  Alias,
-  EventData,
+  DatabaseModel,
+  GetInfo,
+  HttpSettings,
+  OntimeRundown,
  OSCSettings,
  OscSubscription,
+  ProjectData,
  Settings,
  UserFields,
  ViewSettings,
 } from 'ontime-types';
+import { ExcelImportMap } from 'ontime-utils';

 import { apiRepoLatest } from '../../externals';
-import { InfoType } from '../models/Info';
+import fileDownload from '../utils/fileDownload';

 import { ontimeURL } from './apiConstants';

@@ -35,7 +40,7 @@ export async function postSettings(data: Settings) {
 * @description HTTP request to retrieve application info
 * @return {Promise}
 */
-export async function getInfo(): Promise<InfoType> {
+export async function getInfo(): Promise<GetInfo> {
  const res = await axios.get(`${ontimeURL}/info`);
  return res.data;
 }
@@ -100,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}
@@ -117,45 +139,38 @@ export async function postOscSubscriptions(data: OscSubscription) {
 }

 /**
- * @description HTTP request to download db
- * @return {Promise}
+ * @description HTTP request to download db in CSV format
 */
-export const downloadRundown = async () => {
-  await axios({
-    url: `${ontimeURL}/db`,
-    method: 'GET',
-    responseType: 'blob', // important
-  }).then((response) => {
-    const headerLine = response.headers['Content-Disposition'];
-    let filename = 'rundown.json';
+export const downloadCSV = () => {
+  return fileDownload(ontimeURL, { name: 'rundown', type: 'csv' }, { type: 'text/csv;charset=utf-8;' });
+};

-    // try and get the filename from the response
-    if (headerLine != null) {
-      const startFileNameIndex = headerLine.indexOf('"') + 1;
-      const endFileNameIndex = headerLine.lastIndexOf('"');
-      filename = headerLine.substring(startFileNameIndex, endFileNameIndex);
-    }
+/**
+ * @description HTTP request to download db in JSON format
+ */
+export const downloadRundown = () => {
+  return fileDownload(ontimeURL, { name: 'rundown', type: 'json' }, { type: 'application/json;charset=utf-8;' });
+};

-    const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/json' }));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute('download', filename);
-    document.body.appendChild(link);
-    link.click();
-  });
+// TODO: should this be extracted to shared code?
+export type ProjectFileImportOptions = {
+  onlyRundown: boolean;
 };

 /**
 * @description HTTP request to upload events db
 * @return {Promise}
 */
-type UploadDataOptions = {
-  onlyRundown?: boolean;
-};
-export const uploadData = async (file: File, setProgress: (value: number) => void, options?: UploadDataOptions) => {
+export const uploadProjectFile = async (
+  file: File,
+  setProgress: (value: number) => void,
+  options?: Partial<ProjectFileImportOptions>,
+) => {
  const formData = new FormData();
  formData.append('userFile', file);
-  const onlyRundown = options?.onlyRundown || 'false';
+
+  const onlyRundown = Boolean(options?.onlyRundown);
+
  await axios
    .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
      headers: {
@@ -169,6 +184,47 @@ export const uploadData = async (file: File, setProgress: (value: number) => voi
    .then((response) => response.data.id);
 };

+/**
+ * @description Make patch changes to the objects in the db
+ * @return {Promise}
+ */
+export async function patchData(patchDb: Partial<DatabaseModel>) {
+  const response = await axios.patch(`${ontimeURL}/db`, patchDb);
+  return response;
+}
+
+type PostPreviewExcelResponse = {
+  rundown: OntimeRundown;
+  project: ProjectData;
+  userFields: UserFields;
+};
+
+/**
+ * @description Make patch changes to the objects in the db
+ * @return {Promise} - returns parsed rundown and userfields
+ */
+export async function postPreviewExcel(file: File, setProgress: (value: number) => void, options?: ExcelImportMap) {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  formData.append('options', JSON.stringify(options));
+
+  const response: AxiosResponse<PostPreviewExcelResponse> = await axios.post(
+    `${ontimeURL}/preview-spreadsheet`,
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
+        setProgress(complete);
+      },
+    },
+  );
+
+  return response;
+}
+
 export type HasUpdate = {
  url: string;
  version: string;
@@ -186,6 +242,79 @@ export async function getLatestVersion(): Promise<HasUpdate> {
  };
 }

-export async function postNew(initialData: Partial<EventData>) {
+export async function postNew(initialData: Partial<ProjectData>) {
  return axios.post(`${ontimeURL}/new`, initialData);
 }
+
+/**
+ * @description STEP 1
+ */
+export const uploadSheetClientFile = async (file: File) => {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  const res = await axios
+    .post(`${ontimeURL}/sheet/clientsecret`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+    .then((response) => response.data.id);
+  return res;
+};
+
+/**
+ * @description STEP 1 test
+ */
+export const getClientSecrect = async () => {
+  const response = await axios.get(`${ontimeURL}/sheet/clientsecret`);
+  return response.data;
+};
+
+/**
+ * @description STEP 2
+ */
+export const getSheetsAuthUrl = async () => {
+  const response = await axios.get(`${ontimeURL}/sheet/authentication/url`);
+  return response.data;
+};
+
+/**
+ * @description STEP 2 test
+ */
+export const getAuthentication = async () => {
+  const response = await axios.get(`${ontimeURL}/sheet/authentication`);
+  return response.data;
+};
+
+/**
+ * @description STEP 3
+ * @returns worksheetOptions
+ */
+export const postId = async (id: string) => {
+  const response = await axios.post(`${ontimeURL}/sheet/id`, { id });
+  return response.data;
+};
+
+/**
+ * @description STEP 4
+ */
+export const postWorksheet = async (id: string, worksheet: string) => {
+  const response = await axios.post(`${ontimeURL}/sheet/worksheet`, { id, worksheet });
+  return response.data;
+};
+
+/**
+ * @description STEP 5
+ */
+export const postPreviewSheet = async (id: string, options: ExcelImportMap) => {
+  const response = await axios.post(`${ontimeURL}/sheet/pull`, { id, options });
+  return response.data.data;
+};
+
+/**
+ * @description STEP 5
+ */
+export const postPushSheet = async (id: string, options: ExcelImportMap) => {
+  const response = await axios.post(`${ontimeURL}/sheet-push`, { id, options });
+  return response.data.data;
+};
@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { ProjectData } from 'ontime-types';
+
+import { projectDataURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch project data
+ * @return {Promise}
+ */
+export async function getProjectData(): Promise<ProjectData> {
+  const res = await axios.get(projectDataURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate project data
+ * @return {Promise}
+ */
+export async function postProjectData(data: ProjectData) {
+  return axios.post(projectDataURL, data);
+}
@@ -1,26 +0,0 @@
-import { Button } from '@chakra-ui/react';
-import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
-import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
-import PropTypes from 'prop-types';
-
-export default function EnableBtn(props) {
-  const { active, text, actionHandler, size = 'xs' } = props;
-  return (
-    <Button
-      size={size}
-      leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
-      colorScheme='blue'
-      variant={active ? 'solid' : 'outline'}
-      onClick={actionHandler}
-    >
-      {text}
-    </Button>
-  );
-}
-
-EnableBtn.propTypes = {
-  active: PropTypes.bool,
-  text: PropTypes.string,
-  actionHandler: PropTypes.func,
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-}
@@ -1,28 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { IoPause } from '@react-icons/all-files/io5/IoPause';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-interface PauseIconBtnProps {
-  clickhandler: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  active: boolean;
-  disabled: boolean;
-}
-
-export default function PauseIconBtn(props: PauseIconBtnProps) {
-  const { clickhandler, active, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Pause timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoPause size='24px' />}
-        colorScheme='orange'
-        variant={active ? 'solid' : 'outline'}
-        onClick={clickhandler}
-        width={120}
-        disabled={disabled}
-        aria-label='Pause playback'
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
@@ -1,25 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
-import PropTypes from 'prop-types';
-
-export default function PublicIconBtn(props) {
-  const { actionHandler, active, size = 'xs', ...rest } = props;
-  return (
-    <Tooltip label={active ? 'Make event private' : 'Make event public'}>
-      <IconButton
-        size={size}
-        icon={<FiUsers />}
-        colorScheme='blue'
-        variant={active ? 'solid' : 'outline'}
-        onClick={() => actionHandler('update', { field: 'isPublic', value: !active })}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-PublicIconBtn.propTypes = {
-  actionHandler: PropTypes.func,
-  active: PropTypes.bool,
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-};
@@ -1,28 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-export default function RollIconBtn(props) {
-  const { clickhandler, active, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Roll mode' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoTimeOutline size='24px' />}
-        colorScheme='blue'
-        variant={active ? 'solid' : 'outline'}
-        onClick={clickhandler}
-        width={120}
-        disabled={disabled}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-RollIconBtn.propTypes = {
-  clickhandler: PropTypes.func,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
@@ -1,28 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-export default function StartIconBtn(props) {
-  const { clickhandler, active, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Start timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoPlay size='24px' />}
-        colorScheme='green'
-        variant={active ? 'solid' : 'outline'}
-        onClick={clickhandler}
-        width={120}
-        disabled={disabled}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-StartIconBtn.propTypes = {
-  clickhandler: PropTypes.func,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool
-}
@@ -1,29 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-export default function TransportIconBtn(props) {
-  const { clickHandler, icon, tooltip, disabled, ...rest } = props;
-  return (
-    <Tooltip label={tooltip} openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={icon}
-        colorScheme='white'
-        variant='outline'
-        _hover={!disabled && { bg: '#ebedf0', color: '#333' }}
-        onClick={clickHandler}
-        width={90}
-        disabled={disabled}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-TransportIconBtn.propTypes = {
-  clickHandler: PropTypes.func,
-  icon: PropTypes.element,
-  tooltip: PropTypes.string,
-  disabled: PropTypes.bool,
-};
@@ -1,27 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { IoStop } from '@react-icons/all-files/io5/IoStop';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-export default function UnloadIconBtn(props) {
-  const { clickHandler, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Unload event' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoStop size='22px' />}
-        colorScheme='red'
-        variant='outline'
-        onClick={clickHandler}
-        width={90}
-        disabled={disabled}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-UnloadIconBtn.propTypes = {
-  clickHandler: PropTypes.func,
-  disabled: PropTypes.bool,
-};
@@ -0,0 +1,84 @@
+// logic (with some modifications) culled from:
+// https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
+
+import { Fragment, ReactElement } from 'react';
+import { Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
+import { IconType } from '@react-icons/all-files';
+import { create } from 'zustand';
+
+import style from './ContextMenu.module.scss';
+
+type ContextMenuCoords = {
+  x: number;
+  y: number;
+};
+
+export type Option = {
+  label: string;
+  icon: IconType;
+  onClick: () => void;
+  withDivider?: boolean;
+  isDisabled?: boolean;
+};
+
+type ContextMenuStore = {
+  coords: ContextMenuCoords;
+  options: Option[];
+  isOpen: boolean;
+  setContextMenu: (coords: ContextMenuCoords, options: Option[]) => void;
+  setIsOpen: (newIsOpen: boolean) => void;
+};
+
+export const useContextMenuStore = create<ContextMenuStore>((set) => ({
+  coords: { x: 0, y: 0 },
+  options: [],
+  isOpen: false,
+  setContextMenu: (coords, options) => set(() => ({ coords, options, isOpen: true })),
+  setIsOpen: (newIsOpen) => set(() => ({ isOpen: newIsOpen })),
+}));
+
+interface ContextMenuProps {
+  // ReactElement type required due to early `return` (line 51) returning {children}
+  children: ReactElement;
+}
+
+export const ContextMenu = ({ children }: ContextMenuProps) => {
+  const { coords, options, isOpen, setIsOpen } = useContextMenuStore();
+
+  const onClose = () => {
+    return setIsOpen(false);
+  };
+
+  if (!isOpen) {
+    return children;
+  }
+
+  return (
+    <>
+      {children}
+      <div className={style.contextMenuBackdrop} />
+      <Menu isOpen gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
+        <MenuButton
+          className={style.contextMenuButton}
+          aria-hidden
+          w={1}
+          h={1}
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+        <MenuList>
+          {options.map(({ label, icon: Icon, onClick, withDivider, isDisabled }, i) => (
+            <Fragment key={label}>
+              {withDivider && <MenuDivider />}
+              <MenuItem key={i} icon={<Icon />} onClick={onClick} isDisabled={isDisabled}>
+                {label}
+              </MenuItem>
+            </Fragment>
+          ))}
+        </MenuList>
+      </Menu>
+    </>
+  );
+};
@@ -0,0 +1,9 @@
+@use '../../../theme/v2Styles' as *;
+
+.delaySymbol {
+  svg {
+    font-size: 1.5rem;
+    color: $ontime-delay;
+    margin: 0 auto;
+  }
+}
@@ -0,0 +1,40 @@
+import { Tooltip } from '@chakra-ui/react';
+import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
+import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { millisToDelayString } from '../../utils/dateConfig';
+
+import style from './DelayIndicator.module.scss';
+
+interface DelayIndicatorProps {
+  delayValue?: number;
+}
+
+export default function DelayIndicator(props: DelayIndicatorProps) {
+  const { delayValue } = props;
+
+  if (typeof delayValue === 'number') {
+    if (delayValue < 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronDown />
+          </span>
+        </Tooltip>
+      );
+    }
+
+    if (delayValue > 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronUp />
+          </span>
+        </Tooltip>
+      );
+    }
+  }
+
+  return null;
+}
@@ -3,6 +3,9 @@ import React from 'react';
 // skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';

+import { runtime } from '@/common/stores/runtime';
+import { hasConnected, reconnectAttempts, shouldReconnect } from '@/common/utils/socket';
+
 import style from './ErrorBoundary.module.scss';

 class ErrorBoundary extends React.Component {
@@ -25,7 +28,9 @@ class ErrorBoundary extends React.Component {
    });

    Sentry.withScope((scope) => {
-      scope.setExtras(error);
+      scope.setExtras('error', error);
+      scope.setExtras('store', runtime.getState());
+      scope.setExtras('hasSocket', { hasConnected, shouldReconnect, reconnectAttempts });
      const eventId = Sentry.captureException(error);
      this.setState({ eventId, info });
    });
@@ -3,12 +3,7 @@ import { Textarea, TextareaProps } from '@chakra-ui/react';
 // @ts-expect-error no types from library
 import autosize from 'autosize/dist/autosize';

-interface AutoTextAreaProps extends TextareaProps {
-  isDark?: boolean;
-}
-
-export const AutoTextArea = (props: AutoTextAreaProps) => {
-  const { isDark, ...rest } = props;
+export const AutoTextArea = (props: TextareaProps) => {
  const ref = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
@@ -26,8 +21,8 @@ export const AutoTextArea = (props: AutoTextAreaProps) => {
      resize='none'
      ref={ref}
      transition='height none'
-      variant={isDark ? 'ontime-filled' : 'ontime-filled-on-light'}
-      {...rest}
+      variant='ontime-transparent'
+      {...props}
    />
  );
 };
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';

-import { TitleActions } from '../../../../features/event-editor/composite/EventEditorTitles';
+import { EditorUpdateFields } from '../../../../features/event-editor/EventEditor';

 import Swatch from './Swatch';

@@ -8,8 +8,8 @@ import style from './SwatchSelect.module.scss';

 interface ColourInputProps {
  value: string;
-  name: TitleActions;
-  handleChange: (newValue: TitleActions, name: string) => void;
+  name: EditorUpdateFields;
+  handleChange: (newValue: EditorUpdateFields, name: string) => void;
 }

 const colours = [
@@ -19,9 +19,11 @@ interface TextInputProps extends BaseProps {
  isTextArea?: false;
 }

+type ResizeOptions = 'horizontal' | 'vertical' | 'none';
+
 interface TextAreaProps extends BaseProps {
  isTextArea: true;
-  resize?: 'horizontal' | 'vertical' | 'none';
+  resize?: ResizeOptions;
 }

 type InputProps = TextInputProps | TextAreaProps;
@@ -35,7 +37,7 @@ export default function TextInput(props: InputProps) {
  const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
  const textAreaProps = useReactiveTextInput(initialText, submitCallback);

-  let resize = 'none';
+  let resize: ResizeOptions = 'none';
  if (isTextArea) {
    resize = (props as TextAreaProps)?.resize ?? 'none';
  }
@@ -17,9 +17,8 @@ interface TimeInputProps {
  time?: number;
  delay?: number;
  placeholder: string;
-  validationHandler: (entry: TimeEntryField, val: number) => boolean;
  previousEnd?: number;
-  warning?: string;
+  tooltip?: string;
 }

 function ButtonInitial(name: TimeEntryField) {
@@ -29,15 +28,15 @@ function ButtonInitial(name: TimeEntryField) {
  return '';
 }

-function ButtonTooltip(name: TimeEntryField, warning?: string) {
-  if (name === 'timeStart') return `Start${warning ? `: ${warning}` : ''}`;
-  if (name === 'timeEnd') return `End${warning ? `: ${warning}` : ''}`;
-  if (name === 'durationOverride') return `Duration${warning ? `: ${warning}` : ''}`;
+function ButtonTooltip(name: TimeEntryField, tooltip?: string) {
+  if (name === 'timeStart') return `Start${tooltip ? `: ${tooltip}` : ''}`;
+  if (name === 'timeEnd') return `End${tooltip ? `: ${tooltip}` : ''}`;
+  if (name === 'durationOverride') return `Duration${tooltip ? `: ${tooltip}` : ''}`;
  return '';
 }

 export default function TimeInput(props: TimeInputProps) {
-  const { id, name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0, warning } = props;
+  const { id, name, submitHandler, time = 0, delay = 0, placeholder, previousEnd = 0 } = props;
  const { emitError } = useEmitLog();
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [value, setValue] = useState<string>('');
@@ -93,15 +92,12 @@ export default function TimeInput(props: TimeInputProps) {
      // check if time is different from before
      if (newValMillis === time) return false;

-      // validate with parent
-      if (!validationHandler(name, newValMillis)) return false;
-
      // update entry
      submitHandler(name, newValMillis);

      return true;
    },
-    [name, previousEnd, submitHandler, time, validationHandler],
+    [name, previousEnd, submitHandler, time],
  );

  /**
@@ -161,11 +157,11 @@ export default function TimeInput(props: TimeInputProps) {

  const isDelayed = delay !== 0;
  const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
-  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
+  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null]);

  const TooltipLabel = useMemo(() => {
-    return ButtonTooltip(name, warning);
-  }, [name, warning]);
+    return ButtonTooltip(name, '');
+  }, [name]);

  const ButtonText = useMemo(() => {
    return ButtonInitial(name);
@@ -191,7 +187,7 @@ export default function TimeInput(props: TimeInputProps) {
      <Input
        ref={inputRef}
        id={id}
-        data-testid='time-input'
+        data-testid={`time-input-${name}`}
        className={style.inputField}
        type='text'
        placeholder={placeholder}
@@ -202,6 +198,7 @@ export default function TimeInput(props: TimeInputProps) {
        onKeyDown={onKeyDownHandler}
        value={value}
        maxLength={8}
+        autoComplete='off'
      />
    </InputGroup>
  );
@@ -10,6 +10,7 @@ $progress-bar-br: 3px;
  border-radius: $progress-bar-br;
  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
  display: flex;
+  overflow: hidden;

  &--hidden {
    display: none;
@@ -31,7 +32,6 @@ $progress-bar-br: 3px;
  position: absolute;
  height: inherit;
  right: 0;
-  border-radius: $progress-bar-br;
  width: 100%;
 }

@@ -39,12 +39,10 @@ $progress-bar-br: 3px;
  position: absolute;
  height: inherit;
  right: 0;
-  border-radius: 0 $progress-bar-br $progress-bar-br 0;
 }

 .multiprogress-bar__bg-danger {
  position: absolute;
  height: inherit;
  right: 0;
-  border-radius: 0 $progress-bar-br $progress-bar-br 0;
 }
@@ -3,7 +3,7 @@ import { clamp } from '../../utils/math';
 import './MultiPartProgressBar.scss';

 interface MultiPartProgressBar {
-  now: number;
+  now: number | null;
  complete: number;
  normalColor: string;
  warning: number;
@@ -17,17 +17,27 @@ interface MultiPartProgressBar {
 export default function MultiPartProgressBar(props: MultiPartProgressBar) {
  const { now, complete, normalColor, warning, warningColor, danger, dangerColor, hidden, className = '' } = props;

-  const percentComplete = 100 - clamp(100 - (Math.max(now, 0) * 100) / complete, 0, 100);
+  const percentComplete = 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);

  const dangerWidth = clamp((danger / complete) * 100, 0, 100);
  const warningWidth = clamp((warning / complete) * 100, 0, 100);

  return (
    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
-      <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-      <div className='multiprogress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
-      <div className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
-      <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+      {now !== null && (
+        <>
+          <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
+          <div
+            className='multiprogress-bar__bg-warning'
+            style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
+          />
+          <div
+            className='multiprogress-bar__bg-danger'
+            style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+          />
+          <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+        </>
+      )}
    </div>
  );
 }
@@ -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;
@@ -1,6 +1,7 @@
-import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { KeyboardEvent, memo, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Link, useLocation, useSearchParams } from 'react-router-dom';
+import { useDisclosure } from '@chakra-ui/react';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { IoContract } from '@react-icons/all-files/io5/IoContract';
@@ -11,25 +12,29 @@ 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';
+
 import style from './NavigationMenu.module.scss';

-export default function NavigationMenu() {
+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);
  const menuRef = useRef<HTMLDivElement | null>(null);
+
  useClickOutside(menuRef, () => setShowMenu(false));

-  const toggleMenu = () => setShowMenu((prev) => !prev);
-  useKeyDown(toggleMenu, ' ', { isDisabled: searchParams.get('edit') === 'true' });
+  const { isOpen, onOpen, onClose } = useDisclosure();

+  const toggleMenu = () => setShowMenu((prev) => !prev);
+
+  // show on mouse move
  useEffect(() => {
    let fadeOut: NodeJS.Timeout | null = null;
    const setShowMenuTrue = () => {
@@ -51,13 +56,15 @@ export default function NavigationMenu() {
  const isKeyEnter = (event: KeyboardEvent<HTMLDivElement>) => event.key === 'Enter';
  const handleFullscreen = () => toggleFullScreen();
  const handleMirror = () => toggleMirror();
+
  const showEditFormDrawer = () => {
-    searchParams.append('edit', 'true');
+    searchParams.set('edit', 'true');
    setSearchParams(searchParams);
  };

  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}>
          <IoApps />
@@ -92,11 +99,28 @@ export default function NavigationMenu() {
                Flip Screen
                <IoSwapVertical />
              </div>
-              {/*<div className={style.link} tabIndex={0}>*/}
-              {/*  Rename Client*/}
-              {/*</div>*/}
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={onOpen}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && onOpen();
+                }}
+              >
+                Rename Client
+              </div>
            </div>
            <hr className={style.separator} />
+            <Link to='/cuesheet' className={style.link} tabIndex={0}>
+              Cuesheet
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <Link to='/op' className={style.link} tabIndex={0}>
+              Operator
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <hr className={style.separator} />
            {navigatorConstants.map((route) => (
              <Link
                key={route.url}
@@ -116,3 +140,5 @@ export default function NavigationMenu() {
    document.body,
  );
 }
+
+export default memo(NavigationMenu);
@@ -0,0 +1,5 @@
+.modalBody {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+import { setClientName } from '../../../hooks/useSocket';
+import { useSocketClientName } from '../../../stores/connectionName';
+
+import style from './RenameClientModal.module.scss';
+
+interface RenameClientModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function RenameClientModal({ isOpen, onClose }: RenameClientModalProps) {
+  const { name: clientName, persistName } = useSocketClientName();
+  const [newName, setNewName] = useState(clientName);
+
+  useEffect(() => {
+    setNewName(clientName);
+  }, [isOpen, clientName]);
+
+  const handleRename = async () => {
+    if (newName) {
+      await setClientName(newName);
+      persistName(newName);
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size='sm'
+      closeOnOverlayClick={false}
+      motionPreset='slideInBottom'
+      scrollBehavior='inside'
+      preserveScrollBarGap
+      variant='ontime-small'
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Rename client</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody className={style.modalBody}>
+          <Input
+            placeholder='Connection must have a name'
+            defaultValue={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            variant='ontime-filled-on-light'
+          />
+          <Button
+            isDisabled={newName === clientName || !newName}
+            onClick={handleRename}
+            width='100%'
+            variant='ontime-filled'
+          >
+            Save
+          </Button>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
@@ -0,0 +1,42 @@
+import { Tooltip } from '@chakra-ui/react';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import { Playback } from 'ontime-types';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+
+interface PlaybackIconProps {
+  state: Playback;
+  skipTooltip?: boolean;
+  className?: string;
+}
+
+export default function PlaybackIcon(props: PlaybackIconProps) {
+  const { state, skipTooltip, className } = props;
+
+  // if timer is Pause or Armed
+  let label = 'Timer Paused';
+  let Icon = IoPause;
+
+  if (state === Playback.Roll) {
+    label = 'Timer Rolling';
+    Icon = IoPlay;
+  } else if (state === Playback.Play) {
+    label = 'Timer Playing';
+    Icon = IoPlay;
+  } else if (state === Playback.Stop) {
+    label = 'Timer Stopped';
+    Icon = IoStop;
+  }
+
+  if (skipTooltip) {
+    return <Icon className={className} />;
+  }
+
+  return (
+    <Tooltip openDelay={tooltipDelayFast} label={label} shouldWrapChildren>
+      <Icon className={className} />
+    </Tooltip>
+  );
+}
@@ -1,19 +1,19 @@
-import Empty from '../state/Empty';
-
 import { useSchedule } from './ScheduleContext';
 import ScheduleItem from './ScheduleItem';

 import './Schedule.scss';

 interface ScheduleProps {
+  isProduction?: boolean;
  className?: string;
 }

-export default function Schedule({ className }: ScheduleProps) {
+export default function Schedule({ isProduction, className }: ScheduleProps) {
  const { paginatedEvents, selectedEventId, isBackstage, scheduleType } = useSchedule();

+  // TODO: design a nice placeholder for empty schedules
  if (paginatedEvents?.length < 1) {
-    return <Empty text='No events to show' />;
+    return null;
  }

  let selectedState: 'past' | 'now' | 'future' = 'past';
@@ -30,12 +30,16 @@ export default function Schedule({ className }: ScheduleProps) {
            selectedState = 'future';
          }
        }
+
+        const timeStart = isProduction ? event.timeStart + (event?.delay ?? 0) : event.timeStart;
+        const timeEnd = isProduction ? event.timeEnd + (event?.delay ?? 0) : event.timeEnd;
+
        return (
          <ScheduleItem
            key={event.id}
            selected={selectedState}
-            timeStart={event.timeStart}
-            timeEnd={event.timeEnd}
+            timeStart={timeStart}
+            timeEnd={timeEnd}
            title={event.title}
            colour={isBackstage ? event.colour : ''}
            backstageEvent={!event.isPublic}
@@ -1,7 +1,9 @@
 import { createContext, PropsWithChildren, useContext, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { OntimeEvent } from 'ontime-types';

 import { useInterval } from '../../hooks/useInterval';
+import { isStringBoolean } from '../../utils/viewUtils';

 interface ScheduleContextState {
  events: OntimeEvent[];
@@ -19,7 +21,6 @@ interface ScheduleProviderProps {
  events: OntimeEvent[];
  selectedEventId: string | null;
  isBackstage?: boolean;
-  eventsPerPage?: number;
  time?: number;
 }

@@ -28,16 +29,29 @@ export const ScheduleProvider = ({
  events,
  selectedEventId,
  isBackstage = false,
-  eventsPerPage = 7,
  time = 10,
 }: PropsWithChildren<ScheduleProviderProps>) => {
  const [visiblePage, setVisiblePage] = useState(0);
+  const [searchParams] = useSearchParams();

-  const numPages = Math.ceil(events.length / eventsPerPage);
+  // look for overrides from views
+  const hidePast = isStringBoolean(searchParams.get('hidePast'));
+  const stopCycle = isStringBoolean(searchParams.get('stopCycle'));
+  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? 7);
+
+  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
+
+  const viewEvents = [...events];
+  if (hidePast) {
+    // we want to show the event after the next
+    viewEvents.splice(0, selectedEventIndex + 2);
+    selectedEventIndex = 0;
+  }
+
+  const numPages = Math.ceil(viewEvents.length / eventsPerPage);
  const eventStart = eventsPerPage * visiblePage;
  const eventEnd = eventsPerPage * (visiblePage + 1);
-  const paginatedEvents = events.slice(eventStart, eventEnd);
-  const selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
+  const paginatedEvents = viewEvents.slice(eventStart, eventEnd);

  const resolveScheduleType = () => {
    if (selectedEventIndex >= eventStart && selectedEventIndex < eventEnd) {
@@ -52,7 +66,9 @@ export const ScheduleProvider = ({

  // every SCROLL_TIME go to the next array
  useInterval(() => {
-    if (events.length > eventsPerPage) {
+    if (stopCycle) {
+      setVisiblePage(0);
+    } else if (events.length > eventsPerPage) {
      const next = (visiblePage + 1) % numPages;
      setVisiblePage(next);
    }
@@ -1,7 +1,12 @@
+import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';
 import { formatTime } from '../../utils/time';

 import './Schedule.scss';

+const formatOptions = {
+  format: 'hh:mm a',
+};
+
 interface ScheduleItemProps {
  selected: 'past' | 'now' | 'future';
  timeStart: number;
@@ -14,19 +19,10 @@ interface ScheduleItemProps {
 }

 export default function ScheduleItem(props: ScheduleItemProps) {
-  const {
-    selected,
-    timeStart,
-    timeEnd,
-    title,
-    presenter,
-    backstageEvent,
-    colour,
-    skip,
-  } = props;
+  const { selected, timeStart, timeEnd, title, presenter, backstageEvent, colour, skip } = props;

-  const start = formatTime(timeStart, { format: 'hh:mm' });
-  const end = formatTime(timeEnd, { format: 'hh:mm' });
+  const start = formatTime(timeStart, formatOptions);
+  const end = formatTime(timeEnd, formatOptions);
  const userColour = colour !== '' ? colour : '';
  const selectStyle = `entry--${selected}`;

@@ -34,12 +30,15 @@ export default function ScheduleItem(props: ScheduleItemProps) {
    <li className={`entry ${selectStyle} ${skip ? 'skip' : ''}`}>
      <div className='entry-times'>
        <span className='entry-colour' style={{ backgroundColor: userColour }} />
-        {`${start} → ${end} ${backstageEvent ? '*' : ''}`}
+        <div style={{ display: 'flex' }}>
+          <SuperscriptTime time={start} />
+          {' → '}
+          <SuperscriptTime time={end} />
+          {backstageEvent ? '*' : ''}
+        </div>
      </div>
      <div className='entry-title'>{title}</div>
-      {presenter && (
-        <div className='entry-presenter'>{presenter}</div>
-      )}
+      {presenter && <div className='entry-presenter'>{presenter}</div>}
    </li>
  );
 }
@@ -13,12 +13,11 @@ export default function ScheduleNav({ className }: ScheduleNavProps) {
    <div className={`schedule-nav ${className}`}>
      {numPages > 1 &&
        [...Array(numPages).keys()].map((i) => (
-            <div
-              key={i}
-              className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
-            />
-          ),
-        )}
+          <div
+            key={i}
+            className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
+          />
+        ))}
    </div>
  );
 }
@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+
 import { ReactComponent as Emptyimage } from '@/assets/images/empty.svg';

 import style from './Empty.module.scss';
@@ -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,18 +9,24 @@ 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 = paramField.values.find((value) => value === optionFromParams);
+    const defaultOptionValue = optionFromParams || defaultValue;

    return (
-      <Select placeholder='Select an option' variant='ontime' name={id} defaultValue={defaultOptionValue}>
-        {paramField.values.map((value) => (
-          <option key={value} value={value}>
+      <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}
          </option>
        ))}
@@ -29,19 +35,38 @@ 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, placeholder } = 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}
+          placeholder={placeholder}
+        />
+      </InputGroup>
+    );
  }

-  const defaultStringValue = searchParams.get(id) ?? '';
+  const defaultStringValue = searchParams.get(id) ?? defaultValue;
+  const { prefix, placeholder } = 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} placeholder={placeholder} />
+    </InputGroup>
+  );
 }
@@ -2,7 +2,7 @@
@use '../../../theme/ontimeColours' as *;

 .drawerContent {
-  background-color: $gray-1200;
+  background-color: $gray-1250;
 }

 .drawerHeader {
@@ -1,5 +1,5 @@
 import { FormEvent, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 import {
  Button,
  Drawer,
@@ -12,11 +12,34 @@ import {
  useDisclosure,
 } from '@chakra-ui/react';

+import { useLocalStorage } from '../../../common/hooks/useLocalStorage';
+
 import ParamInput from './ParamInput';
 import { ParamField } from './types';

 import style from './ViewParamsEditor.module.scss';

+type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
+type SavedViewParams = Record<string, ViewParamsObj>;
+
+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;
+    }
+
+    return newSearchParams;
+  }, new URLSearchParams());
+};
+
 interface EditFormDrawerProps {
  paramFields: ParamField[];
 }
@@ -24,6 +47,8 @@ interface EditFormDrawerProps {
 export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
  const [searchParams, setSearchParams] = useSearchParams();
  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { pathname } = useLocation();
+  const [storedViewParams, setStoredViewParams] = useLocalStorage<SavedViewParams>('ontime-views', {});

  useEffect(() => {
    const isEditing = searchParams.get('edit');
@@ -33,36 +58,51 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
    }
  }, [searchParams, onOpen]);

-  const onEditDrawerClose = () => {
+  /**
+   * disabling this for now, this feature needs more testing
+   * - we seem to have a bug where this is conflicting with the aliases
+   * - I wonder if the logic below needs to be inside an effect, 
+   * both localStorage and searchParams should trigger a component update when they change
+
+  useEffect(() => {
+    const viewParamsObjFromLocalStorage = storedViewParams[pathname];
+
+    if (viewParamsObjFromLocalStorage !== undefined) {
+      const defaultSearchParams = getURLSearchParamsFromObj(viewParamsObjFromLocalStorage);
+      setSearchParams(defaultSearchParams);
+    }
+
+    // linter is asking for `setSearchParams` & `storedViewParams` in the useEffect deps
+    // rule is disabled since adding `setSearchParams` & `storedViewParams` results in unnecessary re-renders
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  */
+
+  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 = Object.entries(newParamsObject).reduce((newSearchParams, [id, value]) => {
-      if (typeof value === 'string' && value.length) {
-        newSearchParams.set(id, value);
+    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);

-        return newSearchParams;
-      }
-
-      return newSearchParams;
-    }, new URLSearchParams());
+    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}>
@@ -85,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'>
@@ -1,203 +1,391 @@
+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', '24'],
-};
+  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',
+    placeholder: '00000000 (default)',
  },
  {
    id: 'text',
    title: 'Text Colour',
    description: 'Text colour in hexadecimal',
+    prefix: '#',
    type: 'string',
+    placeholder: 'fffff (default)',
  },
  {
    id: 'textbg',
    title: 'Text Background',
    description: 'Colour of text background in hexadecimal',
+    prefix: '#',
    type: 'string',
+    placeholder: '00000000 (default)',
  },
  {
    id: 'font',
    title: 'Font',
    description: 'Font family, will use the fonts available in the system',
    type: 'string',
+    placeholder: 'Arial Black (default)',
  },
  {
    id: 'size',
    title: 'Text Size',
    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
    type: 'number',
+    placeholder: '1 (default)',
  },
  {
    id: 'alignx',
    title: 'Align Horizontal',
    description: 'Moves the horizontally in page to start = left | center | end = right',
    type: 'option',
-    values: ['start', 'center', 'end'],
+    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',
+    placeholder: '0 (default)',
  },
  {
    id: 'aligny',
    title: 'Align Vertical',
    description: 'Moves the vertically in page to start = left | center | end = right',
    type: 'option',
-    values: ['start', 'center', 'end'],
+    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',
+    placeholder: '0 (default)',
  },
 ];

-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,
+  },
+];

 export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
  {
    id: 'key',
    title: 'Key Colour',
    description: 'Background colour in hexadecimal',
+    prefix: '#',
    type: 'string',
+    placeholder: '00000000 (default)',
  },
  {
    id: 'text',
    title: 'Text Colour',
    description: 'Text colour in hexadecimal',
+    prefix: '#',
    type: 'string',
+    placeholder: 'fffff (default)',
  },
  {
    id: 'textbg',
    title: 'Text Background',
    description: 'Colour of text background in hexadecimal',
+    prefix: '#',
    type: 'string',
+    placeholder: '00000000 (default)',
  },
  {
    id: 'font',
    title: 'Font',
    description: 'Font family, will use the fonts available in the system',
    type: 'string',
+    placeholder: 'Arial Black (default)',
  },
  {
    id: 'size',
    title: 'Text Size',
    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
    type: 'number',
+    placeholder: '1 (default)',
  },
  {
    id: 'alignx',
    title: 'Align Horizontal',
    description: 'Moves the horizontally in page to start = left | center | end = right',
    type: 'option',
-    values: ['start', 'center', 'end'],
+    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',
+    placeholder: '0 (default)',
  },
  {
    id: 'aligny',
    title: 'Align Vertical',
    description: 'Moves the vertically in page to start = left | center | end = right',
    type: 'option',
-    values: ['start', 'center', 'end'],
+    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',
+    placeholder: '0 (default)',
  },
  {
    id: 'hideovertime',
    title: 'Hide Overtime',
-    description: 'Whether to supress overtime styles (red borders and red text)',
+    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',
+    placeholder: '1 (default)',
  },
  {
    id: 'transition',
    title: 'Transition',
-    description: 'Transition in time in seconds (default 5)',
+    description: 'Transition in time in seconds (default 3)',
    type: 'number',
+    placeholder: '3 (default)',
  },
  {
    id: 'text',
    title: 'Text Colour',
    description: 'Text colour in hexadecimal',
+    prefix: '#',
    type: 'string',
+    placeholder: 'fffffa (default)',
  },
  {
    id: 'bg',
    title: 'Text Background',
    description: 'Text background colour in hexadecimal',
+    prefix: '#',
    type: 'string',
+    placeholder: '00000033 (default)',
  },
  {
    id: 'key',
    title: 'Key Colour',
    description: 'Screen background colour in hexadecimal',
+    prefix: '#',
    type: 'string',
+    placeholder: '00000033 (default)',
  },
  {
    id: 'fadeout',
    title: 'Fadeout',
    description: 'Time (in seconds) the lower third displays before fading out',
    type: 'number',
+    placeholder: '3 (default)',
  },
 ];

-export const STUDIO_CLOCK_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',
+    placeholder: '7 (default)',
+  },
+];
+
+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',
+    placeholder: '7 (default)',
+  },
+];
+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, timeFormat: TimeFormat): ParamField[] => {
+  return [
+    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',
+      title: 'Main data field',
+      description: 'Field to be shown in the first line of text',
+      type: 'option',
+      values: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        presenter: 'Presenter',
+      },
+    },
+    {
+      id: 'secondary',
+      title: 'Secondary data field',
+      description: 'Field to be shown in the second line of text',
+      type: 'option',
+      values: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        presenter: 'Presenter',
+      },
+    },
+    {
+      id: 'subscribe',
+      title: 'Highlight Field',
+      description: 'Choose a field to highlight',
+      type: 'option',
+      values: {
+        user0: userFields.user0 || 'user0',
+        user1: userFields.user1 || 'user1',
+        user2: userFields.user2 || 'user2',
+        user3: userFields.user3 || 'user3',
+        user4: userFields.user4 || 'user4',
+        user5: userFields.user5 || 'user5',
+        user6: userFields.user6 || 'user6',
+        user7: userFields.user7 || 'user7',
+        user8: userFields.user8 || 'user8',
+        user9: userFields.user9 || 'user9',
+      },
+    },
+    {
+      id: 'shouldEdit',
+      title: 'Edit user field',
+      description: 'Allows editing an events user field by long pressing on it. Needs a selected highlighted field',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ];
+};
@@ -4,9 +4,13 @@ type BaseField = {
  description: string;
 };

-type OptionsField = { type: 'option'; values: 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; 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);
@@ -25,7 +25,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
  const [operatorAuth, setOperatorAuth] = useState(true);

  useEffect(() => {
-    if (status === 'loading') return;
+    if (status === 'pending') return;
    if (!data) return;
    const previousEditor = sessionStorage.getItem(storageKeys.editor);

@@ -1,76 +0,0 @@
-// logic (with some modifications) culled from:
-// https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
-
-import { createContext, ReactNode, useState } from 'react';
-import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
-import { IconType } from '@react-icons/all-files';
-
-import style from './ContextMenuContext.module.scss';
-
-type ContextMenuCoords = {
-  x: number;
-  y: number;
-};
-
-type ContextMenuContextType = {
-  createContextMenu: (options: Option[], menuCoordinates: ContextMenuCoords) => void;
-};
-
-export const ContextMenuContext = createContext<ContextMenuContextType | null>(null);
-
-export type Option = {
-  label: string;
-  icon: IconType;
-  onClick: () => void;
-};
-
-interface ContextMenuProviderProps {
-  children: ReactNode;
-}
-
-export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const [coords, setCoords] = useState<ContextMenuCoords>({ x: 0, y: 0 });
-  const [options, setOptions] = useState<Option[]>([]);
-
-  const onClose = () => {
-    return setIsOpen(false);
-  };
-
-  const createContextMenu = (options: Option[], menuCoords: ContextMenuCoords) => {
-    setCoords(menuCoords);
-    setOptions(options);
-    setIsOpen(true);
-  };
-
-  return (
-    <ContextMenuContext.Provider value={{ createContextMenu }}>
-      {children}
-      {isOpen && (
-        <>
-          <div className={style.contextMenuBackdrop} />
-          <Menu isOpen gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
-            <MenuButton
-              className={style.contextMenuButton}
-              aria-hidden
-              w={1}
-              h={1}
-              style={{
-                left: coords.x,
-                top: coords.y,
-              }}
-            />
-            <MenuList>
-              {options.map(({ label, icon: Icon, onClick }, i) => (
-                <MenuItem key={i} icon={<Icon />} onClick={onClick}>
-                  {label}
-                </MenuItem>
-              ))}
-            </MenuList>
-          </Menu>
-        </>
-      )}
-    </ContextMenuContext.Provider>
-  );
-};
@@ -1,79 +0,0 @@
-import { createContext, useCallback, useState } from 'react';
-
-import { useLocalStorage } from '../hooks/useLocalStorage';
-
-export const TableSettingsContext = createContext({
-  theme: '',
-  showSettings: false,
-  followSelected: false,
-
-  toggleSettings: () => undefined,
-  toggleTheme: () => undefined,
-  toggleFollow: () => undefined,
-});
-
-export const TableSettingsProvider = ({ children }) => {
-  const [theme, setTheme] = useLocalStorage('table-color-theme', 'dark');
-  const [followSelected, setFollowSelected] = useLocalStorage('table-follow-selected', false);
-  const [showSettings, setShowSettings] = useState(false);
-
-  /**
-   * @description Toggles the current value of dark mode
-   * @param {string} val - 'light' or 'dark'
-   */
-  const toggleTheme = useCallback(
-    (val) => {
-      if (val === undefined) {
-        setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
-      } else {
-        setTheme(val);
-      }
-    },
-    [setTheme]
-  );
-
-  /**
-   * @description Toggles visibility state for settings
-   * @param {boolean} val - whether the settings window is visible
-   */
-  const toggleSettings = useCallback(
-    (val) => {
-      if (val === undefined) {
-        setShowSettings((prev) => !prev);
-      } else {
-        setShowSettings(val);
-      }
-    },
-    [setShowSettings]
-  );
-
-  /**
-   * @description Toggles follow option
-   * @param {boolean} val - whether the window follows selected event
-   */
-  const toggleFollow = useCallback(
-    (val) => {
-      if (val === undefined) {
-        setFollowSelected((prev) => !prev);
-      } else {
-        setFollowSelected(val);
-      }
-    },
-    [setFollowSelected]
-  );
-
-  return (
-    <TableSettingsContext.Provider
-      value={{
-        theme,
-        showSettings,
-        followSelected,
-        toggleSettings,
-        toggleTheme,
-        toggleFollow,
-      }}
-    >
-      {children}
-    </TableSettingsContext.Provider>
-  );
-};
@@ -0,0 +1,32 @@
+// roughly from https://github.com/juliencrn/usehooks-ts/blob/master/packages/usehooks-ts/src/useMediaQuery/useMediaQuery.ts
+
+import { useCallback, useEffect, useState } from 'react';
+
+function getMatches(query: string): boolean {
+  return window.matchMedia(query).matches;
+}
+
+// TODO: debounce handleChange
+export default function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+
+  const handleChange = useCallback(() => {
+    setMatches(getMatches(query));
+  }, [query]);
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Listen matchMedia
+    matchMedia.addEventListener('change', handleChange);
+
+    return () => {
+      matchMedia.removeEventListener('change', handleChange);
+    };
+  }, [handleChange, query]);
+
+  return matches;
+}
@@ -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 };
+}
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { GetInfo } from 'ontime-types';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_INFO } from '../api/apiConstants';
@@ -6,7 +7,7 @@ import { getInfo } from '../api/ontimeApi';
 import { ontimePlaceholderInfo } from '../models/Info';

 export default function useInfo() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isError, refetch, isFetching } = useQuery<GetInfo>({
    queryKey: APP_INFO,
    queryFn: getInfo,
    placeholderData: ontimePlaceholderInfo,
@@ -16,5 +17,5 @@ export default function useInfo() {
    networkMode: 'always',
  });

-  return { data, status, isError, refetch };
+  return { data, status, isError, refetch, isFetching };
 }
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { OSCSettings } from 'ontime-types';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { OSC_SETTINGS } from '../api/apiConstants';
+import { logAxiosError } from '../api/apiUtils';
 import { getOSC, postOSC, postOscSubscriptions } from '../api/ontimeApi';
 import { oscPlaceholderSettings } from '../models/OscSettings';
 import { ontimeQueryClient } from '../queryClient';
@@ -10,7 +10,10 @@ import { ontimeQueryClient } from '../queryClient';
 export default function useOscSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: OSC_SETTINGS,
-    queryFn: getOSC,
+    queryFn: async () => {
+      const oscData = await getOSC();
+      return { ...oscData, portIn: String(oscData.portIn), portOut: String(oscData.portOut) };
+    },
    placeholderData: oscPlaceholderSettings,
    retry: 5,
    retryDelay: (attempt: number) => attempt * 2500,
@@ -18,23 +21,24 @@ export default function useOscSettings() {
    networkMode: 'always',
  });

-  // we need to jump through some hoops because of the type op port
-  return { data: data! as unknown as OSCSettings, status, isFetching, isError, refetch };
+  return { data: data ?? oscPlaceholderSettings, status, isFetching, isError, refetch };
 }

 export function useOscSettingsMutation() {
-  const { isLoading, mutateAsync } = useMutation({
+  const { isPending, mutateAsync } = useMutation({
    mutationFn: postOSC,
+    onError: (error) => logAxiosError('Error saving OSC settings', error),
    onSuccess: (res) => ontimeQueryClient.setQueryData(OSC_SETTINGS, res.data),
    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
  });
-  return { isLoading, mutateAsync };
+  return { isPending, mutateAsync };
 }

 export function usePostOscSubscriptions() {
-  const { isLoading, mutateAsync } = useMutation({
+  const { isPending, mutateAsync } = useMutation({
    mutationFn: postOscSubscriptions,
+    onError: (error) => logAxiosError('Error saving OSC settings', error),
    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
  });
-  return { isLoading, mutateAsync };
+  return { isPending, mutateAsync };
 }
@@ -1,15 +1,15 @@
 import { useQuery } from '@tanstack/react-query';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { EVENT_DATA } from '../api/apiConstants';
-import { fetchEventData } from '../api/eventDataApi';
-import { eventDataPlaceholder } from '../models/EventData';
+import { PROJECT_DATA } from '../api/apiConstants';
+import { getProjectData } from '../api/projectDataApi';
+import { projectDataPlaceholder } from '../models/ProjectData';

-export default function useEventData() {
+export default function useProjectData() {
  const { data, status, isFetching, isError, refetch } = useQuery({
-    queryKey: EVENT_DATA,
-    queryFn: fetchEventData,
-    placeholderData: eventDataPlaceholder,
+    queryKey: PROJECT_DATA,
+    queryFn: getProjectData,
+    placeholderData: projectDataPlaceholder,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
@@ -1,19 +1,29 @@
 import { useQuery } from '@tanstack/react-query';
+import { GetRundownCached } from 'ontime-types';

 import { queryRefetchInterval } from '../../ontimeConfig';
-import { RUNDOWN_TABLE } from '../api/apiConstants';
-import { fetchRundown } from '../api/eventsApi';
+import { RUNDOWN } from '../api/apiConstants';
+import { fetchCachedRundown } from '../api/eventsApi';

+const cachedRundownPlaceholder = { rundown: [], revision: -1 };
+
+// TODO: can we leverage structural sharing to see if data has changed?
 export default function useRundown() {
-  const { data, status, isError, refetch } = useQuery({
-    queryKey: RUNDOWN_TABLE,
-    queryFn: fetchRundown,
-    placeholderData: [],
+  const { data, status, isError, refetch, isFetching } = useQuery<GetRundownCached>({
+    queryKey: RUNDOWN,
+    queryFn: fetchCachedRundown,
+    placeholderData: cachedRundownPlaceholder,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchInterval,
    networkMode: 'always',
+    // structuralSharing: (oldData: GetRundownCached | undefined, newData: GetRundownCached) => {
+    //   if (oldData === undefined) {
+    //     return cachedRundownPlaceholder;
+    //   }
+    //   const hasDataChanged = oldData?.revision === newData.revision;
+    //   return hasDataChanged ? oldData : newData;
+    // },
  });
-
-  return { data, status, isError, refetch };
+  return { data: data?.rundown ?? [], status, isError, refetch, isFetching };
 }
@@ -6,7 +6,6 @@ export default function useClickOutside<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  callback: ClickOutsideEventHandler,
 ) {
-
  useEffect(() => {
    function handleClick(event: MouseEvent) {
      const element = ref?.current;
@@ -1,22 +1,16 @@
-import { MouseEvent, useContext } from 'react';
+import { MouseEvent } from 'react';

-import { ContextMenuContext, Option } from '../context/ContextMenuContext';
+import { Option, useContextMenuStore } from '../components/context-menu/ContextMenu';

 export const useContextMenu = <T extends HTMLElement>(options: Option[]) => {
-  const contextMenuContext = useContext(ContextMenuContext);
-
-  if (contextMenuContext === null) {
-    throw new Error('useContextMenu should be wrapped by ContextMenuProvider');
-  }
-
-  const { createContextMenu } = contextMenuContext;
+  const { setContextMenu } = useContextMenuStore();

  const localCreateContextMenu = (contextMenuEvent: MouseEvent<T, globalThis.MouseEvent>) => {
    // prevent browser default context menu from showing up
    contextMenuEvent.preventDefault();

    const { pageX, pageY } = contextMenuEvent;
-    return createContextMenu(options, { x: pageX, y: pageY });
+    return setContextMenu({ x: pageX, y: pageY }, options);
  };

  return [localCreateContextMenu];
@@ -1,7 +1,7 @@
 export default function useElectronEvent() {
  const isElectron = window?.process?.type === 'renderer';

-  const sendToElectron = (channel: string, args?: string | Record<string, any>) => {
+  const sendToElectron = (channel: string, args?: string | Record<string, unknown>) => {
    if (isElectron) {
      window?.ipcRenderer.send(channel, args);
    }
@@ -1,28 +1,29 @@
 import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import axios, { AxiosError } from 'axios';
-import { OntimeRundown, OntimeRundownEntry, SupportedEvent } from 'ontime-types';
+import { GetRundownCached, isOntimeEvent, OntimeRundownEntry } from 'ontime-types';
+import { getCueCandidate, swapOntimeEvents } from 'ontime-utils';

-import { RUNDOWN_TABLE, RUNDOWN_TABLE_KEY } from '../api/apiConstants';
+import { RUNDOWN } from '../api/apiConstants';
+import { logAxiosError } from '../api/apiUtils';
 import {
  ReorderEntry,
  requestApplyDelay,
  requestDelete,
  requestDeleteAll,
+  requestEventSwap,
  requestPostEvent,
  requestPutEvent,
  requestReorderEvent,
+  SwapEntry,
 } from '../api/eventsApi';
-import { useLocalEvent } from '../stores/localEvent';
-import { useEmitLog } from '../stores/logger';
+import { useEditorSettings } from '../stores/editorSettings';

 /**
 * @description Set of utilities for events
 */
 export const useEventAction = () => {
  const queryClient = useQueryClient();
-  const { emitError } = useEmitLog();
-  const eventSettings = useLocalEvent((state) => state.eventSettings);
+  const eventSettings = useEditorSettings((state) => state.eventSettings);
  const defaultPublic = eventSettings.defaultPublic;
  const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;

@@ -30,11 +31,12 @@ export const useEventAction = () => {
   * Calls mutation to add new event
   * @private
   */
-  const _addEventMutation = useMutation(requestPostEvent, {
+  const _addEventMutation = useMutation({
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
+    mutationFn: requestPostEvent,
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -57,7 +59,7 @@ export const useEventAction = () => {
      const newEvent: Partial<OntimeRundownEntry> = { ...event };

      // ************* CHECK OPTIONS specific to events
-      if (newEvent.type === SupportedEvent.Event) {
+      if (isOntimeEvent(newEvent)) {
        const applicationOptions = {
          defaultPublic: options?.defaultPublic ?? defaultPublic,
          startTimeIsLastEnd: options?.startTimeIsLastEnd ?? startTimeIsLastEnd,
@@ -65,16 +67,21 @@ export const useEventAction = () => {
          after: options?.after,
        };

+        const rundown = queryClient.getQueryData<GetRundownCached>(RUNDOWN)?.rundown ?? [];
+
+        if (newEvent?.cue === undefined) {
+          newEvent.cue = getCueCandidate(rundown, options?.after);
+        }
+
        // hard coding duration value to be as expected for now
        // this until timeOptions gets implemented
-        if (typeof newEvent?.timeStart !== 'undefined' && typeof newEvent.timeEnd !== 'undefined') {
+        if (newEvent?.timeStart !== undefined && newEvent.timeEnd !== undefined) {
          newEvent.duration = Math.max(0, newEvent?.timeEnd - newEvent?.timeStart) || 0;
        }

        if (applicationOptions.startTimeIsLastEnd && applicationOptions?.lastEventId) {
-          const rundown = queryClient.getQueryData(RUNDOWN_TABLE) as OntimeRundown;
          const previousEvent = rundown.find((event) => event.id === applicationOptions.lastEventId);
-          if (typeof previousEvent !== 'undefined' && previousEvent.type === 'event') {
+          if (previousEvent !== undefined && previousEvent.type === 'event') {
            newEvent.timeStart = previousEvent.timeEnd;
            newEvent.timeEnd = previousEvent.timeEnd;
          }
@@ -94,44 +101,50 @@ export const useEventAction = () => {
        // @ts-expect-error -- we know that the object is well formed now
        await _addEventMutation.mutateAsync(newEvent);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error fetching data: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error fetching data: ${error}`);
-        }
+        logAxiosError('Failed adding event', error);
      }
    },
-    [_addEventMutation, defaultPublic, emitError, queryClient, startTimeIsLastEnd],
+    [_addEventMutation, defaultPublic, queryClient, startTimeIsLastEnd],
  );

  /**
   * Calls mutation to update existing event
   * @private
   */
-  const _updateEventMutation = useMutation(requestPutEvent, {
+  const _updateEventMutation = useMutation({
+    mutationFn: requestPutEvent,
    // we optimistically update here
    onMutate: async (newEvent) => {
      // cancel ongoing queries
-      await queryClient.cancelQueries([RUNDOWN_TABLE_KEY, newEvent.id]);
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousEvent = queryClient.getQueryData([RUNDOWN_TABLE_KEY, newEvent.id]);

-      // optimistically update object
-      queryClient.setQueryData([RUNDOWN_TABLE_KEY, newEvent.id], newEvent);
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);
+
+      if (previousData) {
+        // optimistically update object
+        const optimisticRundown = [...previousData.rundown];
+        const index = optimisticRundown.findIndex((event) => event.id === newEvent.id);
+        if (index > -1) {
+          // @ts-expect-error -- we expect the event types to match
+          optimisticRundown[index] = { ...optimisticRundown[index], ...newEvent };
+
+          queryClient.setQueryData(RUNDOWN, { rundown: optimisticRundown, revision: -1 });
+        }
+      }

      // Return a context with the previous and new events
-      return { previousEvent, newEvent };
+      return { previousData, newEvent };
    },
-
    // Mutation fails, rollback undoes optimist update
    onError: (_error, _newEvent, context) => {
-      queryClient.setQueryData([RUNDOWN_TABLE_KEY, context?.newEvent.id], context?.previousEvent);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: async () => {
-      await queryClient.invalidateQueries([RUNDOWN_TABLE_KEY]);
+      await queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -144,46 +157,52 @@ export const useEventAction = () => {
      try {
        await _updateEventMutation.mutateAsync(event);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error updating event: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error updating event: ${error}`);
-        }
+        logAxiosError('Error updating event', error);
      }
    },
-    [_updateEventMutation, emitError],
+    [_updateEventMutation],
  );

  /**
   * Calls mutation to delete an event
   * @private
   */
-  const _deleteEventMutation = useMutation(requestDelete, {
+  const _deleteEventMutation = useMutation({
+    mutationFn: requestDelete,
    // we optimistically update here
    onMutate: async (eventId) => {
      // cancel ongoing queries
-      await queryClient.cancelQueries([RUNDOWN_TABLE_KEY, eventId]);
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);

-      const filtered = [...(previousEvents as OntimeRundown)].filter((e) => e.id !== eventId);
+      if (previousData) {
+        // optimistically update object
+        const optimisticRundown = [...previousData.rundown];
+        const index = optimisticRundown.findIndex((event) => event.id === eventId);
+        if (index > -1) {
+          optimisticRundown.splice(index, 1);

-      // optimistically update object
-      queryClient.setQueryData(RUNDOWN_TABLE, filtered);
+          queryClient.setQueryData(RUNDOWN, {
+            rundown: optimisticRundown,
+            revision: -1,
+          });
+        }
+      }

      // Return a context with the previous and new events
-      return { previousEvents };
+      return { previousData };
    },

    // Mutation fails, rollback undoes optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -196,44 +215,41 @@ export const useEventAction = () => {
      try {
        await _deleteEventMutation.mutateAsync(eventId);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error deleting event: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error deleting event: ${error}`);
-        }
+        logAxiosError('Error deleting event', error);
      }
    },
-    [_deleteEventMutation, emitError],
+    [_deleteEventMutation],
  );

  /**
   * Calls mutation to delete all events
   * @private
   */
-  const _deleteAllEventsMutation = useMutation(requestDeleteAll, {
+  const _deleteAllEventsMutation = useMutation({
+    mutationFn: requestDeleteAll,
    // we optimistically update here
    onMutate: async () => {
      // cancel ongoing queries
-      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);

      // optimistically update object
-      queryClient.setQueryData(RUNDOWN_TABLE, []);
+      queryClient.setQueryData(RUNDOWN, { rundown: [], revision: -1 });

      // Return a context with the previous and new events
-      return { previousEvents };
+      return { previousData };
    },

    // Mutation fails, rollback undos optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -245,22 +261,19 @@ export const useEventAction = () => {
    try {
      await _deleteAllEventsMutation.mutateAsync();
    } catch (error) {
-      if (!axios.isAxiosError(error)) {
-        emitError(`Error deleting events: ${(error as AxiosError).message}`);
-      } else {
-        emitError(`Error deleting events: ${error}`);
-      }
+      logAxiosError('Error deleting events', error);
    }
-  }, [_deleteAllEventsMutation, emitError]);
+  }, [_deleteAllEventsMutation]);

  /**
   * Calls mutation to apply a delay
   * @private
   */
-  const _applyDelayMutation = useMutation(requestApplyDelay, {
+  const _applyDelayMutation = useMutation({
+    mutationFn: requestApplyDelay,
    // Mutation finished, failed or successful
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -273,48 +286,47 @@ export const useEventAction = () => {
      try {
        await _applyDelayMutation.mutateAsync(delayEventId);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error applying delay: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error applying delay: ${error}`);
-        }
+        logAxiosError('Error applying delay', error);
      }
    },
-    [_applyDelayMutation, emitError],
+    [_applyDelayMutation],
  );

  /**
   * Calls mutation to reorder an event
   * @private
   */
-  const _reorderEventMutation = useMutation(requestReorderEvent, {
+  const _reorderEventMutation = useMutation({
+    mutationFn: requestReorderEvent,
    // we optimistically update here
    onMutate: async (data) => {
      // cancel ongoing queries
-      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });

      // Snapshot the previous value
-      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);

-      const e = [...(previousEvents as OntimeRundown)];
-      const [reorderedItem] = e.splice(data.from, 1);
-      e.splice(data.to, 0, reorderedItem);
+      if (previousData) {
+        // optimistically update object
+        const optimisticRundown = [...previousData.rundown];
+        const [reorderedItem] = optimisticRundown.splice(data.from, 1);
+        optimisticRundown.splice(data.to, 0, reorderedItem);

-      // optimistically update object
-      queryClient.setQueryData(RUNDOWN_TABLE, e);
+        queryClient.setQueryData(RUNDOWN, { rundown: optimisticRundown, revision: -1 });
+      }

      // Return a context with the previous and new events
-      return { previousEvents };
+      return { previousData };
    },

    // Mutation fails, rollback undoes optimist update
    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: () => {
-      queryClient.invalidateQueries(RUNDOWN_TABLE);
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
    networkMode: 'always',
  });
@@ -332,15 +344,74 @@ export const useEventAction = () => {
        };
        await _reorderEventMutation.mutateAsync(reorderObject);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error re-ordering event: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error re-ordering event: ${error}`);
-        }
+        logAxiosError('Error re-ordering event', error);
      }
    },
-    [_reorderEventMutation, emitError],
+    [_reorderEventMutation],
  );

-  return { addEvent, updateEvent, deleteEvent, deleteAllEvents, applyDelay, reorderEvent };
+  /**
+   * Calls mutation to swap events
+   * @private
+   */
+  const _swapEvents = useMutation({
+    mutationFn: requestEventSwap,
+    // we optimistically update here
+    onMutate: async ({ from, to }) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+
+      // Snapshot the previous value
+      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);
+      if (previousData) {
+        // optimistically update object
+        const fromEventIndex = previousData.rundown.findIndex((event) => event.id === from);
+        const toEventIndex = previousData.rundown.findIndex((event) => event.id === to);
+
+        const optimisticRundown = swapOntimeEvents(previousData.rundown, fromEventIndex, toEventIndex);
+
+        queryClient.setQueryData(RUNDOWN, { rundown: optimisticRundown, revision: -1 });
+      }
+
+      // Return a context with the previous events
+      return { previousData };
+    },
+
+    // Mutation fails, rollback undoes optimist update
+    onError: (_error, _eventId, context) => {
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+    networkMode: 'always',
+  });
+
+  /**
+   * Swaps the schedule of two events
+   */
+  const swapEvents = useCallback(
+    async ({ from, to }: SwapEntry) => {
+      // TODO: before calling `/swapEvents`,
+      // we should determine the events are of type `OntimeEvent`
+      try {
+        await _swapEvents.mutateAsync({ from, to });
+      } catch (error) {
+        logAxiosError('Error re-ordering event', error);
+      }
+    },
+    [_swapEvents],
+  );
+
+  return {
+    addEvent,
+    updateEvent,
+    deleteEvent,
+    deleteAllEvents,
+    applyDelay,
+    reorderEvent,
+    swapEvents,
+  };
 };
@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';

 export type TLogLevel = 'debug' | 'info' | 'warn' | 'error' | 'none';

@@ -26,13 +20,13 @@ const LOG_LEVEL: Record<TLogLevel, number> = {
 };

 const useFitText = ({
-                      logLevel: logLevelOption = 'info',
-                      maxFontSize = 100,
-                      minFontSize = 20,
-                      onFinish,
-                      onStart,
-                      resolution = 5,
-                    }: TOptions = {}) => {
+  logLevel: logLevelOption = 'info',
+  maxFontSize = 100,
+  minFontSize = 20,
+  onFinish,
+  onStart,
+  resolution = 5,
+}: TOptions = {}) => {
  const logLevel = LOG_LEVEL[logLevelOption];

  const initState = useCallback(() => {
@@ -112,8 +106,7 @@ const useFitText = ({
    const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
    const isOverflow =
      !!ref.current &&
-      (ref.current.scrollHeight > ref.current.offsetHeight ||
-        ref.current.scrollWidth > ref.current.offsetWidth);
+      (ref.current.scrollHeight > ref.current.offsetHeight || ref.current.scrollWidth > ref.current.offsetWidth);
    const isFailed = isOverflow && fontSize === fontSizePrev;
    const isAsc = fontSize > fontSizePrev;

@@ -123,9 +116,7 @@ const useFitText = ({
      if (isFailed) {
        isCalculatingRef.current = false;
        if (logLevel <= LOG_LEVEL.info) {
-          console.info(
-            `[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`,
-          );
+          console.info(`[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`);
        }
      } else if (isOverflow) {
        setState({
@@ -160,16 +151,7 @@ const useFitText = ({
      fontSizeMin: newMin,
      fontSizePrev: fontSize,
    });
-  }, [
-    calcKey,
-    fontSize,
-    fontSizeMax,
-    fontSizeMin,
-    fontSizePrev,
-    onFinish,
-    ref,
-    resolution,
-  ]);
+  }, [calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev, onFinish, ref, resolution]);

  return { fontSize: `${fontSize}%`, ref };
 };
@@ -0,0 +1,64 @@
+import { MutableRefObject, useCallback, useEffect } from 'react';
+
+function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
+  componentRef: MutableRefObject<ComponentRef>,
+  scrollRef: MutableRefObject<ScrollRef>,
+  topOffset: number,
+) {
+  if (!componentRef.current || !scrollRef.current) {
+    return;
+  }
+
+  const componentRect = componentRef.current.getBoundingClientRect();
+  const scrollRect = scrollRef.current.getBoundingClientRect();
+  const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - topOffset;
+
+  scrollRef.current.scrollTo({ top, behavior: 'smooth' });
+}
+
+interface UseFollowComponentProps {
+  followRef: MutableRefObject<HTMLElement | null>;
+  scrollRef: MutableRefObject<HTMLElement | null>;
+  doFollow: boolean;
+  topOffset?: number;
+  setScrollFlag?: (newValue: boolean) => void;
+}
+
+export default function useFollowComponent(props: UseFollowComponentProps) {
+  const { followRef, scrollRef, doFollow, topOffset = 100, setScrollFlag } = props;
+
+  // when cursor moves, view should follow
+  useEffect(() => {
+    if (!doFollow) {
+      return;
+    }
+
+    if (followRef.current && scrollRef.current) {
+      setScrollFlag?.(true);
+      // Use requestAnimationFrame to ensure the component is fully loaded
+      window.requestAnimationFrame(() => {
+        scrollToComponent(
+          followRef as MutableRefObject<HTMLElement>,
+          scrollRef as MutableRefObject<HTMLElement>,
+          topOffset,
+        );
+        setScrollFlag?.(false);
+      });
+    }
+
+    // eslint-disable-next-line -- the prompt seems incorrect
+  }, [followRef?.current, scrollRef?.current]);
+
+  const scrollToRefComponent = useCallback(
+    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
+      if (componentRef.current && containerRef.current) {
+        // @ts-expect-error -- we know this are not null
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        scrollToComponent(componentRef!, scrollRef!, offset);
+      }
+    },
+    [followRef, scrollRef, topOffset],
+  );
+
+  return scrollToRefComponent;
+}
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-nocheck -- working on it
 import { useCallback, useEffect, useState } from 'react';

 interface WebkitDocument extends Document {
@@ -34,24 +36,30 @@ export default function useFullscreen() {
  const toggleFullScreen = useCallback(() => {
    if (!document.fullscreenElement && !(document as WebkitDocument).webkitIsFullScreen) {
      // Fullscreen mode is not active, so we can enter fullscreen mode
-      if (document.documentElement.requestFullscreen) {
+      const element = document.documentElement;
+      if (element.requestFullscreen) {
        // Standard fullscreen API is supported
-        document.documentElement.requestFullscreen();
-        // @ts-expect-error -- the whole casting dance is not worth it
-      } else if (document.documentElement.webkitRequestFullscreen) {
+        element.requestFullscreen().catch(() => {
+          /* nothing to do */
+        });
+      } else if (element.webkitRequestFullscreen) {
        // iOS Safari fullscreen API is supported
-        // @ts-expect-error -- we know this is not undefined now
-        (document.documentElement as WebkitDocument).webkitRequestFullscreen();
+        element.webkitRequestFullscreen?.().catch(() => {
+          /* nothing to do */
+        });
      }
    } else {
      // Fullscreen mode is active, so we can exit fullscreen mode
      if (document.exitFullscreen) {
        // Standard fullscreen API is supported
-        document.exitFullscreen();
+        document.exitFullscreen().catch((error) => {
+          console.error('Error while trying to exit fullscreen:', error);
+        });
      } else if ((document as WebkitDocument).webkitExitFullscreen) {
        // iOS Safari fullscreen API is supported
-        // @ts-expect-error -- we know this is not undefined now
-        (document as WebkitDocument).webkitExitFullscreen();
+        (document as WebkitDocument).webkitExitFullscreen?.().catch(() => {
+          /* nothing to do */
+        });
      }
    }
  }, []);
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';

 /**
 * @description utility hook to around setInterval
@@ -1,53 +1,46 @@
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';

-/**
- * @description utility hook to handle state in local storage
- * @param key
- * @param initialValue
- */
-export const useLocalStorage = <T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] => {
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    try {
-      const item = window.localStorage.getItem(`ontime-${key}`);
-      return item ? JSON.parse(item) : initialValue;
-    } catch (error) {
-      return initialValue;
-    }
-  });
+const STORAGE_EVENT = 'ontime-storage';

-  useEffect(() => {
-    const handleStorageChange = (event: StorageEvent) => {
-      if (event.storageArea === window.localStorage && event.key === key) {
-        try {
-          const newValue = event.newValue ? JSON.parse(event.newValue) : initialValue;
-          setStoredValue(newValue);
-        } catch (_) {
-          /* empty */
-        }
-      }
-    };
+function getSnapshot(key: string): string | null {
+  try {
+    return window.localStorage.getItem(`ontime-${key}`);
+  } catch {
+    return null;
+  }
+}

-    window.addEventListener('storage', handleStorageChange);
+function getParsedJson<T>(localStorageValue: string | null, initialValue: T): T {
+  try {
+    return localStorageValue ? JSON.parse(localStorageValue) : initialValue;
+  } catch {
+    return initialValue;
+  }
+}

-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-    };
-  }, [initialValue, key]);
+export const useLocalStorage = <T>(key: string, initialValue: T) => {
+  const localStorageValue = useSyncExternalStore(subscribe, () => getSnapshot(key));
+  const parsedLocalStorageValue = getParsedJson(localStorageValue, initialValue);

  /**
   * @description Set value to local storage
   * @param value
   */
-  const setValue = (value: T | ((val: T) => T)) => {
-    try {
-      // Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(storedValue) : value;
+  const setLocalStorageValue = (value: T | ((val: T) => T)) => {
+    // Allow value to be a function so we have same API as useState
+    const valueToStore = value instanceof Function ? value(parsedLocalStorageValue) : value;

-      setStoredValue(valueToStore);
-      window.localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
-    } catch (error) {
-      console.log(error);
-    }
+    localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
+    window.dispatchEvent(new StorageEvent(STORAGE_EVENT));
  };
-  return [storedValue, setValue];
+
+  return [parsedLocalStorageValue, setLocalStorageValue] as const;
 };
+
+function subscribe(callback: () => void) {
+  window.addEventListener(STORAGE_EVENT, callback);
+
+  return () => {
+    window.removeEventListener(STORAGE_EVENT, callback);
+  };
+}
@@ -0,0 +1,64 @@
+import { MouseEvent, SyntheticEvent, TouchEvent, useMemo, useRef } from 'react';
+
+type LongPressOptions = {
+  threshold?: number;
+  onStart?: (e: SyntheticEvent) => void;
+  onFinish?: (e: SyntheticEvent) => void;
+  onCancel?: (e: SyntheticEvent) => void;
+};
+
+type LongPressFns = {
+  onMouseDown: (e: MouseEvent) => void;
+  onMouseUp: (e: MouseEvent) => void;
+  onMouseLeave: (e: MouseEvent) => void;
+  onTouchStart: (e: TouchEvent) => void;
+  onTouchEnd: (e: TouchEvent) => void;
+};
+
+export default function useLongPress(callback: () => void, options: LongPressOptions = {}): LongPressFns {
+  const { threshold = 400, onStart, onFinish, onCancel } = options;
+  const isLongPressActive = useRef(false);
+  const isPressed = useRef(false);
+  const timerId = useRef<NodeJS.Timer>();
+
+  return useMemo(() => {
+    const start = (event: SyntheticEvent) => {
+      if (onStart) {
+        onStart(event);
+      }
+
+      isPressed.current = true;
+      timerId.current = setTimeout(() => {
+        callback();
+        isLongPressActive.current = true;
+      }, threshold);
+    };
+
+    const cancel = (event: SyntheticEvent) => {
+      if (isLongPressActive.current) {
+        if (onFinish) {
+          onFinish(event);
+        }
+      } else if (isPressed.current) {
+        if (onCancel) {
+          onCancel(event);
+        }
+      }
+
+      isLongPressActive.current = false;
+      isPressed.current = false;
+
+      if (timerId.current) {
+        clearTimeout(timerId.current);
+      }
+    };
+
+    return {
+      onMouseDown: start,
+      onMouseUp: cancel,
+      onMouseLeave: cancel,
+      onTouchStart: start,
+      onTouchEnd: cancel,
+    };
+  }, [callback, threshold, onCancel, onFinish, onStart]);
+}
@@ -13,11 +13,21 @@ export const useRundownEditor = () => {
  return useRuntimeStore(featureSelector, deepCompare);
 };

+export const useOperator = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    playback: state.playback,
+    selectedEventId: state.loaded.selectedEventId,
+  });
+
+  return useRuntimeStore(featureSelector, deepCompare);
+};
+
 export const useMessageControl = () => {
  const featureSelector = (state: RuntimeStore) => ({
    timerMessage: state.timerMessage,
    publicMessage: state.publicMessage,
    lowerMessage: state.lowerMessage,
+    externalMessage: state.externalMessage,
    onAir: state.onAir,
  });

@@ -31,6 +41,8 @@ export const setMessage = {
  publicVisible: (payload: boolean) => socketSendJson('set-public-message-visible', payload),
  lowerText: (payload: string) => socketSendJson('set-lower-message-text', payload),
  lowerVisible: (payload: boolean) => socketSendJson('set-lower-message-visible', payload),
+  externalText: (payload: string) => socketSendJson('set-external-message-text', payload),
+  externalVisible: (payload: boolean) => socketSendJson('set-external-message-visible', payload),
  onAir: (payload: boolean) => socketSendJson('set-onAir', payload),
  timerBlink: (payload: boolean) => socketSendJson('set-timer-blink', payload),
  timerBlackout: (payload: boolean) => socketSendJson('set-timer-blackout', payload),
@@ -63,14 +75,15 @@ export const setPlayback = {
  reload: () => {
    socketSendJson('reload');
  },
-  delay: (amount: number) => {
-    socketSendJson('delay', amount);
+  addTime: (amount: number) => {
+    socketSendJson('addtime', amount);
  },
 };

 export const useInfoPanel = () => {
  const featureSelector = (state: RuntimeStore) => ({
-    titles: state.titles,
+    eventNow: state.eventNow,
+    eventNext: state.eventNext,
    playback: state.playback,
    selectedEventIndex: state.loaded.selectedEventIndex,
    numEvents: state.loaded.numEvents,
@@ -85,7 +98,7 @@ export const useCuesheet = () => {
    selectedEventId: state.loaded.selectedEventId,
    selectedEventIndex: state.loaded.selectedEventIndex,
    numEvents: state.loaded.numEvents,
-    titleNow: state.titles.titleNow,
+    titleNow: state.eventNow?.title || '',
  });

  return useRuntimeStore(featureSelector, deepCompare);
@@ -105,3 +118,5 @@ export const useTimer = () => {

  return useRuntimeStore(featureSelector, deepCompare);
 };
+
+export const setClientName = (newName: string) => socketSendJson('set-client-name', newName);
@@ -1,7 +0,0 @@
-import { Alias } from 'ontime-types';
-
-export const aliasPlaceholder: Alias = {
-  enabled: false,
-  alias: '',
-  pathAndParams: '',
-};
@@ -1,9 +0,0 @@
-import { EventData } from 'ontime-types';
-
-export const eventDataPlaceholder: EventData = {
-  title: '',
-  publicUrl: '',
-  publicInfo: '',
-  backstageUrl: '',
-  backstageInfo: '',
-};
@@ -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: [],
  },
 };
@@ -1,19 +1,25 @@
-import { Settings } from 'ontime-types';
+import { GetInfo, OSCSettings } from 'ontime-types';

-type NetworkInterfaceType = {
-  name: string;
-  address: string;
-};
-
-export type InfoType = {
-  networkInterfaces: NetworkInterfaceType[];
-  settings: Pick<Settings, 'version' | 'serverPort'>;
-};
-
-export const ontimePlaceholderInfo: InfoType = {
-  networkInterfaces: [],
-  settings: {
-    version: 2,
-    serverPort: 4001,
+export const oscPlaceholderSettings: OSCSettings = {
+  portIn: 0,
+  portOut: 0,
+  targetIP: '',
+  enabledIn: false,
+  enabledOut: false,
+  subscriptions: {
+    onLoad: [],
+    onStart: [],
+    onPause: [],
+    onStop: [],
+    onUpdate: [],
+    onFinish: [],
  },
 };
+
+export const ontimePlaceholderInfo: GetInfo = {
+  networkInterfaces: [],
+  version: '2.0.0',
+  serverPort: 4001,
+  osc: oscPlaceholderSettings,
+  cssOverride: '',
+};
@@ -2,7 +2,7 @@ import { Settings } from 'ontime-types';

 export const ontimePlaceholderSettings: Settings = {
  app: 'ontime',
-  version: 2,
+  version: '2.0.0',
  serverPort: 4001,
  editorKey: null,
  operatorKey: null,
@@ -1,30 +0,0 @@
-export const ontimeVars = [
-  {
-    name: '$timer',
-    description: 'Current running timer',
-  },
-  {
-    name: '$title',
-    description: 'Current title',
-  },
-  {
-    name: '$presenter',
-    description: 'Current timer',
-  },
-  {
-    name: '$subtitle',
-    description: 'Current subtitle',
-  },
-  {
-    name: '$next-title',
-    description: 'Next title',
-  },
-  {
-    name: '$next-presenter',
-    description: 'Next timer',
-  },
-  {
-    name: '$next-subtitle',
-    description: 'Next subtitle',
-  },
-];
@@ -0,0 +1,10 @@
+import { ProjectData } from 'ontime-types';
+
+export const projectDataPlaceholder: ProjectData = {
+  title: '',
+  description: '',
+  publicUrl: '',
+  publicInfo: '',
+  backstageUrl: '',
+  backstageInfo: '',
+};
@@ -3,7 +3,7 @@ import { QueryClient } from '@tanstack/react-query';
 export const ontimeQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
-      cacheTime: 1000 * 60 * 10, // 10 min
+      gcTime: 1000 * 60 * 10, // 10 min
    },
  },
 });
@@ -0,0 +1,26 @@
+import { useStore } from 'zustand';
+import { createStore } from 'zustand/vanilla';
+
+interface SocketClientNameState {
+  name?: string;
+  setName: (newValue: string) => void;
+  persistName: (newValue: string) => void;
+}
+
+const clientNameKey = 'ontime-client-name';
+
+function persistKeyToStorage(newValue: string) {
+  localStorage.setItem(clientNameKey, newValue);
+}
+
+export const socketClientName = createStore<SocketClientNameState>((set) => ({
+  name: localStorage.getItem(clientNameKey) ?? undefined,
+  setName: (newValue: string) => set(() => ({ name: newValue })),
+  persistName: (newValue: string) =>
+    set(() => {
+      persistKeyToStorage(newValue);
+      return { name: newValue };
+    }),
+}));
+
+export const useSocketClientName = () => useStore(socketClientName);
@@ -0,0 +1,67 @@
+import { create } from 'zustand';
+
+import { booleanFromLocalStorage } from '../utils/localStorage';
+
+type EditorSettings = {
+  showQuickEntry: boolean;
+  startTimeIsLastEnd: boolean;
+  defaultPublic: boolean;
+  showNif: boolean;
+};
+
+type EditorSettingsStore = {
+  eventSettings: EditorSettings;
+  setLocalEventSettings: (newState: EditorSettings) => void;
+  setShowQuickEntry: (showQuickEntry: boolean) => void;
+  setStartTimeIsLastEnd: (startTimeIsLastEnd: boolean) => void;
+  setDefaultPublic: (defaultPublic: boolean) => void;
+  setShowNif: (showNif: boolean) => void;
+};
+
+enum EditorSettingsKeys {
+  ShowQuickEntry = 'ontime-show-quick-entry',
+  StartTimeIsLastEnd = 'ontime-start-is-last-end',
+  DefaultPublic = 'ontime-default-public',
+  ShowNif = 'ontime-show-nif',
+}
+
+export const useEditorSettings = create<EditorSettingsStore>((set) => ({
+  eventSettings: {
+    showQuickEntry: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, false),
+    startTimeIsLastEnd: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
+    defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
+    showNif: booleanFromLocalStorage(EditorSettingsKeys.ShowNif, true),
+  },
+
+  setLocalEventSettings: (value) =>
+    set(() => {
+      localStorage.setItem(EditorSettingsKeys.ShowQuickEntry, String(value.showQuickEntry));
+      localStorage.setItem(EditorSettingsKeys.StartTimeIsLastEnd, String(value.startTimeIsLastEnd));
+      localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(value.defaultPublic));
+      return { eventSettings: value };
+    }),
+
+  setShowQuickEntry: (showQuickEntry) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.ShowQuickEntry, String(showQuickEntry));
+      return { eventSettings: { ...state.eventSettings, showQuickEntry } };
+    }),
+
+  setStartTimeIsLastEnd: (startTimeIsLastEnd) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.StartTimeIsLastEnd, String(startTimeIsLastEnd));
+      return { eventSettings: { ...state.eventSettings, startTimeIsLastEnd } };
+    }),
+
+  setDefaultPublic: (defaultPublic) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic));
+      return { eventSettings: { ...state.eventSettings, defaultPublic } };
+    }),
+
+  setShowNif: (showNif) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.ShowNif, String(showNif));
+      return { eventSettings: { ...state.eventSettings, showNif } };
+    }),
+}));
@@ -1,57 +0,0 @@
-import { create } from 'zustand';
-
-import { booleanFromLocalStorage } from '../utils/localStorage';
-
-type EventSettings = {
-  showQuickEntry: boolean;
-  startTimeIsLastEnd: boolean;
-  defaultPublic: boolean;
-};
-
-type LocalEventStore = {
-  eventSettings: EventSettings;
-  setLocalEventSettings: (newState: EventSettings) => void;
-  setShowQuickEntry: (showQuickEntry: boolean) => void;
-  setStartTimeIsLastEnd: (startTimeIsLastEnd: boolean) => void;
-  setDefaultPublic: (defaultPublic: boolean) => void;
-};
-
-enum LocalEventKeys {
-  ShowQuickEntry = 'ontime-show-quick-entry',
-  StartTimeIsLastEnd = 'ontime-start-is-last-end',
-  DefaultPublic = 'ontime-default-public',
-}
-
-export const useLocalEvent = create<LocalEventStore>((set) => ({
-  eventSettings: {
-    showQuickEntry: booleanFromLocalStorage(LocalEventKeys.ShowQuickEntry, false),
-    startTimeIsLastEnd: booleanFromLocalStorage(LocalEventKeys.ShowQuickEntry, true),
-    defaultPublic: booleanFromLocalStorage(LocalEventKeys.ShowQuickEntry, true),
-  },
-
-  setLocalEventSettings: (value) =>
-    set(() => {
-      localStorage.setItem(LocalEventKeys.ShowQuickEntry, String(value.showQuickEntry));
-      localStorage.setItem(LocalEventKeys.StartTimeIsLastEnd, String(value.startTimeIsLastEnd));
-      localStorage.setItem(LocalEventKeys.DefaultPublic, String(value.defaultPublic));
-      return { eventSettings: value };
-    }),
-
-  setShowQuickEntry: (showQuickEntry) =>
-    set((state) => {
-      localStorage.setItem(LocalEventKeys.ShowQuickEntry, String(showQuickEntry));
-      return { eventSettings: { ...state.eventSettings, showQuickEntry } };
-    }),
-
-  setStartTimeIsLastEnd: (startTimeIsLastEnd) =>
-    set((state) => {
-      localStorage.setItem(LocalEventKeys.StartTimeIsLastEnd, String(startTimeIsLastEnd));
-      return { eventSettings: { ...state.eventSettings, startTimeIsLastEnd } };
-    }),
-
-  setDefaultPublic: (defaultPublic) =>
-    set((state) => {
-      localStorage.setItem(LocalEventKeys.DefaultPublic, String(defaultPublic));
-      return { eventSettings: { ...state.eventSettings, defaultPublic } };
-    }),
-}));
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Log, LogLevel } from 'ontime-types';
+import { Log, LogLevel, LogOrigin } from 'ontime-types';
 import { generateId, millisToString } from 'ontime-utils';
 import { useStore } from 'zustand';
 import { createStore } from 'zustand/vanilla';
@@ -34,7 +34,7 @@ export function useEmitLog() {
  const _emit = useCallback((text: string, level: LogLevel) => {
    const log = {
      id: generateId(),
-      origin: 'CLIENT',
+      origin: LogOrigin.Client,
      time: millisToString(nowInMillis()),
      level,
      text,
@@ -3,7 +3,7 @@ import { Playback, RuntimeStore } from 'ontime-types';
 import { useStore } from 'zustand';
 import { createStore } from 'zustand/vanilla';

-export const runtimeStorePlaceholder = {
+export const runtimeStorePlaceholder: RuntimeStore = {
  timer: {
    clock: 0,
    current: null,
@@ -33,6 +33,10 @@ export const runtimeStorePlaceholder = {
    text: '',
    visible: false,
  },
+  externalMessage: {
+    text: '',
+    visible: false,
+  },
  onAir: false,
  loaded: {
    numEvents: 0,
@@ -42,26 +46,10 @@ export const runtimeStorePlaceholder = {
    nextEventId: null,
    nextPublicEventId: null,
  },
-  titles: {
-    titleNow: null,
-    subtitleNow: null,
-    presenterNow: null,
-    noteNow: null,
-    titleNext: null,
-    subtitleNext: null,
-    presenterNext: null,
-    noteNext: null,
-  },
-  titlesPublic: {
-    titleNow: null,
-    subtitleNow: null,
-    presenterNow: null,
-    noteNow: null,
-    titleNext: null,
-    subtitleNext: null,
-    presenterNext: null,
-    noteNext: null,
-  },
+  eventNow: null,
+  eventNext: null,
+  publicEventNow: null,
+  publicEventNext: null,
 };

 export const runtime = createStore<RuntimeStore>(() => ({
@@ -1,4 +1,6 @@
-import { validateAlias } from '../aliases';
+import { resolvePath } from 'react-router-dom';
+
+import { generateURLFromAlias, getAliasRoute, validateAlias } from '../aliases';

 describe('An alias fails if incorrect', () => {
  const testsToFail = [
@@ -23,3 +25,79 @@ describe('An alias fails if incorrect', () => {
    }),
  );
 });
+describe('generateURLFromAlias and getAliasRoute function', () => {
+  test('generate the expected url from an alias', () => {
+    const testData = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+
+    const expected = [
+      {
+        url: '/timer?user=guest&alias=demopage',
+      },
+    ];
+
+    expect(generateURLFromAlias(testData[0])).toStrictEqual(expected[0].url);
+  });
+  test('generate the url to redirect to when the current URL is just the alias', () => {
+    const aliases = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+    // let current location be the alias
+    const location = resolvePath(aliases[0].alias);
+
+    const expected = [
+      {
+        url: '/timer?user=guest&alias=demopage',
+      },
+    ];
+
+    expect(getAliasRoute(location, aliases, null)).toStrictEqual(expected[0].url);
+  });
+  test('generate the url to redirect to when the current URL the same url but with a change of params', () => {
+    const aliases = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+    // let current location be the actual url with alias attached to it
+    const location = resolvePath(aliases[0].pathAndParams);
+    const urlSearchParams = new URLSearchParams(location.search);
+    urlSearchParams.append('alias', aliases[0].alias); //
+
+    // update current alias with extra param
+    aliases[0].pathAndParams += '&eventId=674';
+    const expected = [
+      {
+        url: '/timer?user=guest&eventId=674&alias=demopage',
+      },
+    ];
+
+    expect(getAliasRoute(location, aliases, urlSearchParams)).toStrictEqual(expected[0].url);
+  });
+  test('generate no url to redirect to when the current URL the same url', () => {
+    const aliases = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+    // let current location be the actual url with alias attached to it
+    const location = resolvePath(aliases[0].pathAndParams);
+    const urlSearchParams = new URLSearchParams(location.search);
+    urlSearchParams.append('alias', aliases[0].alias); //
+
+    expect(getAliasRoute(location, aliases, urlSearchParams)).toBeNull();
+  });
+});
@@ -1,4 +1,21 @@
-import { forgivingStringToMillis, millisToDelayString, millisToMinutes, millisToSeconds } from '../dateConfig';
+import {
+  forgivingStringToMillis,
+  millisToDelayString,
+  millisToMinutes,
+  millisToSeconds,
+  secondsInMillis,
+} from '../dateConfig';
+
+describe('test secondsInMillis function', () => {
+  it('return 0 if value is null', () => {
+    expect(secondsInMillis(null)).toBe(0);
+  });
+  it('returns the seconds value of a millis date', () => {
+    const date = 1686255053619; // Thu Jun 08 2023 20:10:53
+    const seconds = secondsInMillis(date);
+    expect(seconds).toBe(53);
+  });
+});

 describe('test millisToSeconds function', () => {
  it('test with null values', () => {
@@ -1,536 +0,0 @@
-import { formatEventList, getEventsWithDelay, trimRundown } from '../eventsManager';
-
-describe('getEventsWithDelay function', () => {
-  test('with positive delays', () => {
-    const testData = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 28800000,
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        duration: 60000,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000,
-        timeEnd: 35520000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-      {
-        title: 'Use simpler times to create a timer',
-        timeStart: 120000,
-        timeEnd: 720000,
-        colour: '',
-        type: 'event',
-        id: '8222',
-      },
-      {
-        duration: 900000,
-        type: 'delay',
-        revision: 0,
-        id: 'a386',
-      },
-      {
-        title: 'Add delay blocks to affect all events',
-        timeStart: 37320000,
-        timeEnd: 38520000,
-        colour: '',
-        type: 'event',
-        id: '6dce',
-      },
-      {
-        title: 'Add and remove events with [+] and [-]',
-        timeStart: 38520000,
-        timeEnd: 45120000,
-        colour: '',
-        type: 'event',
-        id: '2651',
-      },
-      {
-        type: 'block',
-        id: 'e6a1',
-      },
-      {
-        title: 'And control whether they are public',
-        timeStart: 46800000,
-        timeEnd: 57600000,
-        colour: '',
-        type: 'event',
-        id: '1358',
-      },
-    ];
-
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 28800000,
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000 + 60000,
-        timeEnd: 35520000 + 60000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-      {
-        title: 'Use simpler times to create a timer',
-        timeStart: 120000 + 60000,
-        timeEnd: 720000 + 60000,
-        colour: '',
-        type: 'event',
-        id: '8222',
-      },
-      {
-        title: 'Add delay blocks to affect all events',
-        timeStart: 37320000 + 60000 + 900000,
-        timeEnd: 38520000 + 60000 + 900000,
-        colour: '',
-        type: 'event',
-        id: '6dce',
-      },
-      {
-        title: 'Add and remove events with [+] and [-]',
-        timeStart: 38520000 + 60000 + 900000,
-        timeEnd: 45120000 + 60000 + 900000,
-        colour: '',
-        type: 'event',
-        id: '2651',
-      },
-      {
-        title: 'And control whether they are public',
-        timeStart: 46800000,
-        timeEnd: 57600000,
-        colour: '',
-        type: 'event',
-        id: '1358',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-  test('with negative delays', () => {
-    const testData = [
-      {
-        duration: -20,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 100,
-        timeEnd: 200,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 80,
-        timeEnd: 180,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-});
-
-describe('getEventsWithDelay edge cases', () => {
-  it('ensures time start cannot be below 0', () => {
-    const testData = [
-      {
-        duration: -200,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 10,
-        timeEnd: 20,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 0,
-        timeEnd: 0,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-  it('does not modify original array', () => {
-    const testData = [
-      {
-        duration: 10,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 10,
-        timeEnd: 20,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 20,
-        timeEnd: 30,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    const expectedSafe = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 20,
-        timeEnd: 30,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-    expect(getEventsWithDelay(expectedSafe)).toStrictEqual(expected);
-  });
-
-  it('given an empty array', () => {
-    const emptyArray = {
-      test: [],
-      expect: [],
-    };
-
-    expect(getEventsWithDelay(emptyArray.test)).toStrictEqual(emptyArray.expect);
-  });
-
-  it('given an undefined object', () => {
-    const withUndefined = {
-      test: undefined,
-      expect: [],
-    };
-
-    expect(getEventsWithDelay(withUndefined.test)).toStrictEqual(withUndefined.expect);
-  });
-
-  it('given a corrupted event object', () => {
-    const testData = [
-      {
-        title: 'Welcome to Ontime',
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        duration: 60000,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000,
-        timeEnd: 35520000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-    ];
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000 + 60000,
-        timeEnd: 35520000 + 60000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-
-  it('given a corrupted delay object', () => {
-    const testData = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 28800000,
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000,
-        timeEnd: 35520000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-    ];
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 28800000,
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000,
-        timeEnd: 35520000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-});
-
-describe('test trimEventlist function', () => {
-  const limit = 8;
-  const testData = [
-    { id: '1' },
-    { id: '2' },
-    { id: '3' },
-    { id: '4' },
-    { id: '5' },
-    { id: '6' },
-    { id: '7' },
-    { id: '8' },
-    { id: '9' },
-    { id: '10' },
-    { id: '11' },
-    { id: '12' },
-  ];
-
-  it('when we use the first item', () => {
-    const selectedId = '1';
-    const expected = [
-      { id: '1' },
-      { id: '2' },
-      { id: '3' },
-      { id: '4' },
-      { id: '5' },
-      { id: '6' },
-      { id: '7' },
-      { id: '8' },
-    ];
-
-    const l = trimRundown(testData, selectedId, limit);
-    expect(l.length).toBe(limit);
-    expect(l).toStrictEqual(expected);
-  });
-
-  it('when we use the third item', () => {
-    const selectedId = '3';
-    const expected = [
-      { id: '1' },
-      { id: '2' },
-      { id: '3' },
-      { id: '4' },
-      { id: '5' },
-      { id: '6' },
-      { id: '7' },
-      { id: '8' },
-    ];
-
-    const l = trimRundown(testData, selectedId, limit);
-    expect(l.length).toBe(limit);
-    expect(l).toStrictEqual(expected);
-  });
-
-  it('when we use the fourth item', () => {
-    const selectedId = '4';
-    const expected = [
-      { id: '2' },
-      { id: '3' },
-      { id: '4' },
-      { id: '5' },
-      { id: '6' },
-      { id: '7' },
-      { id: '8' },
-      { id: '9' },
-    ];
-
-    const l = trimRundown(testData, selectedId, limit);
-    expect(l.length).toBe(limit);
-    expect(l).toStrictEqual(expected);
-  });
-
-  it('if selected is not found', () => {
-    const selectedId = '15';
-    const expected = [
-      { id: '1' },
-      { id: '2' },
-      { id: '3' },
-      { id: '4' },
-      { id: '5' },
-      { id: '6' },
-      { id: '7' },
-      { id: '8' },
-    ];
-
-    const l = trimRundown(testData, selectedId, limit);
-    expect(l.length).toBe(limit);
-    expect(l).toStrictEqual(expected);
-  });
-});
-
-describe('test formatEvents function', () => {
-  const testEvent = [
-    {
-      title: 'Welcome to Ontime',
-      subtitle: 'Subtitles are useful',
-      presenter: 'cpvalente',
-      note: 'Maybe a running note for the operator?',
-      timeStart: 28800000,
-      timeEnd: 30600000,
-      isPublic: false,
-      colour: '',
-      type: 'event',
-      revision: 0,
-      id: '5946',
-    },
-    {
-      title: 'Unless recalled by the OSC address',
-      subtitle: '',
-      presenter: '',
-      note: 'In green, below',
-      timeStart: 34800000,
-      timeEnd: 35400000,
-      isPublic: false,
-      colour: '',
-      type: 'event',
-      revision: 0,
-      id: '8ee5',
-    },
-  ];
-
-  it('it parses correctly', () => {
-    const selectedId = 'otherEvent';
-    const nextId = 'notHere';
-    const expected = [
-      {
-        id: '5946',
-        time: '08:00 - 08:30',
-        title: 'Welcome to Ontime',
-        isNow: false,
-        isNext: false,
-        colour: '',
-      },
-      {
-        id: '8ee5',
-        time: '09:40 - 09:50',
-        title: 'Unless recalled by the OSC address',
-        isNow: false,
-        isNext: false,
-        colour: '',
-      },
-    ];
-
-    const parsed = formatEventList(testEvent, selectedId, nextId, { showEnd: true });
-    expect(parsed).toStrictEqual(expected);
-  });
-
-  it('it handles selected correctly', () => {
-    const selectedId = '5946';
-    const nextId = '8ee5';
-    const expected = [
-      {
-        id: '5946',
-        time: '08:00 - 08:30',
-        title: 'Welcome to Ontime',
-        isNow: true,
-        isNext: false,
-        colour: '',
-      },
-      {
-        id: '8ee5',
-        time: '09:40 - 09:50',
-        title: 'Unless recalled by the OSC address',
-        isNow: false,
-        isNext: true,
-        colour: '',
-      },
-    ];
-
-    const parsed = formatEventList(testEvent, selectedId, nextId, { showEnd: true });
-    expect(parsed).toStrictEqual(expected);
-  });
-
-  it('it handles next correctly', () => {
-    const selectedId = '8ee5';
-    const nextId = 'notHere';
-
-    const expected = [
-      {
-        id: '5946',
-        time: '08:00 - 08:30',
-        title: 'Welcome to Ontime',
-        isNow: false,
-        isNext: false,
-        colour: '',
-      },
-      {
-        id: '8ee5',
-        time: '09:40 - 09:50',
-        title: 'Unless recalled by the OSC address',
-        isNow: true,
-        isNext: false,
-        colour: '',
-      },
-    ];
-
-    const parsed = formatEventList(testEvent, selectedId, nextId, { showEnd: true });
-    expect(parsed).toStrictEqual(expected);
-  });
-});
@@ -0,0 +1,55 @@
+import { EndAction, OntimeEvent, SupportedEvent, TimerType } from 'ontime-types';
+
+import { cloneEvent } from '../eventsManager';
+
+describe('cloneEvent()', () => {
+  it('creates a stem from a given event', () => {
+    const original = {
+      id: 'unique',
+      type: SupportedEvent.Event,
+      title: 'title',
+      cue: 'cue',
+      subtitle: 'subtitle',
+      presenter: 'presenter',
+      note: 'note',
+      timeStart: 0,
+      duration: 10,
+      timeEnd: 10,
+      timerType: TimerType.CountDown,
+      endAction: EndAction.None,
+      isPublic: false,
+      skip: false,
+      colour: 'F00',
+      revision: 10,
+      user0: 'user0',
+      user1: 'user1',
+      user2: 'user2',
+      user3: 'user3',
+      user4: 'user4',
+      user5: 'user5',
+      user6: 'user6',
+      user7: 'user7',
+      user8: 'user8',
+      user9: 'user9',
+    } as OntimeEvent;
+
+    const cloned = cloneEvent(original);
+    expect(cloned).not.toBe(original);
+    // @ts-expect-error -- safeguarding this
+    expect(cloned?.id).toBe(undefined);
+    expect(cloned.title).toBe(original.title);
+    expect(cloned.subtitle).toBe(original.subtitle);
+    expect(cloned.presenter).toBe(original.presenter);
+    expect(cloned.note).toBe(original.note);
+    expect(cloned.endAction).toBe(original.endAction);
+    expect(cloned.timerType).toBe(original.timerType);
+    expect(cloned.timeStart).toBe(original.timeStart);
+    expect(cloned.timeEnd).toBe(original.timeEnd);
+    expect(cloned.duration).toBe(original.duration);
+    expect(cloned.isPublic).toBe(original.isPublic);
+    expect(cloned.skip).toBe(original.skip);
+    expect(cloned.colour).toBe(original.colour);
+    expect(cloned.type).toBe(SupportedEvent.Event);
+    expect(cloned.revision).toBe(0);
+  });
+});
@@ -1,56 +0,0 @@
-import getDelayTo from '../getDelayTo';
-
-describe('getDelayTo function', () => {
-  it('handles list with delays', () => {
-    const delayDuration = 100;
-    const events = [
-      { type: 'event' },
-      { type: 'delay', duration: delayDuration },
-      { type: 'event' },
-    ];
-
-    const notDelayed = getDelayTo(events, 0);
-    expect(notDelayed).toBe(0);
-    const delayedEvent = getDelayTo(events, 2);
-    expect(delayedEvent).toBe(delayDuration);
-  });
-  it('handles list without delays', () => {
-    const events = [{ type: 'event' }, { type: 'event' }];
-    const notDelayed = getDelayTo(events, 1);
-    expect(notDelayed).toBe(0);
-  });
-
-  it('handles list with multiple delays', () => {
-    const delayDuration = 100;
-    const events = [
-      { type: 'event' },
-      { type: 'delay', duration: delayDuration },
-      { type: 'event' },
-      { type: 'delay', duration: delayDuration },
-      { type: 'event' },
-    ];
-    const doubleDelay = getDelayTo(events, 4);
-    expect(doubleDelay).toBe(delayDuration * 2);
-  });
-  it('handles list with blocks', () => {
-    const events = [
-      { type: 'event' },
-      { type: 'delay', duration: 100 },
-      { type: 'event' },
-      { type: 'block' },
-      { type: 'event' },
-    ];
-    const notDelayed = getDelayTo(events, 4);
-    expect(notDelayed).toBe(0);
-  });
-  it('handles index greater than list', () => {
-    const events = [{ type: 'event' }, { type: 'delay', duration: 100 }, { type: 'event' }];
-    const notDelayed = getDelayTo(events, 3);
-    expect(notDelayed).toBe(0);
-  });
-  it('handles negative index (not found)', () => {
-    const events = [{ type: 'event' }, { type: 'delay', duration: 100 }, { type: 'event' }];
-    const notDelayed = getDelayTo(events, -1);
-    expect(notDelayed).toBe(0);
-  });
-});
@@ -12,7 +12,7 @@ test('Clamps a set of numbers correctly', () => {
    { num: -50, min: 0, max: 0, result: 0 },
    { num: 50.5, min: 0, max: 100, result: 50.5 },
    { num: 50, min: 0, max: 20.32, result: 20.32 },
-    { num: 10, min: 20.32, max: 40, result: 20.32 }
+    { num: 10, min: 20.32, max: 40, result: 20.32 },
  ];

  testCases.forEach((t) => expect(clamp(t.num, t.min, t.max)).toBe(t.result));
@@ -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);
+    });
+  });
 });
@@ -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');
+  });
+});
@@ -26,4 +26,14 @@ describe('formatTime()', () => {
    const time = formatTime(ms);
    expect(time).toStrictEqual('...');
  });
+
+  it('shows 12h format without times', () => {
+    const ms = 13 * 60 * 60 * 1000;
+    const options = {
+      showSeconds: false,
+      format: 'hh:mm a',
+    };
+    const time = formatTime(ms, options, () => '12');
+    expect(time).toStrictEqual('01:00 PM');
+  });
 });
--- a/Show More
+++ b/Show More