refactor: memo event line

* Operator Layout

.eslintignore

@@ -1 +0,0 @@
- "ONTIME_VERSION.js"

.eslintrc

@@ -1,5 +1,4 @@
 {
-  "root": true,
   "parserOptions": {
     "ecmaVersion": 2020
   },
@@ -7,16 +6,8 @@
     "es6": true,
     "jest": true
   },
-  "parser": "@typescript-eslint/parser",
   "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "eslint-config-prettier"
-  ],
-  "plugins": [
-    "@typescript-eslint",
-    "prettier"
+    "eslint:recommended"
   ],
   "overrides": [
     {
@@ -30,33 +21,6 @@
     }
   ],
   "rules": {
-    "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"
-      }
-    ]
+    "no-console": "warn"
   }
 }

.github/workflows/build_docker_v2.yml

@@ -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
+      uses: pnpm/action-setup@v2.2.4
       with:
-        version: 8
-
+        version: 7.26.3
+          
     - 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,8 +44,7 @@ jobs:
     - name: Docker Setup Buildx
       uses: docker/setup-buildx-action@v2.5.0
 
-    - name: Build and push stable release
-      if: github.event.release.prerelease == false
+    - name: Build and push Docker images
       uses: docker/build-push-action@v4.0.0
       with:
         context: .
@@ -55,14 +54,3 @@ 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
-

.github/workflows/build_v2.yml

@@ -17,9 +17,9 @@ jobs:
           node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -52,9 +52,9 @@ jobs:
           node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -85,9 +85,9 @@ jobs:
           node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/test_v2.yml

@@ -20,47 +20,23 @@ jobs:
           node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - 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
 
@@ -76,9 +52,9 @@ jobs:
           node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-pnpm lint-staged

.prettierignore

@@ -1,10 +0,0 @@
-build
-coverage
-dist
-node_modules
-
-playwright-report
-
-**/*.toml
-**/*.yml
-**/*.json

.prettierrc

@@ -1,5 +1,4 @@
 {
-  "endOfLine": "lf",
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,

DEVELOPMENT.md

@@ -56,8 +56,6 @@ E2E tests are in a separate package. On running, [playwright](https://playwright
 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
@@ -76,7 +74,7 @@ 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:electron`
+- __Build the UI and server__ by running `turbo build:local`
 - __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`
@@ -89,7 +87,6 @@ While it should allow for a generic setup, it might need to be modified to fit y
 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`
 

README.md

@@ -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-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-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-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,11 +14,10 @@
 
 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)
 
@@ -29,7 +28,7 @@ outputs.
 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 />
@@ -51,9 +50,8 @@ 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
@@ -65,14 +63,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
@@ -85,19 +83,17 @@ 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
 
@@ -117,8 +113,7 @@ 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
@@ -126,11 +121,26 @@ 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.
+You can self-host and run Ontime in a docker image. The run command will:
 
-The docker image along with documentation is [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
+- 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__
 
-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)
+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)
 
 ## Roadmap
 
@@ -138,32 +148,32 @@ If you want to run this image in a Raspberry Pi, please see [the docs](https://o
 
 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: 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 macOS: after attempting to run the installer, navigate to System Preferences ->  Security &
+  Privacy and allow the execution of the app
 - In Linux: right-click the AppImage file -> Properties -> Permissions -> select Allow Executing
   File as a Program
 
@@ -175,7 +185,6 @@ 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
 
@@ -185,8 +194,7 @@ 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)
 

apps/client/.eslintrc

@@ -8,18 +8,34 @@
     "browser": true,
     "node": true
   },
+  "parser": "@typescript-eslint/parser",
   "extends": [
+    "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:@tanstack/eslint-plugin-query/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-prettier",
+    "plugin:@tanstack/eslint-plugin-query/recommended",
+    "prettier"
   ],
   "plugins": [
     "react",
     "testing-library",
     "simple-import-sort",
-    "@tanstack/query"
+    "@tanstack/query",
+    "@typescript-eslint",
+    "prettier"
   ],
   "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",
       {

apps/client/.prettierrc

@@ -1,5 +1,4 @@
 {
-  "endOfLine": "lf",
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "2.28.16",
+  "version": "2.7.2",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.7.0",
@@ -12,8 +12,8 @@
     "@react-icons/all-files": "^4.1.0",
     "@sentry/react": "^7.46.0",
     "@sentry/tracing": "^7.46.0",
-    "@tanstack/react-query": "^5.8.4",
-    "@tanstack/react-query-devtools": "^5.8.4",
+    "@tanstack/react-query": "^4.28.0",
+    "@tanstack/react-query-devtools": "^4.29.0",
     "@tanstack/react-table": "^8.9.2",
     "autosize": "^6.0.1",
     "axios": "^1.2.0",
@@ -38,11 +38,8 @@
     "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",
-    "build:localdocker": "cross-env NODE_ENV=local vite build",
-    "lint": "eslint . --quiet",
-    "lint-staged": "eslint",
+    "lint": "eslint .",
     "test": "vitest",
     "test:pipeline": "vitest run",
     "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"
@@ -61,21 +58,22 @@
   },
   "devDependencies": {
     "@sentry/vite-plugin": "^0.4.0",
-    "@tanstack/eslint-plugin-query": "^5.8.4",
+    "@tanstack/eslint-plugin-query": "^4.26.2",
     "@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/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
     "@vitejs/plugin-react": "^3.0.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-prettier": "^5.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-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -83,9 +81,9 @@
     "jsdom": "^21.1.0",
     "ontime-types": "workspace:*",
     "ontime-utils": "workspace:*",
-    "prettier": "^3.0.3",
+    "prettier": "^2.8.3",
     "sass": "^1.57.1",
-    "typescript": "^5.2.2",
+    "typescript": "^4.9.4",
     "vite": "^4.3.1",
     "vite-plugin-compression2": "^0.9.0",
     "vite-plugin-svgr": "^2.4.0",

apps/client/src/common/api/apiConstants.ts

@@ -1,15 +1,14 @@
 // REST stuff
-export const PROJECT_DATA = ['project'];
+export const EVENT_DATA = ['eventdata'];
 export const ALIASES = ['aliases'];
 export const USERFIELDS = ['userFields'];
-export const RUNDOWN = ['rundown'];
+export const RUNDOWN_TABLE_KEY = 'rundown';
+export const RUNDOWN_TABLE = [RUNDOWN_TABLE_KEY];
 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'];
 
 const location = window.location;
 const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
@@ -20,7 +19,7 @@ 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 eventURL = `${serverURL}/eventdata`;
 export const rundownURL = `${serverURL}/events`;
 export const ontimeURL = `${serverURL}/ontime`;
 

apps/client/src/common/api/apiUtils.ts

@@ -2,32 +2,18 @@ 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) {
+export function logAxiosError(prepend: string, error: unknown) {
+  let message;
   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}`;
+    const data = (error as AxiosError).response?.data ?? '';
+    message = `${prepend} ${statusText}: ${data}`;
   } else {
-    if (typeof error !== 'string') {
-      return JSON.stringify(error);
-    }
-    return error;
+    message = `${prepend}: ${error}`;
   }
-}
-
-export function logAxiosError(prepend: string, error: unknown) {
-  const message = `${prepend}: ${maybeAxiosError(error)}`;
 
   addLog({
     id: generateId(),
@@ -37,17 +23,3 @@ export function logAxiosError(prepend: string, error: unknown) {
     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'] });
-}

apps/client/src/common/api/eventDataApi.ts

@@ -0,0 +1,21 @@
+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);
+}

apps/client/src/common/api/eventsApi.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { GetRundownCached, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
+import { OntimeRundown, OntimeRundownEntry } from 'ontime-types';
 
 import { rundownURL } from './apiConstants';
 
@@ -7,16 +7,6 @@ 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;

apps/client/src/common/api/ontimeApi.ts

@@ -1,21 +1,8 @@
-import axios, { AxiosResponse } from 'axios';
-import {
-  Alias,
-  DatabaseModel,
-  GetInfo,
-  HttpSettings,
-  OntimeRundown,
-  OSCSettings,
-  OscSubscription,
-  ProjectData,
-  Settings,
-  UserFields,
-  ViewSettings,
-} from 'ontime-types';
-import { ExcelImportMap } from 'ontime-utils';
+import axios from 'axios';
+import { Alias, EventData, OSCSettings, OscSubscription, Settings, UserFields, ViewSettings } from 'ontime-types';
 
 import { apiRepoLatest } from '../../externals';
-import fileDownload from '../utils/fileDownload';
+import { InfoType } from '../models/Info';
 
 import { ontimeURL } from './apiConstants';
 
@@ -40,7 +27,7 @@ export async function postSettings(data: Settings) {
  * @description HTTP request to retrieve application info
  * @return {Promise}
  */
-export async function getInfo(): Promise<GetInfo> {
+export async function getInfo(): Promise<InfoType> {
   const res = await axios.get(`${ontimeURL}/info`);
   return res.data;
 }
@@ -105,23 +92,6 @@ 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}
@@ -139,38 +109,45 @@ export async function postOscSubscriptions(data: OscSubscription) {
 }
 
 /**
- * @description HTTP request to download db in CSV format
+ * @description HTTP request to download db
+ * @return {Promise}
  */
-export const downloadCSV = () => {
-  return fileDownload(ontimeURL, { name: 'rundown', type: 'csv' }, { type: 'text/csv;charset=utf-8;' });
-};
+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';
 
-/**
- * @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;' });
-};
+    // 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);
+    }
 
-// TODO: should this be extracted to shared code?
-export type ProjectFileImportOptions = {
-  onlyRundown: boolean;
+    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();
+  });
 };
 
 /**
  * @description HTTP request to upload events db
  * @return {Promise}
  */
