update multiple events "defaults"

* add functions to convert all errors to `ErrorResponse` type

* replace all `{ message: error.toString() }` with `toErrorResponse(error)`

* refactor: all controllers to to use getErrorMessage and add types to the Response

* 404 for nonexistent api routes

.dockerignore

@@ -11,13 +11,4 @@
 
 # Ignore git and cache folders
 .git
-.gitignore
 .cache
-
-# Ignore build folders
-node_modules
-dist
-
-# Ignore default volumes created by running docker compose up
-ontime-db
-ontime-styles

.github/FUNDING.yml

@@ -1,2 +0,0 @@
-github: cpvalente
-buy_me_a_coffee: cpvalente

.github/workflows/build_docker_v2.yml

@@ -1,4 +1,4 @@
-name: Docker Image CI Ontime
+name: Docker Image CI Ontime V2
 
 on:
   push:
@@ -13,14 +13,14 @@ jobs:
       CI: ''
 
     steps:
-    - uses: actions/checkout@v4
+    - 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@v4
+      uses: actions/setup-node@v3.6.0
       with:
-        node-version: 18.18.2
+        version: 16.16.0
 
     - name: Setup pnpm
       uses: pnpm/action-setup@v2

.github/workflows/build_v2.yml

@@ -0,0 +1,108 @@
+name: Ontime build v2
+
+on:
+  push:
+    tags: [ "*" ]
+  workflow_dispatch:
+
+jobs:
+  build_macos:
+    runs-on: macOS-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-mac
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: |
+            ./apps/electron/dist/ontime-macOS-x64.dmg
+            ./apps/electron/dist/ontime-macOS-arm64.dmg
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_windows:
+    runs-on: windows-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-win
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: './apps/electron/dist/ontime-win64.exe'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_ubuntu:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-linux
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: './apps/electron/dist/ontime-linux.AppImage'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/build_v3.yml

@@ -1,8 +1,9 @@
-name: Ontime build
+name: Ontime build v3
 
 on:
-  push:
-    tags: [ "*" ]
+# Only trigger manually for now for testing
+#   push:
+#     tags: [ "*" ]
   workflow_dispatch:
 
 jobs:
@@ -30,14 +31,7 @@ jobs:
         run: pnpm build
 
       - name: Electron - Build app
-        env: 
-          APPLE_ID: ${{ secrets.APPLEID }}
-          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLEIDPASS }}
-          APPLE_TEAM_ID: ${{ secrets.TEAMID }}
-          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
-          CSC_LINK: ${{ secrets.CSC_LINK }}
         run: pnpm dist-mac
-        timeout-minutes: 60
 
       - name: Release
         uses: softprops/action-gh-release@v1

.github/workflows/test_v2.yml

@@ -0,0 +1,106 @@
+name: Ontime test v2
+
+on:
+  pull_request:
+    branches: '*'
+  workflow_dispatch:
+
+jobs:
+  unit-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      # Run code quality per package
+      - name: React - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/client
+
+      - name: Server - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/server
+
+      - name: Utils - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./packages/utils
+
+      - name: Types - Run linter
+        if: always()
+        run: pnpm lint
+        working-directory: ./packages/types
+
+      # We choose to run tests separately
+      - name: React - Run unit tests
+        if: always()
+        run: pnpm test:pipeline
+        working-directory: ./apps/client
+
+      - name: Server - Run unit tests
+        if: always()
+        run: pnpm test:pipeline
+        working-directory: ./apps/server
+
+      - name: Utils - Run unit tests
+        if: always()
+        run: pnpm test:pipeline
+        working-directory: ./packages/utils
+
+  e2e-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build client
+        run: pnpm build:local
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: automated-screenshots
+          path: automated-screenshots/
+          retention-days: 14

.github/workflows/test_v3.yml

@@ -1,8 +1,9 @@
-name: Ontime test
+name: Ontime test v3
 
 on:
-  pull_request:
-    branches: '*'
+# Only trigger manually for now for testing
+#   pull_request:
+#     branches: '*'
   workflow_dispatch:
 
 jobs:

DEVELOPMENT.md

