Merge pull request #1019 from cpvalente/cleanup-server-setup

remove redundant path evaluation

.dockerignore

@@ -11,4 +11,13 @@
 
 # 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

.eslintrc

@@ -19,6 +19,7 @@
   "rules": {
     "no-useless-concat": "warn",
     "prefer-template": "warn",
+    "no-throw-literal": "error",
     "no-console": [
       "warn",
       {

.github/FUNDING.yml

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

.github/workflows/build.yml

@@ -1,9 +1,8 @@
-name: Ontime build v3
+name: Ontime build
 
 on:
-# Only trigger manually for now for testing
-#   push:
-#     tags: [ "*" ]
+  push:
+    tags: [ "*" ]
   workflow_dispatch:
 
 jobs:
@@ -31,7 +30,14 @@ 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/build_docker.yml

@@ -1,4 +1,4 @@
-name: Docker Image CI Ontime V2
+name: Docker Image CI Ontime
 
 on:
   push:
@@ -13,28 +13,10 @@ jobs:
       CI: ''
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Setup env
       run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
 
-    - name: Setup Node.js environment
-      uses: actions/setup-node@v3.6.0
-      with:
-        version: 16.16.0
-
-    - name: Setup pnpm
-      uses: pnpm/action-setup@v2
-      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 turbo build:docker
-
     - name: Docker Login
       uses: docker/login-action@v2.1.0
       with:

.github/workflows/build_v2.yml

@@ -1,108 +0,0 @@
-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/test.yml

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

.github/workflows/test_v2.yml

@@ -1,106 +0,0 @@
-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

.gitignore

@@ -45,3 +45,6 @@ apps/server/src/preloaded-db/db.json
 
 # versioning file
 **/ONTIME_VERSION.js
+
+# temporary write files
+**.tmp

DEVELOPMENT.md

@@ -88,8 +88,6 @@ While it should allow for a generic setup, it might need to be modified to fit y
 
 From the project root, run the following commands
 
-- __Install the project dependencies__ by running `pnpm i`
-- __Build packages__ by running `pnpm build:localdocker`
 - __Build docker image from__ by running `docker build -t getontime/ontime`
 - __Run docker image from compose__ by running `docker-compose up -d`
 

Dockerfile

@@ -1,4 +1,13 @@
-FROM node:16-alpine
+FROM node:18.18-alpine AS builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
+RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils install --config.dedupe-peer-dependents=false --frozen-lockfile
+RUN pnpm --filter=ontime-ui --filter=ontime-server run build:docker
+
+FROM node:18.18-alpine
 
 # Set environment variables
 # Environment Variable to signal that we are running production
@@ -9,12 +18,12 @@ ENV ONTIME_DATA=/external/
 WORKDIR /app/
 
 # Prepare UI
-COPY /apps/client/build ./client/
+COPY --from=builder /app/apps/client/build ./client/
 
 # Prepare Backend
-COPY /apps/server/dist/ ./server/
-COPY /demo-db/ ./preloaded-db/
-COPY /apps/server/src/external/ ./external/
+COPY --from=builder /app/apps/server/dist/ ./server/
+COPY ./demo-db/ ./preloaded-db/
+COPY --from=builder /app/apps/server/src/external/ ./external/
 
 # Export default ports
 EXPOSE 4001/tcp 8888/udp 9999/udp

README.md

@@ -1,205 +1,178 @@
-[![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) 
+[![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)
 
-## Download the latest releases here
+## Download the latest release
+<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>
 
-<div style="display: flex; justify-content: space-around">
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/mac-download.png"/></a>
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe"><img alt="Download Windows" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/win-download.png"/></a>
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage"><img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/linux-download.png"/></a>
-  <a href="https://hub.docker.com/r/getontime/ontime"><img alt="Get from Dockerhub" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/dockerhub.png"/></a>
-</div>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe">Windows</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg">MacOS Arm</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-x64.dmg">MacOS Intel</a>
+- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage">Linux</a>
+- Get from <a href="https://hub.docker.com/r/getontime/ontime">Docker hub</a>
+
+## Using Ontime?
+
+Let us know!
+Ontime improves from the collaboration with its users. We would like to understand how you use Ontime and appreciate your feedback.
+
+We would also like to include a testimonials section in our ✨new website✨. It would be great to showcase the diversity of users running Ontime.
 
 # Ontime
 
-Ontime is an application for creating and managing event running order and timers.
+Ontime is a browser-based application that manages event rundowns, scheduling, and cueing.
 
-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.
+With Ontime, you can plan, track your schedule, manage automation and cross-department show information all in one place.
 
-This makes for a simple and cheap way to distribute over a venue using a network infrastructure instead of video outputs.
+Ontime is made by entertainment and broadcast engineers and used by
 
-![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.png)
+- Conference organisers
+- Touring shows and receiving venues
+- Broadcasters and streamers
+- Theatres and opera houses
+- Houses of worship
 
-![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/overview.png)
+### For live environments
+
+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)
 
 [Read the docs to learn more](https://docs.getontime.no)
 
 ## Using 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.
+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)
 
-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.
+Once installed and running, any device in the network has access to Ontime.
 
-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
+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`
 
 ```
-For the presentation views
+For the backstage 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/sm         > Stage Manager / Backstage view
-IP.ADDRESS:4001/public     > Public / Foyer view
-IP.ADDRESS:4001/lower      > Lower Thirds
+IP.ADDRESS:4001/backstage  > Stage Manager / Backstage view
+IP.ADDRESS:4001/countdown  > Countdown to anything
 IP.ADDRESS:4001/studio     > Studio Clock
 ```
 
 ```
-For management views
+For the public views
+-------------------------------------------------------------
+IP.ADDRESS:4001/public     > Public / Foyer view
+IP.ADDRESS:4001/lower      > Lower Thirds
+```
+
+```
+For production 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)
 
-## Feature List (in no specific order)
+## Main features
 
 - [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] 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
-  - 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] 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](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/)
+- [x] Companion integration [follow link](https://bitfocus.io/connections/getontime-ontime)
 
 ## Roadmap
 
 ### Continued development
 
-Several features are planned in the roadmap, and we continuously adjust this to match how users interact with the app.
-<br />
+Ontime is under active development. We continue adding and tweaking features in collaboration with users.
+
 Have an idea? Reach out via [email](mail@getontime.no)
 or [open an issue](https://github.com/cpvalente/ontime/issues/new)
 
 ### Issues
 
-We use Github's issue tracking for bug reporting and feature requests. <br />
+We use Github's issue tracking for bug reporting and feature requests. \
 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 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
+- In Windows: click `more` -> `Run Anyway`
+- In Linux: right-click the AppImage file: `Properties` -> `Permissions` -> `Allow Executing File as a Program`
 
-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,
+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)
 
-#### 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
+## Contributing
 
 Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
-<br /><br />
-If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a
-Pull Request.
-<br />
+
+If you are a developer and would like to contribute with code, please open an issue to discuss before opening a Pull Request.
+
 Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)
 
-# Help
+## Links
 
-Help is underway! ... and can be found [here](https://docs.getontime.no)
+See the [Ontime website](https://getontime.no) here and the link to the [documentation](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

@@ -0,0 +1,19 @@
+# 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.0-alpha",
+  "version": "3.0.4",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -10,6 +10,8 @@
     "@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",
     "@tanstack/react-query": "^5.17.9",
@@ -27,9 +29,8 @@
     "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"
+    "zustand": "^4.5.2"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -60,7 +61,7 @@
     ]
   },
   "devDependencies": {
-    "@sentry/vite-plugin": "^2.14.0",
+    "@sentry/vite-plugin": "^2.16.1",
     "@tanstack/eslint-plugin-query": "^5.8.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.1.1",
@@ -85,11 +86,11 @@
     "ontime-utils": "workspace:*",
     "prettier": "^3.0.3",
     "sass": "^1.57.1",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.11",
     "vite-plugin-compression2": "^0.12.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.2.2"
+    "vitest": "^1.6.0"
   }
 }

apps/client/src/App.tsx