-export const uploadProjectFile = async (
-  file: File,
-  setProgress: (value: number) => void,
-  options?: Partial<ProjectFileImportOptions>,
-) => {
+type UploadDataOptions = {
+  onlyRundown?: boolean;
+};
+export const uploadData = async (file: File, setProgress: (value: number) => void, options?: UploadDataOptions) => {
   const formData = new FormData();
   formData.append('userFile', file);
-
-  const onlyRundown = Boolean(options?.onlyRundown);
-
+  const onlyRundown = options?.onlyRundown || 'false';
   await axios
     .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
       headers: {
@@ -184,47 +161,6 @@ export const uploadProjectFile = async (
     .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;
@@ -242,79 +178,6 @@ export async function getLatestVersion(): Promise<HasUpdate> {
   };
 }
 
-export async function postNew(initialData: Partial<ProjectData>) {
+export async function postNew(initialData: Partial<EventData>) {
   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;
-};

apps/client/src/common/api/projectDataApi.ts

@@ -1,21 +0,0 @@
-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);
-}

apps/client/src/common/components/input/colour-input/SwatchSelect.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { EditorUpdateFields } from '../../../../features/event-editor/EventEditor';
+import { TitleActions } from '../../../../features/event-editor/composite/EventEditorDataLeft';
 
 import Swatch from './Swatch';
 
@@ -8,8 +8,8 @@ import style from './SwatchSelect.module.scss';
 
 interface ColourInputProps {
   value: string;
-  name: EditorUpdateFields;
-  handleChange: (newValue: EditorUpdateFields, name: string) => void;
+  name: TitleActions;
+  handleChange: (newValue: TitleActions, name: string) => void;
 }
 
 const colours = [

apps/client/src/common/components/input/text-input/TextInput.tsx

@@ -19,11 +19,9 @@ interface TextInputProps extends BaseProps {
   isTextArea?: false;
 }
 
-type ResizeOptions = 'horizontal' | 'vertical' | 'none';
-
 interface TextAreaProps extends BaseProps {
   isTextArea: true;
-  resize?: ResizeOptions;
+  resize?: 'horizontal' | 'vertical' | 'none';
 }
 
 type InputProps = TextInputProps | TextAreaProps;
@@ -37,7 +35,7 @@ export default function TextInput(props: InputProps) {
   const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
   const textAreaProps = useReactiveTextInput(initialText, submitCallback);
 
-  let resize: ResizeOptions = 'none';
+  let resize = 'none';
   if (isTextArea) {
     resize = (props as TextAreaProps)?.resize ?? 'none';
   }

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -17,8 +17,9 @@ interface TimeInputProps {
   time?: number;
   delay?: number;
   placeholder: string;
+  validationHandler: (entry: TimeEntryField, val: number) => boolean;
   previousEnd?: number;
-  tooltip?: string;
+  warning?: string;
 }
 
 function ButtonInitial(name: TimeEntryField) {
@@ -28,15 +29,25 @@ function ButtonInitial(name: TimeEntryField) {
   return '';
 }
 
-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}` : ''}`;
+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}` : ''}`;
   return '';
 }
 
 export default function TimeInput(props: TimeInputProps) {
-  const { id, name, submitHandler, time = 0, delay = 0, placeholder, previousEnd = 0 } = props;
+  const {
+    id,
+    name,
+    submitHandler,
+    time = 0,
+    delay = 0,
+    placeholder,
+    validationHandler,
+    previousEnd = 0,
+    warning,
+  } = props;
   const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
@@ -92,12 +103,15 @@ 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],
+    [name, previousEnd, submitHandler, time, validationHandler],
   );
 
   /**
@@ -157,11 +171,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]);
+  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
 
   const TooltipLabel = useMemo(() => {
-    return ButtonTooltip(name, '');
-  }, [name]);
+    return ButtonTooltip(name, warning);
+  }, [name, warning]);
 
   const ButtonText = useMemo(() => {
     return ButtonInitial(name);
@@ -198,7 +212,6 @@ export default function TimeInput(props: TimeInputProps) {
         onKeyDown={onKeyDownHandler}
         value={value}
         maxLength={8}
-        autoComplete='off'
       />
     </InputGroup>
   );

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss

@@ -10,7 +10,6 @@ $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;
@@ -32,6 +31,7 @@ $progress-bar-br: 3px;
   position: absolute;
   height: inherit;
   right: 0;
+  border-radius: $progress-bar-br;
   width: 100%;
 }
 
@@ -39,10 +39,12 @@ $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;
 }

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -3,7 +3,7 @@ import { clamp } from '../../utils/math';
 import './MultiPartProgressBar.scss';
 
 interface MultiPartProgressBar {
-  now: number | null;
+  now: number;
   complete: number;
   normalColor: string;
   warning: number;
@@ -17,27 +17,17 @@ 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, 0) * 100) / complete, 0, 100);
+  const percentComplete = 100 - clamp(100 - (Math.max(now, 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}`}>
-      {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 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>
   );
 }

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -10,6 +10,10 @@ $icon-color: $ui-white;
 $button-bg: $gray-1050;
 $button-size: 48px;
 
+.mirror {
+  transform: rotate(180deg);
+}
+
 .buttonContainer {
   display: flex;
   flex-direction: column;

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -12,6 +12,7 @@ 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';
@@ -22,19 +23,18 @@ function NavigationMenu() {
   const location = useLocation();
 
   const { isFullScreen, toggleFullScreen } = useFullscreen();
-  const { toggleMirror } = useViewOptionsStore();
+  const { mirror, 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 { isOpen, onOpen, onClose } = useDisclosure();
 
   const toggleMenu = () => setShowMenu((prev) => !prev);
+  useKeyDown(toggleMenu, ' ', { isDisabled: searchParams.get('edit') === 'true' || isOpen });
 
-  // show on mouse move
   useEffect(() => {
     let fadeOut: NodeJS.Timeout | null = null;
     const setShowMenuTrue = () => {
@@ -63,7 +63,7 @@ function NavigationMenu() {
   };
 
   return createPortal(
-    <div id='navigation-menu-portal' ref={menuRef}>
+    <div id='navigation-menu-portal' ref={menuRef} className={mirror ? style.mirror : ''}>
       <RenameClientModal isOpen={isOpen} onClose={onClose} />
       <div className={`${style.buttonContainer} ${!showButton && !showMenu ? style.hidden : ''}`}>
         <button onClick={toggleMenu} aria-label='toggle menu' className={style.navButton}>

apps/client/src/common/components/schedule/Schedule.tsx

@@ -1,3 +1,5 @@
+import Empty from '../state/Empty';
+
 import { useSchedule } from './ScheduleContext';
 import ScheduleItem from './ScheduleItem';
 
@@ -11,9 +13,8 @@ interface 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 null;
+    return <Empty text='No events to show' />;
   }
 
   let selectedState: 'past' | 'now' | 'future' = 'past';

apps/client/src/common/components/schedule/ScheduleContext.tsx

@@ -1,9 +1,7 @@
 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[];
@@ -21,6 +19,7 @@ interface ScheduleProviderProps {
   events: OntimeEvent[];
   selectedEventId: string | null;
   isBackstage?: boolean;
+  eventsPerPage?: number;
   time?: number;
 }
 
@@ -29,29 +28,16 @@ export const ScheduleProvider = ({
   events,
   selectedEventId,
   isBackstage = false,
+  eventsPerPage = 7,
   time = 10,
 }: PropsWithChildren<ScheduleProviderProps>) => {
   const [visiblePage, setVisiblePage] = useState(0);
-  const [searchParams] = useSearchParams();
 
-  // 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 numPages = Math.ceil(events.length / eventsPerPage);
   const eventStart = eventsPerPage * visiblePage;
   const eventEnd = eventsPerPage * (visiblePage + 1);
-  const paginatedEvents = viewEvents.slice(eventStart, eventEnd);
+  const paginatedEvents = events.slice(eventStart, eventEnd);
+  const selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
 
   const resolveScheduleType = () => {
     if (selectedEventIndex >= eventStart && selectedEventIndex < eventEnd) {
@@ -66,9 +52,7 @@ export const ScheduleProvider = ({
 
   // every SCROLL_TIME go to the next array
   useInterval(() => {
-    if (stopCycle) {
-      setVisiblePage(0);
-    } else if (events.length > eventsPerPage) {
+    if (events.length > eventsPerPage) {
       const next = (visiblePage + 1) % numPages;
       setVisiblePage(next);
     }

apps/client/src/common/components/schedule/ScheduleItem.tsx

@@ -1,12 +1,7 @@
-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;
@@ -19,10 +14,19 @@ 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, formatOptions);
-  const end = formatTime(timeEnd, formatOptions);
+  const start = formatTime(timeStart, { format: 'hh:mm' });
+  const end = formatTime(timeEnd, { format: 'hh:mm' });
   const userColour = colour !== '' ? colour : '';
   const selectStyle = `entry--${selected}`;
 
@@ -30,15 +34,12 @@ export default function ScheduleItem(props: ScheduleItemProps) {
     <li className={`entry ${selectStyle} ${skip ? 'skip' : ''}`}>
       <div className='entry-times'>
         <span className='entry-colour' style={{ backgroundColor: userColour }} />
-        <div style={{ display: 'flex' }}>
-          <SuperscriptTime time={start} />
-          {' → '}
-          <SuperscriptTime time={end} />
-          {backstageEvent ? '*' : ''}
-        </div>
+        {`${start} → ${end} ${backstageEvent ? '*' : ''}`}
       </div>
       <div className='entry-title'>{title}</div>
-      {presenter && <div className='entry-presenter'>{presenter}</div>}
+      {presenter && (
+        <div className='entry-presenter'>{presenter}</div>
+      )}
     </li>
   );
 }

apps/client/src/common/components/schedule/ScheduleNav.tsx

@@ -13,11 +13,12 @@ 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>
   );
 }

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -1,5 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
-import { Input, InputGroup, InputLeftElement, Select, Switch } from '@chakra-ui/react';
+import { Input, Select, Switch } from '@chakra-ui/react';
 
 import { isStringBoolean } from '../../utils/viewUtils';
 
@@ -9,22 +9,16 @@ interface EditFormInputProps {
   paramField: ParamField;
 }
 
-export default function ParamInput(props: EditFormInputProps) {
+export default function ParamInput({ paramField }: EditFormInputProps) {
   const [searchParams] = useSearchParams();
-  const { paramField } = props;
-  const { id, type, defaultValue } = paramField;
+  const { id, type } = paramField;
 
   if (type === 'option') {
     const optionFromParams = searchParams.get(id);
-    const defaultOptionValue = optionFromParams || defaultValue;
+    const defaultOptionValue = optionFromParams || undefined;
 
     return (
-      <Select
-        placeholder={defaultValue ? undefined : 'Select an option'}
-        variant='ontime'
-        name={id}
-        defaultValue={defaultOptionValue}
-      >
+      <Select placeholder='Select an option' variant='ontime' name={id} defaultValue={defaultOptionValue}>
         {Object.entries(paramField.values).map(([key, value]) => (
           <option key={key} value={key}>
             {value}
@@ -35,38 +29,19 @@ export default function ParamInput(props: EditFormInputProps) {
   }
 
   if (type === 'boolean') {
-    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) || defaultValue;
+    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) ?? false;
 
     // 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 { prefix, placeholder } = paramField;
-    const defaultNumberValue = searchParams.get(id) ?? defaultValue;
+    const defaultNumberValue = searchParams.get(id) ?? '';
 
-    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>
-    );
+    return <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />;
   }
 
-  const defaultStringValue = searchParams.get(id) ?? defaultValue;
-  const { prefix, placeholder } = paramField;
+  const defaultStringValue = searchParams.get(id) ?? '';
 
-  return (
-    <InputGroup variant='ontime-filled'>
-      {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
-      <Input name={id} defaultValue={defaultStringValue} placeholder={placeholder} />
-    </InputGroup>
-  );
+  return <Input variant='ontime-filled' name={id} defaultValue={defaultStringValue} />;
 }

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, useEffect } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import {
   Button,
   Drawer,
@@ -12,34 +12,11 @@ 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[];
 }
@@ -47,8 +24,6 @@ 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');
@@ -58,51 +33,36 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
     }
   }, [searchParams, onOpen]);
 
-  /**
-   * 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 = () => {
+  const onEditDrawerClose = () => {
     onClose();
 
     searchParams.delete('edit');
     setSearchParams(searchParams);
   };
 
-  const resetParams = () => {
-    setStoredViewParams({ ...storedViewParams, [pathname]: {} });
+  const clearParams = () => {
     setSearchParams();
+    onClose();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
     formEvent.preventDefault();
 
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
-    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
+    const newSearchParams = Object.entries(newParamsObject).reduce((newSearchParams, [id, value]) => {
+      if (typeof value === 'string' && value.length) {
+        newSearchParams.set(id, value);
 
-    setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject });
+        return newSearchParams;
+      }
+
+      return newSearchParams;
+    }, new URLSearchParams());
     setSearchParams(newSearchParams);
   };
 
   return (
-    <Drawer isOpen={isOpen} placement='right' onClose={onCloseWithoutSaving} size='lg'>
+    <Drawer isOpen={isOpen} placement='right' onClose={onEditDrawerClose} size='lg'>
       <DrawerOverlay />
       <DrawerContent>
         <DrawerHeader className={style.drawerHeader}>
@@ -125,10 +85,10 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
         </DrawerBody>
 
         <DrawerFooter className={style.drawerFooter}>
-          <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
-            Reset
+          <Button variant='ontime-ghosted' onClick={clearParams} type='reset'>
+            Clear
           </Button>
-          <Button variant='ontime-subtle' onClick={onCloseWithoutSaving}>
+          <Button variant='ontime-subtle' onClick={onEditDrawerClose}>
             Cancel
           </Button>
           <Button variant='ontime-filled' form='edit-params-form' type='submit'>

apps/client/src/common/components/view-params-editor/constants.ts

@@ -1,56 +1,46 @@
 import { UserFields } from 'ontime-types';
-import { TimeFormat } from 'ontime-types/src/definitions/core/TimeFormat.type';
 
 import { ParamField } from './types';
 
-export const getTimeOption = (timeFormat: TimeFormat): ParamField => ({
+export const TIME_FORMAT_OPTION: ParamField = {
   id: 'format',
   title: '12  / 24 hour timer',
   description: 'Whether to show the time in 12 or 24 hour mode. Overrides the global setting from preferences',
   type: 'option',
   values: { '12': '12 hour AM/PM', '24': '24 hour' },
-  defaultValue: timeFormat,
-});
+};
 
-export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
-  getTimeOption(timeFormat),
+export const CLOCK_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
   {
     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',
@@ -58,14 +48,12 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
     description: 'Moves the horizontally in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
   },
   {
     id: 'offsetx',
     title: 'Offset Horizontal',
     description: 'Offsets the timer horizontal position by a given amount in pixels',
     type: 'number',
-    placeholder: '0 (default)',
   },
   {
     id: 'aligny',
@@ -73,94 +61,47 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
     description: 'Moves the vertically in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
   },
   {
     id: 'offsety',
     title: 'Offset Vertical',
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
-    placeholder: '0 (default)',
   },
 ];
 
-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 TIMER_OPTIONS: ParamField[] = [TIME_FORMAT_OPTION];
 
 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',
@@ -168,14 +109,12 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Moves the horizontally in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
   },
   {
     id: 'offsetx',
     title: 'Offset Horizontal',
     description: 'Offsets the timer horizontal position by a given amount in pixels',
     type: 'number',
-    placeholder: '0 (default)',
   },
   {
     id: 'aligny',
@@ -183,162 +122,102 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Moves the vertically in page to start = left | center | end = right',
     type: 'option',
     values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
   },
   {
     id: 'offsety',
     title: 'Offset Vertical',
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
-    placeholder: '0 (default)',
   },
   {
     id: 'hideovertime',
     title: 'Hide Overtime',
-    description: 'Whether to suppress overtime styles (red borders and red text)',
+    description: 'Whether to supress 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 3)',
+    description: 'Transition in time in seconds (default 5)',
     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 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),
+export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
   {
     id: 'seconds',
     title: 'Show Seconds',
     description: 'Shows seconds in clock',
     type: 'boolean',
-    defaultValue: false,
   },
 ];
 
-export const getOperatorOptions = (userFields: UserFields, timeFormat: TimeFormat): ParamField[] => {
+export const getOperatorOptions = (userFields: UserFields): ParamField[] => {
   return [
-    getTimeOption(timeFormat),
+    TIME_FORMAT_OPTION,
     {
       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',
@@ -380,12 +259,5 @@ export const getOperatorOptions = (userFields: UserFields, timeFormat: TimeForma
         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,
-    },
   ];
 };

apps/client/src/common/components/view-params-editor/types.ts

@@ -4,13 +4,9 @@ type BaseField = {
   description: string;
 };
 
-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 };
+type OptionsField = { type: 'option'; values: Record<string, string> };
+type StringField = { type: 'string' };
+type BooleanField = { type: 'boolean' };
+type NumberField = { type: 'number' };
 
 export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);

apps/client/src/common/context/AppContext.tsx

@@ -25,7 +25,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
   const [operatorAuth, setOperatorAuth] = useState(true);
 
   useEffect(() => {
-    if (status === 'pending') return;
+    if (status === 'loading') return;
     if (!data) return;
     const previousEditor = sessionStorage.getItem(storageKeys.editor);
 

apps/client/src/common/hooks-query/useEventData.ts

@@ -1,15 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { PROJECT_DATA } from '../api/apiConstants';
-import { getProjectData } from '../api/projectDataApi';
-import { projectDataPlaceholder } from '../models/ProjectData';
+import { EVENT_DATA } from '../api/apiConstants';
+import { fetchEventData } from '../api/eventDataApi';
+import { eventDataPlaceholder } from '../models/EventData';
 
-export default function useProjectData() {
+export default function useEventData() {
   const { data, status, isFetching, isError, refetch } = useQuery({
-    queryKey: PROJECT_DATA,
-    queryFn: getProjectData,
-    placeholderData: projectDataPlaceholder,
+    queryKey: EVENT_DATA,
+    queryFn: fetchEventData,
+    placeholderData: eventDataPlaceholder,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

apps/client/src/common/hooks-query/useHttpSettings.ts

@@ -1,33 +0,0 @@
-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 };
-}

apps/client/src/common/hooks-query/useInfo.ts

@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { GetInfo } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_INFO } from '../api/apiConstants';
@@ -7,7 +6,7 @@ import { getInfo } from '../api/ontimeApi';
 import { ontimePlaceholderInfo } from '../models/Info';
 
 export default function useInfo() {
-  const { data, status, isError, refetch, isFetching } = useQuery<GetInfo>({
+  const { data, status, isError, refetch } = useQuery({
     queryKey: APP_INFO,
     queryFn: getInfo,
     placeholderData: ontimePlaceholderInfo,
@@ -17,5 +16,5 @@ export default function useInfo() {
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch, isFetching };
+  return { data, status, isError, refetch };
 }

apps/client/src/common/hooks-query/useOscSettings.ts

@@ -1,4 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
+import { OSCSettings } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { OSC_SETTINGS } from '../api/apiConstants';
@@ -10,10 +11,7 @@ import { ontimeQueryClient } from '../queryClient';
 export default function useOscSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: OSC_SETTINGS,
-    queryFn: async () => {
-      const oscData = await getOSC();
-      return { ...oscData, portIn: String(oscData.portIn), portOut: String(oscData.portOut) };
-    },
+    queryFn: getOSC,
     placeholderData: oscPlaceholderSettings,
     retry: 5,
     retryDelay: (attempt: number) => attempt * 2500,
@@ -21,24 +19,25 @@ export default function useOscSettings() {
     networkMode: 'always',
   });
 
-  return { data: data ?? oscPlaceholderSettings, status, isFetching, isError, refetch };
+  // we need to jump through some hoops because of the type op port
+  return { data: data! as unknown as OSCSettings, status, isFetching, isError, refetch };
 }
 
 export function useOscSettingsMutation() {
-  const { isPending, mutateAsync } = useMutation({
+  const { isLoading, 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 { isPending, mutateAsync };
+  return { isLoading, mutateAsync };
 }
 
 export function usePostOscSubscriptions() {
-  const { isPending, mutateAsync } = useMutation({
+  const { isLoading, mutateAsync } = useMutation({
     mutationFn: postOscSubscriptions,
     onError: (error) => logAxiosError('Error saving OSC settings', error),
     onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
   });
-  return { isPending, mutateAsync };
+  return { isLoading, mutateAsync };
 }

apps/client/src/common/hooks-query/useRundown.ts

@@ -1,29 +1,19 @@
 import { useQuery } from '@tanstack/react-query';
-import { GetRundownCached } from 'ontime-types';
 
 import { queryRefetchInterval } from '../../ontimeConfig';
-import { RUNDOWN } from '../api/apiConstants';
-import { fetchCachedRundown } from '../api/eventsApi';
+import { RUNDOWN_TABLE } from '../api/apiConstants';
+import { fetchRundown } 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, isFetching } = useQuery<GetRundownCached>({
-    queryKey: RUNDOWN,
-    queryFn: fetchCachedRundown,
-    placeholderData: cachedRundownPlaceholder,
+  const { data, status, isError, refetch } = useQuery({
+    queryKey: RUNDOWN_TABLE,
+    queryFn: fetchRundown,
+    placeholderData: [],
     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: data?.rundown ?? [], status, isError, refetch, isFetching };
+
+  return { data, status, isError, refetch };
 }

apps/client/src/common/hooks/useClickOutside.ts

@@ -6,6 +6,7 @@ export default function useClickOutside<T extends HTMLElement = HTMLElement>(
   ref: RefObject<T>,
   callback: ClickOutsideEventHandler,
 ) {
+
   useEffect(() => {
     function handleClick(event: MouseEvent) {
       const element = ref?.current;

apps/client/src/common/hooks/useElectronEvent.ts

@@ -1,7 +1,7 @@
 export default function useElectronEvent() {
   const isElectron = window?.process?.type === 'renderer';
 
-  const sendToElectron = (channel: string, args?: string | Record<string, unknown>) => {
+  const sendToElectron = (channel: string, args?: string | Record<string, any>) => {
     if (isElectron) {
       window?.ipcRenderer.send(channel, args);
     }

apps/client/src/common/hooks/useEventAction.ts

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { GetRundownCached, isOntimeEvent, OntimeRundownEntry } from 'ontime-types';
+import { isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
 import { getCueCandidate, swapOntimeEvents } from 'ontime-utils';
 
-import { RUNDOWN } from '../api/apiConstants';
+import { RUNDOWN_TABLE, RUNDOWN_TABLE_KEY } from '../api/apiConstants';
 import { logAxiosError } from '../api/apiUtils';
 import {
   ReorderEntry,
@@ -36,7 +36,7 @@ export const useEventAction = () => {
     // Fetch anyway, just to be sure
     mutationFn: requestPostEvent,
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
     },
     networkMode: 'always',
   });
@@ -67,10 +67,8 @@ export const useEventAction = () => {
           after: options?.after,
         };
 
-        const rundown = queryClient.getQueryData<GetRundownCached>(RUNDOWN)?.rundown ?? [];
-
         if (newEvent?.cue === undefined) {
-          newEvent.cue = getCueCandidate(rundown, options?.after);
+          newEvent.cue = getCueCandidate(queryClient.getQueryData(RUNDOWN_TABLE) || [], options?.after);
         }
 
         // hard coding duration value to be as expected for now
@@ -80,6 +78,7 @@ export const useEventAction = () => {
         }
 
         if (applicationOptions.startTimeIsLastEnd && applicationOptions?.lastEventId) {
+          const rundown = queryClient.getQueryData(RUNDOWN_TABLE) as OntimeRundown;
           const previousEvent = rundown.find((event) => event.id === applicationOptions.lastEventId);
           if (previousEvent !== undefined && previousEvent.type === 'event') {
             newEvent.timeStart = previousEvent.timeEnd;
@@ -101,7 +100,7 @@ export const useEventAction = () => {
         // @ts-expect-error -- we know that the object is well formed now
         await _addEventMutation.mutateAsync(newEvent);
       } catch (error) {
-        logAxiosError('Failed adding event', error);
+        logAxiosError('Error fetching data', error);
       }
     },
     [_addEventMutation, defaultPublic, queryClient, startTimeIsLastEnd],
@@ -116,35 +115,25 @@ export const useEventAction = () => {
     // we optimistically update here
     onMutate: async (newEvent) => {
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries([RUNDOWN_TABLE_KEY, newEvent.id]);
 
       // Snapshot the previous value
+      const previousEvent = queryClient.getQueryData([RUNDOWN_TABLE_KEY, newEvent.id]);
 
-      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 });
-        }
-      }
+      // optimistically update object
+      queryClient.setQueryData([RUNDOWN_TABLE_KEY, newEvent.id], newEvent);
 
       // Return a context with the previous and new events
-      return { previousData, newEvent };
+      return { previousEvent, newEvent };
     },
     // Mutation fails, rollback undoes optimist update
     onError: (_error, _newEvent, context) => {
-      queryClient.setQueryData(RUNDOWN, context?.previousData);
+      queryClient.setQueryData([RUNDOWN_TABLE_KEY, context?.newEvent.id], context?.previousEvent);
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
     onSettled: async () => {
-      await queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      await queryClient.invalidateQueries([RUNDOWN_TABLE_KEY]);
     },
     networkMode: 'always',
   });
@@ -172,37 +161,28 @@ export const useEventAction = () => {
     // we optimistically update here
     onMutate: async (eventId) => {
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries([RUNDOWN_TABLE_KEY, eventId]);
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);
+      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
 
-      if (previousData) {
-        // optimistically update object
-        const optimisticRundown = [...previousData.rundown];
-        const index = optimisticRundown.findIndex((event) => event.id === eventId);
-        if (index > -1) {
-          optimisticRundown.splice(index, 1);
+      const filtered = [...(previousEvents as OntimeRundown)].filter((e) => e.id !== eventId);
 
-          queryClient.setQueryData(RUNDOWN, {
-            rundown: optimisticRundown,
-            revision: -1,
-          });
-        }
-      }
+      // optimistically update object
+      queryClient.setQueryData(RUNDOWN_TABLE, filtered);
 
       // Return a context with the previous and new events
-      return { previousData };
+      return { previousEvents };
     },
 
     // Mutation fails, rollback undoes optimist update
     onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN, context?.previousData);
+      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
     },
     networkMode: 'always',
   });
@@ -230,26 +210,26 @@ export const useEventAction = () => {
     // we optimistically update here
     onMutate: async () => {
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);
+      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
 
       // optimistically update object
-      queryClient.setQueryData(RUNDOWN, { rundown: [], revision: -1 });
+      queryClient.setQueryData(RUNDOWN_TABLE, []);
 
       // Return a context with the previous and new events
-      return { previousData };
+      return { previousEvents };
     },
 
     // Mutation fails, rollback undos optimist update
     onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN, context?.previousData);
+      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
     },
     networkMode: 'always',
   });
@@ -273,7 +253,7 @@ export const useEventAction = () => {
     mutationFn: requestApplyDelay,
     // Mutation finished, failed or successful
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
     },
     networkMode: 'always',
   });
@@ -301,32 +281,30 @@ export const useEventAction = () => {
     // we optimistically update here
     onMutate: async (data) => {
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueryData<GetRundownCached>(RUNDOWN);
+      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
 
-      if (previousData) {
-        // optimistically update object
-        const optimisticRundown = [...previousData.rundown];
-        const [reorderedItem] = optimisticRundown.splice(data.from, 1);
-        optimisticRundown.splice(data.to, 0, reorderedItem);
+      const e = [...(previousEvents as OntimeRundown)];
+      const [reorderedItem] = e.splice(data.from, 1);
+      e.splice(data.to, 0, reorderedItem);
 
-        queryClient.setQueryData(RUNDOWN, { rundown: optimisticRundown, revision: -1 });
-      }
+      // optimistically update object
+      queryClient.setQueryData(RUNDOWN_TABLE, e);
 
       // Return a context with the previous and new events
-      return { previousData };
+      return { previousEvents };
     },
 
     // Mutation fails, rollback undoes optimist update
     onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN, context?.previousData);
+      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
     },
     networkMode: 'always',
   });
@@ -359,32 +337,31 @@ export const useEventAction = () => {
     // we optimistically update here
     onMutate: async ({ from, to }) => {
       // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
 
       // 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 rundown = queryClient.getQueryData(RUNDOWN_TABLE) as OntimeRundown;
 
-        const optimisticRundown = swapOntimeEvents(previousData.rundown, fromEventIndex, toEventIndex);
+      const fromEventIndex = rundown.findIndex((event) => event.id === from);
+      const toEventIndex = rundown.findIndex((event) => event.id === to);
 
-        queryClient.setQueryData(RUNDOWN, { rundown: optimisticRundown, revision: -1 });
-      }
+      const previousEvents = swapOntimeEvents(rundown, fromEventIndex, toEventIndex);
+
+      // optimistically update object
+      queryClient.setQueryData(RUNDOWN_TABLE, previousEvents);
 
       // Return a context with the previous events
-      return { previousData };
+      return { previousEvents };
     },
 
     // Mutation fails, rollback undoes optimist update
     onError: (_error, _eventId, context) => {
-      queryClient.setQueryData(RUNDOWN, context?.previousData);
+      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
     },
     networkMode: 'always',
   });

apps/client/src/common/hooks/useFitText.ts

@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 
 export type TLogLevel = 'debug' | 'info' | 'warn' | 'error' | 'none';
 
@@ -20,13 +26,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(() => {
@@ -106,7 +112,8 @@ 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;
 
@@ -116,7 +123,9 @@ 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({
@@ -151,7 +160,16 @@ 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 };
 };

apps/client/src/common/hooks/useFollowComponent.ts

@@ -21,7 +21,7 @@ interface UseFollowComponentProps {
   scrollRef: MutableRefObject<HTMLElement | null>;
   doFollow: boolean;
   topOffset?: number;
-  setScrollFlag?: (newValue: boolean) => void;
+  setScrollFlag?: () => void;
 }
 
 export default function useFollowComponent(props: UseFollowComponentProps) {
@@ -34,15 +34,14 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
     }
 
     if (followRef.current && scrollRef.current) {
-      setScrollFlag?.(true);
       // Use requestAnimationFrame to ensure the component is fully loaded
       window.requestAnimationFrame(() => {
+        setScrollFlag?.();
         scrollToComponent(
           followRef as MutableRefObject<HTMLElement>,
           scrollRef as MutableRefObject<HTMLElement>,
           topOffset,
         );
-        setScrollFlag?.(false);
       });
     }
 

apps/client/src/common/hooks/useFullscreen.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-nocheck -- working on it
 import { useCallback, useEffect, useState } from 'react';
 
 interface WebkitDocument extends Document {
@@ -44,7 +42,7 @@ export default function useFullscreen() {
         });
       } else if (element.webkitRequestFullscreen) {
         // iOS Safari fullscreen API is supported
-        element.webkitRequestFullscreen?.().catch(() => {
+        element.webkitRequestFullscreen().catch(() => {
           /* nothing to do */
         });
       }