@@ -88,6 +88,8 @@ 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`
 

Dockerfile

@@ -1,14 +1,3 @@
-FROM node:18.18-alpine AS base
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
-
-FROM base AS builder
-COPY . /app
-WORKDIR /app
-RUN pnpm install --frozen-lockfile \
-    && pnpm turbo build:docker
-
 FROM node:18.18-alpine
 
 # Set environment variables
@@ -20,12 +9,12 @@ ENV ONTIME_DATA=/external/
 WORKDIR /app/
 
 # Prepare UI
-COPY --from=builder /app/apps/client/build ./client/
+COPY /apps/client/build ./client/
 
 # Prepare Backend
-COPY --from=builder /app/apps/server/dist/ ./server/
-COPY ./demo-db/ ./preloaded-db/
-COPY --from=builder /app/apps/server/src/external/ ./external/
+COPY /apps/server/dist/ ./server/
+COPY /demo-db/ ./preloaded-db/
+COPY /apps/server/src/external/ ./external/
 
 # Export default ports
 EXPOSE 4001/tcp 8888/udp 9999/udp

README.md

@@ -1,8 +1,5 @@
-[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0)
-![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/cpvalente/ontime/total)
-![Docker Pulls](https://img.shields.io/docker/pulls/getontime/ontime)
-[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
-[![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)
+[![Ontime build v2](https://github.com/cpvalente/ontime/actions/workflows/build_v2.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/build_v2.yml)
+[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0) 
 
 ## Download the latest releases here
 
@@ -13,162 +10,196 @@
   <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>
 </div>
 
-<br />
-
-<a href="https://www.buymeacoffee.com/cpvalente" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="32"></a>
-
 # Ontime
 
-Ontime is a browser-based application that manages event rundowns, scheduling, and cueing.
+Ontime is an application for creating and managing event running order and timers.
 
-With Ontime, you can plan, track your schedule, manage automation and cross-department show information all in one place.
+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.
 
-Ontime is made by entertainment and broadcast engineers and used by
-- Conference organisers
-- Touring shows and receiving venues
-- Broadcasters and streamers
-- Theatres and opera houses
-- Houses of worship
+This makes for a simple and cheap way to distribute over a venue using a network infrastructure instead of video outputs.
 
-### For live environments
+![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.png)
 
-Ontime is designed for use in live environments. \
-This guides the application into being flexible and efficiently integrating into different workflows.
-
-### For teams
-
-All information added in Ontime is shared with the production team and other software / hardware in your workflow. \
-Ontime also improves team collaboration with dedicated views for cuesheets and operators, and for public and production
-signage.
-
-### Simple infrastructure
-
-All the data is distributed over the network, making its distribution and infrastructure flexible and cheap. \
-With the availability of the docker image, you can also leverage IT infrastructure to make Ontime available online for
-your team and clients.
-
-Ontime is made by video engineers and entertainment technicians.
-
-![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/editor.png)
-
-![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/ontime-overview.webp)
+![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/overview.png)
 
 [Read the docs to learn more](https://docs.getontime.no)
 
 ## Using Ontime
 
-Ontime can be started by downloading the latest release for your platform. \
-Alternatively you can also use the docker image, available at [Docker Hub](https://hub.docker.com/r/getontime/ontime)
+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.
 
-Once installed and running, any device in the network has access to Ontime.
+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 />
+You can then use the menu in the top left corner to select the desired view.
+The menu will be initially hidden until there is mouse interaction.
 
-Ontime provides different screens which allow for different types of interactions with the data. These are called
-views. \
-Each view in Ontime focuses on empowering a specific role or achieving a particular task.
-
-You can access the different views by reaching the ontime server, in your browser, at (_default port
-4001_) `http://localhost:4001` or `http://192.168.1.3:4001`
+In the case of unattended machines or automation, it is possible to use different URL to recall
+individual views and extend view settings using the URL presets feature
 
 ```
-For the backstage views
+For the presentation views
 -------------------------------------------------------------
+IP.ADDRESS:4001            > Web server default to presenter timer view
 IP.ADDRESS:4001/timer      > Presenter / Stage timer view
 IP.ADDRESS:4001/minimal    > Simple timer view
 IP.ADDRESS:4001/clock      > Simple clock view
-IP.ADDRESS:4001/backstage  > Stage Manager / Backstage view
-IP.ADDRESS:4001/countdown  > Countdown to anything
+IP.ADDRESS:4001/sm         > Stage Manager / Backstage view
+IP.ADDRESS:4001/public     > Public / Foyer view
+IP.ADDRESS:4001/lower      > Lower Thirds
 IP.ADDRESS:4001/studio     > Studio Clock
 ```
 
 ```
-For the public views
--------------------------------------------------------------
-IP.ADDRESS:4001/public     > Public / Foyer view
-IP.ADDRESS:4001/lower      > Lower Thirds
-```
-
-```
-For production views
+For management views
 -------------------------------------------------------------
 IP.ADDRESS:4001/editor    > the control interface, same as the app
 IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
-IP.ADDRESS:4001/operator  > automated views for operators
 ```
 
 More documentation is available [in our docs](https://docs.getontime.no)
 
-## Main features
+## Feature List (in no specific order)
 
-* [x] Distribute data over network and render it in the browser
-* [x] Collaborative
-* [x] Extendable
-* [x] Send messages to different screen types
-* [x] Differentiate between backstage and public data
-* [x] Workflow for managing delays
-* [x] Rich protocol integrations for Control and Feedback
-* [x] For servers: use docker to run Ontime in in a server, configure from a browser anywhere
-* [x] Multi-platform (available on Windows, MacOS and Linux)
-* [x] Companion integration [follow link](https://bitfocus.io/connections/getontime-ontime)
+- [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)
+- [x] Configurable Lower Thirds
+- [x] Collaborative editing with the cuesheet view
+- [x] Send live messages to different screen types
+- [x] Differentiate between backstage and public data
+- [x] Workflow for managing delays
+- [x] Rich protocol integrations for Control and Feedback
+  - OSC (Open Sound Control)
+  - HTTP
+  - WebSockets
+- [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://docs.getontime.no/features/count-to-anything/): have
+      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 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.
+
+## Rich APIs for workflow integrations
+
+The app is currently being developed for a broad user base, from broadcast to entertainment and
+conference halls.
+
+Taking advantage of the integrations, we currently use Ontime with:
+
+- `disguise`: trigger Ontime from d3's timeline using the **OSC API**, and **render views** using d3's
+  webmodule
+- `OBS`: **render views** using the Browser Module
+- `QLab`: trigger Ontime using **OSC API**
+- `Companion`: Ontime has a **companion module**. Issue report and feature requests should be done
+  in the [repository getontime/ontime](https://github.com/bitfocus/companion-module-getontime-ontime)
+
+### Make your own viewer
+
+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).
+<br />
+We have prepared a few resources to help here:
+- Shipped with Ontime there is a small clock to get you started, it is available at `http://localhost:4001/external/demo` and the [code can be found here](https://github.com/cpvalente/ontime/tree/master/apps/server/src/external/demo)
+- See [this repository](https://github.com/cpvalente/ontime-viewer-template-v2) with a template on
+how to get you started
+- See information about the [Websocket API](https://docs.getontime.no/api/osc-and-ws/)
+<br />
+More information [in the docs](https://docs.getontime.no/features/custom-views/)
+
+
+### Headless run️
+
+You can self-host and run Ontime in a docker image.
+
+The docker image along with documentation is [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
+
+If you want to run this image in a Raspberry Pi, please see [the docs](https://docs.getontime.no/additional-notes/use-with-rpi/)
 
 ## Roadmap
 
 ### Continued development
 
-Ontime is under active development. We continue adding and tweaking features in collaboration with users.
-
+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)
 
 ### Issues
 
-We use Github's issue tracking for bug reporting and feature requests. \
+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).
 
 #### Unsigned App
 
 When installing the app you would see warning screens from the Operating System like:
 
-in Windows
-
 `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`
+
 or in Linux
 
 `Could Not Display "ontime-linux.AppImage`
 
-We currently only sign MacOS releases. \
-Purchasing the certificates for both Mac and Windows would mean a recurrent expense which we are not able to cover.
-
 You can circumvent this by allowing the execution of the app manually.
 
-- In Windows: click `more` -> `Run Anyway`
-- In Linux: right-click the AppImage file: `Properties` -> `Permissions` -> `Allow Executing File as a Program`
+- 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 Linux: right-click the AppImage file -> Properties -> Permissions -> select Allow Executing
+  File as a Program
 
-If you have tips on how to improve this or would like to sponsor the code signing,
+Long story short: Ontime app is unsigned. </br>Purchasing the certificates for both Mac and Windows
+would mean a recurrent expense and is not a priority. This is unlikely to change in future. If you
+have tips on how to improve this or would like to sponsor the code signing,
 please [open an issue](https://github.com/cpvalente/ontime/issues/new)
 
-## Contributing
+#### Safari
+
+There are known issues with Safari versions lower than 13:
+
+- Spacing and text styles might have small inconsistencies
+- Table view does not work
+
+There is no plan for any further work on this.
+
+# Contributing
 
 Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
-
-If you are a developer and would like to contribute with code, please open an issue to discuss before opening a Pull Request.
-
+<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.
+<br />
 Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)
 
-## Links
+# Help
 
-See the [Ontime website](https://getontime.no) here and the link to the [documentation](https://docs.getontime.no)
+Help is underway! ... and can be found [here](https://docs.getontime.no)
 
-## License
+# License
 
 This project is licensed under the terms of the GNU GPL v3
-
-## Sponsor
-
-You can help the development of this project or say thank you with a one time donation. \
-See [the terms of donations](https://github.com/cpvalente/ontime/blob/master/.github/FUNDING.md).
-
-<p align="center">
-<br>
-<a href="https://www.buymeacoffee.com/cpvalente" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="200"></a>
-</p>

SPONSOR.md

@@ -1,19 +0,0 @@
-# Terms of sponsorship
-Ontime does not exist as a fiscal entity. The sponsorship recipient is the project owner. In this light, contributors are funding the project owner's capacity to work on the project, not the project itself. As a contribution recipient, the code owner reserves the right to redistribute.
-
-## Why sponsor
-Ontime is and will remain free, regardless of your decision to contribute.
-Regardless, you may choose to provide a monetary contribution:
-
-### Improve user experience
-Certain parts of the application user experience are tied to our capacity to pay for services. App signing and Google Sheets integration are good examples of this.
-
-### Cool stuff
-We may choose not to implement some features. This could be related to the complexity required, to the skill set, or to the fact that we just feel it doesn't improve the app for a significant percentage of users. In those cases, a feature may be considered "not worth it," regardless of its pertinence.
-
-As a user, you can choose to sponsor a particular feature or donate to the app so that we can create bounties for features.
-
-### Priorities
-Monetary contributions are most immediately needed to offset the costs of presenting and distributing Ontime, i.e., hosting, domains, and certificates.
-
-Additional funding will be considered according to the needs at the time.

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "3.0.3",
+  "version": "3.0.0-alpha",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -10,7 +10,6 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@fontsource/open-sans": "^5.0.28",
     "@mantine/hooks": "^7.6.2",
     "@react-icons/all-files": "^4.1.0",
     "@sentry/react": "^7.92.0",
@@ -29,6 +28,7 @@
     "react-hook-form": "^7.49.2",
     "react-qr-code": "^2.0.12",
     "react-router-dom": "^6.3.0",
+    "typeface-open-sans": "^1.1.13",
     "web-vitals": "^3.1.1",
     "zustand": "^4.5.0"
   },
@@ -61,7 +61,7 @@
     ]
   },
   "devDependencies": {
-    "@sentry/vite-plugin": "^2.16.1",
+    "@sentry/vite-plugin": "^2.14.0",
     "@tanstack/eslint-plugin-query": "^5.8.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.1.1",
@@ -87,10 +87,10 @@
     "prettier": "^3.0.3",
     "sass": "^1.57.1",
     "typescript": "^5.4.3",
-    "vite": "^5.2.11",
+    "vite": "^5.1.0",
     "vite-plugin-compression2": "^0.12.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.6.0"
+    "vitest": "^1.2.2"
   }
 }

apps/client/src/App.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
@@ -6,6 +7,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ContextMenu } from './common/components/context-menu/ContextMenu';
 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
 import { AppContextProvider } from './common/context/AppContext';
+import useElectronEvent from './common/hooks/useElectronEvent';
 import { ontimeQueryClient } from './common/queryClient';
 import { socketClientName } from './common/stores/connectionName';
 import { connectSocket } from './common/utils/socket';
@@ -13,10 +15,38 @@ import theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
 
+// Load Open Sans typeface
+// @ts-expect-error no types from font import
+import('typeface-open-sans');
+
 const preferredClientName = socketClientName.getState().name;
 connectSocket(preferredClientName);
 
 function App() {
+  const { isElectron, sendToElectron } = useElectronEvent();
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      // handle held key
+      if (event.repeat) return;
+      // check if the alt key is pressed
+      if (event.altKey) {
+        if (event.code === 'KeyT') {
+          // ask to see debug
+          sendToElectron('set-window', 'show-dev');
+        }
+      }
+    };
+
+    if (isElectron) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
+    return () => {
+      if (isElectron) {
+        document.removeEventListener('keydown', handleKeyPress);
+      }
+    };
+  }, [isElectron, sendToElectron]);
   return (
     <ChakraProvider disableGlobalStyle resetCSS theme={theme}>
       <QueryClientProvider client={ontimeQueryClient}>

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

@@ -11,15 +11,15 @@ const dbPath = `${apiEntryUrl}/db`;
 /**
  * HTTP request to the current DB
  */
-async function getDb(fileName?: string): Promise<AxiosResponse<DatabaseModel>> {
-  return axios.post(`${dbPath}/download/`, { fileName });
+async function getDb(): Promise<AxiosResponse<DatabaseModel>> {
+  return axios.get(`${dbPath}/download`);
 }
 
 /**
  * Request download of the current project file
  * @param fileName
  */
-export async function downloadProject(fileName: string) {
+export async function downloadProject(fileName: string = 'ontime-project') {
   try {
     const { data, name } = await fileDownload(fileName);
 
@@ -152,7 +152,7 @@ export async function getInfo(): Promise<GetInfo> {
  * @returns
  */
 async function fileDownload(fileName: string): Promise<{ data: DatabaseModel; name: string }> {
-  const response = await getDb(fileName);
+  const response = await getDb();
 
   const headerLine = response.headers['Content-Disposition'];
 

apps/client/src/common/components/buttons/QuitIconBtn.tsx

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+  IconButton,
+  Tooltip,
+} from '@chakra-ui/react';
+import { IoPowerOutline } from '@react-icons/all-files/io5/IoPowerOutline';
+
+import { useEmitLog } from '../../stores/logger';
+
+interface QuitIconBtnProps {
+  clickHandler: () => void;
+  disabled?: boolean;
+}
+
+const quitBtnStyle = {
+  color: '#D20300', // $red-700
+  borderColor: '#D20300', // $red-700
+  _focus: { boxShadow: 'none' },
+  _hover: {
+    background: '#D20300', // $red-700
+    color: 'white',
+    _disabled: {
+      color: '#D20300', // $red-700
+      background: 'none',
+    },
+  },
+  _active: {
+    background: '#9A0000', // $red-1000
+    color: 'white',
+  },
+  variant: 'outline',
+  isRound: true,
+};
+
+export default function QuitIconBtn(props: QuitIconBtnProps) {
+  const { clickHandler, disabled, ...rest } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const { emitInfo } = useEmitLog();
+  const onClose = () => setIsOpen(false);
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (window.process?.type === 'renderer') {
+      window.ipcRenderer.on('user-request-shutdown', () => {
+        emitInfo('Shutdown request');
+        setIsOpen(true);
+      });
+    }
+  }, [emitInfo]);
+
+  const handleShutdown = useCallback(() => {
+    onClose();
+    clickHandler();
+  }, [clickHandler]);
+
+  return (
+    <>
+      <Tooltip label='Quit Application'>
+        <IconButton
+          aria-label='Quit Application'
+          size='lg'
+          icon={<IoPowerOutline />}
+          onClick={() => setIsOpen(true)}
+          isDisabled={disabled}
+          {...quitBtnStyle}
+          {...rest}
+        />
+      </Tooltip>
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Ontime Shutdown
+            </AlertDialogHeader>
+            <AlertDialogBody>This will shutdown the Ontime server. Are you sure?</AlertDialogBody>
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose} variant='ghost'>
+                Cancel
+              </Button>
+              <Button colorScheme='red' onClick={handleShutdown} ml={3}>
+                Shutdown
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+}

apps/client/src/common/components/context-menu/ContextMenuOption.tsx

@@ -5,7 +5,7 @@ import { OptionWithoutGroup } from './ContextMenu';
 export const ContextMenuOption = ({ label, onClick, isDisabled, icon: Icon, withDivider }: OptionWithoutGroup) => (
   <>
     {withDivider && <MenuDivider />}
-    <MenuItem icon={<Icon style={{ fontSize: '1rem' }} />} onClick={onClick} isDisabled={isDisabled}>
+    <MenuItem icon={<Icon />} onClick={onClick} isDisabled={isDisabled}>
       {label}
     </MenuItem>
   </>

apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx

@@ -1,25 +1,27 @@
-import { RefObject, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Textarea, TextareaProps } from '@chakra-ui/react';
 // @ts-expect-error no types from library
 import autosize from 'autosize/dist/autosize';
 
-export const AutoTextArea = (props: TextareaProps & { inputref: RefObject<unknown> }) => {
-  const { value, inputref } = props;
+export const AutoTextArea = (props: TextareaProps) => {
+  const { value } = props;
+
+  const ref = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
-    const node = inputref.current;
-    autosize(inputref.current);
+    const node = ref.current;
+    autosize(ref.current);
     return () => {
       autosize.destroy(node);
     };
-  }, [inputref, value]);
+  }, [value]);
 
   return (
     <Textarea
       overflow='hidden'
       w='100%'
-      ref={inputref}
       resize='none'
+      ref={ref}
       transition='height none'
       variant='ontime-transparent'
       {...props}

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

@@ -25,5 +25,11 @@ export default function Swatch(props: SwatchProps) {
       </div>
     );
   }
+
+  if (color === 'unkown') {
+    <div className={`${classes} ${style.center}`} onClick={handleClick}>
+      ?
+    </div>;
+  }
   return <div className={classes} style={{ backgroundColor: `${color}` }} onClick={handleClick} />;
 }

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

@@ -8,10 +8,12 @@ interface ColourInputProps {
   value: string;
   name: 'colour';
   handleChange: (newValue: 'colour', name: string) => void;
+  isMultiple?: boolean;
 }
 
 const colours = [
   '',
+  'unkown',
   '#FFCC78', // $orange-400
   '#FFAB33', // $orange-600
   '#77C785', // $green-400
@@ -27,7 +29,7 @@ const colours = [
 ];
 
 export default function SwatchSelect(props: ColourInputProps) {
-  const { value, name, handleChange } = props;
+  const { value, name, handleChange, isMultiple } = props;
 
   const setColour = useCallback(
     (newValue: string) => {
@@ -40,9 +42,15 @@ export default function SwatchSelect(props: ColourInputProps) {
 
   return (
     <div className={style.list}>
-      {colours.map((colour) => (
-        <Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
-      ))}
+      {colours
+        .filter((colour) => {
+          // Only include unkown if it is multiple
+          if (!isMultiple && colour === 'unkown') return false;
+          return true;
+        })
+        .map((colour) => (
+          <Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
+        ))}
     </div>
   );
 }

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

@@ -0,0 +1,58 @@
+import { useCallback, useRef } from 'react';
+import { Input, Textarea } from '@chakra-ui/react';
+
+import { EventEditorSubmitActions } from '../../../../features/rundown/event-editor/EventEditorWrapper';
+import { Size } from '../../../models/Util.type';
+
+import useReactiveTextInput from './useReactiveTextInput';
+
+interface BaseProps {
+  isTextArea?: boolean;
+  isFullHeight?: boolean;
+  size?: Size;
+  field: EventEditorSubmitActions;
+  initialText?: string;
+  submitHandler: (field: EventEditorSubmitActions, newValue: string) => void;
+}
+
+interface TextInputProps extends BaseProps {
+  isTextArea?: false;
+}
+
+type ResizeOptions = 'horizontal' | 'vertical' | 'none';
+
+interface TextAreaProps extends BaseProps {
+  isTextArea: true;
+  resize?: ResizeOptions;
+}
+
+type InputProps = TextInputProps | TextAreaProps;
+
+export default function TextInput(props: InputProps) {
+  const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler } = props;
+  const inputRef = useRef(null);
+
+  const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
+
+  const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
+  const textAreaProps = useReactiveTextInput(initialText, submitCallback);
+
+  let resize: ResizeOptions = 'none';
+  if (isTextArea) {
+    resize = (props as TextAreaProps)?.resize ?? 'none';
+  }
+
+  return isTextArea ? (
+    <Textarea
+      ref={inputRef}
+      size={size}
+      resize={resize}
+      variant='ontime-filled'
+      {...textAreaProps}
+      style={{ height: isFullHeight ? '100%' : undefined }}
+      data-testid='input-textarea'
+    />
+  ) : (
+    <Input ref={inputRef} size={size} variant='ontime-filled' {...textInputProps} data-testid='input-textfield' />
+  );
+}

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

@@ -1,20 +1,17 @@
-import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
-import { getHotkeyHandler, HotkeyItem } from '@mantine/hooks';
+import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
 
 interface UseReactiveTextInputReturn {
   value: string;
   onChange: (event: ChangeEvent) => void;
   onBlur: (event: ChangeEvent) => void;
-  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+  onKeyDown: (event: KeyboardEvent) => void;
 }
 
 export default function useReactiveTextInput(
   initialText: string,
   submitCallback: (newValue: string) => void,
-  ref: RefObject<HTMLInputElement>,
   options?: {
     submitOnEnter?: boolean;
-    submitOnCtrlEnter?: boolean;
   },
 ): UseReactiveTextInputReturn {
   const [text, setText] = useState<string>(initialText);
@@ -47,45 +44,43 @@ export default function useReactiveTextInput(
   const handleSubmit = useCallback(
     (valueToSubmit: string) => {
       // No need to update if it hasn't changed
-      if (valueToSubmit !== initialText) {
-        const cleanVal = valueToSubmit.trim();
-        submitCallback(cleanVal);
-        if (cleanVal !== valueToSubmit) {
-          setText(cleanVal);
-        }
+      if (valueToSubmit === initialText) {
+        return;
+      }
+      const cleanVal = valueToSubmit.trim();
+      submitCallback(cleanVal);
+
+      if (cleanVal !== valueToSubmit) {
+        setText(cleanVal);
       }
-      setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before bluring
     },
-    [initialText, ref, submitCallback],
+    [initialText, submitCallback],
   );
 
   /**
-   * @description Handles escape events
-   * @param {string} valueToSubmit
+   * @description Handles common keys for submit and cancel
+   * @param {string} key
    */
-  const handleEscape = useCallback(() => {
-    // No need to update if it hasn't changed
-    setText(initialText);
-    setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before bluring
-  }, [initialText, ref]);
-
-  const keyHandler = useMemo(() => {
-    const hotKeys: HotkeyItem[] = [['Escape', handleEscape, { preventDefault: true }]];
-
-    if (options?.submitOnEnter) {
-      hotKeys.push(['Enter', () => handleSubmit(text)]);
-    }
-
-    if (options?.submitOnCtrlEnter) {
-      hotKeys.push(['mod + Enter', () => handleSubmit(text)]);
-    }
-    return getHotkeyHandler(hotKeys);
-  }, [handleEscape, handleSubmit, options?.submitOnCtrlEnter, options?.submitOnEnter, text]);
+  const keyHandler = useCallback(
+    (key: string) => {
+      switch (key) {
+        case 'Escape':
+          setText(initialText);
+          break;
+        case 'Enter':
+          if (options?.submitOnEnter) {
+            handleSubmit(text);
+          }
+          break;
+      }
+    },
+    [initialText, options?.submitOnEnter, handleSubmit, text],
+  );
 
   return {
     value: text,
     onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
     onBlur: (event: ChangeEvent) => handleSubmit((event.target as HTMLInputElement).value),
-    onKeyDown: keyHandler,
+    onKeyDown: (event: KeyboardEvent) => keyHandler(event.key),
   };
 }

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

@@ -19,7 +19,7 @@ interface MultiPartProgressBar {
 export default function MultiPartProgressBar(props: MultiPartProgressBar) {
   const { now, complete, normalColor, warning, warningColor, danger, dangerColor, hidden, className = '' } = props;
 
-  const percentRemaining = complete === 0 ? 0 : 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
+  const percentComplete = 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
 
   const dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
   const warningWidth = warning ? clamp((warning / complete) * 100, 0, 100) : 0;
@@ -37,7 +37,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
             className='multiprogress-bar__bg-danger'
             style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
           />
-          <div className='multiprogress-bar__indicator' style={{ width: `${percentRemaining}%` }} />
+          <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
         </>
       )}
     </div>

apps/client/src/common/components/progress-bar/ProgressBar.scss

@@ -1,14 +1,13 @@
 @use '../../../theme/viewerDefs' as *;
 
 $progress-bar-size: 12px;
-$progress-bar-br: 3px;
+$progress-bar-br: 6px;
 
 .progress-bar__bg {
   width: 100%;
   height: $progress-bar-size;
   border-radius: $progress-bar-br;
   background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
-  overflow: clip;
 
   &--hidden {
     display: none;
@@ -19,5 +18,6 @@ $progress-bar-br: 3px;
   height: $progress-bar-size;
   background-color: var(--timer-progress-override, $accent-color);
   transition: 1s linear;
+  border-radius: $progress-bar-br 0 0 $progress-bar-br;
   transition-property: width;
 }

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

@@ -24,8 +24,6 @@ interface ScheduleProviderProps {
   time?: number;
 }
 
-const numEventsPerPage = 8;
-
 export const ScheduleProvider = ({
   children,
   events,
@@ -39,7 +37,7 @@ export const ScheduleProvider = ({
   // look for overrides from views
   const hidePast = isStringBoolean(searchParams.get('hidePast'));
   const stopCycle = isStringBoolean(searchParams.get('stopCycle'));
-  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? numEventsPerPage);
+  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? 7);
 
   let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
 

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

@@ -71,7 +71,7 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
     setSearchParams(newSearchParams);
 
-    onClose();
+    handleClose();
   };
 
   return (

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

@@ -249,11 +249,12 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
 export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] => {
   const topSourceOptions = makeOptionsFromCustomFields(customFields, {
     title: 'Title',
+    lowerMsg: 'Lower Third Message',
   });
 
   const bottomSourceOptions = makeOptionsFromCustomFields(customFields, {
     title: 'Title',
-    none: 'None',
+    lowerMsg: 'Lower Third Message',
   });
 
   return [
@@ -266,7 +267,7 @@ export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] =
         event: 'Event Load',
         manual: 'Manual',
       },
-      defaultValue: 'manual',
+      defaultValue: 'event',
     },
     {
       id: 'top-src',
@@ -282,7 +283,7 @@ export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] =
       description: 'Select the data source for the bottom element',
       type: 'option',
       values: bottomSourceOptions,
-      defaultValue: 'none',
+      defaultValue: 'lowerMsg',
     },
     {
       id: 'top-colour',
@@ -393,9 +394,9 @@ export const getBackstageOptions = (timeFormat: string, customFields: CustomFiel
     {
       id: 'eventsPerPage',
       title: 'Events per page',
-      description: 'Sets the number of events on the page, can cause overflow',
+      description: 'Sets the number of events on the page, can cause overlow',
       type: 'number',
-      placeholder: '8 (default)',
+      placeholder: '7 (default)',
     },
     {
       id: 'secondary-src',
@@ -430,9 +431,9 @@ export const getPublicOptions = (timeFormat: string, customFields: CustomFields)
     {
       id: 'eventsPerPage',
       title: 'Events per page',
-      description: 'Sets the number of events on the page, can cause overflow',
+      description: 'Sets the number of events on the page, can cause overlow',
       type: 'number',
-      placeholder: '8 (default)',
+      placeholder: '7 (default)',
     },
     {
       id: 'secondary-src',

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

@@ -1,14 +1,7 @@
 import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { isOntimeEvent, MaybeString, OntimeEvent, OntimeRundownEntry, RundownCached } from 'ontime-types';
-import {
-  dayInMs,
-  getLinkedTimes,
-  getPreviousEventNormal,
-  MILLIS_PER_SECOND,
-  reorderArray,
-  swapEventData,
-} from 'ontime-utils';
+import { getLinkedTimes, getPreviousEventNormal, reorderArray, swapEventData } from 'ontime-utils';
 
 import { RUNDOWN } from '../api/constants';
 import {
@@ -28,11 +21,11 @@ import { useEditorSettings } from '../stores/editorSettings';
 import { forgivingStringToMillis } from '../utils/dateConfig';
 
 /**
- * @description Set of utilities for events //TODO: should this be called useEntryAction and so on
+ * @description Set of utilities for events
  */
 export const useEventAction = () => {
   const queryClient = useQueryClient();
-  const { defaultPublic, linkPrevious, defaultDuration, defaultWarnTime, defaultDangerTime } = useEditorSettings();
+  const { defaultPublic, linkPrevious, defaultDuration } = useEditorSettings((state) => state.eventSettings);
 
   /**
    * Calls mutation to add new event
@@ -55,8 +48,6 @@ export const useEventAction = () => {
       defaultPublic: boolean;
       linkPrevious: boolean;
       lastEventId: string;
-      defaultWarnTime: number;
-      defaultDangerTime: number;
     }>;
 
   /**
@@ -73,8 +64,6 @@ export const useEventAction = () => {
           defaultPublic: options?.defaultPublic ?? defaultPublic,
           lastEventId: options?.lastEventId,
           linkPrevious: options?.linkPrevious ?? linkPrevious,
-          defaultWarnTime,
-          defaultDangerTime,
         };
 
         if (applicationOptions.linkPrevious && applicationOptions?.lastEventId) {
@@ -96,14 +85,6 @@ export const useEventAction = () => {
         if (newEvent.duration === undefined && newEvent.timeEnd === undefined) {
           newEvent.duration = forgivingStringToMillis(defaultDuration);
         }
-
-        if (newEvent.timeDanger === undefined) {
-          newEvent.timeDanger = forgivingStringToMillis(defaultDangerTime);
-        }
-
-        if (newEvent.timeWarning === undefined) {
-          newEvent.timeWarning = forgivingStringToMillis(defaultWarnTime);
-        }
       }
 
       // handle adding options that concern all event type
@@ -117,7 +98,7 @@ export const useEventAction = () => {
         logAxiosError('Failed adding event', error);
       }
     },
-    [_addEventMutation, defaultDangerTime, defaultDuration, defaultPublic, defaultWarnTime, linkPrevious, queryClient],
+    [_addEventMutation, defaultDuration, defaultPublic, linkPrevious],
   );
 
   /**
@@ -174,7 +155,7 @@ export const useEventAction = () => {
 
   const updateCustomField = useCallback(
     async (eventId: string, field: string, value: string) => {
-      updateEvent({ id: eventId, custom: { [field]: value } });
+      updateEvent({ id: eventId, custom: { [field]: { value } } });
     },
     [updateEvent],
   );
@@ -222,12 +203,9 @@ export const useEventAction = () => {
         newValMillis = forgivingStringToMillis(value);
       }
 
-      // dont allow timer values over 23:59:59
-      const cappedMillis = Math.min(newValMillis, dayInMs - MILLIS_PER_SECOND);
-
       const newEvent = {
         id: eventId,
-        [field]: cappedMillis,
+        [field]: newValMillis,
       };
       try {
         await _updateEventMutation.mutateAsync(newEvent);

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

@@ -25,6 +25,8 @@ export const useOperator = () => {
 export const useMessageControl = () => {
   const featureSelector = (state: RuntimeStore) => ({
     timer: state.message.timer,
+    public: state.message.public,
+    lower: state.message.lower,
     external: state.message.external,
     onAir: state.onAir,
   });
@@ -35,6 +37,10 @@ export const useMessageControl = () => {
 export const setMessage = {
   timerText: (payload: string) => socketSendJson('message', { timer: { text: payload } }),
   timerVisible: (payload: boolean) => socketSendJson('message', { timer: { visible: payload } }),
+  publicText: (payload: string) => socketSendJson('message', { public: { text: payload } }),
+  publicVisible: (payload: boolean) => socketSendJson('message', { public: { visible: payload } }),
+  lowerText: (payload: string) => socketSendJson('message', { lower: { text: payload } }),
+  lowerVisible: (payload: boolean) => socketSendJson('message', { lower: { visible: payload } }),
   timerBlink: (payload: boolean) => socketSendJson('message', { timer: { blink: payload } }),
   timerBlackout: (payload: boolean) => socketSendJson('message', { timer: { blackout: payload } }),
 };
@@ -53,12 +59,12 @@ export const setPlayback = {
   start: () => socketSendJson('start'),
   pause: () => socketSendJson('pause'),
   roll: () => socketSendJson('roll'),
-  startNext: () => socketSendJson('start', 'next'),
+  startNext: () => socketSendJson('start', { next: true }),
   previous: () => {
-    socketSendJson('load', 'previous');
+    socketSendJson('load', { previous: true });
   },
   next: () => {
-    socketSendJson('load', 'next');
+    socketSendJson('load', { next: true });
   },
   stop: () => {
     socketSendJson('stop');
@@ -83,27 +89,27 @@ export const useInfoPanel = () => {
   return useRuntimeStore(featureSelector);
 };
 
-export const useAuxTimerTime = () => {
-  const featureSelector = (state: RuntimeStore) => state.auxtimer1.current;
+export const useExtraTimerTime = () => {
+  const featureSelector = (state: RuntimeStore) => state.timer1.current;
 
   return useRuntimeStore(featureSelector);
 };
 
-export const useAuxTimerControl = () => {
+export const useExtraTimerControl = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.auxtimer1.playback,
-    direction: state.auxtimer1.direction,
+    playback: state.timer1.playback,
+    direction: state.timer1.direction,
   });
 
   return useRuntimeStore(featureSelector);
 };
 
-export const setAuxTimer = {
-  start: () => socketSendJson('auxtimer', { '1': SimplePlayback.Start }),
-  pause: () => socketSendJson('auxtimer', { '1': SimplePlayback.Pause }),
-  stop: () => socketSendJson('auxtimer', { '1': SimplePlayback.Stop }),
-  setDirection: (direction: SimpleDirection) => socketSendJson('auxtimer', { '1': { direction } }),
-  setDuration: (time: number) => socketSendJson('auxtimer', { '1': { duration: time } }),
+export const setExtraTimer = {
+  start: () => socketSendJson('extratimer', SimplePlayback.Start),
+  pause: () => socketSendJson('extratimer', SimplePlayback.Pause),
+  stop: () => socketSendJson('extratimer', SimplePlayback.Stop),
+  setDirection: (direction: SimpleDirection) => socketSendJson('extratimer', { direction }),
+  setTime: (time: number) => socketSendJson('extratimer', { settime: time }),
 };
 
 export const useCuesheet = () => {

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

@@ -33,5 +33,5 @@ export const useAppMode = create<AppModeStore>()((set) => ({
       return { mode };
     });
   },
-  setCursor: (cursor: string | null) => set({ cursor }),
+  setCursor: (cursor: string | null) => set(() => ({ cursor })),
 }));

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

@@ -2,68 +2,55 @@ import { create } from 'zustand';
 
 import { booleanFromLocalStorage } from '../utils/localStorage';
 
-type EditorSettingsStore = {
-  defaultDuration: string;
+type EditorSettings = {
   linkPrevious: boolean;
-  defaultWarnTime: string;
-  defaultDangerTime: string;
   defaultPublic: boolean;
-  setDefaultDuration: (defaultDuration: string) => void;
-  setLinkPrevious: (linkPrevious: boolean) => void;
-  setWarnTime: (warnTime: string) => void;
-  setDangerTime: (dangerTime: string) => void;
-  setDefaultPublic: (defaultPublic: boolean) => void;
+  defaultDuration: string;
 };
 
-export const editorSettingsDefaults = {
-  duration: '00:10:00',
-  linkPrevious: true,
-  warnTime: '00:02:00', // 120000 same as backend
-  dangerTime: '00:01:00', // 60000 same as backend
-  isPublic: true,
+type EditorSettingsStore = {
+  eventSettings: EditorSettings;
+  setLocalEventSettings: (newState: EditorSettings) => void;
+  setLinkPrevious: (linkPrevious: boolean) => void;
+  setDefaultPublic: (defaultPublic: boolean) => void;
+  setDefaultDuration: (defaultDuration: string) => void;
 };
 
 enum EditorSettingsKeys {
-  DefaultDuration = 'ontime-default-duration',
   LinkPrevious = 'ontime-link-previous',
-  DefaultWarnTime = 'ontime-default-warn-time',
-  DefaultDangerTime = 'ontime-default-danger-time',
   DefaultPublic = 'ontime-default-public',
+  DefaultDuration = 'ontime-default-duration',
 }
 
-export const useEditorSettings = create<EditorSettingsStore>((set) => {
-  return {
-    defaultDuration: localStorage.getItem(EditorSettingsKeys.DefaultDuration) ?? editorSettingsDefaults.duration,
-    linkPrevious: booleanFromLocalStorage(EditorSettingsKeys.LinkPrevious, editorSettingsDefaults.linkPrevious),
-    defaultWarnTime: localStorage.getItem(EditorSettingsKeys.DefaultWarnTime) ?? editorSettingsDefaults.warnTime,
-    defaultDangerTime: localStorage.getItem(EditorSettingsKeys.DefaultDangerTime) ?? editorSettingsDefaults.dangerTime,
-    defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.DefaultPublic, editorSettingsDefaults.isPublic),
+export const useEditorSettings = create<EditorSettingsStore>((set) => ({
+  eventSettings: {
+    linkPrevious: booleanFromLocalStorage(EditorSettingsKeys.LinkPrevious, true),
+    defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.DefaultPublic, true),
+    defaultDuration: localStorage.getItem(EditorSettingsKeys.DefaultDuration) ?? '00:10:00',
+  },
 
-    setDefaultDuration: (defaultDuration) =>
-      set(() => {
-        localStorage.setItem(EditorSettingsKeys.DefaultDuration, String(defaultDuration));
-        return { defaultDuration };
-      }),
+  setLocalEventSettings: (value) =>
+    set(() => {
+      localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(value.linkPrevious));
+      localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(value.defaultPublic));
+      return { eventSettings: value };
+    }),
 
-    setLinkPrevious: (linkPrevious) =>
-      set(() => {
-        localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(linkPrevious));
-        return { linkPrevious };
-      }),
-    setWarnTime: (defaultWarnTime) =>
-      set(() => {
-        localStorage.setItem(EditorSettingsKeys.DefaultWarnTime, String(defaultWarnTime));
-        return { defaultWarnTime };
-      }),
-    setDangerTime: (defaultDangerTime) =>
-      set(() => {
-        localStorage.setItem(EditorSettingsKeys.DefaultDangerTime, String(defaultDangerTime));
-        return { defaultDangerTime };
-      }),
-    setDefaultPublic: (defaultPublic) =>
-      set(() => {
-        localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic));
-        return { defaultPublic };
-      }),
-  };
-});
+  setLinkPrevious: (linkPrevious) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(linkPrevious));
+      return { eventSettings: { ...state.eventSettings, linkPrevious } };
+    }),
+
+  setDefaultPublic: (defaultPublic) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic));
+      return { eventSettings: { ...state.eventSettings, defaultPublic } };
+    }),
+
+  setDefaultDuration: (defaultDuration) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.DefaultDuration, String(defaultDuration));
+      return { eventSettings: { ...state.eventSettings, defaultDuration } };
+    }),
+}));

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

@@ -1,11 +0,0 @@
-import { create } from 'zustand';
-
-type EntryCopyStore = {
-  entryCopyId: string | null;
-  setEntryCopyId: (eventId: string | null) => void;
-};
-
-export const useEntryCopy = create<EntryCopyStore>()((set) => ({
-  entryCopyId: null,
-  setEntryCopyId: (entryCopyId: string | null) => set({ entryCopyId }),
-}));

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

@@ -23,6 +23,14 @@ export const runtimeStorePlaceholder: RuntimeStore = {
       blink: false,
       blackout: false,
     },
+    public: {
+      text: '',
+      visible: false,
+    },
+    lower: {
+      text: '',
+      visible: false,
+    },
     external: {
       text: '',
       visible: false,
@@ -41,7 +49,7 @@ export const runtimeStorePlaceholder: RuntimeStore = {
   eventNext: null,
   publicEventNow: null,
   publicEventNext: null,
-  auxtimer1: {
+  timer1: {
     current: 0,
     direction: SimpleDirection.CountUp,
     duration: 0,

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

@@ -1,5 +1,3 @@
-import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
-
 import { forgivingStringToMillis, millisToDelayString } from '../dateConfig';
 
 describe('test forgivingStringToMillis()', () => {
@@ -8,22 +6,22 @@ describe('test forgivingStringToMillis()', () => {
       { value: '', expect: 0 },
       { value: '0', expect: 0 },
       { value: '-0', expect: 0 },
-      { value: '1', expect: MILLIS_PER_MINUTE },
-      { value: '-1', expect: MILLIS_PER_MINUTE },
+      { value: '1', expect: 60 * 1000 },
+      { value: '-1', expect: 60 * 1000 },
       { value: '0h0m0s', expect: 0 },
-      { value: '0h0m1s', expect: MILLIS_PER_SECOND },
-      { value: '0h1m0s', expect: MILLIS_PER_MINUTE },
-      { value: '1h0m0s', expect: MILLIS_PER_HOUR },
-      { value: '23h0m0s', expect: 23 * MILLIS_PER_HOUR },
-      { value: '12h12m12s', expect: 12 * MILLIS_PER_SECOND + 12 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_HOUR },
-      { value: '12H12M12S', expect: 12 * MILLIS_PER_SECOND + 12 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_HOUR },
-      { value: '2m', expect: 2 * MILLIS_PER_MINUTE },
-      { value: '1h5s', expect: MILLIS_PER_HOUR + 5 * MILLIS_PER_SECOND },
-      { value: '1h2m', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE },
+      { value: '0h0m1s', expect: 1000 },
+      { value: '0h1m0s', expect: 1000 * 60 },
+      { value: '1h0m0s', expect: 1000 * 60 * 60 },
+      { value: '23h0m0s', expect: 1000 * 60 * 60 * 23 },
+      { value: '12h12m12s', expect: 12 * 1000 + 12 * 60 * 1000 + 12 * 1000 * 60 * 60 },
+      { value: '12H12M12S', expect: 12 * 1000 + 12 * 60 * 1000 + 12 * 1000 * 60 * 60 },
+      { value: '2m', expect: 2 * 60 * 1000 },
+      { value: '1h5s', expect: 1000 * 60 * 60 + 1000 * 5 },
+      { value: '1h2m', expect: 1000 * 60 * 60 + 1000 * 60 * 2 },
     ];
 
     for (const s of testData) {
-      it(`handles ${s.value}`, () => {
+      it(`handles ${s.value} to left`, () => {
         expect(typeof forgivingStringToMillis(s.value)).toBe('number');
         expect(forgivingStringToMillis(s.value)).toBe(s.expect);
       });
@@ -32,10 +30,10 @@ describe('test forgivingStringToMillis()', () => {
 
   describe('parses strings correctly', () => {
     const ts = [
-      { value: '1.1.1', expect: MILLIS_PER_HOUR + MILLIS_PER_MINUTE + MILLIS_PER_SECOND },
-      { value: '12.1.1', expect: 12 * MILLIS_PER_HOUR + MILLIS_PER_MINUTE + MILLIS_PER_SECOND },
-      { value: '12.55.1', expect: 12 * MILLIS_PER_HOUR + 55 * MILLIS_PER_MINUTE + MILLIS_PER_SECOND },
-      { value: '12.55.40', expect: 12 * MILLIS_PER_HOUR + 55 * MILLIS_PER_MINUTE + 40 * MILLIS_PER_SECOND },
+      { value: '1.1.1', expect: 60 * 60 * 1000 + 60 * 1000 + 1000 },
+      { value: '12.1.1', expect: 12 * 60 * 60 * 1000 + 60 * 1000 + 1000 },
+      { value: '12.55.1', expect: 12 * 60 * 60 * 1000 + 55 * 60 * 1000 + 1000 },
+      { value: '12.55.40', expect: 12 * 60 * 60 * 1000 + 55 * 60 * 1000 + 40 * 1000 },
     ];
 
     for (const s of ts) {
@@ -45,45 +43,17 @@ describe('test forgivingStringToMillis()', () => {
     }
   });
 
-  describe('#33 separators are parsed according to doc examples ', () => {
-    const ts = [
-      { value: '0.1', expect: MILLIS_PER_MINUTE },
-      { value: '0 1', expect: MILLIS_PER_MINUTE },
-      { value: '0:1', expect: MILLIS_PER_MINUTE },
-      { value: '0,1', expect: MILLIS_PER_MINUTE },
-      { value: '2.2.2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '2 2 2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '2:2:2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '2,2,2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '2,2,2', expect: 2 * MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 2 * MILLIS_PER_SECOND },
-      { value: '10:', expect: 10 * MILLIS_PER_HOUR },
-      { value: ':10', expect: 10 * MILLIS_PER_MINUTE },
-      { value: '10', expect: 10 * MILLIS_PER_MINUTE },
-      { value: '120', expect: MILLIS_PER_HOUR + 20 * MILLIS_PER_MINUTE },
-      { value: '90m', expect: 90 * MILLIS_PER_MINUTE },
-      { value: '1.2', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE },
-      { value: '1.2.3', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 3 * MILLIS_PER_SECOND },
-      { value: '123456', expect: 12 * MILLIS_PER_HOUR + 34 * MILLIS_PER_MINUTE + 56 * MILLIS_PER_SECOND },
-    ];
-
-    for (const s of ts) {
-      it(`handles ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
   describe('parses time strings', () => {
     const ts = [
-      { value: '1h2m3s', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 3 * MILLIS_PER_SECOND },
-      { value: '1h3s', expect: MILLIS_PER_HOUR + 3 * MILLIS_PER_SECOND },
-      { value: '1h2m', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE },
-      { value: '10h', expect: 10 * MILLIS_PER_HOUR },
-      { value: '10m', expect: 10 * MILLIS_PER_MINUTE },
-      { value: '10s', expect: 10 * MILLIS_PER_SECOND },
-      { value: '120h', expect: 120 * MILLIS_PER_HOUR },
-      { value: '120m', expect: 120 * MILLIS_PER_MINUTE },
-      { value: '120s', expect: 120 * MILLIS_PER_SECOND },
+      { value: '1h2m3s', expect: 60 * 60 * 1000 + 2 * 60 * 1000 + 3 * 1000 },
+      { value: '1h3s', expect: 60 * 60 * 1000 + 3 * 1000 },
+      { value: '1h2m', expect: 60 * 60 * 1000 + 2 * 60 * 1000 },
+      { value: '10h', expect: 10 * 60 * 60 * 1000 },
+      { value: '10m', expect: 10 * 60 * 1000 },
+      { value: '10s', expect: 10 * 1000 },
+      { value: '120h', expect: 120 * 60 * 60 * 1000 },
+      { value: '120m', expect: 120 * 60 * 1000 },
+      { value: '120s', expect: 120 * 1000 },
     ];
 
     for (const s of ts) {
@@ -95,20 +65,20 @@ describe('test forgivingStringToMillis()', () => {
 
   describe('handles am/pm', () => {
     const ampm = [
-      { value: '9:10:11am', expect: 9 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 11 * MILLIS_PER_SECOND },
-      { value: '9:10:11a', expect: 9 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 11 * MILLIS_PER_SECOND },
-      { value: '9:10:11pm', expect: (12 + 9) * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 11 * MILLIS_PER_SECOND },
-      { value: '9:10:11p', expect: (12 + 9) * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 11 * MILLIS_PER_SECOND },
-      { value: '9:10am', expect: 9 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-      { value: '9:10a', expect: 9 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-      { value: '9:10pm', expect: (12 + 9) * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-      { value: '9:10p', expect: (12 + 9) * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-      { value: '9am', expect: 9 * MILLIS_PER_HOUR },
-      { value: '9a', expect: 9 * MILLIS_PER_HOUR },
-      { value: '9pm', expect: (12 + 9) * MILLIS_PER_HOUR },
-      { value: '9p', expect: (12 + 9) * MILLIS_PER_HOUR },
+      { value: '9:10:11am', expect: 9 * 60 * 60 * 1000 + 10 * 60 * 1000 + 11 * 1000 },
+      { value: '9:10:11a', expect: 9 * 60 * 60 * 1000 + 10 * 60 * 1000 + 11 * 1000 },
+      { value: '9:10:11pm', expect: (12 + 9) * 60 * 60 * 1000 + 10 * 60 * 1000 + 11 * 1000 },
+      { value: '9:10:11p', expect: (12 + 9) * 60 * 60 * 1000 + 10 * 60 * 1000 + 11 * 1000 },
+      { value: '9:10am', expect: 9 * 60 * 60 * 1000 + 10 * 60 * 1000 },
+      { value: '9:10a', expect: 9 * 60 * 60 * 1000 + 10 * 60 * 1000 },
+      { value: '9:10pm', expect: (12 + 9) * 60 * 60 * 1000 + 10 * 60 * 1000 },
+      { value: '9:10p', expect: (12 + 9) * 60 * 60 * 1000 + 10 * 60 * 1000 },
+      { value: '9am', expect: 9 * 60 * 60 * 1000 },
+      { value: '9a', expect: 9 * 60 * 60 * 1000 },
+      { value: '9pm', expect: (12 + 9) * 60 * 60 * 1000 },
+      { value: '9p', expect: (12 + 9) * 60 * 60 * 1000 },
       { value: '12am', expect: 0 },
-      { value: '12pm', expect: 12 * MILLIS_PER_HOUR },
+      { value: '12pm', expect: 12 * 60 * 60 * 1000 },
     ];
 
     for (const s of ampm) {
@@ -120,12 +90,12 @@ describe('test forgivingStringToMillis()', () => {
 
   describe('it infers separators when non existent', () => {
     const testCases = [
-      { value: '1', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '12', expect: 12 * MILLIS_PER_MINUTE }, // 00:12:00
-      { value: '123', expect: MILLIS_PER_HOUR + 23 * MILLIS_PER_MINUTE }, // 01:23:00
-      { value: '1234', expect: 12 * MILLIS_PER_HOUR + 34 * MILLIS_PER_MINUTE }, // 12:34:00
-      { value: '12345', expect: 12 * MILLIS_PER_HOUR + 34 * MILLIS_PER_MINUTE + 5 * MILLIS_PER_SECOND }, // 12:34:05
-      { value: '123456', expect: 12 * MILLIS_PER_HOUR + 34 * MILLIS_PER_MINUTE + 56 * MILLIS_PER_SECOND }, // 12:34:56
+      { value: '1', expect: 1000 * 60 }, // 00:01:00
+      { value: '12', expect: 1000 * 60 * 12 }, // 00:12:00
+      { value: '123', expect: 1000 * 60 * 23 + 1000 * 60 * 60 }, // 01:23:00
+      { value: '1234', expect: 1000 * 60 * 34 + 1000 * 60 * 60 * 12 }, // 12:34:00
+      { value: '12345', expect: 1000 * 60 * 34 + 1000 * 60 * 60 * 12 + 5 * 1000 }, // 12:34:05
+      { value: '123456', expect: 1000 * 60 * 34 + 1000 * 60 * 60 * 12 + 56 * 1000 }, // 12:34:56
     ];
 
     for (const s of testCases) {
@@ -135,12 +105,12 @@ describe('test forgivingStringToMillis()', () => {
     }
 
     const sixDigits = [
-      { value: '000000', expect: 0 }, // 00:00:00
-      { value: '000001', expect: MILLIS_PER_SECOND }, // 00:00:01
-      { value: '000100', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '010000', expect: MILLIS_PER_HOUR }, // 01:00:00
-      { value: '230000', expect: MILLIS_PER_HOUR * 23 }, // 23:00:00
-      { value: '121212', expect: 12 * MILLIS_PER_HOUR + 12 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_SECOND }, // 12:12:12
+      { value: '000000', expect: 0 },
+      { value: '000001', expect: 1000 },
+      { value: '000100', expect: 1000 * 60 },
+      { value: '010000', expect: 1000 * 60 * 60 },
+      { value: '230000', expect: 1000 * 60 * 60 * 23 },
+      { value: '121212', expect: 12 * 1000 + 12 * 60 * 1000 + 12 * 1000 * 60 * 60 },
     ];
 
     for (const s of sixDigits) {
@@ -151,13 +121,13 @@ describe('test forgivingStringToMillis()', () => {
 
     const fiveDigits = [
       { value: '00000', expect: 0 },
-      { value: '00001', expect: MILLIS_PER_SECOND }, // 00:00:01
-      { value: '00010', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '00100', expect: 10 * MILLIS_PER_MINUTE }, // 00:10:00
-      { value: '01000', expect: MILLIS_PER_HOUR }, // 01:00:00
-      { value: '10000', expect: 10 * MILLIS_PER_HOUR }, // 10:00:00
-      { value: '23000', expect: 23 * MILLIS_PER_HOUR }, // 23:00:00
-      { value: '12121', expect: 12 * MILLIS_PER_HOUR + 12 * MILLIS_PER_MINUTE + 1 * MILLIS_PER_SECOND }, // 12:12:01
+      { value: '00001', expect: 1000 }, // 00:00:01
+      { value: '00010', expect: 1000 * 60 }, // 00:01:00
+      { value: '00100', expect: 1000 * 60 * 10 }, // 00:10:00
+      { value: '01000', expect: 1000 * 60 * 60 }, // 01:00:00
+      { value: '10000', expect: 1000 * 60 * 60 * 10 }, // 10:00:00
+      { value: '23000', expect: 1000 * 60 * 60 * 23 }, // 23:00:00
+      { value: '12121', expect: 1000 + 12 * 60 * 1000 + 12 * 1000 * 60 * 60 }, // 12:12:01
     ];
 
     for (const s of fiveDigits) {
@@ -168,12 +138,12 @@ describe('test forgivingStringToMillis()', () => {
 
     const fourDigits = [
       { value: '0000', expect: 0 },
-      { value: '0001', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '0010', expect: 10 * MILLIS_PER_MINUTE }, // 00:10:00
-      { value: '0100', expect: MILLIS_PER_HOUR }, // 01:00:00
-      { value: '1000', expect: 10 * MILLIS_PER_HOUR }, // 10:00:00
-      { value: '2300', expect: 23 * MILLIS_PER_HOUR }, // 23:00:00
-      { value: '1212', expect: 12 * MILLIS_PER_HOUR + 12 * MILLIS_PER_MINUTE }, // 12:12:00
+      { value: '0001', expect: 1000 * 60 }, // 00:01:00
+      { value: '0010', expect: 1000 * 60 * 10 }, // 00:10:00
+      { value: '0100', expect: 1000 * 60 * 60 }, // 01:00:00
+      { value: '1000', expect: 1000 * 60 * 60 * 10 }, // 10:00:00
+      { value: '2300', expect: 1000 * 60 * 60 * 23 }, // 23:00:00
+      { value: '1212', expect: 12 * 60 * 1000 + 12 * 1000 * 60 * 60 }, // 12:12:00
     ];
 
     for (const s of fourDigits) {
@@ -184,11 +154,11 @@ describe('test forgivingStringToMillis()', () => {
 
     const threeDigits = [
       { value: '000', expect: 0 },
-      { value: '001', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '010', expect: 10 * MILLIS_PER_MINUTE }, // 00:10:00
-      { value: '100', expect: MILLIS_PER_HOUR }, // 01:00:00
-      { value: '230', expect: 2 * MILLIS_PER_HOUR + 30 * MILLIS_PER_MINUTE }, // 02:30:00
-      { value: '121', expect: MILLIS_PER_HOUR + 21 * MILLIS_PER_MINUTE }, // 01:21:00
+      { value: '001', expect: 1000 * 60 }, // 00:01:00
+      { value: '010', expect: 1000 * 60 * 10 }, // 00:10:00
+      { value: '100', expect: 1000 * 60 * 60 }, // 01:00:00
+      { value: '230', expect: 2 * 1000 * 60 * 60 + 30 * 1000 * 60 }, // 02:30:00
+      { value: '121', expect: 21 * 60 * 1000 + 1000 * 60 * 60 }, // 01:21:00
     ];
 
     for (const s of threeDigits) {
@@ -199,9 +169,9 @@ describe('test forgivingStringToMillis()', () => {
 
     const twoDigits = [
       { value: '00', expect: 0 },
-      { value: '01', expect: MILLIS_PER_MINUTE }, // 00:01:00
-      { value: '10', expect: 10 * MILLIS_PER_MINUTE }, // 00:10:00
-      { value: '23', expect: 23 * MILLIS_PER_MINUTE }, // 00:23:00
+      { value: '01', expect: 1000 * 60 }, // 00:01:00
+      { value: '10', expect: 1000 * 60 * 10 }, // 00:10:00
+      { value: '23', expect: 1000 * 60 * 23 }, // 00:23:00
     ];
 
     for (const s of twoDigits) {
@@ -222,17 +192,18 @@ describe('test forgivingStringToMillis()', () => {
   describe('handles overflows', () => {
     const ts = [
       // minutes overflow
-      { value: '99', expect: 99 * MILLIS_PER_MINUTE },
-      { value: '1.39.0', expect: 99 * MILLIS_PER_MINUTE },
+      { value: '2.0.0', expect: 1000 * 60 * 120 },
+      { value: '99', expect: 1000 * 60 * 99 },
+      { value: '1.39.0', expect: 1000 * 60 * 99 },
       // seconds overflow
-      { value: '0.0.120', expect: 120 * MILLIS_PER_SECOND },
-      { value: '0.2.0', expect: 120 * MILLIS_PER_SECOND },
-      { value: '0.0.99', expect: 99 * MILLIS_PER_SECOND },
-      { value: '0.1.39', expect: 99 * MILLIS_PER_SECOND },
+      { value: '0.0.120', expect: 120 * 1000 },
+      { value: '0.2.0', expect: 120 * 1000 },
+      { value: '0.0.99', expect: 99 * 1000 },
+      { value: '0.1.39', expect: 99 * 1000 },
       // hours overflow
-      { value: '25.0.0', expect: 25 * MILLIS_PER_HOUR },
+      { value: '25.0.0', expect: 1000 * 60 * 60 * 25 },
       // hours overflow
-      { value: '50.0.0', expect: 50 * MILLIS_PER_HOUR },
+      { value: '50.0.0', expect: 1000 * 60 * 60 * 50 },
     ];
 
     for (const s of ts) {
@@ -245,10 +216,10 @@ describe('test forgivingStringToMillis()', () => {
   describe('test fillLeft', () => {
     describe('function handles separators', () => {
       const testData = [
-        { value: '1:2:3:10', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE + 3 * MILLIS_PER_SECOND }, // 01:02:03
-        { value: '2,10', expect: 2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-        { value: '2.10', expect: 2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
-        { value: '2 10', expect: 2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE },
+        { value: '1:2:3:10', expect: 3723000 },
+        { value: '2,10', expect: 2 * 60 * 60 * 1000 + 60 * 10 * 1000 },
+        { value: '2.10', expect: 2 * 60 * 60 * 1000 + 60 * 10 * 1000 },
+        { value: '2 10', expect: 2 * 60 * 60 * 1000 + 60 * 10 * 1000 },
       ];
 
       for (const s of testData) {
@@ -261,8 +232,8 @@ describe('test forgivingStringToMillis()', () => {
 
     describe('parses strings correctly', () => {
       const ts = [
-        { value: '1.2', expect: MILLIS_PER_HOUR + 2 * MILLIS_PER_MINUTE },
-        { value: '1.70', expect: MILLIS_PER_HOUR + 70 * MILLIS_PER_MINUTE },
+        { value: '1.2', expect: 60 * 60 * 1000 + 2 * 60 * 1000 },
+        { value: '1.70', expect: 60 * 60 * 1000 + 70 * 60 * 1000 },
       ];
 
       for (const s of ts) {
@@ -275,8 +246,8 @@ describe('test forgivingStringToMillis()', () => {
     describe('handles overflows', () => {
       const ts = [
         // minutes overflow
-        { value: '0.120', expect: 120 * MILLIS_PER_MINUTE },
-        { value: '0.99', expect: 99 * MILLIS_PER_MINUTE },
+        { value: '0.120', expect: 120 * 60 * 1000 },
+        { value: '0.99', expect: 99 * 60 * 1000 },
       ];
 
       for (const s of ts) {

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

@@ -22,7 +22,7 @@ describe('cloneEvent()', () => {
       timeWarning: 120000,
       timeDanger: 60000,
       custom: {
-        lighting: '3',
+        lighting: { value: '3' },
       } as EventCustomFields,
     } as OntimeEvent;
 

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

@@ -97,7 +97,12 @@ function inferSeparators(value: string, isAM: boolean, isPM: boolean) {
     inferredMillis = parse(value[0]) * MILLIS_PER_HOUR + parse(value.substring(1)) * MILLIS_PER_MINUTE;
   } else if (length === 4) {
     inferredMillis = parse(value.substring(0, 2)) * MILLIS_PER_HOUR + parse(value.substring(2)) * MILLIS_PER_MINUTE;
-  } else if (length >= 5) {
+  } else if (length === 5) {
+    const hours = parse(value.substring(0, 2));
+    const minutes = parse(value.substring(2, 4));
+    const seconds = parse(value.substring(4));
+    inferredMillis = hours * MILLIS_PER_HOUR + minutes * MILLIS_PER_MINUTE + seconds * MILLIS_PER_SECOND;
+  } else if (length >= 6) {
     const hours = parse(value.substring(0, 2));
     const minutes = parse(value.substring(2, 4));
     const seconds = parse(value.substring(4));
@@ -142,7 +147,6 @@ export const forgivingStringToMillis = (value: string): number => {
     hoursMatchValue = addAM;
   }
   if (first != null && second != null && third == null) {
-    // if string has two sections, treat as [hours] [minutes]
     millis = parse(first) * MILLIS_PER_HOUR;
     millis += parse(second) * MILLIS_PER_MINUTE;
   }
@@ -151,7 +155,6 @@ export const forgivingStringToMillis = (value: string): number => {
   if (isPM && hoursMatchValue < 12) {
     millis += 12 * MILLIS_PER_HOUR;
   }
-
   return millis;
 };
 

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

@@ -4,5 +4,3 @@ export function isMacOS() {
 }
 
 export const deviceAlt = isMacOS() ? '⌥' : 'Alt';
-
-export const deviceMod = isMacOS() ? '⌘' : 'Ctrl';

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

@@ -8,5 +8,4 @@ export const isIPAddress = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/;
 export const startsWithHttp = /^http:\/\//;
 export const startsWithSlash = /^\//;
 export const isAlphanumeric = /^[a-z0-9]+$/i;
-export const isASCII = /^[ -~]+$/; //https://catonmat.net/my-favorite-regex
 export const isNotEmpty = /\S/;

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

@@ -114,9 +114,9 @@ export const connectSocket = (preferredClientName?: string) => {
           updateDevTools({ publicEventNext: payload });
           break;
         }
-        case 'ontime-auxtimer1': {
-          patchRuntime('auxtimer1', payload);
-          updateDevTools({ auxtimer1: payload });
+        case 'ontime-timer1': {
+          patchRuntime('timer1', payload);
+          updateDevTools({ timer1: payload });
           break;
         }
       }

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

@@ -33,4 +33,3 @@ export const cx = (classNames: any[]) => classNames.filter(Boolean).join(' ');
 export const enDash = '–';
 
 export const timerPlaceholder = '––:––:––';
-export const timerPlaceholderMin = '––:––';

apps/client/src/features/app-settings/AppSettings.module.scss

@@ -7,5 +7,5 @@
   gap: 0.25rem;
 
   overflow: hidden;
-  background-color: $ui-black;
+  background-color: black;
 }

apps/client/src/features/app-settings/AppSettings.tsx

@@ -3,11 +3,12 @@ import { ErrorBoundary } from '@sentry/react';
 import { useKeyDown } from '../../common/hooks/useKeyDown';
 
 import AboutPanel from './panel/about-panel/AboutPanel';
-import FeatureSettingsPanel from './panel/feature-settings-panel/FeatureSettingsPanel';
 import GeneralPanel from './panel/general-panel/GeneralPanel';
 import IntegrationsPanel from './panel/integrations-panel/IntegrationsPanel';
+import InterfacePanel from './panel/interface-panel/InterfacePanel';
 import LogPanel from './panel/log-panel/LogPanel';
 import ProjectPanel from './panel/project-panel/ProjectPanel';
+import ProjectSettingsPanel from './panel/project-settings-panel/ProjectSettingsPanel';
 import ShutdownPanel from './panel/shutdown-panel/ShutdownPanel';
 import SourcesPanel from './panel/sources-panel/SourcesPanel';
 import PanelContent from './panel-content/PanelContent';
@@ -27,8 +28,9 @@ export default function AppSettings() {
         <PanelContent onClose={close}>
           {panel === 'project' && <ProjectPanel location={location} />}
           {panel === 'general' && <GeneralPanel location={location} />}
-          {panel === 'feature_settings' && <FeatureSettingsPanel location={location} />}
+          {panel === 'project_settings' && <ProjectSettingsPanel />}
           {panel === 'sources' && <SourcesPanel />}
+          {panel === 'interface' && <InterfacePanel />}
           {panel === 'integrations' && <IntegrationsPanel location={location} />}
           {panel === 'about' && <AboutPanel />}
           {panel === 'log' && <LogPanel />}

apps/client/src/features/app-settings/panel/feature-settings-panel/FeatureSettingsPanel.tsx

@@ -1,24 +0,0 @@
-import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
-import { PanelBaseProps } from '../../settingsStore';
-import * as Panel from '../PanelUtils';
-
-import CustomFields from './custom-fields/CustomFields';
-import UrlPresetsForm from './UrlPresetsForm';
-
-export default function FeatureSettingsPanel({ location }: PanelBaseProps) {
-  const customFieldsRef = useScrollIntoView<HTMLDivElement>('custom', location);
-  const urlPresetsRef = useScrollIntoView<HTMLDivElement>('urlpresets', location);
-
-  return (
-    <>
-      <Panel.Header>Feature Settings</Panel.Header>
-      <div ref={customFieldsRef}>
-        <CustomFields />
-      </div>
-
-      <div ref={urlPresetsRef}>
-        <UrlPresetsForm />
-      </div>
-    </>
-  );
-}

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx

@@ -1,98 +0,0 @@
-import { useState } from 'react';
-import { Alert, AlertDescription, AlertIcon, Button } from '@chakra-ui/react';
-import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
-import { CustomField, CustomFieldLabel } from 'ontime-types';
-
-import { deleteCustomField, editCustomField, postCustomField } from '../../../../../common/api/customFields';
-import ExternalLink from '../../../../../common/components/external-link/ExternalLink';
-import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
-import * as Panel from '../../PanelUtils';
-
-import CustomFieldEntry from './CustomFieldEntry';
-import CustomFieldForm from './CustomFieldForm';
-
-const customFieldsDocsUrl = 'https://docs.getontime.no/features/custom-fields/';
-
-export default function CustomFields() {
-  const { data, refetch } = useCustomFields();
-  const [isAdding, setIsAdding] = useState(false);
-
-  const handleInitiateCreate = () => {
-    setIsAdding(true);
-  };
-
-  const handleCancel = () => {
-    setIsAdding(false);
-  };
-
-  const handleCreate = async (customField: CustomField) => {
-    await postCustomField(customField);
-    refetch();
-    setIsAdding(false);
-  };
-
-  const handleEditField = async (label: CustomFieldLabel, customField: CustomField) => {
-    await editCustomField(label, customField);
-    refetch();
-  };
-
-  const handleDelete = async (label: string) => {
-    try {
-      await deleteCustomField(label);
-      refetch();
-    } catch (_error) {
-      /** we do not handle errors here */
-    }
-  };
-
-  return (
-    <Panel.Section>
-      <Panel.Card>
-        <Panel.SubHeader>
-          Custom fields
-          <Button variant='ontime-subtle' rightIcon={<IoAdd />} size='sm' onClick={handleInitiateCreate}>
-            New
-          </Button>
-        </Panel.SubHeader>
-        <Panel.Divider />
-        <Panel.Section>
-          <Alert status='info' variant='ontime-on-dark-info'>
-            <AlertIcon />
-            <AlertDescription>
-              Custom fields allow for additional information to be added to an event (eg. light, sound, camera). <br />
-              <br />
-              This data is not used by Ontime.
-              <ExternalLink href={customFieldsDocsUrl}>See the docs</ExternalLink>
-            </AlertDescription>
-          </Alert>
-        </Panel.Section>
-        <Panel.Section>
-          {isAdding && <CustomFieldForm onSubmit={handleCreate} onCancel={handleCancel} />}
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th>Colour</th>
-                <th>Name</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {Object.entries(data).map(([key, { colour, label }]) => {
-                return (
-                  <CustomFieldEntry
-                    key={key}
-                    field={key}
-                    colour={colour}
-                    label={label}
-                    onEdit={handleEditField}
-                    onDelete={handleDelete}
-                  />
-                );
-              })}
-            </tbody>
-          </Panel.Table>
-        </Panel.Section>
-      </Panel.Card>
-    </Panel.Section>
-  );
-}

apps/client/src/features/app-settings/panel/general-panel/GeneralPanel.module.scss

@@ -2,3 +2,23 @@
   display: flex;
   gap: 1em;
 }
+
+.pad {
+  padding: 0 2rem;
+}
+
+.fit {
+  width: fit-content;
+}
+
+.aliasConstrain {
+  min-width: 12em;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.flex {
+  display: flex;
+}

apps/client/src/features/app-settings/panel/general-panel/GeneralPanel.tsx

@@ -1,28 +1,28 @@
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import { PanelBaseProps } from '../../settingsStore';
-import EditorSettingsForm from '../interface-panel/EditorSettingsForm';
 import * as Panel from '../PanelUtils';
 
 import GeneralPanelForm from './GeneralPanelForm';
+import UrlPresetsForm from './UrlPresetsForm';
 import ViewSettingsForm from './ViewSettingsForm';
 
 export default function GeneralPanel({ location }: PanelBaseProps) {
-  const generalRef = useScrollIntoView<HTMLDivElement>('settings', location);
-  const editorRef = useScrollIntoView<HTMLDivElement>('editor', location);
+  const manageRef = useScrollIntoView<HTMLDivElement>('manage', location);
   const viewRef = useScrollIntoView<HTMLDivElement>('view', location);
+  const urlPresetsRef = useScrollIntoView<HTMLDivElement>('urlpresets', location);
 
   return (
     <>
       <Panel.Header>App Settings</Panel.Header>
-      <div ref={generalRef}>
+      <div ref={manageRef}>
         <GeneralPanelForm />
       </div>
-      <div ref={editorRef}>
-        <EditorSettingsForm />
-      </div>
       <div ref={viewRef}>
         <ViewSettingsForm />
       </div>
+      <div ref={urlPresetsRef}>
+        <UrlPresetsForm />
+      </div>
     </>
   );
 }

apps/client/src/features/app-settings/panel/general-panel/UrlPresetsForm.tsx

@@ -15,7 +15,7 @@ import { handleLinks } from '../../../../common/utils/linkUtils';
 import { validateUrlPresetPath } from '../../../../common/utils/urlPresets';
 import * as Panel from '../PanelUtils';
 
-import style from './FeatureSettings.module.scss';
+import style from './GeneralPanel.module.scss';
 
 const urlPresetsDocs = 'https://docs.getontime.no/features/url-presets/';
 
@@ -91,12 +91,12 @@ export default function UrlPresetsForm() {
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} data-testid='url-preset-form'>
       <Panel.Card>
         <Panel.SubHeader>
-          URL presets
+          URL Presets
           <div className={style.actionButtons}>
-            <Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={!canSubmit}>
+            <Button variant='ontime-ghosted' size='md' onClick={onReset} isDisabled={!canSubmit}>
               Revert to saved
             </Button>
-            <Button variant='ontime-filled' size='sm' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
+            <Button variant='ontime-filled' size='md' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
               Save
             </Button>
           </div>

apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 import { Alert, AlertDescription, AlertIcon, Button, Input, Switch } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';
 
@@ -99,13 +99,7 @@ export default function ViewSettingsForm() {
                 title='Override CSS styles'
                 description='Enables overriding view styles with custom stylesheet'
               />
-              <Controller
-                control={control}
-                name='overrideStyles'
-                render={({ field: { onChange, value, ref } }) => (
-                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-                )}
-              />
+              <Switch {...register('overrideStyles')} variant='ontime' size='lg' />
             </Panel.ListItem>
           </Panel.ListGroup>
           <Panel.ListGroup>
@@ -126,15 +120,9 @@ export default function ViewSettingsForm() {
             <Panel.ListItem>
               <Panel.Field
                 title='Freeze timer on end'
-                description='Timer in views will stop from going negative and instead stop at 00:00:00'
-              />
-              <Controller
-                control={control}
-                name='freezeEnd'
-                render={({ field: { onChange, value, ref } }) => (
-                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-                )}
+                description='Timer in views will stop from going negative after reaching'
               />
+              <Switch {...register('freezeEnd')} variant='ontime' size='lg' />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field

apps/client/src/features/app-settings/panel/integrations-panel/HttpIntegrations.tsx

@@ -1,4 +1,4 @@
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { Button, IconButton, Input, Select, Switch } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
@@ -75,7 +75,7 @@ export default function HttpIntegrations() {
     <Panel.Section>
       <Panel.Card>
         <Panel.SubHeader>
-          HTTP settings
+          HTTP
           <div className={style.flex}>
             <Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
               Revert to saved
@@ -99,13 +99,7 @@ export default function HttpIntegrations() {
           <Panel.ListGroup>
             <Panel.ListItem>
               <Panel.Field title='HTTP Output' description='Provide feedback from Ontime through HTTP' />
-              <Controller
-                control={control}
-                name='enabledOut'
-                render={({ field: { onChange, value, ref } }) => (
-                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-                )}
-              />
+              <Switch variant='ontime' size='lg' {...register('enabledOut')} />
             </Panel.ListItem>
           </Panel.ListGroup>
 

apps/client/src/features/app-settings/panel/integrations-panel/IntegrationsPanel.module.css

@@ -2,10 +2,6 @@
   width: 100%;
 }
 
-.halfWidth {
-  width: 50%;
-}
-
 .fitContents.fitContents {
   width: max-content; /* override chakra */
 }

apps/client/src/features/app-settings/panel/integrations-panel/OscIntegrations.tsx

@@ -1,4 +1,4 @@
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { Button, IconButton, Input, Select, Switch } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
@@ -8,7 +8,7 @@ import { generateId } from 'ontime-utils';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import useOscSettings, { useOscSettingsMutation } from '../../../../common/hooks-query/useOscSettings';
 import { isKeyEscape } from '../../../../common/utils/keyEvent';
-import { isASCII, isIPAddress, isOnlyNumbers, startsWithSlash } from '../../../../common/utils/regex';
+import { isIPAddress, isOnlyNumbers, startsWithSlash } from '../../../../common/utils/regex';
 import * as Panel from '../PanelUtils';
 
 import { cycles } from './integrationUtils';
@@ -65,8 +65,7 @@ export default function OscIntegrations() {
     prepend({
       id: generateId(),
       cycle: 'onLoad',
-      address: '',
-      payload: '',
+      message: '',
       enabled: false,
     });
   };
@@ -81,7 +80,7 @@ export default function OscIntegrations() {
   return (
     <Panel.Card>
       <Panel.SubHeader>
-        OSC settings
+        Open Sound Control
         <div className={style.flex}>
           <Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
             Revert to saved
@@ -103,18 +102,12 @@ export default function OscIntegrations() {
 
       <Panel.Section as='form' id='osc-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
         <Panel.Loader isLoading={isLoading} />
-        <Panel.Title>General OSC settings</Panel.Title>
+        <Panel.Title>OSC Settings</Panel.Title>
         {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
         <Panel.ListGroup>
           <Panel.ListItem>
             <Panel.Field title='OSC input' description='Allow control of Ontime through OSC' />
-            <Controller
-              control={control}
-              name='enabledIn'
-              render={({ field: { onChange, value, ref } }) => (
-                <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-              )}
-            />
+            <Switch variant='ontime' size='lg' {...register('enabledIn')} />
           </Panel.ListItem>
           <Panel.ListItem>
             <Panel.Field
@@ -147,13 +140,7 @@ export default function OscIntegrations() {
         <Panel.ListGroup>
           <Panel.ListItem>
             <Panel.Field title='OSC output' description='Provide feedback from Ontime with OSC' />
-            <Controller
-              control={control}
-              name='enabledOut'
-              render={({ field: { onChange, value, ref } }) => (
-                <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-              )}
-            />
+            <Switch variant='ontime' size='lg' {...register('enabledOut')} />
           </Panel.ListItem>
           <Panel.ListItem>
             <Panel.Field
@@ -208,7 +195,7 @@ export default function OscIntegrations() {
         <Panel.Divider />
 
         <Panel.Title>
-          OSC integrations
+          OSC Integrations
           <Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}>
             Add
           </Button>
@@ -220,15 +207,14 @@ export default function OscIntegrations() {
               <tr>
                 <th>Enabled</th>
                 <th>Cycle</th>
-                <th className={style.halfWidth}>Address</th>
-                <th className={style.halfWidth}>Payload</th>
+                <th className={style.fullWidth}>Message</th>
                 <th />
               </tr>
             </thead>
             <tbody>
               {fields.map((field, index) => {
-                const maybeAddressError = errors.subscriptions?.[index]?.address?.message;
-                const maybePayloadError = errors.subscriptions?.[index]?.payload?.message;
+                // @ts-expect-error -- not sure why it is not finding the type, it is ok
+                const maybeError = errors.subscriptions?.[index]?.message?.message;
                 return (
                   <tr key={field.id}>
                     <td>
@@ -248,40 +234,22 @@ export default function OscIntegrations() {
                         ))}
                       </Select>
                     </td>
-                    <td className={style.halfWidth}>
+                    <td className={style.fullWidth}>
                       <Input
                         key={field.id}
                         size='sm'
                         variant='ontime-filled'
                         autoComplete='off'
-                        placeholder='/from-ontime/'
-                        {...register(`subscriptions.${index}.address`, {
+                        placeholder='/from-ontime/{{timer.current}}'
+                        {...register(`subscriptions.${index}.message`, {
                           required: { value: true, message: 'Required field' },
-                          validate: {
-                            oscStartsWithSlash: (value) =>
-                              startsWithSlash.test(value) || 'OSC address should start with a forward slash',
-                            oscStringIsAscii: (value) =>
-                              isASCII.test(value) || 'OSC address only allow ASCII characters',
+                          pattern: {
+                            value: startsWithSlash,
+                            message: 'OSC messages should start with a forward slash',
                           },
                         })}
                       />
-                      {maybeAddressError && <Panel.Error>{maybeAddressError}</Panel.Error>}
-                    </td>
-                    <td className={style.halfWidth}>
-                      <Input
-                        key={field.id}
-                        size='sm'
-                        variant='ontime-filled'
-                        autoComplete='off'
-                        placeholder='{{timer.current}}'
-                        {...register(`subscriptions.${index}.payload`, {
-                          validate: {
-                            oscStringIsAscii: (value) =>
-                              isASCII.test(value) || 'OSC payloads only allow ASCII characters',
-                          },
-                        })}
-                      />
-                      {maybePayloadError && <Panel.Error>{maybePayloadError}</Panel.Error>}
+                      {maybeError && <Panel.Error>{maybeError}</Panel.Error>}
                     </td>
                     <td>
                       <IconButton

apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx

@@ -1,23 +1,17 @@
-import { Select, Switch } from '@chakra-ui/react';
-import { EndAction, TimerType } from 'ontime-types';
+import { Switch } from '@chakra-ui/react';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
-import { editorSettingsDefaults, useEditorSettings } from '../../../../common/stores/editorSettings';
+import { useEditorSettings } from '../../../../common/stores/editorSettings';
 import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
 import * as Panel from '../PanelUtils';
 
 export default function EditorSettingsForm() {
-  const eventSettings = useEditorSettings((state) => state);
-
-  const setDefaultDuration = eventSettings.setDefaultDuration;
-  const setLinkPrevious = eventSettings.setLinkPrevious;
-  const setWarnTime = eventSettings.setWarnTime;
-  const setDangerTime = eventSettings.setDangerTime;
-  const setDefaultPublic = eventSettings.setDefaultPublic;
+  const eventSettings = useEditorSettings((state) => state.eventSettings);
+  const setLinkPrevious = useEditorSettings((state) => state.setLinkPrevious);
+  const setDefaultPublic = useEditorSettings((state) => state.setDefaultPublic);
+  const setDefaultDuration = useEditorSettings((state) => state.setDefaultDuration);
 
   const durationInMs = forgivingStringToMillis(eventSettings.defaultDuration);
-  const warnTimeInMs = forgivingStringToMillis(eventSettings.defaultWarnTime);
-  const dangerTimeInMs = forgivingStringToMillis(eventSettings.defaultDangerTime);
 
   return (
     <Panel.Section>
@@ -25,21 +19,24 @@ export default function EditorSettingsForm() {
         <Panel.SubHeader>Editor settings</Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section>
-          <Panel.Title>Rundown defaults for new events</Panel.Title>
+          <Panel.Title>Rundown options</Panel.Title>
           <Panel.ListGroup>
             <Panel.ListItem>
-              <Panel.Field title='Default duration' description='Default duration for new events' />
+              <Panel.Field
+                title='Default duration'
+                description='When creating a new event, what is the default duration'
+              />
               <TimeInput<'defaultDuration'>
                 name='defaultDuration'
                 submitHandler={(_field, value) => setDefaultDuration(value)}
                 time={durationInMs}
-                placeholder={editorSettingsDefaults.duration}
+                placeholder='00:10:00'
               />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field
                 title='Link previous'
-                description='Whether the start time of new events should be linked to the previous event end time'
+                description='New events start time will be linked to the previous event'
               />
               <Switch
                 variant='ontime'
@@ -48,46 +45,6 @@ export default function EditorSettingsForm() {
                 onChange={(event) => setLinkPrevious(event.target.checked)}
               />
             </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field title='Timer type' description='Default type of timer for new events' />
-              <Select variant='ontime' size='sm' width='auto' isDisabled>
-                <option value={TimerType.CountDown}>Count down</option>
-                <option value={TimerType.CountUp}>Count up</option>
-                <option value={TimerType.TimeToEnd}>Time to end</option>
-                <option value={TimerType.Clock}>Clock</option>
-              </Select>
-            </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field title='End Action' description='Default end action for new events' />
-              <Select variant='ontime' size='sm' width='auto' isDisabled>
-                <option value={EndAction.None}>None</option>
-                <option value={EndAction.Stop}>Stop</option>
-                <option value={EndAction.LoadNext}>Load next</option>
-                <option value={EndAction.PlayNext}>Play next</option>
-              </Select>
-            </Panel.ListItem>
-          </Panel.ListGroup>
-          <Panel.ListGroup>
-            <Panel.ListItem>
-              <Panel.Field title='Warning time' description='Default threshold for warning time in an event' />
-              <TimeInput<'warnTime'>
-                name='warnTime'
-                submitHandler={(_field, value) => setWarnTime(value)}
-                time={warnTimeInMs}
-                placeholder={editorSettingsDefaults.warnTime}
-              />
-            </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field title='Danger time' description='Default threshold for danger time in an event' />
-              <TimeInput<'dangerTime'>
-                name='dangerTime'
-                submitHandler={(_field, value) => setDangerTime(value)}
-                time={dangerTimeInMs}
-                placeholder={editorSettingsDefaults.dangerTime}
-              />
-            </Panel.ListItem>
-          </Panel.ListGroup>
-          <Panel.ListGroup>
             <Panel.ListItem>
               <Panel.Field title='Default public' description='New events will be public' />
               <Switch

apps/client/src/features/app-settings/panel/log-panel/LogPanel.tsx

@@ -6,7 +6,7 @@ import InfoNif from './NetworkInterfaces';
 export default function LogPanel() {
   return (
     <>
-      <Panel.Header>Log</Panel.Header>
+      <Panel.Header>Application log</Panel.Header>
       <Panel.Section>
         <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
       </Panel.Section>

apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx

@@ -56,7 +56,7 @@ export default function ProjectData() {
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}>
       <Panel.Card>
         <Panel.SubHeader>
-          Project data
+          Project Data
           <div className={style.headerButtons}>
             <Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={isSubmitting || !isDirty}>
               Revert to saved

apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx

@@ -29,14 +29,14 @@ export default function ProjectList() {
   };
 
   const reorderedProjectFiles = useMemo(() => {
-    if (!data.files?.length) return [];
+    if (!data?.files?.length) return [];
 
     const currentlyLoadedIndex = files.findIndex((project) => project.filename === lastLoadedProject);
     const projectFiles = [...files];
     const current = projectFiles.splice(currentlyLoadedIndex, 1)?.[0];
 
     return [current, ...projectFiles];
-  }, [data.files?.length, files, lastLoadedProject]);
+  }, [data.files.length, files, lastLoadedProject]);
 
   return (
     <Panel.Table>

apps/client/src/features/app-settings/panel/project-panel/ProjectListItem.tsx

@@ -169,7 +169,7 @@ function ActionMenu({
         <MenuItem onClick={handleRename}>Rename</MenuItem>
         <MenuItem onClick={handleDuplicate}>Duplicate</MenuItem>
         <MenuItem onClick={handleDownload}>Download</MenuItem>
-        <MenuItem onClick={handleExportCSV}>Export CSV Rundown</MenuItem>
+        {current && <MenuItem onClick={handleExportCSV}>Export CSV Rundown</MenuItem>}
         <MenuItem isDisabled={current} onClick={handleDelete}>
           Delete
         </MenuItem>

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.tsx

@@ -6,7 +6,7 @@ import ManageProjects from './ManageProjects';
 import ProjectData from './ProjectData';
 
 export default function ProjectPanel({ location }: PanelBaseProps) {
-  const projectRef = useScrollIntoView<HTMLDivElement>('data', location);
+  const projectRef = useScrollIntoView<HTMLDivElement>('project', location);
   const manageRef = useScrollIntoView<HTMLDivElement>('manage', location);
 
   return (

apps/client/src/features/app-settings/panel/project-settings-panel/CustomFieldEntry.tsx

@@ -4,11 +4,11 @@ import { IoPencil } from '@react-icons/all-files/io5/IoPencil';
 import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { CustomField, CustomFieldLabel } from 'ontime-types';
 
-import Swatch from '../../../../../common/components/input/colour-input/Swatch';
+import Swatch from '../../../../common/components/input/colour-input/Swatch';
 
 import CustomFieldForm from './CustomFieldForm';
 
-import style from '../FeatureSettings.module.scss';
+import style from './ProjectSettingsPanel.module.scss';
 
 interface CustomFieldEntryProps {
   field: string;

apps/client/src/features/app-settings/panel/project-settings-panel/CustomFieldForm.tsx

@@ -4,11 +4,11 @@ import { Button, Input } from '@chakra-ui/react';
 import { CustomField } from 'ontime-types';
 import { isAlphanumeric } from 'ontime-utils';
 
-import { maybeAxiosError } from '../../../../../common/api/utils';
-import SwatchSelect from '../../../../../common/components/input/colour-input/SwatchSelect';
-import * as Panel from '../../PanelUtils';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
+import * as Panel from '../PanelUtils';
 
-import style from '../FeatureSettings.module.scss';
+import style from './ProjectSettingsPanel.module.scss';
 
 interface CustomFieldsFormProps {
   onSubmit: (field: CustomField) => Promise<void>;

apps/client/src/features/app-settings/panel/project-settings-panel/ProjectSettingsPanel.module.scss

@@ -4,12 +4,7 @@
 
 .actions {
   display: flex;
-  gap: 0.5px;
-}
-
-.actionButtons {
-  display: flex;
-  gap: 1em;
+  gap: 0.5rem;
 }
 
 .fieldForm {
@@ -25,15 +20,3 @@
   justify-content: flex-end;
   gap: 1rem;
 }
-
-.fit {
-  width: fit-content;
-}
-
-.aliasConstrain {
-  min-width: 12em;
-}
-
-.flex {
-  display: flex;
-}

apps/client/src/features/app-settings/panel/project-settings-panel/ProjectSettingsPanel.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Alert, AlertDescription, AlertIcon, Button } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { CustomField, CustomFieldLabel } from 'ontime-types';
+
+import { deleteCustomField, editCustomField, postCustomField } from '../../../../common/api/customFields';
+import ExternalLink from '../../../../common/components/external-link/ExternalLink';
+import useCustomFields from '../../../../common/hooks-query/useCustomFields';
+import * as Panel from '../PanelUtils';
+
+import CustomFieldEntry from './CustomFieldEntry';
+import CustomFieldForm from './CustomFieldForm';
+
+const customFieldsDocsUrl = 'https://docs.getontime.no/features/custom-fields/';
+
+export default function ProjectSettingsPanel() {
+  const { data, refetch } = useCustomFields();
+  const [isAdding, setIsAdding] = useState(false);
+
+  const handleInitiateCreate = () => {
+    setIsAdding(true);
+  };
+
+  const handleCancel = () => {
+    setIsAdding(false);
+  };
+
+  const handleCreate = async (customField: CustomField) => {
+    await postCustomField(customField);
+    refetch();
+    setIsAdding(false);
+  };
+
+  const handleEditField = async (label: CustomFieldLabel, customField: CustomField) => {
+    await editCustomField(label, customField);
+    refetch();
+  };
+
+  const handleDelete = async (label: string) => {
+    try {
+      await deleteCustomField(label);
+      refetch();
+    } catch (_error) {
+      /** we do not handle errors here */
+    }
+  };
+
+  return (
+    <>
+      <Panel.Header>Project Settings</Panel.Header>
+      <Panel.Section>
+        <Panel.Card>
+          <Panel.SubHeader>
+            Custom fields
+            <Button variant='ontime-subtle' rightIcon={<IoAdd />} size='sm' onClick={handleInitiateCreate}>
+              New
+            </Button>
+          </Panel.SubHeader>
+          <Panel.Divider />
+          <Panel.Section>
+            <Alert status='info' variant='ontime-on-dark-info'>
+              <AlertIcon />
+              <AlertDescription>
+                Custom fields allow for additional information to be added to an event (eg. light, sound, camera).{' '}
+                <br />
+                <br />
+                This data is not used by Ontime.
+                <ExternalLink href={customFieldsDocsUrl}>See the docs</ExternalLink>
+              </AlertDescription>
+            </Alert>
+          </Panel.Section>
+          <Panel.Section>
+            {isAdding && <CustomFieldForm onSubmit={handleCreate} onCancel={handleCancel} />}
+            <Panel.Table>
+              <thead>
+                <tr>
+                  <th>Colour</th>
+                  <th>Name</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(data).map(([key, { colour, label }]) => {
+                  return (
+                    <CustomFieldEntry
+                      key={key}
+                      field={key}
+                      colour={colour}
+                      label={label}
+                      onEdit={handleEditField}
+                      onDelete={handleDelete}
+                    />
+                  );
+                })}
+              </tbody>
+            </Panel.Table>
+          </Panel.Section>
+        </Panel.Card>
+      </Panel.Section>
+    </>
+  );
+}

apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx

@@ -1,26 +1,13 @@
-import { useRef } from 'react';
-import {
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  Button,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
 
 import useElectronEvent from '../../../../common/hooks/useElectronEvent';
 import * as Panel from '../PanelUtils';
 
 export default function ShutdownPanel() {
   const { isElectron, sendToElectron } = useElectronEvent();
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const cancelRef = useRef<HTMLButtonElement | null>(null);
 
   const sendShutdown = () => {
     sendToElectron('shutdown', 'now');
-    onClose();
   };
 
   return (
@@ -31,29 +18,9 @@ export default function ShutdownPanel() {
           This will shutdown the Ontime server. <br />
           The runtime state will be lost, but your project is kept for next time.
         </Panel.Paragraph>
-        <Button colorScheme='red' onClick={onOpen} maxWidth='350px' isDisabled={!isElectron}>
+        <Button colorScheme='red' onClick={sendShutdown} isDisabled={!isElectron}>
           Shutdown ontime
         </Button>
-        <AlertDialog variant='ontime' isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
-          <AlertDialogOverlay>
-            <AlertDialogContent>
-              <AlertDialogHeader fontSize='lg' fontWeight='bold'>
-                Ontime Shutdown
-              </AlertDialogHeader>
-              <AlertDialogBody>
-                This will shutdown the Ontime server. <br /> Are you sure?
-              </AlertDialogBody>
-              <AlertDialogFooter>
-                <Button ref={cancelRef} onClick={onClose} variant='ontime-ghosted-white'>
-                  Cancel
-                </Button>
-                <Button colorScheme='red' onClick={sendShutdown} ml={4}>
-                  Shutdown
-                </Button>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialogOverlay>
-        </AlertDialog>
       </Panel.Section>
     </>
   );

apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx

@@ -33,7 +33,6 @@ export default function GSheetSetup(props: GSheetSetupProps) {
   const patchStepData = useSheetStore((state) => state.patchStepData);
   const authenticationStatus = useSheetStore((state) => state.authenticationStatus);
   const setAuthenticationStatus = useSheetStore((state) => state.setAuthenticationStatus);
-  const authenticationError = useSheetStore((state) => state.stepData.authenticate.error);
 
   /** Check if we are authenticated */
   const getAuthStatus = async () => {
@@ -45,7 +44,6 @@ export default function GSheetSetup(props: GSheetSetupProps) {
 
   /** check if the current session has been authenticated */
   useEffect(() => {
-    patchStepData({ authenticate: { available: false, error: '' } });
     untilAuthenticated();
   }, []);
 
@@ -152,7 +150,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
       </Panel.Title>
       <Panel.ListGroup>
         <Panel.Description>Upload Client Secret provided by Google</Panel.Description>
-        <Panel.Error>{authenticationError}</Panel.Error>
+        <Panel.Error>{undefined}</Panel.Error>
         <Input
           type='file'
           onChange={handleClientSecret}

apps/client/src/features/app-settings/panel/sources-panel/import-map/__test__/importMapUtils.test.ts

@@ -1,13 +1,12 @@
 import { ImportCustom } from 'ontime-utils';
 
-import { convertToImportMap, NamedImportMap } from '../importMapUtils';
+import { convertToImportMap } from '../importMapUtils';
 
 describe('convertToImportMap', () => {
   it('converts a namedImportMap to a importMap', () => {
     const defaultNamedImporMap = {
       Worksheet: 'event schedule',
       Start: 'time start',
-      'Link start': 'link start',
       End: 'time end',
       Duration: 'duration',
       Cue: 'cue',
@@ -27,7 +26,7 @@ describe('convertToImportMap', () => {
         { ontimeName: 'EmptyImportName', importName: '' },
         { ontimeName: '', importName: 'EmptyOntimeName' },
       ] as ImportCustom[],
-    } as NamedImportMap;
+    };
 
     const importMap = convertToImportMap(defaultNamedImporMap);
     expect(importMap.custom).toStrictEqual({

apps/client/src/features/app-settings/panel/sources-panel/import-map/importMapUtils.ts

@@ -6,7 +6,6 @@ export type NamedImportMap = typeof namedImportMap;
 export const namedImportMap = {
   Worksheet: 'event schedule',
   Start: 'time start',
-  'Link start': 'link start',
   End: 'time end',
   Duration: 'duration',
   Cue: 'cue',
@@ -22,15 +21,6 @@ export const namedImportMap = {
   custom: [] as ImportCustom[],
 };
 
-function isNamedImportMap(obj: unknown): obj is NamedImportMap {
-  if (typeof obj !== 'object' || obj === null) {
-    return false;
-  }
-
-  const keys = Object.keys(namedImportMap);
-  return keys.every((key) => Object.hasOwn(obj, key));
-}
-
 export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
   const custom = namedImportMap.custom.reduce((accumulator, { ontimeName, importName }) => {
     if (ontimeName && importName) {
@@ -42,7 +32,6 @@ export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
   return {
     worksheet: namedImportMap.Worksheet,
     timeStart: namedImportMap.Start,
-    linkStart: namedImportMap['Link start'],
     timeEnd: namedImportMap.End,
     duration: namedImportMap.Duration,
     cue: namedImportMap.Cue,
@@ -63,22 +52,10 @@ export function persistImportMap(options: NamedImportMap) {
   localStorage.setItem('ontime-import-options', JSON.stringify(options));
 }
 
-function getPersistImportMap(): unknown {
+export function getPersistedOptions(): NamedImportMap {
   const options = localStorage.getItem('ontime-import-options');
   if (!options) {
-    throw new Error('no import options found');
+    return namedImportMap;
   }
   return JSON.parse(options);
 }
-
-export function getPersistedOptions(): NamedImportMap {
-  try {
-    const options = getPersistImportMap();
-    if (!isNamedImportMap(options)) {
-      return namedImportMap;
-    }
-    return options;
-  } catch {
-    return namedImportMap;
-  }
-}

apps/client/src/features/app-settings/panel/sources-panel/preview/PreviewRundown.module.scss

@@ -1,27 +1,12 @@
-.center {
-  text-align: center;
-}
+  .center {
+    text-align: center;
+  }
 
-.nowrap {
-  white-space: nowrap;
-}
+  .nowrap {
+    white-space: nowrap;
+  }
 
-tr .secondaryRow {
-  background-color: $white-7;
-  padding-left: 2em;
-}
-
-.linkStartActive {
-  color: $active-indicator;
-  transform: rotate(-45deg);
-}
-
-.flex {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.subdued {
-  opacity: $opacity-disabled;
-}
+  tr .secondaryRow {
+    background-color: $white-7;
+    padding-left: 2em;
+  }

apps/client/src/features/app-settings/panel/sources-panel/preview/PreviewRundown.tsx

@@ -1,5 +1,4 @@
 import { Fragment } from 'react';
-import { IoLink } from '@react-icons/all-files/io5/IoLink';
 import { CustomFields, isOntimeBlock, isOntimeEvent, OntimeRundown } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
@@ -84,10 +83,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
                 </td>
                 <td className={style.nowrap}>{event.cue}</td>
                 <td>{event.title}</td>
-                <td className={style.flex}>
-                  <span className={event.linkStart ? style.subdued : undefined}>{millisToString(event.timeStart)}</span>
-                  {event.linkStart && <IoLink className={style.linkStartActive} />}
-                </td>
+                <td>{millisToString(event.timeStart)}</td>
                 <td>{millisToString(event.timeEnd)}</td>
                 <td>{millisToString(event.duration)}</td>
                 <td>{millisToString(event.timeWarning)}</td>
@@ -105,7 +101,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
                   fieldHeaders.map((field) => {
                     let value = '';
                     if (field in event.custom) {
-                      value = event.custom[field];
+                      value = event.custom[field].value;
                     }
                     return <td key={field}>{value}</td>;
                   })}

apps/client/src/features/app-settings/panel/sources-panel/useGoogleSheet.ts

@@ -25,9 +25,9 @@ export default function useGoogleSheet() {
   /** whether the current session has been authenticated */
   const verifyAuth = async (): Promise<{ authenticated: AuthenticationStatus; sheetId: string } | void> => {
     try {
-      return await verifyAuthenticationStatus();
-    } catch (error) {
-      patchStepData({ authenticate: { available: false, error: maybeAxiosError(error) } });
+      return verifyAuthenticationStatus();
+    } catch (_error) {
+      /** we do not handle errors here */
     }
   };
 
@@ -37,18 +37,18 @@ export default function useGoogleSheet() {
     sheetId: string,
   ): Promise<{ verification_url: string; user_code: string } | void> => {
     try {
-      return await requestConnection(file, sheetId);
-    } catch (error) {
-      patchStepData({ authenticate: { available: false, error: maybeAxiosError(error) } });
+      return requestConnection(file, sheetId);
+    } catch (_error) {
+      /** we do not handle errors here */
     }
   };
 
   /** requests the revoking of an existing authenticated session */
   const revoke = async (): Promise<{ authenticated: AuthenticationStatus } | void> => {
     try {
-      return await revokeAuthentication();
-    } catch (error) {
-      patchStepData({ authenticate: { available: false, error: maybeAxiosError(error) } });
+      return revokeAuthentication();
+    } catch (_error) {
+      /** we do not handle errors here */
     }
   };
 

apps/client/src/features/app-settings/settingsStore.ts

@@ -11,28 +11,23 @@ export const settingPanels: Readonly<SettingsOption[]> = [
   {
     id: 'project',
     label: 'Project',
-    secondary: [
-      { id: 'project__data', label: 'Project data' },
-      { id: 'project__manage', label: 'Manage projects' },
-    ],
+    secondary: [{ id: 'project__manage', label: 'Manage project files' }],
   },
   {
     id: 'general',
     label: 'App Settings',
     secondary: [
-      { id: 'general__settings', label: 'General settings' },
-      { id: 'general__editor', label: 'Editor settings' },
+      { id: 'general__manage', label: 'Manage Ontime settings' },
       { id: 'general__view', label: 'View settings' },
+      { id: 'general__urlpresets', label: 'URL presets' },
     ],
   },
   {
-    id: 'feature_settings',
-    label: 'Feature Settings',
-    secondary: [
-      { id: 'feature_settings__custom', label: 'Custom fields' },
-      { id: 'feature_settings__urlpresets', label: 'URL Presets' },
-    ],
+    id: 'project_settings',
+    label: 'Project Settings',
+    secondary: [{ id: 'project_settings__custom', label: 'Custom fields' }],
   },
+  { id: 'interface', label: 'Interface', secondary: [{ id: 'interface__editor', label: 'Editor settings' }] },
   {
     id: 'sources',
     label: 'Data Sources',

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

@@ -1,5 +1,3 @@
-@import "./MessageControl.module.scss";
-
 .inputItems {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -8,5 +6,10 @@
 }
 
 .label {
-  @extend .label;
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+
+  &.active {
+    color: $action-text-color;
+  }
 }

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

@@ -10,19 +10,3 @@
   gap: $element-spacing;
   margin-top: -0.5rem;
 }
-
-.singleAction {
-  display: flex;
-  flex-direction: column;
-  gap: $element-spacing;
-  margin-top: $element-inner-spacing;
-}
-
-.label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-
-  &.active {
-    color: $action-text-color;
-  }
-}

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

@@ -17,14 +17,29 @@ export default function MessageControl() {
   const message = useMessageControl();
   const blink = message.timer.blink;
   const blackout = message.timer.blackout;
-
   return (
     <div className={style.messageContainer}>
+      <InputRow
+        label='Public / Backstage screen message'
+        placeholder='Shown in public and backstage screens'
+        text={message.public.text || ''}
+        visible={message.public.visible || false}
+        changeHandler={(newValue) => setMessage.publicText(newValue)}
+        actionHandler={() => setMessage.publicVisible(!message.public.visible)}
+      />
+      <InputRow
+        label='Lower third message'
+        placeholder='Shown in lower third'
+        text={message.lower.text || ''}
+        visible={message.lower.visible || false}
+        changeHandler={(newValue) => setMessage.lowerText(newValue)}
+        actionHandler={() => setMessage.lowerVisible(!message.lower.visible)}
+      />
       <InputRow
         label='Timer'
         placeholder='Message shown in stage timer'
-        text={message.timer.text}
-        visible={message.timer.visible}
+        text={message.timer.text || ''}
+        visible={message.timer.visible || false}
         changeHandler={(newValue) => setMessage.timerText(newValue)}
         actionHandler={() => setMessage.timerVisible(!message.timer.visible)}
       />
@@ -54,8 +69,8 @@ export default function MessageControl() {
         label='External Message (read only)'
         placeholder={enDash}
         readonly
-        text={message.external.text}
-        visible={message.external.visible}
+        text={message.external.text || ''}
+        visible={message.external.visible || false}
         changeHandler={noop}
         actionHandler={noop}
       />

apps/client/src/features/control/playback/PlaybackControl.tsx

@@ -2,8 +2,7 @@ import { Playback } from 'ontime-types';
 
 import { usePlaybackControl } from '../../../common/hooks/useSocket';
 
-import AddTime from './add-time/AddTime';
-import { AuxTimer } from './aux-timer/AuxTimer';
+import { ExtraTimer } from './extra-timer/ExtraTimer';
 import PlaybackButtons from './playback-buttons/PlaybackButtons';
 import PlaybackTimer from './playback-timer/PlaybackTimer';
 
@@ -14,15 +13,13 @@ export default function PlaybackControl() {
 
   return (
     <div className={style.mainContainer}>
-      <PlaybackTimer playback={data.playback as Playback}>
-        <AddTime playback={data.playback} />
-      </PlaybackTimer>
+      <PlaybackTimer playback={data.playback as Playback} />
       <PlaybackButtons
         playback={data.playback}
         numEvents={data.numEvents}
         selectedEventIndex={data.selectedEventIndex}
       />
-      <AuxTimer />
+      <ExtraTimer />
     </div>
   );
 }

apps/client/src/features/control/playback/add-time/AddTime.module.scss

@@ -1,16 +0,0 @@
-.addTime {
-  grid-area: addtime;
-  display: flex;
-  flex-direction: column;
-  gap: $element-inner-spacing;
-}
-
-.addButtons {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: $element-inner-spacing;
-}
-
-.tallButtons {
-  height: 28px;
-}

apps/client/src/features/control/playback/add-time/AddTime.tsx

@@ -1,59 +0,0 @@
-import { Tooltip } from '@chakra-ui/react';
-import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
-import { Playback } from 'ontime-types';
-import { MILLIS_PER_HOUR, MILLIS_PER_SECOND } from 'ontime-utils';
-
-import TimeInput from '../../../../common/components/input/time-input/TimeInput';
-import { useLocalStorage } from '../../../../common/hooks/useLocalStorage';
-import { setPlayback } from '../../../../common/hooks/useSocket';
-import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
-import { tooltipDelayMid } from '../../../../ontimeConfig';
-import TapButton from '../tap-button/TapButton';
-
-import style from './AddTime.module.scss';
-
-interface AddTimeProps {
-  playback: Playback;
-}
-
-export default function AddTime(props: AddTimeProps) {
-  const { playback } = props;
-  const [time, setTime] = useLocalStorage('add-time', 300_000); // 5 minutes
-
-  const handleTimeChange = (_field: string, value: string) => {
-    const newTime = forgivingStringToMillis(value);
-    // cap add time to 1 hour
-    setTime(Math.min(newTime, MILLIS_PER_HOUR));
-  };
-
-  const handleAddTime = (direction: 'add' | 'remove') => {
-    // API expects input in seconds
-    if (direction === 'add') {
-      setPlayback.addTime(time / MILLIS_PER_SECOND);
-    } else {
-      setPlayback.addTime((-1 * time) / MILLIS_PER_SECOND);
-    }
-  };
-
-  const canAddTime = playback === Playback.Play || playback === Playback.Pause;
-  const doDisableButtons = !canAddTime || time === 0;
-
-  return (
-    <div className={style.addTime}>
-      <TimeInput name='addtime' submitHandler={handleTimeChange} time={time} placeholder='Add time' />
-      <div className={style.addButtons}>
-        <Tooltip label='Remove time' openDelay={tooltipDelayMid} shouldWrapChildren>
-          <TapButton onClick={() => handleAddTime('remove')} disabled={doDisableButtons} className={style.tallButtons}>
-            <IoRemove />
-          </TapButton>
-        </Tooltip>
-        <Tooltip label='Add time' openDelay={tooltipDelayMid} shouldWrapChildren>
-          <TapButton onClick={() => handleAddTime('add')} disabled={doDisableButtons} className={style.tallButtons}>
-            <IoAdd />
-          </TapButton>
-        </Tooltip>
-      </div>
-    </div>
-  );
-}

apps/client/src/features/control/playback/extra-timer/ExtraTimer.tsx

@@ -6,16 +6,16 @@ import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { Playback, SimpleDirection, SimplePlayback } from 'ontime-types';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
-import { setAuxTimer, useAuxTimerControl, useAuxTimerTime } from '../../../../common/hooks/useSocket';
+import { setExtraTimer, useExtraTimerControl, useExtraTimerTime } from '../../../../common/hooks/useSocket';
 import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
 import TapButton from '../tap-button/TapButton';
 
-import style from './AuxTimer.module.scss';
+import style from './ExtraTimer.module.scss';
 
-export function AuxTimer() {
-  const { playback, direction } = useAuxTimerControl();
+export function ExtraTimer() {
+  const { playback, direction } = useExtraTimerControl();
 
-  const { start, pause, stop, setDirection } = setAuxTimer;
+  const { start, pause, stop, setDirection } = setExtraTimer;
 
   const toggleDirection = () => {
     const newDirection = direction === SimpleDirection.CountDown ? SimpleDirection.CountUp : SimpleDirection.CountDown;
@@ -30,10 +30,10 @@ export function AuxTimer() {
 
   return (
     <div className={style.extraRow}>
-      <AuxTimerInput />
+      <ExtraTimeInput />
       <TapButton onClick={toggleDirection} aspect='tight'>
-        {direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />}
-        {direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />}
+        {direction === SimpleDirection.CountDown && <IoArrowDown />}
+        {direction === SimpleDirection.CountUp && <IoArrowUp />}
       </TapButton>
 
       <TapButton
@@ -42,7 +42,7 @@ export function AuxTimer() {
         active={playback === SimplePlayback.Start}
         disabled={!userCan.start}
       >
-        <IoPlay data-testid='aux-timer-start' />
+        <IoPlay />
       </TapButton>
       <TapButton
         onClick={pause}
@@ -50,25 +50,25 @@ export function AuxTimer() {
         active={playback === SimplePlayback.Pause}
         disabled={!userCan.pause}
       >
-        <IoPause data-testid='aux-timer-pause' />
+        <IoPause />
       </TapButton>
       <TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
-        <IoStop data-testid='aux-timer-stop' />
+        <IoStop />
       </TapButton>
     </div>
   );
 }
 
-function AuxTimerInput() {
-  const time = useAuxTimerTime();
-  const { setDuration } = setAuxTimer;
+function ExtraTimeInput() {
+  const time = useExtraTimerTime();
+  const { setTime } = setExtraTimer;
 
   const handleTimeUpdate = (_field: string, value: string) => {
     const newTime = forgivingStringToMillis(value);
-    setDuration(newTime / 1000); //frontend api is seconds based;
+    setTime(newTime);
   };
 
   return (
-    <TimeInput<'auxTimer'> submitHandler={handleTimeUpdate} name='auxTimer' time={time} placeholder='Aux Timer 1' />
+    <TimeInput<'extraTimer'> submitHandler={handleTimeUpdate} name='extraTimer' time={time} placeholder='Timer 1' />
   );
 }

apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.tsx

@@ -34,7 +34,6 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
   const noEvents = numEvents === 0;
 
   const disableGo = isRolling || noEvents || (isLast && !isArmed);
-  const disableNext = isRolling || noEvents || isLast;
   const disablePrev = isRolling || noEvents || isFirst;
 
   const playbackCan = validatePlayback(playback);
@@ -74,7 +73,7 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
           </TapButton>
         </Tooltip>
         <Tooltip label='Next event' openDelay={tooltipDelayMid}>
-          <TapButton onClick={setPlayback.next} disabled={disableNext}>
+          <TapButton onClick={setPlayback.next} disabled={disableGo}>
             <IoPlaySkipForward />
           </TapButton>
         </Tooltip>

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss

@@ -1,17 +1,16 @@
 .timeContainer {
   display: grid;
   grid-template-areas:
-    'indicators timer  addtime'
-    'status     status addtime';
+    'ind clk clk btn'
+    '... sta fin btn';
   grid-template-rows: 1fr auto;
-  grid-template-columns: 1.25rem 1fr 6.5rem;
+  grid-template-columns: 1.25rem 1fr 1fr 5rem;
   gap: $element-inner-spacing;
+  justify-items: start;
 }
 
-// ---------> INDICATORS
-
 .indicators {
-  grid-area: indicators;
+  grid-area: ind;
   width: 100%;
   height: 100%;
   display: flex;
@@ -19,46 +18,72 @@
   justify-content: space-evenly;
 }
 
-.indicatorRoll,
-.indicatorDelay,
-.indicatorNegative {
+.indRoll,
+.indDelay,
+.indNegative {
   background-color: $black-10;
 }
 
-.indicatorRoll,
-.indicatorDelay {
+.indRoll,
+.indRollActive,
+.indDelay,
+.indDelayActive {
   margin: 0 auto;
-  border-radius: 5px;
-  width: 10px;
-  height: 10px;
+  border-radius: 6px;
+  width: 12px;
+  height: 12px;
 }
 
-.indicatorRoll[data-active='true'] {
+.indRollActive {
   background-color: $ontime-roll;
 }
 
-.indicatorDelay[data-active='true'] {
-  background-color: $ontime-delay;
-}
-
-.indicatorNegative {
+.indNegative,
+.indNegativeActive {
   margin: 0 auto;
   width: 90%;
   height: 0.25rem;
-
-  &[data-active='true'] {
-    background-color: $playback-negative;
-  }
 }
 
-// ---------> LABELS
+.indNegativeActive {
+  background-color: $playback-negative;
+}
 
-.status {
-  grid-area: status;
-  height: 1.5rem;
+.indDelayActive {
+  background-color: $ontime-delay;
+}
+
+.btn {
+  grid-area: btn;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  width: 100%;
+  gap: $element-inner-spacing;
+}
+
+.minus {
+  grid-area: min;
   display: flex;
-  gap: $section-spacing;
-  margin-left: 1.5rem;
+  flex-direction: column;
+}
+
+.start,
+.finish,
+.roll {
+  height: 1.5rem;
+}
+
+.start {
+  grid-area: sta;
+}
+
+.finish {
+  grid-area: fin;
+}
+
+.roll {
+  grid-area: 2 / 2 / 2 / 4 ;
 }
 
 .tag {

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

@@ -1,9 +1,10 @@
-import { PropsWithChildren } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import { Playback } from 'ontime-types';
 import { dayInMs, millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils';
 
-import { useTimer } from '../../../../common/hooks/useSocket';
+import { setPlayback, useTimer } from '../../../../common/hooks/useSocket';
+import { tooltipDelayMid } from '../../../../ontimeConfig';
+import TapButton from '../tap-button/TapButton';
 import TimerDisplay from '../timer-display/TimerDisplay';
 
 import style from './PlaybackTimer.module.scss';
@@ -12,30 +13,8 @@ interface PlaybackTimerProps {
   playback: Playback;
 }
 
-function resolveAddedTimeLabel(addedTime: number) {
-  function resolveClosestUnit(ms: number) {
-    if (ms < 6000) {
-      return `${millisToSeconds(ms)} seconds`;
-    } else if (ms < 12000) {
-      return '1 minute';
-    } else {
-      return `${millisToMinutes(ms)} minutes`;
-    }
-  }
-
-  if (addedTime > 0) {
-    return `Added ${resolveClosestUnit(addedTime)}`;
-  }
-
-  if (addedTime < 0) {
-    return `Removed ${resolveClosestUnit(addedTime)}`;
-  }
-
-  return '';
-}
-
-export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProps>) {
-  const { playback, children } = props;
+export default function PlaybackTimer(props: PlaybackTimerProps) {
+  const { playback } = props;
   const timer = useTimer();
 
   const started = millisToString(timer.startedAt);
@@ -43,43 +22,88 @@ export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProp
   const finish = millisToString(expectedFinish);
 
   const isRolling = playback === Playback.Roll;
+  const isStopped = playback === Playback.Stop;
   const isWaiting = timer.secondaryTimer !== null && timer.secondaryTimer > 0 && timer.current === null;
+  const disableButtons = isStopped || isRolling;
   const isOvertime = timer.current !== null && timer.current < 0;
   const hasAddedTime = Boolean(timer.addedTime);
 
   const rollLabel = isRolling ? 'Roll mode active' : '';
 
-  const addedTimeLabel = resolveAddedTimeLabel(timer.addedTime);
+  const resolveAddedTimeLabel = () => {
+    function resolveClosestUnit(ms: number) {
+      if (ms < 6000) {
+        return `${millisToSeconds(ms)} seconds`;
+      } else if (ms < 12000) {
+        return '1 minute';
+      } else {
+        return `${millisToMinutes(ms)} minutes`;
+      }
+    }
+
+    if (timer.addedTime > 0) {
+      return `Added ${resolveClosestUnit(timer.addedTime)}`;
+    }
+
+    if (timer.addedTime < 0) {
+      return `Removed ${resolveClosestUnit(timer.addedTime)}`;
+    }
+
+    return '';
+  };
+
+  const addedTimeLabel = resolveAddedTimeLabel();
 
   return (
     <div className={style.timeContainer}>
       <div className={style.indicators}>
         <Tooltip label={rollLabel}>
-          <div className={style.indicatorRoll} data-active={isRolling} />
+          <div className={isRolling ? style.indRollActive : style.indRoll} />
         </Tooltip>
-        <div className={style.indicatorNegative} data-active={isOvertime} />
+        <div className={isOvertime ? style.indNegativeActive : style.indNegative} />
         <Tooltip label={addedTimeLabel}>
-          <div className={style.indicatorDelay} data-active={hasAddedTime} />
+          <div className={hasAddedTime ? style.indDelayActive : style.indDelay} />
         </Tooltip>
       </div>
       <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
-      <div className={style.status}>
-        {isWaiting ? (
+      {isWaiting ? (
+        <div className={style.roll}>
           <span className={style.rolltag}>Roll: Countdown to start</span>
-        ) : (
-          <>
-            <span className={style.start}>
-              <span className={style.tag}>Started at</span>
-              <span className={style.time}>{started}</span>
-            </span>
-            <span className={style.finish}>
-              <span className={style.tag}>Expect end</span>
-              <span className={style.time}>{finish}</span>
-            </span>
-          </>
-        )}
+        </div>
+      ) : (
+        <>
+          <div className={style.start}>
+            <span className={style.tag}>Started at</span>
+            <span className={style.time}>{started}</span>
+          </div>
+          <div className={style.finish}>
+            <span className={style.tag}>Expect end</span>
+            <span className={style.time}>{finish}</span>
+          </div>
+        </>
+      )}
+      <div className={style.btn}>
+        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
+          <TapButton onClick={() => setPlayback.addTime(-60)} 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'>
+            +1
+          </TapButton>
+        </Tooltip>
+        <Tooltip label='Remove 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
+          <TapButton onClick={() => setPlayback.addTime(-5 * 60)} disabled={disableButtons} aspect='square'>
+            -5
+          </TapButton>
+        </Tooltip>
+        <Tooltip label='Add 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
+          <TapButton onClick={() => setPlayback.addTime(+5 * 60)} disabled={disableButtons} aspect='square'>
+            +5
+          </TapButton>
+        </Tooltip>
       </div>
-      {children}
     </div>
   );
 }

apps/client/src/features/control/playback/timer-display/TimerDisplay.module.scss

@@ -1,7 +1,7 @@
 @use '../../../../theme/viewerDefs' as *;
 
 .timer {
-  grid-area: timer;
+  grid-area: clk;
   white-space: nowrap;
   max-width: 18.75rem;
   min-width: 5em;

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

@@ -1,5 +1,4 @@
 .tableWrapper {
-  background-color: $ui-black;
   width: 100%;
   height: 100vh;
   padding: 1rem 0.5rem;

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

@@ -11,7 +11,7 @@ import { useCuesheet } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import { useFlatRundown } from '../../common/hooks-query/useRundown';
-import { CuesheetOverview } from '../overview/Overview';
+import Overview from '../overview/Overview';
 
 import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
 import { useCuesheetSettings } from './store/CuesheetSettings';
@@ -53,7 +53,7 @@ export default function CuesheetWrapper() {
         return;
       }
 
-      const previousValue = event.custom[accessor];
+      const previousValue = event.custom[accessor]?.value;
 
       if (previousValue === payload) {
         return;
@@ -85,7 +85,7 @@ export default function CuesheetWrapper() {
   return (
     <div className={styles.tableWrapper} data-testid='cuesheet'>
       <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
-      <CuesheetOverview>
+      <Overview>
         <IconButton
           aria-label='Toggle settings'
           variant='ontime-subtle-white'
@@ -100,7 +100,7 @@ export default function CuesheetWrapper() {
           icon={<IoSettingsOutline />}
           onClick={() => toggleSettings()}
         />
-      </CuesheetOverview>
+      </Overview>
       <CuesheetProgress />
       <Cuesheet
         data={flatRundown}

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

@@ -1,5 +1,4 @@
-import { ChangeEvent, memo, useCallback, useEffect, useRef, useState } from 'react';
-import { getHotkeyHandler } from '@mantine/hooks';
+import { ChangeEvent, memo, useCallback, useEffect, useState } from 'react';
 
 import { AutoTextArea } from '../../../common/components/input/auto-text-area/AutoTextArea';
 
@@ -13,24 +12,12 @@ const EditableCell = (props: EditableCellProps) => {
 
   // We need to keep and update the state of the cell normally
   const [value, setValue] = useState(initialValue);
-  const ref = useRef<HTMLAreaElement>();
+
   const onChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => setValue(event.target.value), []);
 
   // We'll only update the external data when the input is blurred
   const onBlur = useCallback(() => handleUpdate(value), [handleUpdate, value]);
 
-  //TODO: maybe we can unify this with `useReactiveTextInput`
-  const onKeyDown = getHotkeyHandler([
-    ['mod + Enter', () => ref.current?.blur()],
-    [
-      'Escape',
-      () => {
-        setValue(initialValue);
-        setTimeout(() => ref.current?.blur());
-      },
-    ],
-  ]);
-
   // If the initialValue is changed external, sync it up with our state
   useEffect(() => {
     setValue(initialValue);
@@ -40,11 +27,9 @@ const EditableCell = (props: EditableCellProps) => {
     <AutoTextArea
       size='sm'
       value={value}
-      inputref={ref}
       onChange={onChange}
       onBlur={onBlur}
       rows={1}
-      onKeyDown={onKeyDown}
       transition='none'
       spellCheck={false}
       style={{ padding: 0 }}

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

@@ -49,7 +49,7 @@ function MakeCustomField({ row, column, table }: CellContext<OntimeRundownEntry,
   }
 
   // events dont necessarily contain all custom fields
-  const initialValue = event.custom[column.id] ?? '';
+  const initialValue = event.custom[column.id]?.value ?? '';
 
   return <EditableCell value={initialValue} handleUpdate={update} />;
 }

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

@@ -87,7 +87,7 @@ export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, custo
         // for custom fields, we need to extract the value from the custom object
         if (field.startsWith('custom-')) {
           const fieldLabel = field.split('custom-')[1];
-          const value = entry.custom[fieldLabel];
+          const value = entry.custom[fieldLabel]?.value;
           row.push(parseField(fieldLabel, value));
         } else {
           // @ts-expect-error -- it is ok, we will just not have the data for other fields

apps/client/src/features/editors/Editor.module.scss

@@ -1,7 +1,7 @@
 @use './EditorMixin' as editor;
 
 $min-playback-width: 27rem;
-$max-playback-width: 30rem;
+$max-playback-width: 35rem;
 $panel-gap: 0.5rem;
 
 .corner {
@@ -9,11 +9,11 @@ $panel-gap: 0.5rem;
 }
 
 .mainContainer {
-  background-color: $ui-black;
+  background: $ui-black;
   width: 100%;
   height: 100%;
   color: $ui-white;
-  padding: 0.5rem;
+  padding: 1rem 0.5rem;
 
   display: grid;
   grid-template-columns: auto;

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

@@ -1,7 +1,6 @@
 import { lazy, useCallback, useEffect } from 'react';
 import { IconButton, useDisclosure } from '@chakra-ui/react';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
-import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
 import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
@@ -9,7 +8,7 @@ import useElectronEvent from '../../common/hooks/useElectronEvent';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import AppSettings from '../app-settings/AppSettings';
 import useAppSettingsNavigation from '../app-settings/useAppSettingsNavigation';
-import { EditorOverview } from '../overview/Overview';
+import Overview from '../overview/Overview';
 
 import styles from './Editor.module.scss';
 
@@ -63,19 +62,10 @@ export default function Editor() {
 
   useWindowTitle('Editor');
 
-  // listen to shutdown request from electron process
-  useEffect(() => {
-    if (window.process?.type === 'renderer') {
-      window.ipcRenderer.on('user-request-shutdown', () => {
-        setLocation('shutdown');
-      });
-    }
-  }, [setLocation]);
-
   return (
     <div className={styles.mainContainer} data-testid='event-editor'>
       <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
-      <EditorOverview>
+      <Overview>
         <IconButton
           aria-label='Toggle navigation'
           variant='ontime-subtle-white'
@@ -85,12 +75,12 @@ export default function Editor() {
         />
         <IconButton
           aria-label='Toggle settings'
-          variant={isSettingsOpen ? 'ontime-subtle' : 'ontime-subtle-white'}
+          variant='ontime-subtle-white'
           size='lg'
-          icon={isSettingsOpen ? <IoClose /> : <IoSettingsOutline />}
+          icon={<IoSettingsOutline />}
           onClick={toggleSettings}
         />
-      </EditorOverview>
+      </Overview>
       {isSettingsOpen ? (
         <AppSettings />
       ) : (

apps/client/src/features/operator/Operator.module.scss

@@ -2,7 +2,6 @@
   width: 100vw;
   height: 100vh;
 
-  background-color: $ui-black;
   color: $ui-white;
 }
 

apps/client/src/features/operator/Operator.tsx

@@ -173,7 +173,7 @@ export default function Operator() {
 
             const mainField = main ? entry?.[main] || entry.title : entry.title;
             const secondaryField = getPropertyValue(entry, secondary) ?? '';
-            const subscribedData = entry.custom[subscribe];
+            const subscribedData = entry.custom[subscribe]?.value;
 
             return (
               <OperatorEvent

apps/client/src/features/overview/Overview.tsx

@@ -1,8 +1,7 @@
 import { memo, useMemo } from 'react';
-import { millisToString } from 'ontime-utils';
 
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
-import { useRuntimeOverview, useRuntimePlaybackOverview, useTimer } from '../../common/hooks/useSocket';
+import { useRuntimeOverview, useRuntimePlaybackOverview } from '../../common/hooks/useSocket';
 import useProjectData from '../../common/hooks-query/useProjectData';
 import { enDash } from '../../common/utils/styleUtils';
 
@@ -11,9 +10,9 @@ import { calculateEndAndDaySpan, formatedTime, getOffsetText } from './overviewU
 
 import style from './Overview.module.scss';
 
-export const EditorOverview = memo(_EditorOverview);
+export default memo(Overview);
 
-function _EditorOverview({ children }: { children: React.ReactNode }) {
+function Overview({ children }: { children: React.ReactNode }) {
   const { plannedEnd, plannedStart, actualStart, expectedEnd } = useRuntimeOverview();
 
   const [maybePlannedEnd, maybePlannedDaySpan] = useMemo(() => calculateEndAndDaySpan(plannedEnd), [plannedEnd]);
@@ -32,41 +31,6 @@ function _EditorOverview({ children }: { children: React.ReactNode }) {
             <TimeRow label='Planned start' value={formatedTime(plannedStart)} className={style.start} />
             <TimeRow label='Actual start' value={formatedTime(actualStart)} className={style.start} />
           </div>
-          <ProgressOverview />
-          <RuntimeOverview />
-          <div>
-            <TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
-            <TimeRow
-              label='Expected end'
-              value={expectedEndText}
-              className={style.end}
-              daySpan={maybeExpectedDaySpan}
-            />
-          </div>
-        </div>
-      </ErrorBoundary>
-    </div>
-  );
-}
-
-export const CuesheetOverview = memo(_CuesheetOverview);
-
-function _CuesheetOverview({ children }: { children: React.ReactNode }) {
-  const { plannedEnd, expectedEnd } = useRuntimeOverview();
-
-  const [maybePlannedEnd, maybePlannedDaySpan] = useMemo(() => calculateEndAndDaySpan(plannedEnd), [plannedEnd]);
-  const plannedEndText = formatedTime(maybePlannedEnd);
-
-  const [maybeExpectedEnd, maybeExpectedDaySpan] = useMemo(() => calculateEndAndDaySpan(expectedEnd), [expectedEnd]);
-  const expectedEndText = formatedTime(maybeExpectedEnd);
-
-  return (
-    <div className={style.overview}>
-      <ErrorBoundary>
-        <div className={style.nav}>{children}</div>
-        <div className={style.info}>
-          <TitlesOverview />
-          <TimerOverview />
           <RuntimeOverview />
           <div>
             <TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
@@ -94,32 +58,18 @@ function TitlesOverview() {
   );
 }
 
-function TimerOverview() {
-  const { current } = useTimer();
-
-  const display = millisToString(current);
-
-  return <TimeColumn label='Running timer' value={display} />;
-}
-
-function ProgressOverview() {
-  const { numEvents, selectedEventIndex } = useRuntimePlaybackOverview();
+function RuntimeOverview() {
+  const { clock, numEvents, selectedEventIndex, offset } = useRuntimePlaybackOverview();
 
   const current = selectedEventIndex !== null ? selectedEventIndex + 1 : enDash;
   const ofTotal = numEvents || enDash;
   const progressText = numEvents ? `${current} of ${ofTotal}` : '-';
-
-  return <TimeColumn label='Progress' value={progressText} />;
-}
-
-function RuntimeOverview() {
-  const { clock, offset } = useRuntimePlaybackOverview();
-
   const offsetText = getOffsetText(offset);
-  const offsetClasses = offset === null ? undefined : offset <= 0 ? style.behind : style.ahead;
+  const offsetClasses = offset === null ? undefined : offset > 0 ? style.behind : style.ahead;
 
   return (
     <>
+      <TimeColumn label='Progress' value={progressText} />
       <TimeColumn label='Offset' value={offsetText} className={offsetClasses} />
       <TimeColumn label='Time now' value={formatedTime(clock)} />
     </>

apps/client/src/features/overview/__tests__/overviewUtils.test.ts

@@ -1,22 +0,0 @@
-import { dayInMs } from 'ontime-utils';
-
-import { calculateEndAndDaySpan } from '../overviewUtils';
-
-describe('calculateEndAndDaySpan', () => {
-  it('should return [null, 0] when end is null', () => {
-    const result = calculateEndAndDaySpan(null);
-    expect(result).toEqual([null, 0]);
-  });
-
-  it('should return [end, 0] when end is less than or equal to dayInMs', () => {
-    const end = dayInMs / 2;
-    const result = calculateEndAndDaySpan(end);
-    expect(result).toEqual([end, 0]);
-  });
-
-  it('should return [end % dayInMs, Math.floor(end / dayInMs)] when end is greater than dayInMs', () => {
-    const end = dayInMs * 1.5;
-    const result = calculateEndAndDaySpan(end);
-    expect(result).toEqual([end % dayInMs, Math.floor(end / dayInMs)]);
-  });
-});

apps/client/src/features/overview/overviewUtils.ts

@@ -13,14 +13,20 @@ export function formatedTime(time: MaybeNumber) {
 }
 
 /**
- * Calculates how long a time is and how many days it spans
+ * Calculates a day span from a number range
+ * @param end
+ * @returns
  */
 export function calculateEndAndDaySpan(end: MaybeNumber): [MaybeNumber, number] {
-  if (end !== null && end > dayInMs) {
-    return [end % dayInMs, Math.floor(end / dayInMs)];
+  let maybeEnd = end;
+  let maybeDaySpan = 0;
+  if (end !== null) {
+    if (end > dayInMs) {
+      maybeEnd = end % dayInMs;
+      maybeDaySpan = Math.floor(end / dayInMs);
+    }
   }
-
-  return [end, 0];
+  return [maybeEnd, maybeDaySpan];
 }
 
 /**
@@ -32,5 +38,10 @@ export function getOffsetText(offset: MaybeNumber): string {
   if (offset === null) {
     return enDash;
   }
-  return millisToString(offset, { fallback: enDash });
+  const isAhead = offset <= 0;
+  let offsetText = millisToString(Math.abs(offset), { fallback: enDash });
+  if (offsetText !== enDash) {
+    offsetText = isAhead ? `+${offsetText}` : `${enDash}${offsetText}`;
+  }
+  return offsetText;
 }

apps/client/src/features/rundown/Rundown.module.scss

@@ -3,8 +3,8 @@
   width: 100%;
 }
 
-.rundownContainer {
-  margin-top: 1rem;
+.eventContainer {
+  margin-top: 1em;
   display: flex;
   flex-direction: column;
   padding-right: 4px; // size of scrollbar

apps/client/src/features/rundown/Rundown.tsx

@@ -1,15 +1,22 @@
 import { Fragment, lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { closestCenter, DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { useHotkeys } from '@mantine/hooks';
-import { isOntimeEvent, MaybeNumber, Playback, RundownCached, SupportedEvent } from 'ontime-types';
-import { getFirstNormal, getLastNormal, getNextNormal, getPreviousNormal } from 'ontime-utils';
+import {
+  isOntimeBlock,
+  isOntimeDelay,
+  isOntimeEvent,
+  MaybeNumber,
+  Playback,
+  RundownCached,
+  SupportedEvent,
+} from 'ontime-types';
+import { getFirstNormal, getNextNormal, getPreviousNormal } from 'ontime-utils';
 
 import { useEventAction } from '../../common/hooks/useEventAction';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { AppMode, useAppMode } from '../../common/stores/appModeStore';
-import { useEntryCopy } from '../../common/stores/entryCopyStore';
+import { useEditorSettings } from '../../common/stores/editorSettings';
 import { cloneEvent } from '../../common/utils/eventsManager';
 
 import QuickAddBlock from './quick-add-block/QuickAddBlock';
@@ -28,9 +35,10 @@ export default function Rundown({ data }: RundownProps) {
   const [statefulEntries, setStatefulEntries] = useState(order);
 
   const featureData = useRundownEditor();
-  const { addEvent, reorderEvent, deleteEvent } = useEventAction();
-
-  const { entryCopyId, setEntryCopyId } = useEntryCopy();
+  const { addEvent, reorderEvent } = useEventAction();
+  const eventSettings = useEditorSettings((state) => state.eventSettings);
+  const defaultPublic = eventSettings.defaultPublic;
+  const linkPrevious = eventSettings.linkPrevious;
 
   // cursor
   const { cursor, mode: appMode, setCursor } = useAppMode();
@@ -41,21 +49,9 @@ export default function Rundown({ data }: RundownProps) {
   // DND KIT
   const sensors = useSensors(useSensor(PointerSensor));
 
-  const deleteAtCursor = useCallback(
-    (cursor: string | null) => {
-      if (!cursor) return;
-      const previous = getPreviousNormal(rundown, order, cursor).entry?.id ?? null;
-      deleteEvent(cursor);
-      setCursor(previous);
-    },
-    [deleteEvent, order, rundown, setCursor],
-  );
-
   const insertAtCursor = useCallback(
-    (type: SupportedEvent | 'clone', cursor: string | null, above = false) => {
-      const adjustedCursor = above ? getPreviousNormal(rundown, order, cursor ?? '').entry?.id ?? null : cursor;
-
-      if (adjustedCursor === null) {
+    (type: SupportedEvent | 'clone', cursor: string | null) => {
+      if (cursor === null) {
         // we cant clone without selection
         if (type === 'clone') {
           return;
@@ -66,7 +62,7 @@ export default function Rundown({ data }: RundownProps) {
       }
 
       if (type === 'clone') {
-        const cursorEvent = rundown[adjustedCursor];
+        const cursorEvent = rundown[cursor];
         if (cursorEvent?.type === SupportedEvent.Event) {
           const newEvent = cloneEvent(cursorEvent, cursorEvent.id);
           addEvent(newEvent);
@@ -76,90 +72,113 @@ export default function Rundown({ data }: RundownProps) {
           type: SupportedEvent.Event,
         };
         const options = {
-          after: adjustedCursor,
-          lastEventId: adjustedCursor,
+          after: cursor,
+          defaultPublic,
+          lastEventId: cursor,
+          linkPrevious,
         };
         addEvent(newEvent, options);
       } else {
-        addEvent({ type }, { after: adjustedCursor });
+        addEvent({ type }, { after: cursor });
       }
     },
-    [rundown, order, addEvent],
+    [addEvent, rundown, defaultPublic, linkPrevious],
   );
 
-  const selectEntry = useCallback(
-    (cursor: string | null, direction: 'up' | 'down') => {
-      if (order.length < 1) {
-        return;
-      }
-      let newCursor: string | undefined;
-      if (cursor === null) {
-        // there is no cursor, we select the first or last depending on direction if it exists
-        newCursor = direction === 'up' ? getLastNormal(rundown, order)?.id : getFirstNormal(rundown, order)?.id;
-      } else {
-        // otherwise we select the next or previous
-        newCursor =
-          direction === 'up'
-            ? getPreviousNormal(rundown, order, cursor).entry?.id
-            : getNextNormal(rundown, order, cursor).entry?.id;
-      }
+  // Handle keyboard shortcuts
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      // handle held key
+      if (event.repeat) return;
 
-      if (newCursor) {
-        setCursor(newCursor);
+      const modKeysAlt = event.altKey && !event.ctrlKey && !event.shiftKey;
+      const modKeysCtrlAlt = event.altKey && event.ctrlKey && !event.shiftKey;
+
+      if (modKeysAlt) {
+        switch (event.code) {
+          case 'ArrowDown': {
+            if (order.length < 1) {
+              return;
+            }
+            const nextEvent =
+              cursor === null ? getFirstNormal(rundown, order) : getNextNormal(rundown, order, cursor)?.nextEvent;
+            if (nextEvent) {
+              setCursor(nextEvent.id);
+            }
+            break;
+          }
+          case 'ArrowUp': {
+            if (order.length < 1) {
+              return;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we check for this before
+            const previousEvent =
+              cursor === null
+                ? getFirstNormal(rundown, order)
+                : getPreviousNormal(rundown, order, cursor).previousEvent;
+            if (previousEvent) {
+              setCursor(previousEvent.id);
+            }
+            break;
+          }
+          case 'KeyE': {
+            event.preventDefault();
+            insertAtCursor(SupportedEvent.Event, cursor);
+            break;
+          }
+          case 'KeyD': {
+            event.preventDefault();
+            insertAtCursor(SupportedEvent.Delay, cursor);
+            break;
+          }
+          case 'KeyB': {
+            event.preventDefault();
+            insertAtCursor(SupportedEvent.Block, cursor);
+            break;
+          }
+          case 'KeyC': {
+            event.preventDefault();
+            insertAtCursor('clone', cursor);
+            break;
+          }
+        }
+      } else if (modKeysCtrlAlt) {
+        if (order.length < 2 || cursor == null) {
+          return;
+        }
+        // Alt + Ctrl + Arrow Down
+        if (event.code == 'ArrowDown') {
+          const { nextEvent, nextIndex } = getNextNormal(rundown, order, cursor);
+          if (nextEvent && nextIndex !== null) {
+            reorderEvent(cursor, nextIndex - 1, nextIndex);
+          }
+          // Alt + Ctrl + Arrow Up
+        } else if (event.code == 'ArrowUp') {
+          const { previousEvent, previousIndex } = getPreviousNormal(rundown, order, cursor);
+          if (previousEvent && previousIndex !== null) {
+            reorderEvent(cursor, previousIndex + 1, previousIndex);
+          }
+        }
       }
     },
-    [order, rundown, setCursor],
+    [order, cursor, rundown, setCursor, insertAtCursor, reorderEvent],
   );
 
-  const moveEntry = useCallback(
-    (cursor: string | null, direction: 'up' | 'down') => {
-      if (order.length < 2 || cursor == null) {
-        return;
-      }
-      const { index } =
-        direction === 'up' ? getPreviousNormal(rundown, order, cursor) : getNextNormal(rundown, order, cursor);
-
-      if (index !== null) {
-        const offsetIndex = direction === 'up' ? index + 1 : index - 1;
-        reorderEvent(cursor, offsetIndex, index);
-      }
-    },
-    [order, reorderEvent, rundown],
-  );
-
-  // shortcuts
-  useHotkeys([
-    ['alt + ArrowDown', () => selectEntry(cursor, 'down'), { preventDefault: true }],
-    ['alt + ArrowUp', () => selectEntry(cursor, 'up'), { preventDefault: true }],
-    ['alt + mod + ArrowDown', () => moveEntry(cursor, 'down'), { preventDefault: true }],
-    ['alt + mod + ArrowUp', () => moveEntry(cursor, 'up'), { preventDefault: true }],
-
-    ['Escape', () => setCursor(null), { preventDefault: true }],
-
-    ['mod + Backspace', () => deleteAtCursor(cursor), { preventDefault: true }],
-
-    ['alt + E', () => insertAtCursor(SupportedEvent.Event, cursor), { preventDefault: true }],
-    ['alt + shift + E', () => insertAtCursor(SupportedEvent.Event, cursor, true), { preventDefault: true }],
-
-    ['alt + B', () => insertAtCursor(SupportedEvent.Block, cursor), { preventDefault: true }],
-    ['alt + shift + B', () => insertAtCursor(SupportedEvent.Block, cursor, true), { preventDefault: true }],
-
-    ['alt + D', () => insertAtCursor(SupportedEvent.Delay, cursor), { preventDefault: true }],
-    ['alt + shift + D', () => insertAtCursor(SupportedEvent.Delay, cursor, true), { preventDefault: true }],
-
-    ['mod + C', () => setEntryCopyId(cursor), { preventDefault: true }],
-    ['mod + V', () => insertAtCursor('clone', entryCopyId), { preventDefault: true }],
-    ['mod + shift + V', () => insertAtCursor('clone', entryCopyId, true), { preventDefault: true }],
-
-    ['alt + backspace', () => deleteAtCursor(cursor), { preventDefault: true }],
-  ]);
-
   // we copy the state from the store here
   // to workaround async updates on the drag mutations
   useEffect(() => {
     setStatefulEntries(order);
   }, [order]);
 
+  // listen to keys
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
   useEffect(() => {
     // in run mode, we follow selection
     if (appMode !== AppMode.Run || !featureData?.selectedEventId) {
@@ -202,7 +221,7 @@ export default function Rundown({ data }: RundownProps) {
   const isEditMode = appMode === AppMode.Edit;
 
   return (
-    <div className={style.rundownContainer} ref={scrollRef} data-testid='rundown'>
+    <div className={style.eventContainer} ref={scrollRef} data-testid='rundown'>
       <DndContext onDragEnd={handleOnDragEnd} sensors={sensors} collisionDetection={closestCenter}>
         <SortableContext items={statefulEntries} strategy={verticalListSortingStrategy}>
           <div className={style.list}>
@@ -241,7 +260,14 @@ export default function Rundown({ data }: RundownProps) {
 
               return (
                 <Fragment key={event.id}>
-                  {isEditMode && (hasCursor || isFirst) && <QuickAddBlock previousEventId={previousEventId} />}
+                  {isEditMode && (hasCursor || isFirst) && (
+                    <QuickAddBlock
+                      showKbd={hasCursor ? 'above' : 'none'}
+                      previousEventId={previousEventId}
+                      disableAddDelay={isOntimeDelay(event)}
+                      disableAddBlock={isOntimeBlock(event)}
+                    />
+                  )}
                   <div className={style.entryWrapper} data-testid={`entry-${eventIndex}`}>
                     {isOntimeEvent(event) && <div className={style.entryIndex}>{eventIndex}</div>}
                     <div className={style.entry} key={event.id} ref={hasCursor ? cursorRef : undefined}>
@@ -261,7 +287,14 @@ export default function Rundown({ data }: RundownProps) {
                       />
                     </div>
                   </div>
-                  {isEditMode && (hasCursor || isLast) && <QuickAddBlock previousEventId={event.id} />}
+                  {isEditMode && (hasCursor || isLast) && (
+                    <QuickAddBlock
+                      showKbd={hasCursor ? 'below' : 'none'}
+                      previousEventId={event.id}
+                      disableAddDelay={isOntimeDelay(event)}
+                      disableAddBlock={isOntimeBlock(event)}
+                    />
+                  )}
                 </Fragment>
               );
             })}

apps/client/src/features/rundown/RundownEntry.tsx

@@ -4,6 +4,7 @@ import { MaybeNumber, OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent
 import { useEventAction } from '../../common/hooks/useEventAction';
 import useMemoisedFn from '../../common/hooks/useMemoisedFn';
 import { useAppMode } from '../../common/stores/appModeStore';
+import { useEditorSettings } from '../../common/stores/editorSettings';
 import { useEmitLog } from '../../common/stores/logger';
 import { cloneEvent } from '../../common/utils/eventsManager';
 
@@ -60,6 +61,10 @@ export default function RundownEntry(props: RundownEntryProps) {
   const setCursor = useAppMode((state) => state.setCursor);
   const { selectedEvents, clearSelectedEvents } = useEventSelection();
 
+  const eventSettings = useEditorSettings((state) => state.eventSettings);
+  const defaultPublic = eventSettings.defaultPublic;
+  const linkPrevious = eventSettings.linkPrevious;
+
   const removeOpenEvent = useCallback(() => {
     if (selectedEvents.has(data.id)) {
       clearSelectedEvents();
@@ -83,7 +88,9 @@ export default function RundownEntry(props: RundownEntryProps) {
         const newEvent = { type: SupportedEvent.Event };
         const options = {
           after: data.id,
+          defaultPublic,
           lastEventId: previousEventId,
+          linkPrevious,
         };
         return addEvent(newEvent, options);
       }
@@ -91,6 +98,8 @@ export default function RundownEntry(props: RundownEntryProps) {
         const newEvent = { type: SupportedEvent.Event };
         const options = {
           after: previousEventId,
+          defaultPublic,
+          linkPrevious,
         };
         return addEvent(newEvent, options);
       }

apps/client/src/features/rundown/RundownExport.module.scss

@@ -36,7 +36,7 @@
 
   flex: 1 2 auto; /* flex-grow: 1, flex-shrink: 2, flex-basis: auto */
   min-width: 38rem;
-  max-width: 60rem;
+  max-width: 45rem;
 }
 
 .side {