@@ -1,13 +1,10 @@
-import { useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-import { ContextMenu } from './common/components/context-menu/ContextMenu';
 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
 import { AppContextProvider } from './common/context/AppContext';
-import useElectronEvent from './common/hooks/useElectronEvent';
 import { ontimeQueryClient } from './common/queryClient';
 import { socketClientName } from './common/stores/connectionName';
 import { connectSocket } from './common/utils/socket';
@@ -15,50 +12,19 @@ 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 resetCSS theme={theme}>
+    <ChakraProvider disableGlobalStyle resetCSS theme={theme}>
       <QueryClientProvider client={ontimeQueryClient}>
         <AppContextProvider>
           <BrowserRouter>
             <div className='App'>
               <ErrorBoundary>
                 <TranslationProvider>
-                  <ContextMenu>
-                    <AppRouter />
-                  </ContextMenu>
+                  <AppRouter />
                 </TranslationProvider>
               </ErrorBoundary>
               <ReactQueryDevtools initialIsOpen={false} />

apps/client/src/AppRouter.tsx

@@ -7,7 +7,7 @@ import withData from './features/viewers/ViewWrapper';
 
 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
 const Cuesheet = lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
-const Operator = lazy(() => import('./features/operator/Operator'));
+const Operator = lazy(() => import('./features/operator/OperatorExport'));
 
 const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
 const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
@@ -49,12 +49,12 @@ export default function AppRouter() {
         <Route path='/backstage' element={<SBackstage />} />
 
         <Route path='/public' element={<SPublic />} />
+
         <Route path='/studio' element={<SStudio />} />
-        {/*/!* Lower cannot have fallback *!/*/}
+
         <Route path='/lower' element={<SLowerThird />} />
 
         <Route path='/op' element={<Operator />} />
-        <Route path='/operator' element={<Operator />} />
 
         {/*/!* Protected Routes *!/*/}
         <Route path='/editor' element={<Editor />} />

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

@@ -1,36 +1,54 @@
 import axios, { AxiosResponse } from 'axios';
-import {
-  CustomFields,
-  DatabaseModel,
-  GetInfo,
-  MessageResponse,
-  OntimeRundown,
-  ProjectData,
-  ProjectFileListResponse,
-} from 'ontime-types';
-import { ImportMap } from 'ontime-utils';
+import { DatabaseModel, GetInfo, MessageResponse, ProjectData, ProjectFileListResponse } from 'ontime-types';
+
+import { makeCSV, makeTable } from '../../features/cuesheet/cuesheetUtils';
 
 import { apiEntryUrl } from './constants';
-import fileDownload from './utils';
+import { createBlob, downloadBlob } from './utils';
 
 const dbPath = `${apiEntryUrl}/db`;
 
 /**
- * HTTP request to download db in JSON format
+ * HTTP request to the current DB
  */
-export async function downloadRundown(fileName?: string) {
-  return fileDownload(
-    dbPath,
-    { name: fileName ?? 'rundown', type: 'json' },
-    { type: 'application/json;charset=utf-8;' },
-  );
+async function getDb(fileName?: string): Promise<AxiosResponse<DatabaseModel>> {
+  return axios.post(`${dbPath}/download/`, { fileName });
 }
 
 /**
- * HTTP request to download db in CSV format
+ * Request download of the current project file
+ * @param fileName
  */
-export async function downloadCSV(fileName?: string) {
-  return fileDownload(dbPath, { name: fileName ?? 'rundown', type: 'csv' }, { type: 'text/csv;charset=utf-8;' });
+export async function downloadProject(fileName: string) {
+  try {
+    const { data, name } = await fileDownload(fileName);
+
+    const fileContent = JSON.stringify(data, null, 2);
+
+    const blob = createBlob(fileContent, 'application/json;charset=utf-8;');
+    downloadBlob(blob, `${name}.json`);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/**
+ * Request download of the current rundown as a CSV file
+ * @param fileName
+ */
+export async function downloadCSV(fileName: string = 'rundown') {
+  try {
+    const { data, name } = await fileDownload(fileName);
+    const { project, rundown, customFields } = data;
+
+    const sheetData = makeTable(project, rundown, customFields);
+    const fileContent = makeCSV(sheetData);
+
+    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
+    downloadBlob(blob, `${name}.csv`);
+  } catch (error) {
+    console.error(error);
+  }
 }
 
 /**
@@ -128,28 +146,23 @@ export async function getInfo(): Promise<GetInfo> {
   return res.data;
 }
 
-type PreviewSpreadsheetResponse = {
-  rundown: OntimeRundown;
-  customFields: CustomFields;
-};
-
 /**
- * Make patch changes to the objects in the db
+ * Utility function gets project from db
+ * @param fileName
+ * @returns
  */
-export async function importSpreadsheetPreview(file: File, options: ImportMap): Promise<PreviewSpreadsheetResponse> {
-  const formData = new FormData();
-  formData.append('spreadsheet', file);
-  formData.append('options', JSON.stringify(options));
+async function fileDownload(fileName: string): Promise<{ data: DatabaseModel; name: string }> {
+  const response = await getDb(fileName);
 
-  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(
-    `${dbPath}/spreadsheet/preview`,
-    formData,
-    {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    },
-  );
+  const headerLine = response.headers['Content-Disposition'];
 
-  return response.data;
+  // try and get the filename from the response
+  let name = fileName;
+  if (headerLine != null) {
+    const startFileNameIndex = headerLine.indexOf('"') + 1;
+    const endFileNameIndex = headerLine.lastIndexOf('"');
+    name = headerLine.substring(startFileNameIndex, endFileNameIndex);
+  }
+
+  return { data: response.data, name };
 }

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

@@ -0,0 +1,42 @@
+import axios, { AxiosResponse } from 'axios';
+import { CustomFields, OntimeRundown } from 'ontime-types';
+import { ImportMap } from 'ontime-utils';
+
+import { apiEntryUrl } from './constants';
+
+const excelPath = `${apiEntryUrl}/excel`;
+
+type PreviewSpreadsheetResponse = {
+  rundown: OntimeRundown;
+  customFields: CustomFields;
+};
+
+/**
+ * upload Excel file to server
+ * @return string - file ID op the uploaded file
+ */
+export async function upload(file: File) {
+  const formData = new FormData();
+  formData.append('excel', file);
+  await axios.post(`${excelPath}/upload`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+}
+
+/**
+ * Get Worksheet names
+ * @return string[] - array of available worksheets
+ */
+export async function getWorksheetNames(): Promise<string[]> {
+  const response: AxiosResponse<string[]> = await axios.get(`${excelPath}/worksheets`);
+  return response.data;
+}
+
+export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
+  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
+    options,
+  });
+  return response.data;
+}

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

@@ -74,8 +74,8 @@ export async function requestApplyDelay(eventId: string): Promise<AxiosResponse<
 /**
  * HTTP request to delete given event
  */
-export async function requestDelete(eventId: string): Promise<AxiosResponse<MessageResponse>> {
-  return axios.delete(`${rundownPath}/${eventId}`);
+export async function requestDelete(eventIds: string[]): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(rundownPath, { data: { ids: eventIds } });
 }
 
 /**

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

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { AuthenticationStatus, CustomFields, OntimeRundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
@@ -9,7 +9,10 @@ const sheetsPath = `${apiEntryUrl}/sheets`;
 /**
  * HTTP request to verify whether we are authenticated with Google Sheet service
  */
-export const verifyAuthenticationStatus = async (): Promise<{ authenticated: AuthenticationStatus }> => {
+export const verifyAuthenticationStatus = async (): Promise<{
+  authenticated: AuthenticationStatus;
+  sheetId: string;
+}> => {
   const response = await axios.get(`${sheetsPath}/connect`);
   return response.data;
 };
@@ -58,6 +61,11 @@ export const previewRundown = async (
   return response.data;
 };
 
+export const getWorksheetNames = async (sheetId: string): Promise<string[]> => {
+  const response: AxiosResponse<string[]> = await axios.post(`${sheetsPath}/${sheetId}/worksheets`);
+  return response.data;
+};
+
 /**
  * HTTP request to upload the rundown to a google sheet
  */

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

@@ -2,7 +2,6 @@ import axios, { AxiosError } from 'axios';
 import { LogLevel } from 'ontime-types';
 import { generateId, millisToString } from 'ontime-utils';
 
-import { makeCSV, makeTable } from '../../features/cuesheet/cuesheetUtils';
 import { ontimeQueryClient } from '../queryClient';
 import { addLog } from '../stores/logger';
 import { nowInMillis } from '../utils/time';
@@ -56,63 +55,29 @@ export async function invalidateAllCaches() {
   await ontimeQueryClient.invalidateQueries();
 }
 
-type FileOptions = {
-  name: string;
-  type: string;
-};
-
-type BlobOptions = {
-  type: string;
-};
-
 /**
- * Gets DB from backend and prepares a file to be downloaded
- * @param url
- * @param fileOptions
- * @param blobOptions
+ * Creates blob from content
+ * @param fileContent
+ * @param type
  * @returns
  */
-export default async function fileDownload(url: string, fileOptions: FileOptions, blobOptions: BlobOptions) {
-  const response = await axios({
-    url: `${url}/db`,
-    method: 'GET',
-  });
+export function createBlob(fileContent: string, type: string): Blob {
+  return new Blob([fileContent], { type });
+}
 
-  const headerLine = response.headers['Content-Disposition'];
-  let { name: fileName } = fileOptions;
-  const { type: fileType } = fileOptions;
-  const { project, rundown, customFields } = response.data;
-
-  // try and get the filename from the response
-  if (headerLine != null) {
-    const startFileNameIndex = headerLine.indexOf('"') + 1;
-    const endFileNameIndex = headerLine.lastIndexOf('"');
-    fileName = headerLine.substring(startFileNameIndex, endFileNameIndex);
-  }
-
-  let fileContent = '';
-
-  if (fileType === 'json') {
-    fileContent = JSON.stringify(response.data);
-    fileName += '.json';
-  }
-
-  if (fileType === 'csv') {
-    const sheetData = makeTable(project, rundown, customFields);
-    fileContent = makeCSV(sheetData);
-    fileName += '.csv';
-  }
-
-  const blob = new Blob([fileContent], { type: blobOptions.type });
+/**
+ * downloads a blob
+ * @param downloadUrl
+ * @param fileName
+ */
+export function downloadBlob(blob: Blob, fileName: string) {
   const downloadUrl = URL.createObjectURL(blob);
-
   const link = document.createElement('a');
   link.setAttribute('href', downloadUrl);
   link.setAttribute('download', fileName);
   document.body.appendChild(link);
   link.click();
+
   // Clean up the URL.createObjectURL to release resources
   URL.revokeObjectURL(downloadUrl);
-  return;
 }
-

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

@@ -1,96 +0,0 @@
-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/ContextMenu.tsx

@@ -75,6 +75,7 @@ export const ContextMenu = ({ children }: ContextMenuProps) => {
           w={1}
           h={1}
           style={{
+            position: 'fixed',
             left: coords.x,
             top: coords.y,
           }}

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 />} onClick={onClick} isDisabled={isDisabled}>
+    <MenuItem icon={<Icon style={{ fontSize: '1rem' }} />} onClick={onClick} isDisabled={isDisabled}>
       {label}
     </MenuItem>
   </>

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

@@ -1,27 +1,25 @@
-import { useEffect, useRef } from 'react';
+import { RefObject, useEffect } 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) => {
-  const { value } = props;
-
-  const ref = useRef<HTMLTextAreaElement>(null);
+export const AutoTextArea = (props: TextareaProps & { inputref: RefObject<unknown> }) => {
+  const { value, inputref } = props;
 
   useEffect(() => {
-    const node = ref.current;
-    autosize(ref.current);
+    const node = inputref.current;
+    autosize(inputref.current);
     return () => {
       autosize.destroy(node);
     };
-  }, [value]);
+  }, [inputref, 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/delay-input/DelayInput.tsx

@@ -1,9 +1,8 @@
 import { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { Input, Radio, RadioGroup } from '@chakra-ui/react';
-import { millisToString } from 'ontime-utils';
+import { millisToString, parseUserTime } from 'ontime-utils';
 
 import { useEventAction } from '../../../hooks/useEventAction';
-import { forgivingStringToMillis } from '../../../utils/dateConfig';
 
 import style from './DelayInput.module.scss';
 
@@ -40,7 +39,7 @@ export default function DelayInput(props: DelayInputProps) {
     }
 
     const isNegative = newValue.startsWith('-');
-    let newMillis = forgivingStringToMillis(newValue);
+    let newMillis = parseUserTime(newValue);
 
     if (isNegative) {
       newMillis = newMillis * -1;

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

@@ -1,58 +0,0 @@
-import { useCallback, useRef } from 'react';
-import { Input, Textarea } from '@chakra-ui/react';
-
-import { EventEditorSubmitActions } from '../../../../features/rundown/event-editor/EventEditor';
-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,17 +1,20 @@
-import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import { getHotkeyHandler, HotkeyItem } from '@mantine/hooks';
 
 interface UseReactiveTextInputReturn {
   value: string;
   onChange: (event: ChangeEvent) => void;
   onBlur: (event: ChangeEvent) => void;
-  onKeyDown: (event: KeyboardEvent) => void;
+  onKeyDown: (event: KeyboardEvent<HTMLElement>) => 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);
@@ -44,43 +47,45 @@ export default function useReactiveTextInput(
   const handleSubmit = useCallback(
     (valueToSubmit: string) => {
       // No need to update if it hasn't changed
-      if (valueToSubmit === initialText) {
-        return;
-      }
-      const cleanVal = valueToSubmit.trim();
-      submitCallback(cleanVal);
-
-      if (cleanVal !== valueToSubmit) {
-        setText(cleanVal);
+      if (valueToSubmit !== initialText) {
+        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, submitCallback],
+    [initialText, ref, submitCallback],
   );
 
   /**
-   * @description Handles common keys for submit and cancel
-   * @param {string} key
+   * @description Handles escape events
+   * @param {string} valueToSubmit
    */
-  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],
-  );
+  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]);
 
   return {
     value: text,
     onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
     onBlur: (event: ChangeEvent) => handleSubmit((event.target as HTMLInputElement).value),
-    onKeyDown: (event: KeyboardEvent) => keyHandler(event.key),
+    onKeyDown: keyHandler,
   };
 }

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

@@ -1,23 +1,21 @@
 import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { Input } from '@chakra-ui/react';
-import { millisToString } from 'ontime-utils';
+import { millisToString, parseUserTime } from 'ontime-utils';
 
 import { useEmitLog } from '../../../stores/logger';
-import { forgivingStringToMillis } from '../../../utils/dateConfig';
-import { cx } from '../../../utils/styleUtils';
 
-import style from './TimeInput.module.scss';
 interface TimeInputProps<T extends string> {
   name: T;
   submitHandler: (field: T, value: string) => void;
   time?: number;
   placeholder: string;
   disabled?: boolean;
+  align?: 'left' | 'center';
   className?: string;
 }
 
 export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
-  const { name, submitHandler, time = 0, placeholder, disabled, className } = props;
+  const { name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
   const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
@@ -58,7 +56,7 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
         submitHandler(name, newValue);
       }
 
-      const valueInMillis = forgivingStringToMillis(newValue);
+      const valueInMillis = parseUserTime(newValue);
       if (valueInMillis === time) {
         return false;
       }
@@ -117,15 +115,13 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
     resetValue();
   }, [resetValue, time]);
 
-  const timeInputClasses = cx([style.timeInput, className]);
-
   return (
     <Input
       disabled={disabled}
       size='sm'
       ref={inputRef}
       data-testid={`time-input-${name}`}
-      className={timeInputClasses}
+      className={className}
       fontSize='1rem'
       type='text'
       placeholder={placeholder}
@@ -136,7 +132,10 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
       onKeyDown={onKeyDownHandler}
       value={value}
       maxLength={8}
+      maxWidth='7.5em'
+      letterSpacing='1px'
       autoComplete='off'
+      textAlign={align}
     />
   );
 }

apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss

@@ -6,7 +6,3 @@ $input-delayed-border-color: $ontime-delay-text;
     border: 1px solid $input-delayed-border-color;
   }
 }
-
-.inputField {
-  max-width: 7.75em;
-}

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

@@ -28,7 +28,7 @@ export default function TimeInputWithButton<T extends string>(props: PropsWithCh
         submitHandler={submitHandler}
         time={time}
         placeholder={placeholder}
-        className={style.inputField}
+        align='left'
         disabled={disabled}
       />
       {children}

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 percentComplete = 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
+  const percentRemaining = complete === 0 ? 0 : 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: `${percentComplete}%` }} />
+          <div className='multiprogress-bar__indicator' style={{ width: `${percentRemaining}%` }} />
         </>
       )}
     </div>

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

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { IoApps } from '@react-icons/all-files/io5/IoApps';
+import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
+
+import { debounce } from '../../utils/debounce';
+
+import style from './NavigationMenu.module.scss';
+
+interface FloatingNavigationProps {
+  toggleMenu: () => void;
+  toggleSettings: () => void;
+}
+
+export default function FloatingNavigation(props: FloatingNavigationProps) {
+  const { toggleMenu, toggleSettings } = props;
+  const [showButton, setShowButton] = useState(false);
+
+  // show on mouse move
+  useEffect(() => {
+    let fadeOut: NodeJS.Timeout | null = null;
+    const setShowMenuTrue = () => {
+      setShowButton(true);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+      fadeOut = setTimeout(() => setShowButton(false), 3000);
+    };
+
+    const debouncedShowMenu = debounce(setShowMenuTrue, 1000);
+
+    document.addEventListener('mousemove', debouncedShowMenu);
+    return () => {
+      document.removeEventListener('mousemove', debouncedShowMenu);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+    };
+  }, []);
+
+  return (
+    <div className={`${style.buttonContainer} ${!showButton ? style.hidden : ''}`}>
+      <button
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        className={style.navButton}
+        data-testid='navigation__toggle-menu'
+      >
+        <IoApps />
+      </button>
+      <button
+        className={style.button}
+        onClick={toggleSettings}
+        aria-label='toggle settings'
+        data-testid='navigation__toggle-settings'
+      >
+        <IoSettingsOutline />
+      </button>
+    </div>
+  );
+}

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