@@ -57,7 +55,7 @@ export default function useFullscreen() {
         });
       } else if ((document as WebkitDocument).webkitExitFullscreen) {
         // iOS Safari fullscreen API is supported
-        (document as WebkitDocument).webkitExitFullscreen?.().catch(() => {
+        (document as WebkitDocument).webkitExitFullscreen().catch(() => {
           /* nothing to do */
         });
       }

apps/client/src/common/hooks/useInterval.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
 
 /**
  * @description utility hook to around setInterval

apps/client/src/common/hooks/useLocalStorage.ts

@@ -1,46 +1,53 @@
-import { useSyncExternalStore } from 'react';
+import { useEffect, useState } from 'react';
 
-const STORAGE_EVENT = 'ontime-storage';
+/**
+ * @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;
+    }
+  });
 
-function getSnapshot(key: string): string | null {
-  try {
-    return window.localStorage.getItem(`ontime-${key}`);
-  } catch {
-    return null;
-  }
-}
+  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 getParsedJson<T>(localStorageValue: string | null, initialValue: T): T {
-  try {
-    return localStorageValue ? JSON.parse(localStorageValue) : initialValue;
-  } catch {
-    return initialValue;
-  }
-}
+    window.addEventListener('storage', handleStorageChange);
 
-export const useLocalStorage = <T>(key: string, initialValue: T) => {
-  const localStorageValue = useSyncExternalStore(subscribe, () => getSnapshot(key));
-  const parsedLocalStorageValue = getParsedJson(localStorageValue, initialValue);
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, [initialValue, key]);
 
   /**
    * @description Set value to local storage
    * @param 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;
+  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;
 
-    localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
-    window.dispatchEvent(new StorageEvent(STORAGE_EVENT));
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.log(error);
+    }
   };
-
-  return [parsedLocalStorageValue, setLocalStorageValue] as const;
+  return [storedValue, setValue];
 };
-
-function subscribe(callback: () => void) {
-  window.addEventListener(STORAGE_EVENT, callback);
-
-  return () => {
-    window.removeEventListener(STORAGE_EVENT, callback);
-  };
-}

apps/client/src/common/hooks/useLongPress.tsx

@@ -1,64 +0,0 @@
-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]);
-}

apps/client/src/common/hooks/useSocket.ts

@@ -5,9 +5,7 @@ import { socketSendJson } from '../utils/socket';
 
 export const useRundownEditor = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.playback,
     selectedEventId: state.loaded.selectedEventId,
-    nextEventId: state.loaded.nextEventId,
   });
 
   return useRuntimeStore(featureSelector, deepCompare);
@@ -27,7 +25,6 @@ export const useMessageControl = () => {
     timerMessage: state.timerMessage,
     publicMessage: state.publicMessage,
     lowerMessage: state.lowerMessage,
-    externalMessage: state.externalMessage,
     onAir: state.onAir,
   });
 
@@ -41,8 +38,6 @@ 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),
@@ -75,15 +70,14 @@ export const setPlayback = {
   reload: () => {
     socketSendJson('reload');
   },
-  addTime: (amount: number) => {
-    socketSendJson('addtime', amount);
+  delay: (amount: number) => {
+    socketSendJson('delay', amount);
   },
 };
 
 export const useInfoPanel = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    eventNow: state.eventNow,
-    eventNext: state.eventNext,
+    titles: state.titles,
     playback: state.playback,
     selectedEventIndex: state.loaded.selectedEventIndex,
     numEvents: state.loaded.numEvents,
@@ -98,7 +92,7 @@ export const useCuesheet = () => {
     selectedEventId: state.loaded.selectedEventId,
     selectedEventIndex: state.loaded.selectedEventIndex,
     numEvents: state.loaded.numEvents,
-    titleNow: state.eventNow?.title || '',
+    titleNow: state.titles.titleNow,
   });
 
   return useRuntimeStore(featureSelector, deepCompare);

apps/client/src/common/models/EventData.ts

@@ -1,6 +1,6 @@
-import { ProjectData } from 'ontime-types';
+import { EventData } from 'ontime-types';
 
-export const projectDataPlaceholder: ProjectData = {
+export const eventDataPlaceholder: EventData = {
   title: '',
   description: '',
   publicUrl: '',

apps/client/src/common/models/Http.ts

@@ -1,13 +1,26 @@
-import { HttpSettings } from 'ontime-types';
-
-export const httpPlaceholder: HttpSettings = {
-  enabledOut: false,
-  subscriptions: {
-    onLoad: [],
-    onStart: [],
-    onUpdate: [],
-    onPause: [],
-    onStop: [],
-    onFinish: [],
+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,
   },
 };

apps/client/src/common/models/Info.ts

@@ -1,25 +1,19 @@
-import { GetInfo, OSCSettings } from 'ontime-types';
+import { Settings } from 'ontime-types';
 
-export const oscPlaceholderSettings: OSCSettings = {
-  portIn: 0,
-  portOut: 0,
-  targetIP: '',
-  enabledIn: false,
-  enabledOut: false,
-  subscriptions: {
-    onLoad: [],
-    onStart: [],
-    onPause: [],
-    onStop: [],
-    onUpdate: [],
-    onFinish: [],
+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 ontimePlaceholderInfo: GetInfo = {
-  networkInterfaces: [],
-  version: '2.0.0',
-  serverPort: 4001,
-  osc: oscPlaceholderSettings,
-  cssOverride: '',
-};

apps/client/src/common/models/OntimeSettings.ts

@@ -2,7 +2,7 @@ import { Settings } from 'ontime-types';
 
 export const ontimePlaceholderSettings: Settings = {
   app: 'ontime',
-  version: '2.0.0',
+  version: 2,
   serverPort: 4001,
   editorKey: null,
   operatorKey: null,

apps/client/src/common/queryClient.ts

@@ -3,7 +3,7 @@ import { QueryClient } from '@tanstack/react-query';
 export const ontimeQueryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: 1000 * 60 * 10, // 10 min
+      cacheTime: 1000 * 60 * 10, // 10 min
     },
   },
 });

apps/client/src/common/stores/runtime.ts

@@ -3,7 +3,7 @@ import { Playback, RuntimeStore } from 'ontime-types';
 import { useStore } from 'zustand';
 import { createStore } from 'zustand/vanilla';
 
-export const runtimeStorePlaceholder: RuntimeStore = {
+export const runtimeStorePlaceholder = {
   timer: {
     clock: 0,
     current: null,
@@ -33,10 +33,6 @@ export const runtimeStorePlaceholder: RuntimeStore = {
     text: '',
     visible: false,
   },
-  externalMessage: {
-    text: '',
-    visible: false,
-  },
   onAir: false,
   loaded: {
     numEvents: 0,
@@ -46,10 +42,26 @@ export const runtimeStorePlaceholder: RuntimeStore = {
     nextEventId: null,
     nextPublicEventId: null,
   },
-  eventNow: null,
-  eventNext: null,
-  publicEventNow: null,
-  publicEventNext: 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,
+  },
 };
 
 export const runtime = createStore<RuntimeStore>(() => ({

apps/client/src/common/utils/__tests__/aliases.test.js

@@ -1,6 +1,5 @@
 import { resolvePath } from 'react-router-dom';
-
-import { generateURLFromAlias, getAliasRoute, validateAlias } from '../aliases';
+import { validateAlias, generateURLFromAlias, getAliasRoute } from '../aliases';
 
 describe('An alias fails if incorrect', () => {
   const testsToFail = [

apps/client/src/common/utils/__tests__/math.test.js

@@ -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));

apps/client/src/common/utils/__tests__/regex.test.ts

@@ -1,4 +1,4 @@
-import { isIPAddress, isOnlyNumbers, startsWithHttp } from '../regex';
+import { isIPAddress, isOnlyNumbers } from '../regex';
 
 describe('simple tests for regex', () => {
   test('isOnlyNumbers', () => {
@@ -24,16 +24,4 @@ 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);
-    });
-  });
 });

apps/client/src/common/utils/__tests__/styleUtils.test.ts

@@ -1,4 +1,4 @@
-import { cx, getAccessibleColour } from '../styleUtils';
+import { cx } from '../styleUtils';
 
 import style from './styleUtils.module.scss';
 
@@ -13,24 +13,3 @@ 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');
-  });
-});

apps/client/src/common/utils/__tests__/time.test.js

@@ -26,14 +26,4 @@ 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');
-  });
 });

apps/client/src/common/utils/aliases.ts

@@ -47,7 +47,7 @@ export const getAliasRoute = (location: Location, data: Alias[], searchParams: U
   const aliasOnPage = searchParams.get('alias');
   for (const d of data) {
     if (aliasOnPage) {
-      // if the alias fits the alias on this page, but the URL is different, we redirect user to the new URL
+      // if the alias fits the alias on this page, but the URL is diferent, we redirect user to the new URL
       // if we have the same alias and its enabled and its not empty
       if (d.alias !== '' && d.enabled && d.alias === aliasOnPage) {
         const newAliasPath = resolvePath(d.pathAndParams);

apps/client/src/common/utils/deviceUtils.ts

@@ -1,6 +0,0 @@
-export function isMacOS() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return userAgent.includes('macintosh') || userAgent.includes('mac os');
-}
-
-export const deviceAlt = isMacOS() ? '⌥' : 'Alt';

apps/client/src/common/utils/fileDownload.ts

@@ -1,56 +0,0 @@
-import axios from 'axios';
-
-import { makeCSV, makeTable } from '../../features/cuesheet/cuesheetUtils';
-
-type FileOptions = {
-  name: string;
-  type: string;
-};
-
-type BlobOptions = {
-  type: string;
-};
-
-export default async function fileDownload(url: string, fileOptions: FileOptions, blobOptions: BlobOptions) {
-  const response = await axios({
-    url: `${url}/db`,
-    method: 'GET',
-  });
-
-  const headerLine = response.headers['Content-Disposition'];
-  let { name: fileName } = fileOptions;
-  const { type: fileType } = fileOptions;
-  const { project, rundown, userFields } = response.data;
-
-  // 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);
-  }
-
-  let fileContent = '';
-
-  if (fileType === 'json') {
-    fileContent = JSON.stringify(response.data);
-    fileName += '.json';
-  }
-
-  if (fileType === 'csv') {
-    const sheetData = makeTable(project, rundown, userFields);
-    fileContent = makeCSV(sheetData);
-    fileName += '.csv';
-  }
-
-  const blob = new Blob([fileContent], { type: blobOptions.type });
-  const downloadUrl = URL.createObjectURL(blob);
-
-  const link = document.createElement('a');
-  link.setAttribute('href', downloadUrl);
-  link.setAttribute('download', fileName);
-  document.body.appendChild(link);
-  link.click();
-  // Clean up the URL.createObjectURL to release resources
-  URL.revokeObjectURL(downloadUrl);
-  return;
-}

apps/client/src/common/utils/regex.ts

@@ -1,3 +1,2 @@
 export const isOnlyNumbers = /^\d+$/;
 export const isIPAddress = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/;
-export const startsWithHttp = /^http:\/\//;

apps/client/src/common/utils/socket.ts

@@ -87,6 +87,18 @@ export const connectSocket = (preferredClientName?: string) => {
           runtime.setState(state);
           break;
         }
+        case 'ontime-titles': {
+          const state = runtime.getState();
+          state.titles = payload;
+          runtime.setState(state);
+          break;
+        }
+        case 'ontime-titlesPublic': {
+          const state = runtime.getState();
+          state.titlesPublic = payload;
+          runtime.setState(state);
+          break;
+        }
         case 'ontime-timerMessage': {
           const state = runtime.getState();
           state.timerMessage = payload;
@@ -129,7 +141,7 @@ export const socketSend = (message: any) => {
   }
 };
 
-export const socketSendJson = (type: string, payload?: unknown) => {
+export const socketSendJson = (type: string, payload?: any) => {
   socketSend(
     JSON.stringify({
       type,

apps/client/src/common/utils/styleUtils.ts

@@ -10,18 +10,16 @@ type ColourCombination = {
  * @param bgColour
  * @return {{backgroundColor, color: string}}
  */
-export const getAccessibleColour = (bgColour?: string): ColourCombination => {
+export const getAccessibleColour = (bgColour: string): ColourCombination => {
   if (bgColour) {
     try {
-      const originalColour = Color(bgColour);
-      const backgroundColorMix = originalColour.alpha(1).mix(Color('#1a1a1a'), 1 - originalColour.alpha());
-      const textColor = backgroundColorMix.isLight() ? 'black' : '#fffffa';
-      return { backgroundColor: backgroundColorMix.hexa(), color: textColor };
-    } catch (_error) {
-      /* we do not handle errors here */
+      const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa';
+      return { backgroundColor: bgColour, color: textColor };
+    } catch (error) {
+      console.log(`Unable to parse colour: ${bgColour}`);
     }
   }
-  return { backgroundColor: '#1a1a1a', color: '#fffffa' };
+  return { backgroundColor: '#000', color: '#fffffa' };
 };
 
 /**

apps/client/src/common/utils/timesManager.ts

@@ -1 +1,44 @@
 export type TimeEntryField = 'timeStart' | 'timeEnd' | 'durationOverride';
+
+/**
+ * @description Checks which field the value relates to
+ */
+export const handleTimeEntry = (
+  field: TimeEntryField,
+  val: number,
+  timeStart: number,
+  timeEnd: number,
+): { start: number; end: number; durationOverride: boolean } => {
+  let start = timeStart;
+  let end = timeEnd;
+  let durationOverride = false;
+
+  if (field === 'timeStart') {
+    start = val;
+  } else if (field === 'timeEnd') {
+    end = val;
+  } else {
+    durationOverride = field === 'durationOverride';
+  }
+  return { start, end, durationOverride };
+};
+
+/**
+ * @description Validates time entry
+ */
+export const validateEntry = (
+  field: TimeEntryField,
+  value: number,
+  timeStart: number,
+  timeEnd: number,
+): { value: boolean; warnings: { start?: string; end?: string; duration?: string } } => {
+  const validate = { value: true, warnings: { start: '', end: '', duration: '' } };
+
+  const { start, end } = handleTimeEntry(field, value, timeStart, timeEnd);
+
+  if (end < start) {
+    validate.warnings.start = 'Start time later than end time';
+  }
+
+  return validate;
+};

apps/client/src/declarations/declaration.d.ts

@@ -13,8 +13,9 @@ declare global {
     };
     process: {
       type: string;
-    };
+    }
   }
 }
 
-export default {};
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {}

apps/client/src/declarations/test.d.ts

@@ -6,6 +6,6 @@ import 'vitest';
 // https://github.com/testing-library/jest-dom/issues/123
 declare global {
   namespace Vi {
-    type Assertion<T = any> = TestingLibraryMatchers<T, void>;
+    interface Assertion<T = any> extends TestingLibraryMatchers<T, void> {}
   }
 }

apps/client/src/features/AliasWrapper.tsx

@@ -22,7 +22,7 @@ const withAlias = <P extends object>(Component: ComponentType<P>) => {
       }
     }, [data, searchParams, navigate, location]);
 
-    return <Component {...(props as P)} />;
+    return <Component {...props} />;
   };
 };
 

apps/client/src/features/control/message/InputRow.tsx

@@ -1,4 +1,4 @@
-import { IconButton, Input } from '@chakra-ui/react';
+import { Input } from '@chakra-ui/react';
 import { IoEye } from '@react-icons/all-files/io5/IoEye';
 import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline';
 
@@ -13,14 +13,13 @@ interface InputRowProps {
   placeholder: string;
   text: string;
   visible?: boolean;
-  readonly?: boolean;
   actionHandler: (action: string, payload: object) => void;
   changeHandler: (newValue: string) => void;
   className?: string;
 }
 
 export default function InputRow(props: InputRowProps) {
-  const { label, placeholder, text, visible, actionHandler, changeHandler, className, readonly } = props;
+  const { label, placeholder, text, visible, actionHandler, changeHandler, className } = props;
 
   const handleInputChange = (newValue: string) => {
     changeHandler(newValue);
@@ -34,31 +33,19 @@ export default function InputRow(props: InputRowProps) {
         <Input
           size='sm'
           variant='ontime-filled'
-          readOnly={readonly}
-          disabled={readonly}
           value={text}
           onChange={(event) => handleInputChange(event.target.value)}
           placeholder={placeholder}
         />
-        {readonly ? (
-          <IconButton
-            size='sm'
-            isDisabled
-            icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-            aria-label={`Toggle ${label}`}
-            variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-          />
-        ) : (
-          <TooltipActionBtn
-            clickHandler={() => actionHandler('update', { field: 'isPublic', value: !visible })}
-            tooltip={visible ? 'Make invisible' : 'Make visible'}
-            aria-label={`Toggle ${label}`}
-            openDelay={tooltipDelayMid}
-            icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-            variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-            size='sm'
-          />
-        )}
+        <TooltipActionBtn
+          clickHandler={() => actionHandler('update', { field: 'isPublic', value: !visible })}
+          tooltip={visible ? 'Make invisible' : 'Make visible'}
+          aria-label={`Toggle ${label}`}
+          openDelay={tooltipDelayMid}
+          icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
+          variant={visible ? 'ontime-filled' : 'ontime-subtle'}
+          size='sm'
+        />
       </div>
     </div>
   );

apps/client/src/features/control/message/MessageControl.module.scss

@@ -27,3 +27,7 @@
     color: $action-text-color;
   }
 }