@@ -1,12 +1,11 @@
 @use '../../../theme/mixins' as *;
 
-$menu-bg: $gray-1200;
 $menu-hover-bg: $gray-1350;
 $menu-focus-bg: $gray-1300;
 
 $icon-color: $ui-white;
 $button-bg: $gray-1050;
-$button-size: 48px;
+$button-size: 3rem;
 
 .buttonContainer {
   display: flex;
@@ -21,7 +20,7 @@ $button-size: 48px;
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 2;
+  z-index: 12;
 
   &.hidden {
     opacity: 0;
@@ -29,7 +28,7 @@ $button-size: 48px;
 }
 
 .button {
-  font-size: 24px;
+  font-size: 1.5rem;
   color: $icon-color;
   background-color: $button-bg;
   width: $button-size;
@@ -44,31 +43,10 @@ $button-size: 48px;
   z-index: 3;
 }
 
-.menuContainer {
-  top: 0;
-  left: 0;
-  height: fit-content;
-  position: absolute;
-  background-color: $menu-bg;
-  min-width: 200px;
-  border-radius: 0 0 24px 0;
-  border-right: 1px solid $border-color-ondark;
-
-  box-shadow: $box-shadow-l2;
-  padding-bottom: 1rem;
-
-  max-height: 100vh;
-  overflow-y: auto;
-}
-
-.buttonsContainer {
-  margin-top: calc(56px + 1rem);
-}
-
 .link {
   @include action-link;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1.5rem;
+  gap: 0.5rem;
 
   &:hover {
     background-color: $menu-hover-bg;
@@ -91,7 +69,7 @@ $button-size: 48px;
 }
 
 .linkIcon {
-  display: inline-block;
+  margin-left: auto;
   transform: rotate(45deg);
 }
 

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

@@ -1,17 +1,24 @@
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { Link, useLocation, useSearchParams } from 'react-router-dom';
-import { useDisclosure } from '@chakra-ui/react';
-import { IoApps } from '@react-icons/all-files/io5/IoApps';
+import { Link } from 'react-router-dom';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { useFullscreen } from '@mantine/hooks';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
-import { IoPencilSharp } from '@react-icons/all-files/io5/IoPencilSharp';
+import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
 import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
 import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
-import useFullscreen from '../../hooks/useFullscreen';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import { isKeyEnter } from '../../utils/keyEvent';
 
@@ -19,81 +26,54 @@ import RenameClientModal from './rename-client-modal/RenameClientModal';
 
 import style from './NavigationMenu.module.scss';
 
-function NavigationMenu() {
-  const location = useLocation();
+interface NavigationMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
 
-  const { isFullScreen, toggleFullScreen } = useFullscreen();
+function NavigationMenu(props: NavigationMenuProps) {
+  const { isOpen, onClose } = props;
+
+  const { isOpen: isRenameOpen, onOpen: onRenameOpen, onClose: onRenameClose } = useDisclosure();
+
+  const { fullscreen, toggle } = useFullscreen();
   const { toggleMirror } = useViewOptionsStore();
-  const [showButton, setShowButton] = useState(false);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [showMenu, setShowMenu] = useState(false);
+
   const menuRef = useRef<HTMLDivElement | null>(null);
 
-  useClickOutside(menuRef, () => setShowMenu(false));
-
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const toggleMenu = () => setShowMenu((prev) => !prev);
-
-  // show on mouse move
-  useEffect(() => {
-    let fadeOut: NodeJS.Timeout | null = null;
-    const setShowMenuTrue = () => {
-      setShowButton(true);
-      if (fadeOut) {
-        clearTimeout(fadeOut);
-      }
-      fadeOut = setTimeout(() => setShowButton(false), 3000);
-    };
-    document.addEventListener('mousemove', setShowMenuTrue);
-    return () => {
-      document.removeEventListener('mousemove', setShowMenuTrue);
-      if (fadeOut) {
-        clearTimeout(fadeOut);
-      }
-    };
-  }, []);
-
-  const handleFullscreen = () => toggleFullScreen();
-  const handleMirror = () => toggleMirror();
-
-  const showEditFormDrawer = () => {
-    searchParams.set('edit', 'true');
-    setSearchParams(searchParams);
-  };
+  useClickOutside(menuRef, () => onClose);
 
   return createPortal(
     <div id='navigation-menu-portal' ref={menuRef}>
-      <RenameClientModal isOpen={isOpen} onClose={onClose} />
-      <div className={`${style.buttonContainer} ${!showButton && !showMenu ? style.hidden : ''}`}>
-        <button onClick={toggleMenu} aria-label='toggle menu' className={style.navButton}>
-          <IoApps />
-        </button>
-        <button className={style.button} onClick={showEditFormDrawer}>
-          <IoPencilSharp />
-        </button>
-        {showMenu && (
-          <div className={style.menuContainer} data-testid='navigation-menu'>
+      <RenameClientModal isOpen={isRenameOpen} onClose={onRenameClose} />
+      <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerCloseButton size='lg' />
+            Ontime
+          </DrawerHeader>
+          <DrawerBody padding={0}>
             <div className={style.buttonsContainer}>
               <div
                 className={style.link}
                 tabIndex={0}
                 role='button'
-                onClick={handleFullscreen}
+                onClick={toggle}
                 onKeyDown={(event) => {
-                  isKeyEnter(event) && handleFullscreen();
+                  isKeyEnter(event) && toggle();
                 }}
               >
                 Toggle Fullscreen
-                {isFullScreen ? <IoContract /> : <IoExpand />}
+                {fullscreen ? <IoContract /> : <IoExpand />}
               </div>
               <div
                 className={style.link}
                 tabIndex={0}
                 role='button'
-                onClick={handleMirror}
+                onClick={() => toggleMirror()}
                 onKeyDown={(event) => {
-                  isKeyEnter(event) && handleMirror();
+                  isKeyEnter(event) && toggleMirror();
                 }}
               >
                 Flip Screen
@@ -103,20 +83,35 @@ function NavigationMenu() {
                 className={style.link}
                 tabIndex={0}
                 role='button'
-                onClick={onOpen}
+                onClick={onRenameOpen}
                 onKeyDown={(event) => {
-                  isKeyEnter(event) && onOpen();
+                  isKeyEnter(event) && onRenameOpen();
                 }}
               >
                 Rename Client
               </div>
             </div>
             <hr className={style.separator} />
-            <Link to='/cuesheet' className={style.link} tabIndex={0}>
+            <Link
+              to='/editor'
+              className={`${style.link} ${location.pathname === '/editor' ? style.current : ''}`}
+              tabIndex={0}
+            >
+              <IoLockClosedOutline />
+              Editor
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <Link
+              to='/cuesheet'
+              className={`${style.link} ${location.pathname === '/cuesheet' ? style.current : ''}`}
+              tabIndex={0}
+            >
+              <IoLockClosedOutline />
               Cuesheet
               <IoArrowUp className={style.linkIcon} />
             </Link>
-            <Link to='/op' className={style.link} tabIndex={0}>
+            <Link to='/op' className={`${style.link} ${location.pathname === '/op' ? style.current : ''}`} tabIndex={0}>
+              <IoLockClosedOutline />
               Operator
               <IoArrowUp className={style.linkIcon} />
             </Link>
@@ -132,11 +127,10 @@ function NavigationMenu() {
                 <IoArrowUp className={style.linkIcon} />
               </Link>
             ))}
-          </div>
-        )}
-      </div>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
     </div>,
-
     document.body,
   );
 }

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

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import NavigationMenu from './NavigationMenu';
+
+interface ProductionNavigationMenuProps {
+  isMenuOpen: boolean;
+  onMenuClose: () => void;
+}
+
+function ProductionNavigationMenu(props: ProductionNavigationMenuProps) {
+  const { isMenuOpen, onMenuClose } = props;
+
+  return <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />;
+}
+
+export default memo(ProductionNavigationMenu);

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

@@ -0,0 +1,27 @@
+import { memo, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useDisclosure } from '@chakra-ui/react';
+
+import FloatingNavigation from './FloatingNavigation';
+import NavigationMenu from './NavigationMenu';
+
+function ViewNavigationMenu() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
+
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+
+  const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
+
+  return (
+    <>
+      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
+      <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />
+    </>
+  );
+}
+
+export default memo(ViewNavigationMenu);

apps/client/src/common/components/navigation-menu/rename-client-modal/RenameClientModal.module.scss

@@ -1,5 +0,0 @@
-.modalBody {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}

apps/client/src/common/components/navigation-menu/rename-client-modal/RenameClientModal.tsx

@@ -13,8 +13,6 @@ import {
 import { setClientName } from '../../../hooks/useSocket';
 import { useSocketClientName } from '../../../stores/connectionName';
 
-import style from './RenameClientModal.module.scss';
-
 interface RenameClientModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -45,18 +43,18 @@ export default function RenameClientModal({ isOpen, onClose }: RenameClientModal
       motionPreset='slideInBottom'
       scrollBehavior='inside'
       preserveScrollBarGap
-      variant='ontime-small'
+      variant='ontime'
     >
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>Rename client</ModalHeader>
         <ModalCloseButton />
-        <ModalBody className={style.modalBody}>
+        <ModalBody>
           <Input
             placeholder='Connection must have a name'
             defaultValue={newName}
             onChange={(e) => setNewName(e.target.value)}
-            variant='ontime-filled-on-light'
+            variant='ontime-filled'
           />
           <Button
             isDisabled={newName === clientName || !newName}

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

@@ -1,13 +1,14 @@
 @use '../../../theme/viewerDefs' as *;
 
 $progress-bar-size: 12px;
-$progress-bar-br: 6px;
+$progress-bar-br: 3px;
 
 .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;
@@ -18,6 +19,5 @@ $progress-bar-br: 6px;
   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/protect-route/PinPage.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { HStack, IconButton, PinInput, PinInputField } from '@chakra-ui/react';
+import { IconButton, PinInput, PinInputField } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 
 import style from './ProtectRoute.module.scss';
@@ -39,8 +39,8 @@ export default function PinPage(props: PinPageProps) {
 
   return (
     <div className={style.container}>
-      {`Ontime ${permission || ''}`}
-      <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
+      {`Ontime ${permission}`}
+      <div className={failed ? style.pin__failed : style.pin}>
         <PinInput
           type='alphanumeric'
           size='lg'
@@ -57,8 +57,15 @@ export default function PinPage(props: PinPageProps) {
           <PinInputField />
           <PinInputField />
         </PinInput>
-        <IconButton aria-label='Enter' size='lg' isRound icon={<IoCheckmark />} onClick={validate} />
-      </HStack>
+        <IconButton
+          variant='ontime-filled'
+          aria-label='Enter'
+          size='lg'
+          isRound
+          icon={<IoCheckmark />}
+          onClick={validate}
+        />
+      </div>
     </div>
   );
 }

apps/client/src/common/components/protect-route/ProtectRoute.module.scss

@@ -1,27 +1,31 @@
 .container {
-  display: grid;
-  place-content: center;
-  height: 100vh;
-  padding-bottom: 30vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 25vh;
 
-  background: $bg-container-l1;
   color: $ontime-color;
-  font-family: $ontime-font-family;
   font-weight: 200;
-  text-align: center;
-  font-size: 3vw;
+  font-size: 3rem;
 }
 
 .pin,
 .pin__failed {
-  padding: 20px;
+  display: flex;
+  gap: 0.125em;
+  padding-block: 0.5em;
 
   input {
-    border-radius: 50%;
+    border-radius: 99px;
+    border-color: $gray-500;
+
+    &:hover {
+      border-color: $blue-500;
+    }
   }
 
   button {
-    margin-left: 20px;
+    margin-left: 1em;
   }
 }
 
@@ -33,9 +37,9 @@
 
 @keyframes colourFade {
   from {
-    background: $action-blue;
+    background: $red-500;
   }
   to {
-    background: rgba($action-blue, 0);
+    background: rgba($red-500, 0);
   }
-}
+}

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

@@ -24,6 +24,8 @@ interface ScheduleProviderProps {
   time?: number;
 }
 
+const numEventsPerPage = 8;
+
 export const ScheduleProvider = ({
   children,
   events,
@@ -37,7 +39,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') ?? 7);
+  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? numEventsPerPage);
 
   let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
 

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

@@ -1,24 +1,9 @@
-.drawerContent {
-  background-color: $gray-1250;
-}
-
-.drawerHeader {
-  @extend .drawerContent;
-  color: $section-white;
-}
-
 .drawerFooter {
-  @extend .drawerContent;
   display: flex;
-  justify-content: start;
+  justify-content: end;
   gap: $section-spacing;
 
-  button[type='reset'] {
-    padding: 0 2em;
-    margin-right: auto;
-  }
-
-  button[type='submit'] {
+  button {
     padding: 0 2em;
   }
 }
@@ -26,6 +11,9 @@
 .label {
   font-size: $inner-section-text-size;
   color: $label-gray;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem
 }
 
 .columnSection {

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

@@ -1,5 +1,5 @@
 import { FormEvent, useEffect } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import {
   Button,
   Drawer,
@@ -12,30 +12,26 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 
-import { useLocalStorage } from '../../hooks/useLocalStorage';
-
 import ParamInput from './ParamInput';
 import { ParamField } from './types';
 
 import style from './ViewParamsEditor.module.scss';
 
 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
-type SavedViewParams = Record<string, ViewParamsObj>;
 
+/**
+ * Makes a new URLSearchParams object from the given params object
+ */
 const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
   const defaultValues = paramFields.reduce<Record<string, string>>((acc, { id, defaultValue }) => {
-    return { ...acc, [id]: String(defaultValue) };
+    acc[id] = String(defaultValue);
+    return acc;
   }, {});
+
   return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
-    if (typeof value === 'string' && value.length) {
-      if (defaultValues[id] === value) {
-        return newSearchParams;
-      }
+    if (typeof value === 'string' && value.length && defaultValues[id] !== value) {
       newSearchParams.set(id, value);
-
-      return newSearchParams;
     }
-
     return newSearchParams;
   }, new URLSearchParams());
 };
@@ -47,8 +43,6 @@ interface EditFormDrawerProps {
 export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen, onClose, onOpen } = useDisclosure();
-  const { pathname } = useLocation();
-  const [storedViewParams, setStoredViewParams] = useLocalStorage<SavedViewParams>('ontime-views', {});
 
   useEffect(() => {
     const isEditing = searchParams.get('edit');
@@ -58,37 +52,16 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
     }
   }, [searchParams, onOpen]);
 
-  /**
-   * disabling this for now, this feature needs more testing
-   * - we seem to have a bug where this is conflicting with the aliases
-   * - I wonder if the logic below needs to be inside an effect, 
-   * both localStorage and searchParams should trigger a component update when they change
-
-  useEffect(() => {
-    const viewParamsObjFromLocalStorage = storedViewParams[pathname];
-
-    if (viewParamsObjFromLocalStorage !== undefined) {
-      const defaultSearchParams = getURLSearchParamsFromObj(viewParamsObjFromLocalStorage);
-      setSearchParams(defaultSearchParams);
-    }
-
-    // linter is asking for `setSearchParams` & `storedViewParams` in the useEffect deps
-    // rule is disabled since adding `setSearchParams` & `storedViewParams` results in unnecessary re-renders
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname]);
-
-  */
-
-  const onCloseWithoutSaving = () => {
-    onClose();
-
+  const handleClose = () => {
     searchParams.delete('edit');
     setSearchParams(searchParams);
+
+    onClose();
   };
 
   const resetParams = () => {
-    setStoredViewParams({ ...storedViewParams, [pathname]: {} });
     setSearchParams();
+    onClose();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -96,21 +69,21 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
 
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
-
-    setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject });
     setSearchParams(newSearchParams);
+
+    onClose();
   };
 
   return (
-    <Drawer isOpen={isOpen} placement='right' onClose={onCloseWithoutSaving} size='lg'>
+    <Drawer isOpen={isOpen} placement='right' onClose={handleClose} variant='ontime' size='lg'>
       <DrawerOverlay />
       <DrawerContent>
-        <DrawerHeader className={style.drawerHeader}>
-          <DrawerCloseButton _hover={{ bg: '#ebedf0', color: '#333' }} size='lg' />
+        <DrawerHeader>
+          <DrawerCloseButton size='lg' />
           Customise
         </DrawerHeader>
 
-        <DrawerBody className={style.drawerContent}>
+        <DrawerBody>
           <form id='edit-params-form' onSubmit={onParamsFormSubmit}>
             {paramFields.map((field) => (
               <div key={field.title} className={style.columnSection}>
@@ -126,10 +99,7 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
 
         <DrawerFooter className={style.drawerFooter}>
           <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
-            Reset
-          </Button>
-          <Button variant='ontime-subtle' onClick={onCloseWithoutSaving}>
-            Cancel
+            Reset to default
           </Button>
           <Button variant='ontime-filled' form='edit-params-form' type='submit'>
             Save

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

@@ -103,7 +103,7 @@ export const getClockOptions = (timeFormat: string): ParamField[] => [
 ];
 
 export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields);
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
   return [
     getTimeOption(timeFormat),
     hideTimerSeconds,
@@ -249,12 +249,11 @@ 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',
-    lowerMsg: 'Lower Third Message',
+    none: 'None',
   });
 
   return [
@@ -267,7 +266,7 @@ export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] =
         event: 'Event Load',
         manual: 'Manual',
       },
-      defaultValue: 'event',
+      defaultValue: 'manual',
     },
     {
       id: 'top-src',
@@ -283,7 +282,7 @@ export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] =
       description: 'Select the data source for the bottom element',
       type: 'option',
       values: bottomSourceOptions,
-      defaultValue: 'lowerMsg',
+      defaultValue: 'none',
     },
     {
       id: 'top-colour',
@@ -394,9 +393,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 overlow',
+      description: 'Sets the number of events on the page, can cause overflow',
       type: 'number',
-      placeholder: '7 (default)',
+      placeholder: '8 (default)',
     },
     {
       id: 'secondary-src',
@@ -431,9 +430,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 overlow',
+      description: 'Sets the number of events on the page, can cause overflow',
       type: 'number',
-      placeholder: '7 (default)',
+      placeholder: '8 (default)',
     },
     {
       id: 'secondary-src',

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

@@ -26,7 +26,6 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 
   useEffect(() => {
     if (status === 'pending') return;
-    if (!data) return;
     const previousEditor = sessionStorage.getItem(storageKeys.editor);
 
     if (previousEditor && previousEditor === data.editorKey) {
@@ -53,10 +52,6 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
         return savedPin == null || savedPin === '' || pin === savedPin;
       }
 
-      if (!data) {
-        return false;
-      }
-
       if (permission === 'editor') {
         const correct = isValid(pin, data.editorKey);
         if (correct) {

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

@@ -11,7 +11,7 @@ export default function useCustomFields() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: CUSTOM_FIELDS,
     queryFn: getCustomFields,
-    placeholderData: placeholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchInterval,

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

@@ -11,14 +11,13 @@ export function useHttpSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: HTTP_SETTINGS,
     queryFn: getHTTP,
-    placeholderData: httpPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt: number) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
     networkMode: 'always',
   });
 
-  // we need to jump through some hoops because of the type op port
   return { data: data ?? httpPlaceholder, status, isFetching, isError, refetch };
 }
 

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

@@ -10,7 +10,7 @@ export default function useInfo() {
   const { data, status, isError, refetch, isFetching } = useQuery<GetInfo>({
     queryKey: APP_INFO,
     queryFn: getInfo,
-    placeholderData: ontimePlaceholderInfo,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

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

@@ -11,7 +11,7 @@ export default function useOscSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: OSC_SETTINGS,
     queryFn: getOSC,
-    placeholderData: oscPlaceholderSettings,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt: number) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

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

@@ -9,7 +9,7 @@ export default function useProjectData() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: PROJECT_DATA,
     queryFn: getProjectData,
-    placeholderData: projectDataPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

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

@@ -14,7 +14,7 @@ export function useProjectList() {
   const { data, status, refetch } = useQuery({
     queryKey: PROJECT_LIST,
     queryFn: getProjects,
-    placeholderData: placeholderProjectList,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt: number) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

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

@@ -13,7 +13,7 @@ export default function useRundown() {
   const { data, status, isError, refetch, isFetching } = useQuery<RundownCached>({
     queryKey: RUNDOWN,
     queryFn: fetchNormalisedRundown,
-    placeholderData: cachedRundownPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchInterval,

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

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { unobfuscate } from 'ontime-utils';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_SETTINGS } from '../api/constants';
@@ -9,12 +10,22 @@ export default function useSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: APP_SETTINGS,
     queryFn: getSettings,
-    placeholderData: ontimePlaceholderSettings,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
     networkMode: 'always',
+    select: (data) => {
+      const unobfuscated = { ...data };
+      if (data.editorKey) {
+        unobfuscated.editorKey = unobfuscate(data.editorKey);
+      }
+      if (data.operatorKey) {
+        unobfuscated.operatorKey = unobfuscate(data.operatorKey);
+      }
+      return unobfuscated;
+    },
   });
 
-  return { data, status, isFetching, isError, refetch };
+  return { data: data ?? ontimePlaceholderSettings, status, isFetching, isError, refetch };
 }

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

@@ -8,7 +8,7 @@ export default function useUrlPresets() {
   const { data, status, isError, refetch } = useQuery({
     queryKey: URL_PRESETS,
     queryFn: getUrlPresets,
-    placeholderData: [],
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

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

@@ -9,12 +9,12 @@ export default function useViewSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: VIEW_SETTINGS,
     queryFn: getView,
-    placeholderData: viewsSettingsPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch, isFetching };
+  return { data: data ?? viewsSettingsPlaceholder, status, isError, refetch, isFetching };
 }

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

@@ -1,7 +1,15 @@
 import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { isOntimeEvent, MaybeString, OntimeEvent, OntimeRundownEntry, RundownCached } from 'ontime-types';
-import { getLinkedTimes, getPreviousEventNormal, reorderArray, swapEventData } from 'ontime-utils';
+import {
+  dayInMs,
+  getLinkedTimes,
+  getPreviousEventNormal,
+  MILLIS_PER_SECOND,
+  parseUserTime,
+  reorderArray,
+  swapEventData,
+} from 'ontime-utils';
 
 import { RUNDOWN } from '../api/constants';
 import {
@@ -18,16 +26,13 @@ import {
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
-import { forgivingStringToMillis } from '../utils/dateConfig';
 
 /**
- * @description Set of utilities for events
+ * @description Set of utilities for events //TODO: should this be called useEntryAction and so on
  */
 export const useEventAction = () => {
   const queryClient = useQueryClient();
-  const eventSettings = useEditorSettings((state) => state.eventSettings);
-  const defaultPublic = eventSettings.defaultPublic;
-  const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
+  const { defaultPublic, linkPrevious, defaultDuration, defaultWarnTime, defaultDangerTime } = useEditorSettings();
 
   /**
    * Calls mutation to add new event
@@ -45,11 +50,14 @@ export const useEventAction = () => {
     after?: string;
   };
 
-  type EventOptions = BaseOptions & {
-    defaultPublic?: boolean;
-    lastEventId?: string;
-    startTimeIsLastEnd?: boolean;
-  };
+  type EventOptions = BaseOptions &
+    Partial<{
+      defaultPublic: boolean;
+      linkPrevious: boolean;
+      lastEventId: string;
+      defaultWarnTime: number;
+      defaultDangerTime: number;
+    }>;
 
   /**
    * Adds an event to rundown
@@ -61,27 +69,41 @@ export const useEventAction = () => {
       // ************* CHECK OPTIONS specific to events
       if (isOntimeEvent(newEvent)) {
         const applicationOptions = {
-          defaultPublic: options?.defaultPublic ?? defaultPublic,
-          startTimeIsLastEnd: options?.startTimeIsLastEnd ?? startTimeIsLastEnd,
-          lastEventId: options?.lastEventId,
           after: options?.after,
+          defaultPublic: options?.defaultPublic ?? defaultPublic,
+          lastEventId: options?.lastEventId,
+          linkPrevious: options?.linkPrevious ?? linkPrevious,
+          defaultWarnTime,
+          defaultDangerTime,
         };
 
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this has a value
-        const rundownData = queryClient.getQueryData<RundownCached>(RUNDOWN)!;
-        const { rundown } = rundownData;
-
-        if (applicationOptions.startTimeIsLastEnd && applicationOptions?.lastEventId) {
+        if (applicationOptions.linkPrevious && applicationOptions?.lastEventId) {
+          newEvent.linkStart = applicationOptions.lastEventId;
+        } else if (applicationOptions?.lastEventId) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this is a value
+          const rundownData = queryClient.getQueryData<RundownCached>(RUNDOWN)!;
+          const { rundown } = rundownData;
           const previousEvent = rundown[applicationOptions.lastEventId];
           if (isOntimeEvent(previousEvent)) {
             newEvent.timeStart = previousEvent.timeEnd;
-            newEvent.timeEnd = previousEvent.timeEnd;
           }
         }
 
         if (applicationOptions.defaultPublic) {
           newEvent.isPublic = true;
         }
+
+        if (newEvent.duration === undefined && newEvent.timeEnd === undefined) {
+          newEvent.duration = parseUserTime(defaultDuration);
+        }
+
+        if (newEvent.timeDanger === undefined) {
+          newEvent.timeDanger = parseUserTime(defaultDangerTime);
+        }
+
+        if (newEvent.timeWarning === undefined) {
+          newEvent.timeWarning = parseUserTime(defaultWarnTime);
+        }
       }
 
       // handle adding options that concern all event type
@@ -95,7 +117,7 @@ export const useEventAction = () => {
         logAxiosError('Failed adding event', error);
       }
     },
-    [_addEventMutation, defaultPublic, queryClient, startTimeIsLastEnd],
+    [_addEventMutation, defaultDangerTime, defaultDuration, defaultPublic, defaultWarnTime, linkPrevious, queryClient],
   );
 
   /**
@@ -152,7 +174,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],
   );
@@ -195,14 +217,17 @@ export const useEventAction = () => {
       } else if (value.startsWith('+') || value.startsWith('p+') || value.startsWith('p +')) {
         // TODO: is this logic solid?
         const remainingString = value.substring(1);
-        newValMillis = getPreviousEnd() + forgivingStringToMillis(remainingString);
+        newValMillis = getPreviousEnd() + parseUserTime(remainingString);
       } else {
-        newValMillis = forgivingStringToMillis(value);
+        newValMillis = parseUserTime(value);
       }
 
+      // dont allow timer values over 23:59:59
+      const cappedMillis = Math.min(newValMillis, dayInMs - MILLIS_PER_SECOND);
+
       const newEvent = {
         id: eventId,
-        [field]: newValMillis,
+        [field]: cappedMillis,
       };
       try {
         await _updateEventMutation.mutateAsync(newEvent);
@@ -312,7 +337,7 @@ export const useEventAction = () => {
   const _deleteEventMutation = useMutation({
     mutationFn: requestDelete,
     // we optimistically update here
-    onMutate: async (eventId) => {
+    onMutate: async (eventIds: string[]) => {
       // cancel ongoing queries
       await queryClient.cancelQueries({ queryKey: RUNDOWN });
 
@@ -321,9 +346,11 @@ export const useEventAction = () => {
 
       if (previousData) {
         // optimistically update object
-        const newOrder = previousData.order.filter((id) => id !== eventId);
+        const newOrder = previousData.order.filter((id) => !eventIds.includes(id));
         const newRundown = { ...previousData.rundown };
-        delete newRundown[eventId];
+        for (const eventId of eventIds) {
+          delete newRundown[eventId];
+        }
 
         queryClient.setQueryData(RUNDOWN, {
           order: newOrder,
@@ -352,9 +379,9 @@ export const useEventAction = () => {
    * Deletes an event form the list
    */
   const deleteEvent = useCallback(
-    async (eventId: string) => {
+    async (eventIds: string[]) => {
       try {
-        await _deleteEventMutation.mutateAsync(eventId);
+        await _deleteEventMutation.mutateAsync(eventIds);
       } catch (error) {
         logAxiosError('Error deleting event', error);
       }

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

@@ -1,68 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-nocheck -- working on it
-import { useCallback, useEffect, useState } from 'react';
-
-interface WebkitDocument extends Document {
-  webkitFullscreenElement?: Element | null;
-  webkitIsFullScreen?: boolean;
-  webkitExitFullscreen?: () => Promise<void>;
-  webkitRequestFullscreen?: () => Promise<void>;
-}
-
-export default function useFullscreen() {
-  const [isFullScreen, setFullScreen] = useState(
-    document.fullscreenElement || (document as WebkitDocument).webkitFullscreenElement,
-  );
-
-  useEffect(() => {
-    const handleChange = () => {
-      if (typeof (document as WebkitDocument).webkitFullscreenElement !== 'undefined') {
-        setFullScreen((document as WebkitDocument).webkitFullscreenElement);
-      } else {
-        setFullScreen(document.fullscreenElement);
-      }
-    };
-    (document as WebkitDocument).addEventListener('webkitfullscreenchange', handleChange, { passive: true });
-    document.addEventListener('fullscreenchange', handleChange, { passive: true });
-    document.addEventListener('resize', handleChange, { passive: true });
-
-    return () => {
-      (document as WebkitDocument).removeEventListener('webkitfullscreenchange', handleChange);
-      document.removeEventListener('fullscreenchange', handleChange);
-      document.removeEventListener('resize', handleChange);
-    };
-  }, []);
-
-  const toggleFullScreen = useCallback(() => {
-    if (!document.fullscreenElement && !(document as WebkitDocument).webkitIsFullScreen) {
-      // Fullscreen mode is not active, so we can enter fullscreen mode
-      const element = document.documentElement;
-      if (element.requestFullscreen) {
-        // Standard fullscreen API is supported
-        element.requestFullscreen().catch(() => {
-          /* nothing to do */
-        });
-      } else if (element.webkitRequestFullscreen) {
-        // iOS Safari fullscreen API is supported
-        element.webkitRequestFullscreen?.().catch(() => {
-          /* nothing to do */
-        });
-      }
-    } else {
-      // Fullscreen mode is active, so we can exit fullscreen mode
-      if (document.exitFullscreen) {
-        // Standard fullscreen API is supported
-        document.exitFullscreen().catch((error) => {
-          console.error('Error while trying to exit fullscreen:', error);
-        });
-      } else if ((document as WebkitDocument).webkitExitFullscreen) {
-        // iOS Safari fullscreen API is supported
-        (document as WebkitDocument).webkitExitFullscreen?.().catch(() => {
-          /* nothing to do */
-        });
-      }
-    }
-  }, []);
-
-  return { isFullScreen, toggleFullScreen };
-}

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

@@ -1,46 +0,0 @@
-import { useSyncExternalStore } from 'react';
-
-const STORAGE_EVENT = 'ontime-storage';
-
-function getSnapshot(key: string): string | null {
-  try {
-    return window.localStorage.getItem(`ontime-${key}`);
-  } catch {
-    return null;
-  }
-}
-
-function getParsedJson<T>(localStorageValue: string | null, initialValue: T): T {
-  try {
-    return localStorageValue ? JSON.parse(localStorageValue) : initialValue;
-  } catch {
-    return initialValue;
-  }
-}
-
-export const useLocalStorage = <T>(key: string, initialValue: T) => {
-  const localStorageValue = useSyncExternalStore(subscribe, () => getSnapshot(key));
-  const parsedLocalStorageValue = getParsedJson(localStorageValue, initialValue);
-
-  /**
-   * @description Set value to local storage
-   * @param value
-   */
-  const setLocalStorageValue = (value: T | ((val: T) => T)) => {
-    // Allow value to be a function so we have same API as useState
-    const valueToStore = value instanceof Function ? value(parsedLocalStorageValue) : value;
-
-    localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
-    window.dispatchEvent(new StorageEvent(STORAGE_EVENT));
-  };
-
-  return [parsedLocalStorageValue, setLocalStorageValue] as const;
-};
-
-function subscribe(callback: () => void) {
-  window.addEventListener(STORAGE_EVENT, callback);
-
-  return () => {
-    window.removeEventListener(STORAGE_EVENT, callback);
-  };
-}

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

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+
+export default function useScrollIntoView<T extends HTMLElement>(name: string, location?: string) {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    if (location && ref.current) {
+      if (location === name) {
+        ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }
+  }, [location, name]);
+
+  return ref;
+}

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

@@ -25,8 +25,6 @@ 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,
   });
@@ -37,10 +35,6 @@ 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 } }),
 };
@@ -59,12 +53,12 @@ export const setPlayback = {
   start: () => socketSendJson('start'),
   pause: () => socketSendJson('pause'),
   roll: () => socketSendJson('roll'),
-  startNext: () => socketSendJson('start', { next: true }),
+  startNext: () => socketSendJson('start', 'next'),
   previous: () => {
-    socketSendJson('load', { previous: true });
+    socketSendJson('load', 'previous');
   },
   next: () => {
-    socketSendJson('load', { next: true });
+    socketSendJson('load', 'next');
   },
   stop: () => {
     socketSendJson('stop');
@@ -89,27 +83,27 @@ export const useInfoPanel = () => {
   return useRuntimeStore(featureSelector);
 };
 
-export const useExtraTimerTime = () => {
-  const featureSelector = (state: RuntimeStore) => state.timer1.current;
+export const useAuxTimerTime = () => {
+  const featureSelector = (state: RuntimeStore) => state.auxtimer1.current;
 
   return useRuntimeStore(featureSelector);
 };
 
-export const useExtraTimerControl = () => {
+export const useAuxTimerControl = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.timer1.playback,
-    direction: state.timer1.direction,
+    playback: state.auxtimer1.playback,
+    direction: state.auxtimer1.direction,
   });
 
   return useRuntimeStore(featureSelector);
 };
 
-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 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 useCuesheet = () => {

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

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+
+/**
+ * Sets tab title
+ * @param title
+ */
+export function useWindowTitle(title: string) {
+  useEffect(() => {
+    document.title = `ontime - ${title}`;
+  }, []);
+}

apps/client/src/common/models/ViewSettings.type.ts

@@ -1,9 +1,10 @@
 import { ViewSettings } from 'ontime-types';
 
 export const viewsSettingsPlaceholder: ViewSettings = {
-  overrideStyles: false,
-  normalColor: '#ffffffcc',
-  warningColor: '#FFAB33',
   dangerColor: '#ED3333',
   endMessage: '',
+  freezeEnd: false,
+  normalColor: '#ffffffcc',
+  overrideStyles: false,
+  warningColor: '#FFAB33',
 };

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,56 +2,68 @@ import { create } from 'zustand';
 
 import { booleanFromLocalStorage } from '../utils/localStorage';
 
-type EditorSettings = {
-  showQuickEntry: boolean;
-  startTimeIsLastEnd: boolean;
-  defaultPublic: boolean;
-};
-
 type EditorSettingsStore = {
-  eventSettings: EditorSettings;
-  setLocalEventSettings: (newState: EditorSettings) => void;
-  setShowQuickEntry: (showQuickEntry: boolean) => void;
-  setStartTimeIsLastEnd: (startTimeIsLastEnd: boolean) => void;
+  defaultDuration: string;
+  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;
 };
 
+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,
+};
+
 enum EditorSettingsKeys {
-  ShowQuickEntry = 'ontime-show-quick-entry',
-  StartTimeIsLastEnd = 'ontime-start-is-last-end',
+  DefaultDuration = 'ontime-default-duration',
+  LinkPrevious = 'ontime-link-previous',
+  DefaultWarnTime = 'ontime-default-warn-time',
+  DefaultDangerTime = 'ontime-default-danger-time',
   DefaultPublic = 'ontime-default-public',
 }
 
-export const useEditorSettings = create<EditorSettingsStore>((set) => ({
-  eventSettings: {
-    showQuickEntry: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, false),
-    startTimeIsLastEnd: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
-    defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
-  },
+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),
 
-  setLocalEventSettings: (value) =>
-    set(() => {
-      localStorage.setItem(EditorSettingsKeys.ShowQuickEntry, String(value.showQuickEntry));
-      localStorage.setItem(EditorSettingsKeys.StartTimeIsLastEnd, String(value.startTimeIsLastEnd));
-      localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(value.defaultPublic));
-      return { eventSettings: value };
-    }),
+    setDefaultDuration: (defaultDuration) =>
+      set(() => {
+        localStorage.setItem(EditorSettingsKeys.DefaultDuration, String(defaultDuration));
+        return { defaultDuration };
+      }),
 
-  setShowQuickEntry: (showQuickEntry) =>
-    set((state) => {
-      localStorage.setItem(EditorSettingsKeys.ShowQuickEntry, String(showQuickEntry));
-      return { eventSettings: { ...state.eventSettings, showQuickEntry } };
-    }),
-
-  setStartTimeIsLastEnd: (startTimeIsLastEnd) =>
-    set((state) => {
-      localStorage.setItem(EditorSettingsKeys.StartTimeIsLastEnd, String(startTimeIsLastEnd));
-      return { eventSettings: { ...state.eventSettings, startTimeIsLastEnd } };
-    }),
-
-  setDefaultPublic: (defaultPublic) =>
-    set((state) => {
-      localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic));
-      return { eventSettings: { ...state.eventSettings, defaultPublic } };
-    }),
-}));
+    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 };
+      }),
+  };
+});

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

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

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