+
+.padTop {
+  margin-top: $section-spacing;
+}

apps/client/src/features/control/message/MessageControl.tsx

@@ -34,48 +34,34 @@ export default function MessageControl() {
         actionHandler={() => setMessage.lowerVisible(!data.lowerMessage.visible)}
       />
       <InputRow
-        label='Timer'
-        placeholder='Message shown in stage timer'
+        label='Timer message'
+        placeholder='Shown in stage timer'
         text={data.timerMessage.text || ''}
         visible={data.timerMessage.visible || false}
         changeHandler={(newValue) => setMessage.presenterText(newValue)}
         actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)}
       />
       <div className={style.buttonSection}>
+        <label className={style.label}>Timer messsage blink</label>
+        <label className={style.label}>Blackout timer screens</label>
         <Button
-          size='sm'
           className={`${data.timerMessage.timerBlink ? style.blink : ''}`}
           variant={data.timerMessage.timerBlink ? 'ontime-filled' : 'ontime-subtle'}
-          leftIcon={data.timerMessage.timerBlink ? <IoSunny size='1rem' /> : <IoSunnyOutline size='1rem' />}
+          leftIcon={data.timerMessage.timerBlink ? <IoSunny size='24px' /> : <IoSunnyOutline size='24px' />}
           onClick={() => setMessage.timerBlink(!data.timerMessage.timerBlink)}
           data-testid='toggle timer blink'
-        >
-          Blink message
-        </Button>
+        />
         <Button
-          size='sm'
           className={style.blackoutButton}
           variant={data.timerMessage.timerBlackout ? 'ontime-filled' : 'ontime-subtle'}
-          leftIcon={data.timerMessage.timerBlackout ? <IoEye size='1rem' /> : <IoEyeOffOutline size='1rem' />}
+          leftIcon={data.timerMessage.timerBlackout ? <IoEye size='24px' /> : <IoEyeOffOutline size='24px' />}
           onClick={() => setMessage.timerBlackout(!data.timerMessage.timerBlackout)}
           data-testid='toggle timer blackout'
-        >
-          Blackout screen
-        </Button>
+        />
       </div>
-      <InputRow
-        label='External Message'
-        placeholder='-'
-        readonly
-        text={data.externalMessage.text || ''}
-        visible={data.externalMessage.visible || false}
-        changeHandler={() => undefined}
-        actionHandler={() => undefined}
-      />
-      <div className={style.onAirSection}>
+      <div className={`${style.onAirSection} ${style.padTop}`}>
         <label className={style.label}>Toggle On Air state</label>
         <Button
-          size='sm'
           variant={data.onAir ? 'ontime-filled' : 'ontime-subtle'}
           leftIcon={data.onAir ? <IoMicSharp size='24px' /> : <IoMicOffOutline size='24px' />}
           onClick={() => setMessage.onAir(!data.onAir)}

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -86,22 +86,22 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
       )}
       <div className={style.btn}>
         <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.addTime(-60)} disabled={disableButtons} aspect='square'>
+          <TapButton onClick={() => setPlayback.delay(-1)} disabled={disableButtons} aspect='square'>
             -1
           </TapButton>
         </Tooltip>
         <Tooltip label='Add 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.addTime(60)} disabled={disableButtons} aspect='square'>
+          <TapButton onClick={() => setPlayback.delay(1)} disabled={disableButtons} aspect='square'>
             +1
           </TapButton>
         </Tooltip>
         <Tooltip label='Remove 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.addTime(-5 * 60)} disabled={disableButtons} aspect='square'>
+          <TapButton onClick={() => setPlayback.delay(-5)} disabled={disableButtons} aspect='square'>
             -5
           </TapButton>
         </Tooltip>
         <Tooltip label='Add 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
-          <TapButton onClick={() => setPlayback.addTime(+5 * 60)} disabled={disableButtons} aspect='square'>
+          <TapButton onClick={() => setPlayback.delay(+5)} disabled={disableButtons} aspect='square'>
             +5
           </TapButton>
         </Tooltip>

apps/client/src/features/cuesheet/Cuesheet.module.scss

@@ -44,11 +44,6 @@ $table-header-font-size: calc(1rem - 3px);
     min-width: 2rem;
     text-align: right;
     font-weight: 400;
-
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    background-color: $gray-1300;
   }
 }
 
@@ -66,11 +61,6 @@ $table-header-font-size: calc(1rem - 3px);
 .eventRow {
   vertical-align: top;
 
-  &:hover {
-    outline: 1px solid $blue-700;
-    outline-offset: -1px;
-  }
-
   td {
     background-color: $gray-1250;
     border-radius: 2px;

apps/client/src/features/cuesheet/Cuesheet.tsx

@@ -1,22 +1,34 @@
 import { useRef } from 'react';
+import { Tooltip } from '@chakra-ui/react';
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { horizontalListSortingStrategy, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import Color from 'color';
 import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
 
 import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useLocalStorage } from '../../common/hooks/useLocalStorage';
+import { millisToDelayString } from '../../common/utils/dateConfig';
 import { getAccessibleColour } from '../../common/utils/styleUtils';
+import { tooltipDelayFast } from '../../ontimeConfig';
 
-import BlockRow from './cuesheet-table-elements/BlockRow';
-import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
-import DelayRow from './cuesheet-table-elements/DelayRow';
-import EventRow from './cuesheet-table-elements/EventRow';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
 import { useCuesheetSettings } from './store/CuesheetSettings';
+import { SortableCell } from './tableElements/SortableCell';
 import { initialColumnOrder } from './cuesheetCols';
 
 import style from './Cuesheet.module.scss';
 
+const pastOpacity = '0.2';
+
 interface CuesheetProps {
   data: OntimeRundown;
   columns: ColumnDef<OntimeRundownEntry>[];
@@ -25,7 +37,10 @@ interface CuesheetProps {
 }
 
 export default function Cuesheet({ data, columns, handleUpdate, selectedId }: CuesheetProps) {
-  const { followSelected, showSettings, showDelayBlock, showPrevious } = useCuesheetSettings();
+  const followSelected = useCuesheetSettings((state) => state.followSelected);
+  const showSettings = useCuesheetSettings((state) => state.showSettings);
+  const showDelayBlock = useCuesheetSettings((state) => state.showDelayBlock);
+  const showPrevious = useCuesheetSettings((state) => state.showPrevious);
 
   const [columnVisibility, setColumnVisibility] = useLocalStorage('table-hidden', {});
   const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>('table-order', initialColumnOrder);
@@ -52,6 +67,49 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
     getCoreRowModel: getCoreRowModel(),
   });
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 50,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 50,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleOnDragEnd = (event: DragEndEvent) => {
+    const { delta, active, over } = event;
+
+    // cancel if delta y is greater than 200
+    if (delta.y > 200) return;
+    // cancel if we do not have an over id
+    if (over?.id == null) return;
+
+    // get index of from
+    const fromIndex = columnOrder.indexOf(active.id as string);
+
+    // get index of to
+    const toIndex = columnOrder.indexOf(over.id as string);
+
+    if (toIndex === -1) {
+      return;
+    }
+
+    const reorderedCols = [...columnOrder];
+    const reorderedItem = reorderedCols.splice(fromIndex, 1);
+    reorderedCols.splice(toIndex, 0, reorderedItem[0]);
+
+    saveColumnOrder(reorderedCols);
+  };
+
   const resetColumnOrder = () => {
     saveColumnOrder(initialColumnOrder);
   };
@@ -64,10 +122,6 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
     setColumnSizing({});
   };
 
-  const headerGroups = table.getHeaderGroups();
-  const rowModel = table.getRowModel();
-  const allLeafColumns = table.getAllLeafColumns();
-
   let eventIndex = 0;
   let isPast = Boolean(selectedId);
 
@@ -75,7 +129,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
     <>
       {showSettings && (
         <CuesheetTableSettings
-          columns={allLeafColumns}
+          columns={table.getAllLeafColumns()}
           handleResetResizing={resetColumnResizing}
           handleResetReordering={resetColumnOrder}
           handleClearToggles={setAllVisible}
@@ -83,9 +137,39 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
       )}
       <div ref={tableContainerRef} className={style.cuesheetContainer}>
         <table className={style.cuesheet}>
-          <CuesheetHeader headerGroups={headerGroups} />
+          <thead className={style.tableHeader}>
+            {table.getHeaderGroups().map((headerGroup) => {
+              const key = headerGroup.id;
+
+              return (
+                <DndContext key={key} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleOnDragEnd}>
+                  <tr key={headerGroup.id}>
+                    <th className={style.indexColumn}>
+                      <Tooltip label='Event Order' openDelay={tooltipDelayFast}>
+                        #
+                      </Tooltip>
+                    </th>
+                    <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
+                      {headerGroup.headers.map((header) => {
+                        const width = header.getSize();
+
+                        return (
+                          <SortableCell key={header.column.columnDef.id} header={header} style={{ width }}>
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(header.column.columnDef.header, header.getContext())}
+                          </SortableCell>
+                        );
+                      })}
+                    </SortableContext>
+                  </tr>
+                </DndContext>
+              );
+            })}
+          </thead>
+
           <tbody>