@@ -1,263 +1,4 @@
-import { forgivingStringToMillis, millisToDelayString } from '../dateConfig';
-
-describe('test forgivingStringToMillis()', () => {
-  describe('function handles time with no separators', () => {
-    const testData = [
-      { value: '', expect: 0 },
-      { value: '0', expect: 0 },
-      { value: '-0', expect: 0 },
-      { value: '1', expect: 60 * 1000 },
-      { value: '-1', expect: 60 * 1000 },
-      { value: '0h0m0s', expect: 0 },
-      { 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} to left`, () => {
-        expect(typeof forgivingStringToMillis(s.value)).toBe('number');
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('parses strings correctly', () => {
-    const ts = [
-      { 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) {
-      it(`handles ${s.value} to the left`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('parses time strings', () => {
-    const ts = [
-      { 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) {
-      it(`handles ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('handles am/pm', () => {
-    const ampm = [
-      { 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 * 60 * 60 * 1000 },
-    ];
-
-    for (const s of ampm) {
-      it(`handles ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('it infers separators when non existent', () => {
-    const testCases = [
-      { 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) {
-      it(`handles basic strings digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const sixDigits = [
-      { 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) {
-      it(`handles string with 6 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const fiveDigits = [
-      { value: '00000', expect: 0 },
-      { 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) {
-      it(`handles string with 5 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const fourDigits = [
-      { value: '0000', expect: 0 },
-      { 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) {
-      it(`handles string with 4 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const threeDigits = [
-      { value: '000', expect: 0 },
-      { 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) {
-      it(`handles string with 3 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const twoDigits = [
-      { value: '00', expect: 0 },
-      { 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) {
-      it(`handles string with 2 digits: ${s.value}`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-
-    const singleDigit = [...Array(10).keys()];
-
-    for (const s of singleDigit) {
-      it(`handles string with a single digits ${s}`, () => {
-        expect(forgivingStringToMillis(`${s}`)).toBe(s * 1000 * 60);
-      });
-    }
-  });
-
-  describe('handles overflows', () => {
-    const ts = [
-      // minutes overflow
-      { 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 * 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: 1000 * 60 * 60 * 25 },
-      // hours overflow
-      { value: '50.0.0', expect: 1000 * 60 * 60 * 50 },
-    ];
-
-    for (const s of ts) {
-      it(`handles ${s.value} to the left`, () => {
-        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-      });
-    }
-  });
-
-  describe('test fillLeft', () => {
-    describe('function handles separators', () => {
-      const testData = [
-        { 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) {
-        it(`handles ${s.value}`, () => {
-          expect(typeof forgivingStringToMillis(s.value)).toBe('number');
-          expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-        });
-      }
-    });
-
-    describe('parses strings correctly', () => {
-      const ts = [
-        { 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) {
-        it(`handles ${s.value}`, () => {
-          expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-        });
-      }
-    });
-
-    describe('handles overflows', () => {
-      const ts = [
-        // minutes overflow
-        { value: '0.120', expect: 120 * 60 * 1000 },
-        { value: '0.99', expect: 99 * 60 * 1000 },
-      ];
-
-      for (const s of ts) {
-        it(`handles ${s.value}`, () => {
-          expect(forgivingStringToMillis(s.value)).toBe(s.expect);
-        });
-      }
-    });
-  });
-});
+import { millisToDelayString } from '../dateConfig';
 
 describe('millisToDelayString()', () => {
   it('returns null for null values', () => {

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

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

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

@@ -1,163 +1,11 @@
 import { MaybeNumber } from 'ontime-types';
-import { formatFromMillis, MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
+import { formatFromMillis, MILLIS_PER_HOUR, MILLIS_PER_MINUTE } from 'ontime-utils';
 
 /**
- * @description safe parse string to int
- * @param {string} valueAsString
- * @return {number}
+ * Parses a value in millis to a string which encodes a delay
+ * @param millis 
+ * @param format 
  */
-const parse = (valueAsString: string): number => {
-  const parsed = parseInt(valueAsString, 10);
-  if (isNaN(parsed)) {
-    return 0;
-  }
-  return Math.abs(parsed);
-};
-
-/**
- * @description Utility function to check if a string contain am/pm indicators
- * @param {string} value
- */
-function checkAmPm(value: string) {
-  let isPM = false;
-  let isAM = false;
-  if (value.toLowerCase().includes('pm')) {
-    isPM = true;
-    value = value.replace(/pm/i, '');
-  } else if (value.toLowerCase().includes('p')) {
-    isPM = true;
-    value = value.replace(/p/i, '');
-  }
-
-  // we need to remove am, but it doesn't actually change anything
-  if (value.toLowerCase().includes('am')) {
-    isAM = true;
-    value = value.replace(/am/i, '');
-  } else if (value.toLowerCase().includes('a')) {
-    isAM = true;
-    value = value.replace(/a/i, '');
-  }
-
-  return { isAM, isPM, value };
-}
-
-/**
- * @description Utility function to check if a string contain h / m / s indicators
- * @param {string} value
- */
-function checkMatchers(value: string) {
-  const hoursMatch = /(\d+)h/i.exec(value);
-  const hoursMatchValue = hoursMatch ? parse(hoursMatch[1]) : 0;
-
-  const minutesMatch = /(\d+)m/i.exec(value);
-  const minutesMatchValue = minutesMatch ? parse(minutesMatch[1]) : 0;
-
-  const secondsMatch = /(\d+)s/i.exec(value);
-  const secondsMatchValue = secondsMatch ? parse(secondsMatch[1]) : 0;
-
-  if (hoursMatchValue > 0 || minutesMatchValue > 0 || secondsMatchValue > 0) {
-    return (
-      hoursMatchValue * MILLIS_PER_HOUR + minutesMatchValue * MILLIS_PER_MINUTE + secondsMatchValue * MILLIS_PER_SECOND
-    );
-  }
-  return { hoursMatchValue };
-}
-
-/**
- * @description Utility function to infer separators from a whole string
- * @param {string} value
- * @param {boolean} isAM
- * @param {boolean} isPM
- */
-function inferSeparators(value: string, isAM: boolean, isPM: boolean) {
-  const length = value.length;
-  let inferredMillis = 0;
-  let addAM = 0;
-  if (length === 1) {
-    if (isPM || isAM) {
-      inferredMillis = parse(value) * MILLIS_PER_HOUR;
-      if (isAM) {
-        // this ensures we dont add 12 hours in the end
-        addAM = inferredMillis;
-      }
-    } else {
-      inferredMillis = parse(value) * MILLIS_PER_MINUTE;
-    }
-  } else if (length === 2) {
-    if (isPM || isAM) {
-      inferredMillis = parse(value) * inferredMillis;
-      if (isAM) {
-        // this ensures we dont add 12 hours in the end
-        addAM = 12;
-      }
-    } else {
-      inferredMillis = parse(value) * MILLIS_PER_MINUTE;
-    }
-  } else if (length === 3) {
-    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) {
-    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));
-    inferredMillis = hours * MILLIS_PER_HOUR + minutes * MILLIS_PER_MINUTE + seconds * MILLIS_PER_SECOND;
-  }
-  return { inferredMillis, addAM };
-}
-
-/**
- * @description Parses a time string to millis, auto-filling to the left
- * @param {string} value - time string
- * @returns {number} - time string in millis
- */
-export const forgivingStringToMillis = (value: string): number => {
-  if (value === '12am') {
-    return 0;
-  }
-
-  const { isAM, isPM, value: parsingValue } = checkAmPm(value);
-  const maybeMillisFromMatchers = checkMatchers(parsingValue);
-  if (typeof maybeMillisFromMatchers === 'number') {
-    return maybeMillisFromMatchers;
-  }
-
-  let { hoursMatchValue } = maybeMillisFromMatchers;
-
-  let millis = 0;
-
-  // split string at known separators    : , .
-  const separatorRegex = /[\s,:.]+/;
-  const [first, second, third] = parsingValue.split(separatorRegex);
-
-  if (first != null && second != null && third != null) {
-    // if string has three sections, treat as [hours] [minutes] [seconds]
-    millis = parse(first) * MILLIS_PER_HOUR;
-    millis += parse(second) * MILLIS_PER_MINUTE;
-    millis += parse(third) * MILLIS_PER_SECOND;
-  } else if (first != null && second == null && third == null) {
-    // we only have one section, infer separators
-    const { inferredMillis, addAM } = inferSeparators(first, isAM, isPM);
-    millis = inferredMillis;
-    hoursMatchValue = addAM;
-  }
-  if (first != null && second != null && third == null) {
-    millis = parse(first) * MILLIS_PER_HOUR;
-    millis += parse(second) * MILLIS_PER_MINUTE;
-  }
-
-  // Add 12 hours if it is PM
-  if (isPM && hoursMatchValue < 12) {
-    millis += 12 * MILLIS_PER_HOUR;
-  }
-  return millis;
-};
-
 export function millisToDelayString(millis: MaybeNumber, format: 'compact' | 'expanded' = 'compact'): string {
   if (millis == null || millis === 0) {
     return '';

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

@@ -3,4 +3,6 @@ export function isMacOS() {
   return userAgent.includes('macintosh') || userAgent.includes('mac os');
 }
 
-export const deviceAlt = isMacOS() ? '⌥' : 'Alt';
+export const deviceAlt = isMacOS() ? 'Option' : 'Alt';
+
+export const deviceMod = isMacOS() ? 'Cmd' : 'Ctrl';

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

@@ -8,4 +8,6 @@ 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 isASCIIorEmpty = /^$|^[ -~]+$/; //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-timer1': {
-          patchRuntime('timer1', payload);
-          updateDevTools({ timer1: payload });
+        case 'ontime-auxtimer1': {
+          patchRuntime('auxtimer1', payload);
+          updateDevTools({ auxtimer1: payload });
           break;
         }
       }

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

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

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

@@ -2,7 +2,7 @@
  * Collection of rules for pre-validating a spreadsheet
  * @param file
  */
-export function validateSpreadsheetImport(file: File) {
+export function validateExcelImport(file: File) {
   if (!isExcelFile(file)) {
     throw new Error('Unknown file type');
   }
@@ -12,7 +12,7 @@ export function validateSpreadsheetImport(file: File) {
     throw new Error('File is empty');
   }
 
-  // Limit file size of an excel file to around 10MB
+  // Limit file size of an Excel file to around 10MB
   if (file.size > 10_000_000) {
     throw new Error('File size limit (10MB) exceeded');
   }

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

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

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

@@ -3,41 +3,36 @@ 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';
 import PanelList from './panel-list/PanelList';
-import { useSettingsStore } from './settingsStore';
+import useAppSettingsNavigation from './useAppSettingsNavigation';
 
 import style from './AppSettings.module.scss';
 
 export default function AppSettings() {
-  const setShowSettings = useSettingsStore((state) => state.setShowSettings);
-  const selectedPanel = useSettingsStore((state) => state.showSettings);
-
-  const closeSettings = () => {
-    setShowSettings(null);
-  };
-  useKeyDown(closeSettings, 'Escape');
+  const { close, panel, location } = useAppSettingsNavigation();
+  useKeyDown(close, 'Escape');
 
   return (
     <div className={style.container}>
       <ErrorBoundary>
-        <PanelList />
-        <PanelContent onClose={closeSettings}>
-          {selectedPanel === 'project' && <ProjectPanel />}
-          {selectedPanel === 'general' && <GeneralPanel />}
-          {selectedPanel === 'project_settings' && <ProjectSettingsPanel />}
-          {selectedPanel === 'sources' && <SourcesPanel />}
-          {selectedPanel === 'interface' && <InterfacePanel />}
-          {selectedPanel === 'integrations' && <IntegrationsPanel />}
-          {selectedPanel === 'about' && <AboutPanel />}
-          {selectedPanel === 'log' && <LogPanel />}
+        <PanelList selectedPanel={panel} location={location} />
+        <PanelContent onClose={close}>
+          {panel === 'project' && <ProjectPanel location={location} />}
+          {panel === 'general' && <GeneralPanel location={location} />}
+          {panel === 'feature_settings' && <FeatureSettingsPanel location={location} />}
+          {panel === 'sources' && <SourcesPanel />}
+          {panel === 'integrations' && <IntegrationsPanel location={location} />}
+          {panel === 'about' && <AboutPanel />}
+          {panel === 'log' && <LogPanel />}
+          {panel === 'shutdown' && <ShutdownPanel />}
         </PanelContent>
       </ErrorBoundary>
     </div>

apps/client/src/features/app-settings/panel-content/PanelContent.module.scss

@@ -1,7 +1,7 @@
 .corner {
   position: absolute;
   top: 1rem;
-  right: 1rem;
+  right: 2rem;
   z-index: 100;
 }
 

apps/client/src/features/app-settings/panel-list/PanelList.module.scss

@@ -58,4 +58,8 @@ ul {
   color: $secondary-text-gray;
   border-left: 1px solid $white-10;
   font-size: $inner-section-text-size;
+
+  &.active {
+    color: $blue-400;
+  }
 }

apps/client/src/features/app-settings/panel-list/PanelList.tsx

@@ -2,16 +2,18 @@ import { Fragment } from 'react';
 
 import { isKeyEnter } from '../../../common/utils/keyEvent';
 import { cx } from '../../../common/utils/styleUtils';
-import { settingPanels, SettingsOption, useSettingsStore } from '../settingsStore';
+import { PanelBaseProps, settingPanels, useSettingsStore } from '../settingsStore';
+import useAppSettingsNavigation from '../useAppSettingsNavigation';
 
 import style from './PanelList.module.scss';
 
-export default function PanelList() {
-  const { showSettings, setShowSettings, hasUnsavedChanges } = useSettingsStore();
+interface PanelListProps extends PanelBaseProps {
+  selectedPanel: string;
+}
 
-  const handleSelect = (panel: SettingsOption) => {
-    setShowSettings(panel.id);
-  };
+export default function PanelList({ selectedPanel, location }: PanelListProps) {
+  const { setLocation } = useAppSettingsNavigation();
+  const { hasUnsavedChanges } = useSettingsStore();
 
   return (
     <ul className={style.tabs}>
@@ -20,7 +22,7 @@ export default function PanelList() {
 
         const classes = cx([
           style.primary,
-          showSettings === panel.id ? style.active : null,
+          selectedPanel === panel.id ? style.active : null,
           panel.split ? style.split : null,
           unsaved ? style.unsaved : null,
         ]);
@@ -29,9 +31,9 @@ export default function PanelList() {
           <Fragment key={panel.id}>
             <li
               key={panel.id}
-              onClick={() => handleSelect(panel)}
+              onClick={() => setLocation(panel.id)}
               onKeyDown={(event) => {
-                isKeyEnter(event) && handleSelect(panel);
+                isKeyEnter(event) && setLocation(panel.id);
               }}
               className={classes}
               tabIndex={0}
@@ -40,8 +42,18 @@ export default function PanelList() {
               {panel.label}
             </li>
             {panel.secondary?.map((secondary) => {
+              const id = secondary.id.split('__')[1];
+              const secondaryClasses = cx([style.secondary, location === id ? style.active : null]);
               return (
-                <li key={secondary.id} onClick={() => handleSelect(panel)} className={style.secondary} role='button'>
+                <li
+                  key={secondary.id}
+                  onClick={() => setLocation(secondary.id)}
+                  onKeyDown={(event) => {
+                    isKeyEnter(event) && setLocation(secondary.id);
+                  }}
+                  className={secondaryClasses}
+                  role='button'
+                >
                   {secondary.label}
                 </li>
               );

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

@@ -75,10 +75,6 @@ $inner-padding: 1rem;
     box-shadow: 0 1px $white-10;
   }
 
-  tr {
-    padding: 1rem 0;
-  }
-
   th {
     font-weight: 400;
     color: $gray-400;

apps/client/src/features/app-settings/panel/feature-settings-panel/FeatureSettings.module.scss

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

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

@@ -0,0 +1,24 @@
+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/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 './GeneralPanel.module.scss';
+import style from './FeatureSettings.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='md' onClick={onReset} isDisabled={!canSubmit}>
+            <Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={!canSubmit}>
               Revert to saved
             </Button>
-            <Button variant='ontime-filled' size='md' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
+            <Button variant='ontime-filled' size='sm' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
               Save
             </Button>
           </div>

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

@@ -4,13 +4,14 @@ 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 './ProjectSettingsPanel.module.scss';
+import style from '../FeatureSettings.module.scss';
 
 interface CustomFieldEntryProps {
+  field: string;
   colour: string;
   label: string;
   onEdit: (label: CustomFieldLabel, patch: CustomField) => Promise<void>;
@@ -18,13 +19,11 @@ interface CustomFieldEntryProps {
 }
 
 export default function CustomFieldEntry(props: CustomFieldEntryProps) {
-  const { colour, label, onEdit, onDelete } = props;
-
+  const { colour, label, onEdit, onDelete, field } = props;
   const [isEditing, setIsEditing] = useState(false);
 
   const handleEdit = async (patch: CustomField) => {
-    const oldLabel = label;
-    await onEdit(oldLabel, patch);
+    await onEdit(field, patch);
     setIsEditing(false);
   };
 
@@ -64,7 +63,7 @@ export default function CustomFieldEntry(props: CustomFieldEntryProps) {
           color='#FA5656' // $red-500
           icon={<IoTrash />}
           aria-label='Delete entry'
-          onClick={() => onDelete(label)}
+          onClick={() => onDelete(field)}
         />
       </td>
     </tr>

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/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 './ProjectSettingsPanel.module.scss';
+import style from '../FeatureSettings.module.scss';
 
 interface CustomFieldsFormProps {
   onSubmit: (field: CustomField) => Promise<void>;

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

@@ -0,0 +1,98 @@
+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,23 +2,3 @@
   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,16 +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() {
+export default function GeneralPanel({ location }: PanelBaseProps) {
+  const generalRef = useScrollIntoView<HTMLDivElement>('settings', location);
+  const editorRef = useScrollIntoView<HTMLDivElement>('editor', location);
+  const viewRef = useScrollIntoView<HTMLDivElement>('view', location);
+
   return (
     <>
-      <Panel.Header>Settings</Panel.Header>
-      <GeneralPanelForm />
-      <ViewSettingsForm />
-      <UrlPresetsForm />
+      <Panel.Header>App Settings</Panel.Header>
+      <div ref={generalRef}>
+        <GeneralPanelForm />
+      </div>
+      <div ref={editorRef}>
+        <EditorSettingsForm />
+      </div>
+      <div ref={viewRef}>
+        <ViewSettingsForm />
+      </div>
     </>
   );
 }

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

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { Alert, AlertDescription, AlertIcon, Button, Input, Switch } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';
 
@@ -99,7 +99,13 @@ export default function ViewSettingsForm() {
                 title='Override CSS styles'
                 description='Enables overriding view styles with custom stylesheet'
               />
-              <Switch {...register('overrideStyles')} variant='ontime' size='lg' />
+              <Controller
+                control={control}
+                name='overrideStyles'
+                render={({ field: { onChange, value, ref } }) => (
+                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
+                )}
+              />
             </Panel.ListItem>
           </Panel.ListGroup>
           <Panel.ListGroup>
@@ -118,7 +124,23 @@ export default function ViewSettingsForm() {
           </Panel.ListGroup>
           <Panel.ListGroup>
             <Panel.ListItem>
-              <Panel.Field title='End message' description='If no end message is provided, timer will continue' />
+              <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} />
+                )}
+              />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='End message'
+                description='Message to show on negative timers if not frozen. If not provided, timer will continue'
+              />
               <Input
                 size='sm'
                 autoComplete='off'

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

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