-            {rowModel.rows.map((row) => {
+            {table.getRowModel().rows.map((row) => {
               const key = row.original.id;
               const isSelected = selectedId === key;
               if (isSelected) {
@@ -93,7 +177,13 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
               }
 
               if (isOntimeBlock(row.original)) {
-                return <BlockRow key={key} title={row.original.title} />;
+                const title = row.original.title;
+
+                return (
+                  <tr key={key} className={style.blockRow}>
+                    <td>{title}</td>
+                  </tr>
+                );
               }
               if (isOntimeDelay(row.original)) {
                 const delayVal = row.original.duration;
@@ -102,7 +192,12 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                   return null;
                 }
 
-                return <DelayRow key={key} duration={delayVal} />;
+                const delayTime = millisToDelayString(delayVal);
+                return (
+                  <tr key={key} className={style.delayRow}>
+                    <td>{delayTime}</td>
+                  </tr>
+                );
               }
               if (isOntimeEvent(row.original)) {
                 eventIndex++;
@@ -115,28 +210,25 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                   return null;
                 }
 
-                let rowBgColour: string | undefined;
-                if (isSelected) {
-                  rowBgColour = 'var(--cuesheet-running-bg-override, #D20300)'; // $red-700
-                } else if (row.original.colour) {
-                  try {
-                    // the colour is user defined and might be invalid
-                    const accessibleBackgroundColor = Color(getAccessibleColour(row.original.colour).backgroundColor);
-                    rowBgColour = accessibleBackgroundColor.fade(0.75).hexa();
-                  } catch (_error) {
-                    /* we do not handle errors here */
-                  }
-                }
+                const bgFallback = 'transparent';
+                const bgColour = row.original.colour || bgFallback;
+                const textColour = bgColour === bgFallback ? undefined : getAccessibleColour(bgColour);
+                const isSkipped = row.original.skip;
 
+                let rowBgColour: string | undefined;
+                if (row.original.id === selectedId) {
+                  rowBgColour = '#D20300'; // $red-700
+                }
                 return (
-                  <EventRow
+                  <tr
                     key={key}
-                    eventIndex={eventIndex}
-                    isPast={isPast}
-                    selectedRef={isSelected ? selectedRef : undefined}
-                    skip={row.original.skip}
-                    colour={row.original.colour}
+                    className={`${style.eventRow} ${isSkipped ? style.skip : ''}`}
+                    style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
+                    ref={isSelected ? selectedRef : undefined}
                   >
+                    <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour?.color }}>
+                      {eventIndex}
+                    </td>
                     {row.getVisibleCells().map((cell) => {
                       return (
                         <td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
@@ -144,7 +236,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                         </td>
                       );
                     })}
-                  </EventRow>
+                  </tr>
                 );
               }
 

apps/client/src/features/cuesheet/CuesheetWrapper.module.scss

@@ -19,6 +19,6 @@
 
   & > * {
     border: 1px solid $white-10;
-    border-radius: 3px;
+    border-radius: 4px;
   }
 }

apps/client/src/features/cuesheet/CuesheetWrapper.tsx

@@ -1,14 +1,12 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { OntimeRundownEntry, ProjectData } from 'ontime-types';
+import { useCallback, useEffect, useMemo } from 'react';
+import { EventData, OntimeRundownEntry } from 'ontime-types';
 
 import Empty from '../../common/components/state/Empty';
 import { useEventAction } from '../../common/hooks/useEventAction';
 import { useCuesheet } from '../../common/hooks/useSocket';
 import useRundown from '../../common/hooks-query/useRundown';
 import useUserFields from '../../common/hooks-query/useUserFields';
-import ExportModal, { ExportType } from '../modals/export-modal/ExportModal';
 
-import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
 import CuesheetTableHeader from './cuesheet-table-header/CuesheetTableHeader';
 import Cuesheet from './Cuesheet';
 import { makeCuesheetColumns } from './cuesheetCols';
@@ -22,8 +20,6 @@ export default function CuesheetWrapper() {
   const { updateEvent } = useEventAction();
   const featureData = useCuesheet();
   const columns = useMemo(() => makeCuesheetColumns(userFields), [userFields]);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [headerData, setheaderData] = useState<ProjectData | null>(null);
 
   // Set window title
   useEffect(() => {
@@ -73,77 +69,37 @@ export default function CuesheetWrapper() {
   );
 
   const exportHandler = useCallback(
-    (headerData: ProjectData, exportType: ExportType) => {
+    (headerData: EventData) => {
       if (!headerData || !rundown || !userFields) {
         return;
       }
 
-      let fileName = '';
-      let url = '';
+      const sheetData = makeTable(headerData, rundown, userFields);
+      const csvContent = makeCSV(sheetData);
 
-      if (exportType === 'json') {
-        const jsonContent = JSON.stringify({
-          headerData,
-          rundown,
-          userFields,
-        });
-
-        fileName = 'ontime export.json';
-
-        const blob = new Blob([jsonContent], { type: 'application/json;charset=utf-8;' });
-        url = URL.createObjectURL(blob);
-      } else if (exportType === 'csv') {
-        const sheetData = makeTable(headerData, rundown, userFields);
-        const csvContent = makeCSV(sheetData);
-
-        fileName = 'ontime export.csv';
-
-        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-        url = URL.createObjectURL(blob);
-      } else {
-        console.error('Invalid export type: ', exportType);
-        return;
-      }
+      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
 
       const link = document.createElement('a');
       link.setAttribute('href', url);
-      link.setAttribute('download', fileName);
+      link.setAttribute('download', 'ontime export.csv');
       document.body.appendChild(link);
       link.click();
+
       // Clean up the URL.createObjectURL to release resources
       URL.revokeObjectURL(url);
-      return;
     },
     [rundown, userFields],
   );
 
-  const onModalClose = (exportType?: ExportType) => {
-    setIsModalOpen(false);
-
-    if (!exportType) {
-      return;
-    }
-
-    if (headerData) {
-      exportHandler(headerData, exportType);
-    }
-  };
-
-  const handleOpenModal = (projectData: ProjectData) => {
-    setheaderData(projectData);
-    setIsModalOpen(true);
-  };
-
   if (!rundown || !userFields) {
     return <Empty text='Loading...' />;
   }
 
   return (
     <div className={styles.tableWrapper} data-testid='cuesheet'>
-      <CuesheetTableHeader handleExport={handleOpenModal} featureData={featureData} />
-      <CuesheetProgress />
+      <CuesheetTableHeader handleCSVExport={exportHandler} featureData={featureData} />
       <Cuesheet data={rundown} columns={columns} handleUpdate={handleUpdate} selectedId={featureData.selectedEventId} />
-      <ExportModal isOpen={isModalOpen} onClose={onModalClose} />
     </div>
   );
 }

apps/client/src/features/cuesheet/__tests__/__snapshots__/utils.test.js.snap

@@ -6,11 +6,7 @@ exports[`makeTable() > returns array of arrays with given fields 1`] = `
     "Ontime · Schedule Template",
   ],
   [
-    "Project Title",
-    "",
-  ],
-  [
-    "Project Description",
+    "Event Name",
     "",
   ],
   [

apps/client/src/features/cuesheet/__tests__/utils.test.js

@@ -26,7 +26,7 @@ describe('parseField()', () => {
   });
 
   it('returns an empty string on undefined fields', () => {
-    expect(parseField('presenter')).toBe('');
+    expect(parseField('presenter', undefined)).toBe('');
   });
 
   describe('simply returns any other value in any other field', () => {

apps/client/src/features/cuesheet/cuesheet-progress/CuesheetProgress.module.scss

@@ -1,3 +0,0 @@
-.progressOverride {
-    height: 1rem;
-}

apps/client/src/features/cuesheet/cuesheet-progress/CuesheetProgress.tsx

@@ -1,24 +0,0 @@
-import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
-import { useTimer } from '../../../common/hooks/useSocket';
-import useViewSettings from '../../../common/hooks-query/useViewSettings';
-
-import styles from "./CuesheetProgress.module.scss"
-
-export default function CuesheetProgress() {
-  const { data } = useViewSettings();
-  const timer = useTimer();
-  const totalTime = (timer.duration ?? 0) + (timer.addedTime ?? 0);
-
-  return (
-    <MultiPartProgressBar
-      now={timer.current}
-      complete={totalTime}
-      normalColor={data!.normalColor}
-      warning={data!.warningThreshold}
-      warningColor={data!.warningColor}
-      danger={data!.dangerThreshold}
-      dangerColor={data!.dangerColor}
-      className={styles.progressOverride}
-    />
-  );
-}

apps/client/src/features/cuesheet/cuesheet-table-elements/BlockRow.tsx

@@ -1,18 +0,0 @@
-import { memo } from 'react';
-
-import style from '../Cuesheet.module.scss';
-
-interface BlockRowProps {
-  title: string;
-}
-
-function BlockRow(props: BlockRowProps) {
-  const { title } = props;
-  return (
-    <tr className={style.blockRow}>
-      <td>{title}</td>
-    </tr>
-  );
-}
-
-export default memo(BlockRow);

apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetHeader.tsx

@@ -1,108 +0,0 @@
-import { memo } from 'react';
-import { Tooltip } from '@chakra-ui/react';
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import { horizontalListSortingStrategy, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { flexRender, HeaderGroup } from '@tanstack/react-table';
-import { OntimeRundownEntry } from 'ontime-types';
-
-import { useLocalStorage } from '../../../common/hooks/useLocalStorage';
-import { tooltipDelayFast } from '../../../ontimeConfig';
-import { initialColumnOrder } from '../cuesheetCols';
-
-import { SortableCell } from './SortableCell';
-
-import style from '../Cuesheet.module.scss';
-
-interface CuesheetHeaderProps {
-  headerGroups: HeaderGroup<OntimeRundownEntry>[];
-}
-
-function CuesheetHeader(props: CuesheetHeaderProps) {
-  const { headerGroups } = props;
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>('table-order', initialColumnOrder);
-
-  const handleOnDragEnd = (event: DragEndEvent) => {
-    const { delta, active, over } = event;
-
-    // cancel if delta y is greater than 200
-    if (delta.y > 200) return;
-    // cancel if we do not have an over id
-    if (over?.id == null) return;
-
-    // get index of from
-    const fromIndex = columnOrder.indexOf(active.id as string);
-
-    // get index of to
-    const toIndex = columnOrder.indexOf(over.id as string);
-
-    if (toIndex === -1) {
-      return;
-    }
-
-    const reorderedCols = [...columnOrder];
-    const reorderedItem = reorderedCols.splice(fromIndex, 1);
-    reorderedCols.splice(toIndex, 0, reorderedItem[0]);
-
-    saveColumnOrder(reorderedCols);
-  };
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        delay: 100,
-        tolerance: 50,
-      },
-    }),
-    useSensor(TouchSensor, {
-      activationConstraint: {
-        delay: 100,
-        tolerance: 50,
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  return (
-    <thead className={style.tableHeader}>
-      {headerGroups.map((headerGroup) => {
-        const key = headerGroup.id;
-
-        return (
-          <DndContext key={key} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleOnDragEnd}>
-            <tr key={headerGroup.id}>
-              <th className={style.indexColumn}>
-                <Tooltip label='Event Order' openDelay={tooltipDelayFast}>
-                  #
-                </Tooltip>
-              </th>
-              <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
-                {headerGroup.headers.map((header) => {
-                  const width = header.getSize();
-
-                  return (
-                    <SortableCell key={header.column.columnDef.id} header={header} style={{ width }}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </SortableCell>
-                  );
-                })}
-              </SortableContext>
-            </tr>
-          </DndContext>
-        );
-      })}
-    </thead>
-  );
-}
-
-export default memo(CuesheetHeader);

apps/client/src/features/cuesheet/cuesheet-table-elements/DelayRow.tsx

@@ -1,22 +0,0 @@
-import { memo } from 'react';
-
-import { millisToDelayString } from '../../../common/utils/dateConfig';
-
-import style from '../Cuesheet.module.scss';
-
-interface DelayRowProps {
-  duration: number;
-}
-
-function DelayRow(props: DelayRowProps) {
-  const { duration } = props;
-  const delayTime = millisToDelayString(duration);
-
-  return (
-    <tr className={style.delayRow}>
-      <td>{delayTime}</td>
-    </tr>
-  );
-}
-
-export default memo(DelayRow);

apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx

@@ -1,66 +0,0 @@
-import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
-
-import { getAccessibleColour } from '../../../common/utils/styleUtils';
-
-import style from '../Cuesheet.module.scss';
-
-const pastOpacity = '0.2';
-
-interface EventRowProps {
-  eventIndex: number;
-  isPast?: boolean;
-  selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
-  skip?: boolean;
-  colour?: string;
-}
-
-function EventRow(props: PropsWithChildren<EventRowProps>) {
-  const { children, eventIndex, isPast, selectedRef, skip, colour } = props;
-  const ownRef = useRef<HTMLTableRowElement>(null);
-  const [isVisible, setIsVisible] = useState(false);
-
-  const textColour = getAccessibleColour(colour);
-  const bgColour = textColour.backgroundColor;
-
-  useLayoutEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-        }
-      },
-      {
-        root: null,
-        threshold: 0.01,
-      },
-    );
-
-    const handleRefCurrent = ownRef.current;
-    if (selectedRef) {
-      setIsVisible(true);
-    } else if (handleRefCurrent) {
-      observer.observe(handleRefCurrent);
-    }
-
-    return () => {
-      if (handleRefCurrent) {
-        observer.unobserve(handleRefCurrent);
-      }
-    };
-  }, [ownRef, selectedRef]);
-
-  return (
-    <tr
-      className={`${style.eventRow} ${skip ? style.skip : ''}`}
-      style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
-      ref={selectedRef ?? ownRef}
-    >
-      <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour.color }}>
-        {eventIndex}
-      </td>
-      {isVisible ? children : null}
-    </tr>
-  );
-}
-
-export default memo(EventRow);

apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx

@@ -3,20 +3,21 @@ import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 import { IoLocate } from '@react-icons/all-files/io5/IoLocate';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
-import { Playback, ProjectData } from 'ontime-types';
+import { EventData, Playback } from 'ontime-types';
+import { formatDisplay } from 'ontime-utils';
 
 import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
 import useFullscreen from '../../../common/hooks/useFullscreen';
-import useProjectData from '../../../common/hooks-query/useProjectData';
+import { useTimer } from '../../../common/hooks/useSocket';
+import useEventData from '../../../common/hooks-query/useEventData';
+import { formatTime } from '../../../common/utils/time';
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { useCuesheetSettings } from '../store/CuesheetSettings';
 
-import CuesheetTableHeaderTimers from './CuesheetTableHeaderTimers';
-
 import style from './CuesheetTableHeader.module.scss';
 
 interface CuesheetTableHeaderProps {
-  handleExport: (headerData: ProjectData) => void;
+  handleCSVExport: (headerData: EventData) => void;
   featureData: {
     playback: Playback;
     selectedEventIndex: number | null;
@@ -25,17 +26,18 @@ interface CuesheetTableHeaderProps {
   };
 }
 
-export default function CuesheetTableHeader({ handleExport, featureData }: CuesheetTableHeaderProps) {
+export default function CuesheetTableHeader({ handleCSVExport, featureData }: CuesheetTableHeaderProps) {
   const followSelected = useCuesheetSettings((state) => state.followSelected);
   const showSettings = useCuesheetSettings((state) => state.showSettings);
   const toggleSettings = useCuesheetSettings((state) => state.toggleSettings);
   const toggleFollow = useCuesheetSettings((state) => state.toggleFollow);
+  const timer = useTimer();
   const { isFullScreen, toggleFullScreen } = useFullscreen();
-  const { data: project } = useProjectData();
+  const { data: event } = useEventData();
 
-  const exportProject = () => {
-    if (project) {
-      handleExport(project);
+  const exportCsv = () => {
+    if (event) {
+      handleCSVExport(event);
     }
   };
 
@@ -45,17 +47,32 @@ export default function CuesheetTableHeader({ handleExport, featureData }: Cuesh
         featureData.numEvents ? featureData.numEvents : '-'
       }`;
 
+  // prepare presentation variables
+  const isOvertime = (timer.current ?? 0) < 0;
+  const timerNow = timer.current == null ? '-' : `${isOvertime ? '-' : ''}${formatDisplay(timer.current)}`;
+  const timeNow = formatTime(timer.clock, {
+    showSeconds: true,
+    format: 'hh:mm:ss a',
+  });
+
   return (
     <div className={style.header}>
       <div className={style.event}>
-        <div className={style.title}>{project?.title || '-'}</div>
+        <div className={style.title}>{event?.title || '-'}</div>
         <div className={style.eventNow}>{featureData?.titleNow || '-'}</div>
       </div>
       <div className={style.playback}>
         <div className={style.playbackLabel}>{selected}</div>
         <PlaybackIcon state={featureData.playback} />
       </div>
-      <CuesheetTableHeaderTimers />
+      <div className={style.timer}>
+        <div className={style.timerLabel}>Running Timer</div>
+        <div className={style.value}>{timerNow}</div>
+      </div>
+      <div className={style.clock}>
+        <div className={style.clockLabel}>Time Now</div>
+        <div className={style.value}>{timeNow}</div>
+      </div>
       <div className={style.headerActions}>
         <Tooltip openDelay={tooltipDelayFast} label='Toggle follow'>
           <span onClick={() => toggleFollow()} className={`${style.actionIcon} ${followSelected ? style.enabled : ''}`}>
@@ -72,9 +89,9 @@ export default function CuesheetTableHeader({ handleExport, featureData }: Cuesh
             {isFullScreen ? <IoContract /> : <IoExpand />}
           </span>
         </Tooltip>
-        <Tooltip openDelay={tooltipDelayFast} label='Export rundown'>
-          <span className={style.actionIcon} onClick={exportProject}>
-            Export
+        <Tooltip openDelay={tooltipDelayFast} label='Export rundown to CSV'>
+          <span className={style.actionIcon} onClick={exportCsv}>
+            CSV
           </span>
         </Tooltip>
       </div>

apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeaderTimers.tsx

@@ -1,31 +0,0 @@
-import { formatDisplay } from 'ontime-utils';
-
-import { useTimer } from '../../../common/hooks/useSocket';
-import { formatTime } from '../../../common/utils/time';
-
-import style from './CuesheetTableHeader.module.scss';
-
-export default function CuesheetTableHeaderTimers() {
-  const timer = useTimer();
-
-  // prepare presentation variables
-  const isOvertime = (timer.current ?? 0) < 0;
-  const timerNow = timer.current == null ? '-' : `${isOvertime ? '-' : ''}${formatDisplay(timer.current)}`;
-  const timeNow = formatTime(timer.clock, {
-    showSeconds: true,
-    format: 'hh:mm:ss a',
-  });
-
-  return (
-    <>
-      <div className={style.timer}>
-        <div className={style.timerLabel}>Running Timer</div>
-        <div className={style.value}>{timerNow}</div>
-      </div>
-      <div className={style.clock}>
-        <div className={style.clockLabel}>Time Now</div>
-        <div className={style.value}>{timeNow}</div>
-      </div>
-    </>
-  );
-}

apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx

@@ -1,4 +1,3 @@
-import { memo, ReactNode } from 'react';
 import { Button, Checkbox, Switch } from '@chakra-ui/react';
 import { Column } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
@@ -20,16 +19,14 @@ interface CuesheetTableSettingsProps {
   handleClearToggles: () => void;
 }
 
-function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
+export default function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
   const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props;
-  const {
-    showPrevious,
-    toggleDelayVisibility,
-    showDelayBlock,
-    showDelayedTimes,
-    toggleDelayedTimes,
-    togglePreviousVisibility,
-  } = useCuesheetSettings();
+  const showPrevious = useCuesheetSettings((state) => state.showPrevious);
+  const togglePreviousVisibility = useCuesheetSettings((state) => state.togglePreviousVisibility);
+  const showDelayBlock = useCuesheetSettings((state) => state.showDelayBlock);
+  const toggleDelayVisibility = useCuesheetSettings((state) => state.toggleDelayVisibility);
+  const showDelayedTimes = useCuesheetSettings((state) => state.showDelayedTimes);
+  const toggleDelayedTimes = useCuesheetSettings((state) => state.toggleDelayedTimes);
 
   return (
     <div className={style.tableSettings}>
@@ -46,7 +43,7 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
                   defaultChecked={visible}
                   onChange={column.getToggleVisibilityHandler()}
                 />
-                {columnHeader as ReactNode}
+                {columnHeader}
               </label>
             );
           })}
@@ -84,5 +81,3 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
     </div>
   );
 }
-
-export default memo(CuesheetTableSettings);

apps/client/src/features/cuesheet/cuesheetCols.tsx

@@ -6,8 +6,8 @@ import { millisToString } from 'ontime-utils';
 
 import DelayIndicator from '../../common/components/delay-indicator/DelayIndicator';
 
-import EditableCell from './cuesheet-table-elements/EditableCell';
 import { useCuesheetSettings } from './store/CuesheetSettings';
+import EditableCell from './tableElements/EditableCell';
 
 import style from './Cuesheet.module.scss';
 

apps/client/src/features/cuesheet/cuesheetUtils.ts

@@ -1,5 +1,5 @@
 import { stringify } from 'csv-stringify/browser/esm/sync';
-import { OntimeEntryCommonKeys, OntimeRundown, ProjectData, UserFields } from 'ontime-types';
+import { EventData, OntimeEntryCommonKeys, OntimeRundown, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 /**
@@ -9,7 +9,7 @@ import { millisToString } from 'ontime-utils';
  * @return {string}
  */
 
-export const parseField = <T extends OntimeEntryCommonKeys>(field: T, data: unknown): string => {
+export const parseField = (field: keyof OntimeRundown, data: unknown): string => {
   let val;
   switch (field) {
     case 'timeStart':
@@ -38,11 +38,10 @@ export const parseField = <T extends OntimeEntryCommonKeys>(field: T, data: unkn
  * @param {object} userFields
  * @return {(string[])[]}
  */
-export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, userFields: UserFields): string[][] => {
+export const makeTable = (headerData: EventData, rundown: OntimeRundown, userFields: UserFields): string[][] => {
   const data = [
     ['Ontime · Schedule Template'],
-    ['Project Title', headerData?.title || ''],
-    ['Project Description', headerData?.description || ''],
+    ['Event Name', headerData?.title || ''],
     ['Public URL', headerData?.publicUrl || ''],
     ['Backstage URL', headerData?.backstageUrl || ''],
     [],
@@ -96,7 +95,6 @@ export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, userF
 
   rundown.forEach((entry) => {
     const row: string[] = [];
-    // @ts-expect-error -- not sure how to type this
     fieldOrder.forEach((field) => row.push(parseField(field, entry[field])));
     data.push(row);
   });

apps/client/src/features/editors/Editor.tsx

@@ -5,7 +5,6 @@ import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary'
 import MenuBar from '../menu/MenuBar';
 import AboutModal from '../modals/about-modal/AboutModal';
 import QuickStart from '../modals/quick-start/QuickStart';
-import SheetsModal from '../modals/sheets-modal/SheetsModal';
 import UploadModal from '../modals/upload-modal/UploadModal';
 
 import styles from './Editor.module.scss';
@@ -29,7 +28,6 @@ export default function Editor() {
   } = useDisclosure();
   const { isOpen: isAboutModalOpen, onOpen: onAboutModalOpen, onClose: onAboutModalClose } = useDisclosure();
   const { isOpen: isQuickStartOpen, onOpen: onQuickStartOpen, onClose: onQuickStartClose } = useDisclosure();
-  const { isOpen: isSheetsOpen, onOpen: onSheetsOpen, onClose: onSheetsClose } = useDisclosure();
 
   // Set window title
   useEffect(() => {
@@ -44,7 +42,6 @@ export default function Editor() {
         <IntegrationModal onClose={onIntegrationModalClose} isOpen={isIntegrationModalOpen} />
         <AboutModal onClose={onAboutModalClose} isOpen={isAboutModalOpen} />
         <SettingsModal isOpen={isSettingsOpen} onClose={onSettingsClose} />
-        <SheetsModal onClose={onSheetsClose} isOpen={isSheetsOpen} />
       </ErrorBoundary>
       <div className={styles.mainContainer} data-testid='event-editor'>
         <div id='settings' className={styles.settings}>
@@ -61,8 +58,6 @@ export default function Editor() {
               onAboutOpen={onAboutModalOpen}
               isQuickStartOpen={isQuickStartOpen}
               onQuickStartOpen={onQuickStartOpen}
-              isSheetsOpen={isSheetsOpen}
-              onSheetsOpen={onSheetsOpen}
             />
           </ErrorBoundary>
         </div>

apps/client/src/features/event-editor/EventEditor.tsx

@@ -73,8 +73,8 @@ export default function EventEditor() {
         handleSubmit={handleSubmit}
       >
         <CopyTag label='Event ID'>{event.id}</CopyTag>
-        <CopyTag label='OSC trigger by id'>{`/ontime/gotoid "${event.id}"`}</CopyTag>
-        <CopyTag label='OSC trigger by cue'>{`/ontime/gotocue "${event.cue}"`}</CopyTag>
+        <CopyTag label='OSC trigger by id'>{`/ontime/gotoid/${event.id}`}</CopyTag>
+        <CopyTag label='OSC trigger by cue'>{`/ontime/gotocue/${event.cue}`}</CopyTag>
       </EventEditorDataRight>
     </div>
   );

apps/client/src/features/event-editor/composite/CountedTextArea.tsx

@@ -2,15 +2,16 @@ import { useCallback } from 'react';
 import { Textarea } from '@chakra-ui/react';
 
 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
-import { EditorUpdateFields } from '../EventEditor';
+
+import { TitleActions } from './EventEditorDataLeft';
 
 import style from '../EventEditor.module.scss';
 
 interface CountedTextAreaProps {
-  field: EditorUpdateFields;
+  field: TitleActions;
   label: string;
   initialValue: string;
-  submitHandler: (field: EditorUpdateFields, value: string) => void;
+  submitHandler: (field: TitleActions, value: string) => void;
 }
 
 export default function CountedTextArea(props: CountedTextAreaProps) {

apps/client/src/features/event-editor/composite/CountedTextInput.tsx

@@ -40,7 +40,6 @@ export default function CountedTextInput(props: CountedTextInputProps) {
         onChange={onChange}
         onBlur={onBlur}
         onKeyDown={onKeyDown}
-        autoComplete='off'
       />
     </div>
   );