v2 beta 4 bump (#367)

* chore: update links to documentation

* chore: version bump

.eslintignore

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

.eslintrc

@@ -1,5 +1,4 @@
 {
-  "root": true,
   "parserOptions": {
     "ecmaVersion": 2020
   },
@@ -7,46 +6,21 @@
     "es6": true,
     "jest": true
   },
-  "parser": "@typescript-eslint/parser",
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier", "eslint-config-prettier"],
-  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": [
+    "eslint:recommended"
+  ],
   "overrides": [
     {
-      "files": ["e2e/**/**.spec.ts", "e2e/**/**.test.ts"],
-      "extends": ["plugin:playwright/playwright-test"]
+      "files": [
+        "e2e/**/**.spec.ts",
+        "e2e/**/**.test.ts"
+      ],
+      "extends": [
+        "plugin:playwright/playwright-test"
+      ]
     }
   ],
   "rules": {
-    "no-useless-concat": "warn",
-    "prefer-template": "warn",
-    "no-console": [
-      "warn",
-      {
-        "allow": ["warn", "error"]
-      }
-    ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": ["ontime-types/src/*", "ontime-utils/src/*"]
-      }
-    ],
-    "@typescript-eslint/no-non-null-assertion": "warn",
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_",
-        "destructuredArrayIgnorePattern": "^_",
-        "varsIgnorePattern": "^_"
-      }
-    ],
-    "prettier/prettier": [
-      "warn",
-      {
-        "endOfLine": "auto"
-      }
-    ]
+    "no-console": "warn"
   }
-}
+}

.github/workflows/build.yml

@@ -0,0 +1,139 @@
+name: Ontime build
+
+on:
+  push:
+    tags: [ "v1.*.*" ]
+  workflow_dispatch:
+
+jobs:
+  build_mac:
+    runs-on: macos-latest
+    timeout-minutes: 20
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      # React
+      - name: React - Install dependencies
+        run: yarn install --frozen-lockfile --network-timeout 300000
+        working-directory: ./client
+
+      - name: React - Build project
+        run: yarn build
+        working-directory: ./client
+
+      # Node server
+      - name: Server - Install dependencies
+        run: yarn install --frozen-lockfile --production --network-timeout 300000
+        working-directory: ./server/src
+
+      # App
+      - name: Electron - Install dependencies
+        shell: bash
+        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
+        working-directory: ./server
+      - name: Electron - Build app
+        run: yarn dist-mac
+        working-directory: ./server
+
+      # Release
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: ./server/dist/ontime-macOS.dmg
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_win:
+    runs-on: windows-latest
+    timeout-minutes: 20
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      # React
+      - name: React - Install dependencies
+        run: yarn install --frozen-lockfile --network-timeout 300000
+        working-directory: ./client
+
+      - name: React - Build project
+        run: yarn build
+        working-directory: ./client
+
+      # Node server
+      - name: Server - Install dependencies
+        run: yarn install --frozen-lockfile --production --network-timeout 300000
+        working-directory: ./server/src
+
+      # App
+      - name: Electron - Install dependencies
+        shell: bash
+        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
+        working-directory: ./server
+      - name: Electron - Build app
+        run: yarn dist-win
+        working-directory: ./server
+
+      # Release
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: ./server/dist/ontime-win64.exe
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_linux:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      # React
+      - name: React - Install dependencies
+        run: yarn install --frozen-lockfile --network-timeout 300000
+        working-directory: ./client
+
+      - name: React - Build project
+        run: yarn build
+        working-directory: ./client
+
+      # Node server
+      - name: Server - Install dependencies
+        run: yarn install --frozen-lockfile --production --network-timeout 300000
+        working-directory: ./server/src
+
+      # App
+      - name: Electron - Install dependencies
+        shell: bash
+        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
+        working-directory: ./server
+      - name: Electron - Build app
+        run: yarn dist-linux
+        working-directory: ./server
+
+      # Release
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: ./server/dist/ontime-linux.AppImage
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/build_docker_v2.yml

@@ -2,7 +2,7 @@ name: Docker Image CI Ontime V2
 
 on:
   push:
-    tags: [ "*" ]
+    tags: [ "v2.*.*" ]
   workflow_dispatch:
 
 jobs:
@@ -16,17 +16,17 @@ jobs:
     - uses: actions/checkout@v3
     - name: Setup env
       run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-
+      
     - name: Setup Node.js environment
       uses: actions/setup-node@v3.6.0
       with:
         version: 16.16.0
-
+        
     - name: Setup pnpm
-      uses: pnpm/action-setup@v2
+      uses: pnpm/action-setup@v2.2.4
       with:
-        version: 8
-
+        version: 7.26.3
+          
     - name: Install dependencies
       run: pnpm install --frozen-lockfile
 
@@ -34,7 +34,7 @@ jobs:
       env:
         SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       run: pnpm turbo build:docker
-
+        
     - name: Docker Login
       uses: docker/login-action@v2.1.0
       with:
@@ -44,8 +44,7 @@ jobs:
     - name: Docker Setup Buildx
       uses: docker/setup-buildx-action@v2.5.0
 
-    - name: Build and push stable release
-      if: github.event.release.prerelease == false
+    - name: Build and push Docker images
       uses: docker/build-push-action@v4.0.0
       with:
         context: .
@@ -53,16 +52,5 @@ jobs:
         platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
         # Push is a shorthand for --output=type=registry
         push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
-
-    - name: Build and push pre-release
-      if: github.event.release.prerelease == true
-      uses: docker/build-push-action@v4.0.0
-      with:
-        context: .
-        file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
-        # Push is a shorthand for --output=type=registry
-        push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:beta_${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:beta_v2
 

.github/workflows/build_v2.yml

@@ -2,7 +2,7 @@ name: Ontime build v2
 
 on:
   push:
-    tags: [ "*" ]
+    tags: [ "v2.*.*" ]
   workflow_dispatch:
 
 jobs:
@@ -14,12 +14,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -35,9 +35,7 @@ jobs:
       - name: Release
         uses: softprops/action-gh-release@v1
         with:
-          files: |
-            ./apps/electron/dist/ontime-macOS-x64.dmg
-            ./apps/electron/dist/ontime-macOS-arm64.dmg
+          files: './apps/electron/dist/ontime-macOS.dmg'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -49,12 +47,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -82,12 +80,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/ontime_cy.yml

@@ -0,0 +1,66 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: ontime_test_CI
+
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+
+jobs:
+  build:
+
+    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: 16
+
+      # React
+      - name: React - Install dependencies
+        run: yarn install
+        working-directory: ./client
+
+      - name: React - Run tests
+        run: yarn test:pipeline
+        working-directory: ./client
+
+      - name: React - Build project
+        run: yarn build
+        working-directory: ./client
+
+      # Node server
+      - name: Server - Install dependencies
+        run: yarn install
+        working-directory: ./server/src
+
+      # App
+      - name: Electron - Install dependencies
+        run: yarn setup
+        working-directory: ./server
+
+      - name: Server - run tests
+        run: yarn test
+        working-directory: ./server
+
+#      - name: Install Playwright Browsers
+#        run: npx playwright install --with-deps
+#        working-directory: ./server
+#
+#      - name: Run Playwright tests
+#        run: yarn e2e
+#        working-directory: ./server
+#
+#      - uses: actions/upload-artifact@v3
+#        if: always()
+#        with:
+#          name: playwright-report
+#          path: playwright-report/
+#          retention-days: 7

.github/workflows/test_v2.yml

@@ -2,7 +2,7 @@ name: Ontime test v2
 
 on:
   pull_request:
-    branches: '*'
+    branches: [ v2 ]
   workflow_dispatch:
 
 jobs:
@@ -17,50 +17,26 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      # Run code quality per package
-      - name: React - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./apps/client
-
-      - name: Server - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./apps/server
-
-      - name: Utils - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./packages/utils
-
-      - name: Types - Run linter
-        if: always()
-        run: pnpm lint
-        working-directory: ./packages/types
-
       # We choose to run tests separately
       - name: React - Run unit tests
-        if: always()
         run: pnpm test:pipeline
         working-directory: ./apps/client
 
       - name: Server - Run unit tests
-        if: always()
         run: pnpm test:pipeline
         working-directory: ./apps/server
 
       - name: Utils - Run unit tests
-        if: always()
         run: pnpm test:pipeline
         working-directory: ./packages/utils
 
@@ -73,12 +49,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.18.2
+          node-version: 16
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8
+          version: 7.26.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -98,9 +74,3 @@ jobs:
           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

@@ -27,7 +27,6 @@ ontime.code-workspace
 test-results
 playwright-report
 /playwright/.cache/
-automated-screenshots
 
 # production
 build/

.husky/pre-commit

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

.prettierignore

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

.prettierrc

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

DEVELOPMENT.md

@@ -1,48 +1,32 @@
 # GETTING STARTED
 
 Ontime consists of 3 distinct parts
-
-- __client__: A React app for Ontime's UI and web clients
+- __client__: A React app for Ontime's UI and web clients 
 - __electron__: An electron app which facilitates the cross-platform distribution of Ontime
 - __server__: A node application which handles the domains services and integrations
 
-The steps below will assume you have locally installed the necessary dependencies.
+The steps below will assume you have locally installed the necessary dependencies. 
 Other dependencies will be installed as part of the setup
-
-- __node__ (~18.18.2)
-- __pnpm__ (>=8)
+- __node__ (>=16.16)
+- __pnpm__ (>=7)
 - __docker__ (only necessary to run and build docker images)
 
 ## LOCAL DEVELOPMENT
 
-The electron app is only necessary to distribute an installable version of the app and is not required for local
-development.
+The electron app is only necessary to distribute an installable version of the app and is not required for local development.
 Locally, we would need to run both the React client and the node.js server in development mode
 
 From the project root, run the following commands
-
 - __Install the project dependencies__ by running `pnpm i`
 - __Run dev mode__ by running `turbo dev`
 
-### Debugging backend
-
-To debug backend code in Node.js:
-
-- Open two separate terminals and navigate to the `apps/client` and `apps/server` directories.
-- In each terminal, run the command `pnpm dev` to start the development servers for both the client and server
-  applications.
-- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by
-  running `pnpm dev:inspect`.
-
 ## TESTING
 
-Generally we have 2 types of tests.
-
+Generally we have 2 types of tests. 
 - Unit tests for functions that contain business logic
 - End-to-end tests for core features
 
 ### Unit tests
-
 Unit tests are contained in mostly all the apps and packages (client, server and utils)
 
 You can run unit tests by running turbo `turbo test:pipeline` from the project root.
@@ -51,22 +35,12 @@ This will run all tests and close test runner.
 Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode
 
 ### E2E tests
-
-E2E tests are in a separate package. On running, [playwright](https://playwright.dev/) will spin up an instance of the
-webserver to test against
+E2E tests are in a separate package. On running, [playwright](https://playwright.dev/) will spin up an instance of the webserver to test against
 These tests also run against a separate version of the DB (test-db)
 
-Before running the E2E, you should first build the project with `pnpm build:local`.
-
 You can run playwright tests from project root with `pnpm e2e`
 
-When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually
-start the webserver with `pnpm dev:server`
-
-Some other useful commands
-
-- `pnpm e2e --ui` open playwright UI
-- `pnpm e2e --headed` run tests with a visible browser window
+When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually start the webserver with `pnpm dev:server`
 
 ## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)
 
@@ -74,9 +48,8 @@ Ontime uses Electron to distribute the application.
 You can generate a distribution for your OS by running the following steps.
 
 From the project root, run the following commands
-
 - __Install the project dependencies__ by running `pnpm i`
-- __Build the UI and server__ by running `turbo build:electron`
+- __Build the UI and server__ by running `turbo build:local`
 - __Create the package__ by running `turbo dist-win`, `turbo dist-mac` or `turbo dist-linux`
 
 The build distribution assets will be at `.apps/electron/dist`
@@ -87,13 +60,10 @@ Ontime provides a docker-compose file to aid with building and running docker im
 While it should allow for a generic setup, it might need to be modified to fit your infrastructure.
 
 From the project root, run the following commands
-
 - __Install the project dependencies__ by running `pnpm i`
-- __Build packages__ by running `pnpm build:localdocker`
 - __Build docker image from__ by running `docker build -t getontime/ontime`
 - __Run docker image from compose__ by running `docker-compose up -d`
 
 Other useful commands
-
 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`

README.md

@@ -1,40 +1,37 @@
-[![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)
+[![ontime_test_CI](https://github.com/cpvalente/ontime/actions/workflows/ontime_cy.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/ontime_cy.yml) [![Ontime build](https://github.com/cpvalente/ontime/actions/workflows/build.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/build.yml)
 [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0) [![Documentation in Gitbook](https://badges.aleen42.com/src/gitbook_2.svg)](https://ontime.gitbook.io)
 
 ## Download the latest releases here
 
 <div style="display: flex; justify-content: space-around">
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/mac-download.png"/></a>
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-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>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/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/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/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/dockerhub.png"/></a>
 </div>
 
 # Ontime
 
-Ontime is an application for creating and managing event running order and timers.
+Ontime is an application for managing event rundowns and running stage timers.
 
-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.
+A single, locally hosted central application distributes your event information over the local network.
+This enables the distribution of the data to a series of viewers and allows integration into video and control workflows, including OBS and d3.
 
-This makes for a simple and cheap way to distribute over a venue using a network infrastructure instead of video
-outputs.
+![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.jpg)
 
-![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.png)
-
-![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/overview.png)
+![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/02_screentypes.png)
 
 ## 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.
 
-Any device with a browser in the same network can choose one of the supported views to render the available data.
+Any device with a browser in the same network can choose one of the supported views to render the available data. 
 This is done by reaching the ontime server at the _default port 4001_ eg: `localhost:4001`
 or `192.168.1.3:4001`
 <br />
-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.
+You can then use the Ontime logo in the top left corner to select the desired view.
+The logo will be initially hidden until there is mouse interaction.
 
 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 aliases feature
@@ -51,9 +48,8 @@ IP.ADDRESS:4001/public     > Public / Foyer view
 IP.ADDRESS:4001/lower      > Lower Thirds
 IP.ADDRESS:4001/studio     > Studio Clock
 ```
-
 ```
-For management views
+For management views 
 -------------------------------------------------------------
 IP.ADDRESS:4001/editor    > the control interface, same as the app
 IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
@@ -65,39 +61,38 @@ More documentation is available [in our docs](https://ontime.gitbook.io)
 
 - [x] Distribute data over network and render it in the browser
 - [x] Different screen types
-  - Stage Timer
-  - Minimal Timer
-  - Clock
-  - Backstage Info
-  - Public Info
-  - Studio Clock
-  - Countdown
-  - [Make your own?](#make-your-own-viewer)
+    - Stage Timer
+    - 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] Cuesheets with user definable fields
 - [x] Send live messages to different screen types
 - [x] Differentiate between backstage and public data
 - [x] Workflow for managing delays
-- [x] Rich protocol integrations for Control and Feedback
+- [x] Protocol integrations for Control and Feedback
   - OSC (Open Sound Control)
   - HTTP
   - WebSockets
-- [x] Roll mode: run standalone using the system clock
+- [x] Roll mode: run independently using the system clock
 - [x] [Headless run](#headless-run): run server in a separate machine, configure from a browser locally
 - [x] [Countdown to anything!](https://ontime.gitbook.io/v2/views/countdown): have
-      a countdown to any scheduled event
-- [x] Multi-platform (available on Windows, MacOS and Linux)
+  a countdown to any scheduled event
+- [x] Multi-platform  (available on Windows, MacOS and Linux)
 - [x] [Companion integration](https://bitfocus.io/connections/getontime-ontime)
 
 ## Unopinionated
 
-We want Ontime to be unique by targeting freelancers instead of roles.
+We are not interested in forcing workflows and have made Ontime, so it is flexible to whichever way
+you would like to work.
 
-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.
+- [x] If you want just the info screens, there is no need to use the timer!
+- [x] Don't have or care for a schedule?
+    - [x] a single event with no data is enough to use one of the APIs and use a dynamic timer
+    - [x] use the order list to create a set of quick timers by setting the beginning and start
+      times to 00:00 and 00:10 (**BAM**! 10 minute timer). You can quickly recall this with OSC or any of the other available integrations
 
 ## Rich APIs for workflow integrations
 
@@ -117,20 +112,32 @@ Taking advantage of the integrations, we currently use Ontime with:
 
 Ontime broadcasts its data over WebSockets. This allows you to consume its data outside the application.
 
-Writing a new view for the browser can be done with basic knowledge of HTML + CSS + Javascript (or any other language
-that can run in the browser).
+Writing a new view for the browser can be done with basic knowledge of HTML + CSS + Javascript (or any other language that can run in the browser).
 <br />
 See [this repository](https://github.com/cpvalente/ontime-viewer-template-v2) with a small template on
 how to get you started and read the docs about
-the [Websocket API](https://ontime.gitbook.io/v2/control-and-feedback/ontime-apis#osc-and-websocket-api)
+the [Websocket API](https://ontime.gitbook.io/v2/control-and-feedback/websocket-api)
 
 ### Headless run️
 
-You can self-host and run Ontime in a docker image.
+You can self-host and run Ontime in a docker image. The run command will:
 
-The docker image along with documentation is [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
+- expose the necessary ports (listed in the Dockerfile)
+- mount a local file to persist your data (in the example: ````$(pwd)/local-data````)
+- the image name __getontime/ontime__
 
-If you want to run this image in a Raspberry Pi, please see [the docs](https://ontime.gitbook.io/v2/additional-notes/use-in-raspberry-pi)
+The docker image is
+in [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
+
+```bash
+docker pull getontime/ontime
+```
+
+and use the included docker compose to get started
+
+```bash
+docker-compose up
+```
 
 ## Roadmap
 
@@ -138,32 +145,32 @@ If you want to run this image in a Raspberry Pi, please see [the docs](https://o
 
 Several features are planned in the roadmap, and we continuously adjust this to match how users interact with the app.
 <br />
-Have an idea? Reach out via [email](mail@getontime.no)
-or [open an issue](https://github.com/cpvalente/ontime/issues/new)
+Have an idea? Reach out via [email](mail@getontime.no) or [open an issue](https://github.com/cpvalente/ontime/issues/new)
 
 ### Issues
 
 We use Github's issue tracking for bug reporting and feature requests. <br />
-Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new).
+Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new). 
 
 #### Unsigned App
 
 When installing the app you would see warning screens from the Operating System like:
 
-`Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.`
+```Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.```
 
 or
 
-`Ontime can't be opened because it is from an unidentified developer`
+```Ontime can't be opened because it is from an unidentified developer```
 
 or in Linux
 
-`Could Not Display "ontime-linux.AppImage`
+```Could Not Display "ontime-linux.AppImage```
 
 You can circumvent this by allowing the execution of the app manually.
 
 - In Windows: click more and select "Run Anyway"
-- in macOS: the solution in macOS is different across versions, please refer to the [apple documentation](https://support.apple.com/en-gb/guide/mac-help/mh40616/mac)
+- in macOS: after attempting to run the installer, navigate to System Preferences ->  Security &
+  Privacy and allow the execution of the app
 - In Linux: right-click the AppImage file -> Properties -> Permissions -> select Allow Executing
   File as a Program
 
@@ -175,7 +182,6 @@ please [open an issue](https://github.com/cpvalente/ontime/issues/new)
 #### Safari
 
 There are known issues with Safari versions lower than 13:
-
 - Spacing and text styles might have small inconsistencies
 - Table view does not work
 
@@ -185,8 +191,7 @@ There is no plan for any further work on this.
 
 Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
 <br /><br />
-If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a
-Pull Request.
+If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a Pull Request.
 <br />
 Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)
 

apps/client/.eslintrc

@@ -8,18 +8,34 @@
     "browser": true,
     "node": true
   },
+  "parser": "@typescript-eslint/parser",
   "extends": [
+    "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:@tanstack/eslint-plugin-query/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-prettier",
+    "plugin:@tanstack/eslint-plugin-query/recommended",
+    "prettier"
   ],
   "plugins": [
     "react",
     "testing-library",
     "simple-import-sort",
-    "@tanstack/query"
+    "@tanstack/query",
+    "@typescript-eslint",
+    "prettier"
   ],
   "rules": {
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "no-useless-concat": "warn",
+    "prefer-template": "warn",
     "react/jsx-no-bind": [
       "error",
       {

apps/client/.prettierrc

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

apps/client/.stylelintrc

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier"
+  ]
+}

apps/client/package.json

@@ -1,35 +1,35 @@
 {
   "name": "ontime-ui",
-  "version": "3.0.0-alpha",
+  "version": "2.0.0-beta5",
   "private": true,
-  "type": "module",
   "dependencies": {
-    "@chakra-ui/react": "^2.7.0",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
+    "@chakra-ui/react": "^2.5.5",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@react-icons/all-files": "^4.1.0",
-    "@sentry/react": "^7.92.0",
-    "@tanstack/react-query": "^5.17.9",
-    "@tanstack/react-query-devtools": "^5.17.9",
-    "@tanstack/react-table": "^8.11.3",
-    "autosize": "^6.0.1",
+    "@sentry/react": "^7.46.0",
+    "@sentry/tracing": "^7.46.0",
+    "@tanstack/react-query": "^4.28.0",
+    "@tanstack/react-query-devtools": "^4.29.0",
+    "autosize": "^5.0.2",
     "axios": "^1.2.0",
     "color": "^4.2.3",
-    "csv-stringify": "^6.4.5",
+    "csv-stringify": "^6.2.3",
+    "deepmerge": "^4.3.0",
     "framer-motion": "^10.10.0",
     "react": "^18.2.0",
-    "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
-    "react-fast-compare": "^3.2.2",
-    "react-hook-form": "^7.49.2",
-    "react-qr-code": "^2.0.12",
+    "react-fast-compare": "^3.2.0",
+    "react-hook-form": "^7.43.5",
+    "react-qr-code": "^2.0.11",
     "react-router-dom": "^6.3.0",
+    "react-table": "^7.7.0",
     "typeface-open-sans": "^1.1.13",
     "web-vitals": "^3.1.1",
-    "zustand": "^4.4.7"
+    "zustand": "^4.3.6"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -37,15 +37,12 @@
     "dev": "cross-env BROWSER=none vite",
     "build": "vite build",
     "build:local": "cross-env NODE_ENV=local vite build",
-    "build:electron": "cross-env NODE_ENV=local vite build",
     "build:docker": "vite build",
-    "build:localdocker": "cross-env NODE_ENV=local vite build",
-    "lint": "eslint . --quiet",
-    "lint-staged": "eslint",
+    "lint": "eslint .",
+    "stylelint": "npx stylelint \"**/*.scss\"\n",
     "test": "vitest",
     "test:pipeline": "vitest run",
-    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build",
-    "analyse": "npx vite-bundle-visualizer"
+    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"
   },
   "browserslist": {
     "production": [
@@ -60,22 +57,24 @@
     ]
   },
   "devDependencies": {
-    "@sentry/vite-plugin": "^2.14.0",
-    "@tanstack/eslint-plugin-query": "^5.8.4",
+    "@sentry/vite-plugin": "^0.4.0",
+    "@tanstack/eslint-plugin-query": "^4.26.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^14.1.1",
     "@types/color": "^3.0.3",
+    "@types/luxon": "^3.2.0",
+    "@types/prop-types": "^15.7.5",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "@vitejs/plugin-react": "^3.0.1",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-jest": "^27.1.7",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -83,13 +82,17 @@
     "jsdom": "^21.1.0",
     "ontime-types": "workspace:*",
     "ontime-utils": "workspace:*",
-    "prettier": "^3.0.3",
+    "prettier": "^2.8.3",
+    "prop-types": "^15.8.1",
     "sass": "^1.57.1",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.0",
-    "vite-plugin-compression2": "^0.12.0",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.2.2"
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.3.1",
+    "vite-plugin-compression2": "^0.9.0",
+    "vite-plugin-svgr": "^2.4.0",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.30.1"
   }
 }

apps/client/src/App.tsx

@@ -1,15 +1,13 @@
-import { useEffect } from 'react';
+import { Suspense, 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';
 import theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
@@ -19,25 +17,24 @@ import AppRouter from './AppRouter';
 // @ts-expect-error no types from font import
 import('typeface-open-sans');
 
-const preferredClientName = socketClientName.getState().name;
-connectSocket(preferredClientName);
+connectSocket();
 
 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');
-        }
+  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');
       }
-    };
+    }
+  };
 
+  useEffect(() => {
     if (isElectron) {
       document.addEventListener('keydown', handleKeyPress);
     }
@@ -46,7 +43,7 @@ function App() {
         document.removeEventListener('keydown', handleKeyPress);
       }
     };
-  }, [isElectron, sendToElectron]);
+  }, []);
 
   return (
     <ChakraProvider resetCSS theme={theme}>
@@ -55,11 +52,11 @@ function App() {
           <BrowserRouter>
             <div className='App'>
               <ErrorBoundary>
-                <TranslationProvider>
-                  <ContextMenu>
+                <Suspense fallback={null}>
+                  <TranslationProvider>
                     <AppRouter />
-                  </ContextMenu>
-                </TranslationProvider>
+                  </TranslationProvider>
+                </Suspense>
               </ErrorBoundary>
               <ReactQueryDevtools initialIsOpen={false} />
             </div>

apps/client/src/AppRouter.tsx

@@ -1,12 +1,12 @@
-import { lazy, Suspense } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { lazy, useEffect } from 'react';
+import { Navigate, Route, Routes, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
-import withAlias from './features/AliasWrapper';
+import useAliases from './common/hooks-query/useAliases';
 import withData from './features/viewers/ViewWrapper';
+import { useTranslation } from './translation/TranslationProvider';
 
 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
-const Cuesheet = lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
-const Operator = lazy(() => import('./features/operator/Operator'));
+const Table = lazy(() => import('./features/table/ProtectedTable'));
 
 const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
 const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
@@ -15,78 +15,117 @@ const Countdown = lazy(() => import('./features/viewers/countdown/Countdown'));
 
 const Backstage = lazy(() => import('./features/viewers/backstage/Backstage'));
 const Public = lazy(() => import('./features/viewers/public/Public'));
-const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
+const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerWrapper'));
 const StudioClock = lazy(() => import('./features/viewers/studio/StudioClock'));
 
-const STimer = withAlias(withData(TimerView));
-const SMinimalTimer = withAlias(withData(MinimalTimerView));
-const SClock = withAlias(withData(ClockView));
-const SCountdown = withAlias(withData(Countdown));
-const SBackstage = withAlias(withData(Backstage));
-const SPublic = withAlias(withData(Public));
-const SLowerThird = withAlias(withData(Lower));
-const SStudio = withAlias(withData(StudioClock));
+const STimer = withData(TimerView);
+const SMinimalTimer = withData(MinimalTimerView);
+const SClock = withData(ClockView);
+const SCountdown = withData(Countdown);
+const SBackstage = withData(Backstage);
+const SPublic = withData(Public);
+const SLowerThird = withData(Lower);
+const SStudio = withData(StudioClock);
 
-const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
+const FeatureWrapper = lazy(() => import('./features/FeatureWrapper'));
 const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
 const TimerControl = lazy(() => import('./features/control/playback/TimerControlExport'));
 const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
+const Info = lazy(() => import('./features/info/InfoExport'));
 
 export default function AppRouter() {
+  const { data } = useAliases();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { setLanguage } = useTranslation();
+
+  // Set output language
+  useEffect(() => {
+    const langParam = searchParams.get('lang');
+    if (langParam && langParam.length === 2) {
+      setLanguage(searchParams.get('lang'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams]);
+
+  // navigate if is alias route
+  useEffect(() => {
+    if (!data) return;
+
+    for (const d of data) {
+      if (`/${d.alias}` === location.pathname && d.enabled) {
+        navigate(`/${d.pathAndParams}`);
+        break;
+      }
+    }
+  }, [data, location, navigate]);
+
   return (
-    <Suspense fallback={null}>
-      <Routes>
-        <Route path='/' element={<Navigate to='/timer' />} />
-        <Route path='/timer' element={<STimer />} />
+    <Routes>
+      <Route path='/' element={<Navigate to='/timer' />} />
+      <Route path='/speaker' element={<STimer />} />
+      <Route path='/presenter' element={<STimer />} />
+      <Route path='/stage' element={<STimer />} />
+      <Route path='/timer' element={<STimer />} />
 
-        <Route path='/minimal' element={<SMinimalTimer />} />
+      <Route path='/minimal' element={<SMinimalTimer />} />
+      <Route path='/minimalTimer' element={<SMinimalTimer />} />
+      <Route path='/simpleTimer' element={<SMinimalTimer />} />
 
-        <Route path='/clock' element={<SClock />} />
+      <Route path='/clock' element={<SClock />} />
 
-        <Route path='/countdown' element={<SCountdown />} />
+      <Route path='/countdown' element={<SCountdown />} />
 
-        <Route path='/backstage' element={<SBackstage />} />
+      <Route path='/sm' element={<SBackstage />} />
+      <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='/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 />} />
+      <Route path='/cuesheet' element={<Table />} />
+      <Route path='/cuelist' element={<Table />} />
+      <Route path='/table' element={<Table />} />
 
-        {/*/!* Protected Routes *!/*/}
-        <Route path='/editor' element={<Editor />} />
-        <Route path='/cuesheet' element={<Cuesheet />} />
-
-        {/*/!* Protected Routes - Elements *!/*/}
-        <Route
-          path='/rundown'
-          element={
-            <EditorFeatureWrapper>
-              <RundownPanel />
-            </EditorFeatureWrapper>
-          }
-        />
-        <Route
-          path='/timercontrol'
-          element={
-            <EditorFeatureWrapper>
-              <TimerControl />
-            </EditorFeatureWrapper>
-          }
-        />
-        <Route
-          path='/messagecontrol'
-          element={
-            <EditorFeatureWrapper>
-              <MessageControl />
-            </EditorFeatureWrapper>
-          }
-        />
-        {/*/!* Send to default if nothing found *!/*/}
-        <Route path='*' element={<STimer />} />
-      </Routes>
-    </Suspense>
+      {/*/!* Protected Routes - Elements *!/*/}
+      <Route
+        path='/rundown'
+        element={
+          <FeatureWrapper>
+            <RundownPanel />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/timercontrol'
+        element={
+          <FeatureWrapper>
+            <TimerControl />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/messagecontrol'
+        element={
+          <FeatureWrapper>
+            <MessageControl />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/info'
+        element={
+          <FeatureWrapper>
+            <Info />
+          </FeatureWrapper>
+        }
+      />
+      {/*/!* Send to default if nothing found *!/*/}
+      <Route path='*' element={<STimer />} />
+    </Routes>
   );
 }

apps/client/src/__mocks__/QueryClient.mock.js

@@ -0,0 +1,9 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClientMock = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});

apps/client/src/appConstants.ts

@@ -0,0 +1,22 @@
+// Exported viewer link location
+const minimalLocation = 'minimal';
+const speakerLocation = 'speaker';
+const smLocation = 'sm';
+const publicLocation = 'public';
+const studioLocation = 'studio';
+const cuesheetLocation = 'cuesheet';
+const countdownLocation = 'countdown';
+const clockLocation = 'clock';
+const lowerLocation = 'lower';
+
+export const viewerLocations = [
+  { link: speakerLocation, label: 'Stage timer' },
+  { link: clockLocation, label: 'Clock' },
+  { link: minimalLocation, label: 'Minimal timer' },
+  { link: smLocation, label: 'Backstage screen' },
+  { link: publicLocation, label: 'Public screen' },
+  { link: lowerLocation, label: 'Lower thirds' },
+  { link: studioLocation, label: 'Studio clock' },
+  { link: countdownLocation, label: 'Countdown' },
+  { link: cuesheetLocation, label: 'Cuesheet' },
+];

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

@@ -1,28 +1,22 @@
+export const STATIC_PORT = 4001;
+
 // REST stuff
+export const EVENTDATA_TABLE = ['eventdata'];
 export const ALIASES = ['aliases'];
-export const APP_INFO = ['appinfo'];
-export const APP_SETTINGS = ['appSettings'];
-export const HTTP_SETTINGS = ['httpSettings'];
-export const OSC_SETTINGS = ['oscSettings'];
-export const PROJECT_DATA = ['project'];
-export const PROJECT_LIST = ['projectList'];
-export const RUNDOWN = ['rundown'];
-export const RUNTIME = ['runtimeStore'];
-export const SHEET_STATE = ['sheetState'];
 export const USERFIELDS = ['userFields'];
+export const RUNDOWN_TABLE_KEY = 'rundown';
+export const RUNDOWN_TABLE = [RUNDOWN_TABLE_KEY];
+export const APP_INFO = ['appinfo'];
+export const OSC_SETTINGS = ['oscSettings'];
+export const APP_SETTINGS = ['appSettings'];
 export const VIEW_SETTINGS = ['viewSettings'];
+export const RUNTIME = ['runtimeStore'];
 
-const location = window.location;
-const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
-export const isProduction = import.meta.env.MODE === 'production';
-export const isDev = !isProduction;
+export const serverPort = import.meta.env.DEV ? STATIC_PORT : window.location.port;
+export const serverURL = import.meta.env.DEV ? `http://localhost:${serverPort}` : window.location.origin;
+export const websocketUrl = `ws://${window.location.hostname}:${serverPort}/ws`;
 
-const STATIC_PORT = 4001;
-export const serverPort = isProduction ? location.port : STATIC_PORT;
-export const serverURL = `${location.protocol}//${location.hostname}:${serverPort}`;
-export const websocketUrl = `${socketProtocol}://${location.hostname}:${serverPort}/ws`;
-
-export const projectDataURL = `${serverURL}/project`;
+export const eventURL = `${serverURL}/eventdata`;
 export const rundownURL = `${serverURL}/events`;
 export const ontimeURL = `${serverURL}/ontime`;
 

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

@@ -1,46 +0,0 @@
-import axios, { AxiosError } from 'axios';
-import { LogLevel } from 'ontime-types';
-import { generateId, millisToString } from 'ontime-utils';
-
-import { ontimeQueryClient } from '../queryClient';
-import { addLog } from '../stores/logger';
-import { nowInMillis } from '../utils/time';
-
-export function maybeAxiosError(error: unknown) {
-  if (axios.isAxiosError(error)) {
-    const statusText = (error as AxiosError).response?.statusText ?? '';
-    let data = (error as AxiosError).response?.data ?? '';
-    if (typeof data === 'object') {
-      if ('message' in data) {
-        data = JSON.stringify(data.message);
-      } else {
-        data = JSON.stringify(data);
-      }
-    }
-    return `${statusText}: ${data}`;
-  } else {
-    if (typeof error !== 'string') {
-      return JSON.stringify(error);
-    }
-    return error;
-  }
-}
-
-export function logAxiosError(prepend: string, error: unknown) {
-  const message = `${prepend}: ${maybeAxiosError(error)}`;
-
-  addLog({
-    id: generateId(),
-    origin: 'SERVER',
-    time: millisToString(nowInMillis()),
-    level: LogLevel.Error,
-    text: message,
-  });
-}
-
-/**
- * Utility function invalidates react-query caches
- */
-export async function invalidateAllCaches() {
-  await ontimeQueryClient.invalidateQueries();
-}

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

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { EventData } from 'ontime-types';
+
+import { eventURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch event data
+ * @return {Promise}
+ */
+export async function fetchEventData(): Promise<EventData> {
+  const res = await axios.get(eventURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate event data
+ * @return {Promise}
+ */
+export async function postEventData(data: EventData) {
+  return axios.post(eventURL, data);
+}

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

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { OntimeEvent, OntimeRundown, OntimeRundownEntry, RundownCached } from 'ontime-types';
+import { OntimeRundown, OntimeRundownEntry } from 'ontime-types';
 
 import { rundownURL } from './apiConstants';
 
@@ -7,16 +7,6 @@ import { rundownURL } from './apiConstants';
  * @description HTTP request to fetch all events
  * @return {Promise}
  */
-export async function fetchCachedRundown(): Promise<RundownCached> {
-  const res = await axios.get(`${rundownURL}/cached`);
-  return res.data;
-}
-
-/**
- * @deprecated use fetchCachedRundown instead
- * @description HTTP request to fetch all events
- * @return {Promise}
- */
 export async function fetchRundown(): Promise<OntimeRundown> {
   const res = await axios.get(rundownURL);
   return res.data;
@@ -26,7 +16,7 @@ export async function fetchRundown(): Promise<OntimeRundown> {
  * @description HTTP request to post new event
  * @return {Promise}
  */
-export async function requestPostEvent(data: Partial<OntimeRundownEntry>) {
+export async function requestPostEvent(data: OntimeRundownEntry) {
   return axios.post(rundownURL, data);
 }
 
@@ -38,17 +28,12 @@ export async function requestPutEvent(data: Partial<OntimeRundownEntry>) {
   return axios.put(rundownURL, data);
 }
 
-type BatchEditEntry = {
-  data: Partial<OntimeEvent>;
-  ids: string[];
-};
-
 /**
- * @description HTTP request to put multiple events
- * @returns {Promise}
+ * @description HTTP request to modify event
+ * @return {Promise}
  */
-export async function requestBatchPutEvents(data: BatchEditEntry) {
-  return axios.put(`${rundownURL}/batchEdit`, data);
+export async function requestPatchEvent(data: OntimeRundownEntry) {
+  return axios.patch(rundownURL, data);
 }
 
 export type ReorderEntry = {
@@ -73,19 +58,6 @@ export async function requestApplyDelay(eventId: string) {
   return axios.patch(`${rundownURL}/applydelay/${eventId}`);
 }
 
-export type SwapEntry = {
-  from: string;
-  to: string;
-};
-
-/**
- * @description HTTP request to swap two events
- * @return {Promise}
- */
-export async function requestEventSwap(data: SwapEntry) {
-  return axios.patch(`${rundownURL}/swap`, data);
-}
-
 /**
  * @description HTTP request to delete given event
  * @return {Promise}

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

@@ -1,22 +1,8 @@
-import axios, { AxiosResponse } from 'axios';
-import {
-  Alias,
-  DatabaseModel,
-  GetInfo,
-  HttpSettings,
-  MessageResponse,
-  OntimeRundown,
-  OSCSettings,
-  ProjectData,
-  ProjectFileListResponse,
-  Settings,
-  UserFields,
-  ViewSettings,
-} from 'ontime-types';
-import { ExcelImportMap } from 'ontime-utils';
+import axios from 'axios';
+import { Alias, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-types';
 
 import { apiRepoLatest } from '../../externals';
-import fileDownload from '../utils/fileDownload';
+import { InfoType } from '../models/Info';
 
 import { ontimeURL } from './apiConstants';
 
@@ -41,7 +27,7 @@ export async function postSettings(data: Settings) {
  * @description HTTP request to retrieve application info
  * @return {Promise}
  */
-export async function getInfo(): Promise<GetInfo> {
+export async function getInfo(): Promise<InfoType> {
   const res = await axios.get(`${ontimeURL}/info`);
   return res.data;
 }
@@ -59,7 +45,7 @@ export async function getView(): Promise<ViewSettings> {
  * @description HTTP request to mutate view settings
  * @return {Promise}
  */
-export async function postViewSettings(data: ViewSettings) {
+export async function postView(data: ViewSettings) {
   return axios.post(`${ontimeURL}/views`, data);
 }
 
@@ -73,29 +59,13 @@ export async function getAliases(): Promise<Alias[]> {
 }
 
 /**
- * @description HTTP request to create an alias
+ * @description HTTP request to mutate aliases
  * @return {Promise}
  */
-export async function postAlias(data: Alias) {
+export async function postAliases(data: Alias[]) {
   return axios.post(`${ontimeURL}/aliases`, data);
 }
 
-/**
- * @description HTTP request to update aliases
- * @return {Promise}
- */
-export async function updateAliases(data: Partial<Alias>) {
-  return axios.put(`${ontimeURL}/aliases`, data);
-}
-
-/**
- * @description HTTP request to delete alias
- * @return {Promise}
- */
-export async function deleteAlias(alias: string) {
-  return axios.delete(`${ontimeURL}/aliases/${alias}`);
-}
-
 /**
  * @description HTTP request to retrieve user fields
  * @return {Promise}
@@ -126,64 +96,50 @@ export async function getOSC(): Promise<OSCSettings> {
  * @description HTTP request to mutate osc settings
  * @return {Promise}
  */
-export async function postOSC(data: OSCSettings): Promise<AxiosResponse<OSCSettings>> {
+export async function postOSC(data: OSCSettings) {
   return axios.post(`${ontimeURL}/osc`, data);
 }
 
 /**
- * @description HTTP request to retrieve http settings
+ * @description HTTP request to download db
  * @return {Promise}
  */
-export async function getHTTP(): Promise<HttpSettings> {
-  const res = await axios.get(`${ontimeURL}/http`);
-  return res.data;
-}
+export const downloadRundown = async () => {
+  await axios({
+    url: `${ontimeURL}/db`,
+    method: 'GET',
+    responseType: 'blob', // important
+  }).then((response) => {
+    const headerLine = response.headers['Content-Disposition'];
+    let filename = 'rundown.json';
 
-/**
- * @description HTTP request to mutate http settings
- * @return {Promise}
- */
-export async function postHTTP(data: HttpSettings): Promise<AxiosResponse<HttpSettings>> {
-  return axios.post(`${ontimeURL}/http`, 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);
+    }
 
-/**
- * @description HTTP request to download db in CSV format
- */
-export const downloadCSV = (fileName?: string) => {
-  return fileDownload(ontimeURL, { name: fileName ?? 'rundown', type: 'csv' }, { type: 'text/csv;charset=utf-8;' });
-};
-
-/**
- * @description HTTP request to download db in JSON format
- */
-export const downloadRundown = (fileName?: string) => {
-  return fileDownload(
-    ontimeURL,
-    { name: fileName ?? 'rundown', type: 'json' },
-    { type: 'application/json;charset=utf-8;' },
-  );
-};
-
-// TODO: should this be extracted to shared code?
-export type ProjectFileImportOptions = {
-  onlyRundown: boolean;
+    const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/json' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+  });
 };
 
 /**
  * @description HTTP request to upload events db
  * @return {Promise}
  */
-export const uploadProjectFile = async (
-  file: File,
-  setProgress: (value: number) => void,
-  options?: Partial<ProjectFileImportOptions>,
-) => {
+type UploadDataOptions = {
+  onlyRundown?: boolean;
+};
+export const uploadData = async (file: string, setProgress: (value: number) => void, options?: UploadDataOptions) => {
   const formData = new FormData();
   formData.append('userFile', file);
-
-  const onlyRundown = Boolean(options?.onlyRundown);
-
+  const onlyRundown = options?.onlyRundown || 'false';
   await axios
     .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
       headers: {
@@ -197,46 +153,6 @@ export const uploadProjectFile = async (
     .then((response) => response.data.id);
 };
 
-/**
- * @description Make patch changes to the objects in the db
- * @return {Promise}
- */
-export async function patchData(patchDb: Partial<DatabaseModel>) {
-  const response = await axios.patch(`${ontimeURL}/db`, patchDb);
-  return response;
-}
-
-type PostPreviewExcelResponse = {
-  rundown: OntimeRundown;
-  userFields: UserFields;
-};
-
-/**
- * @description Make patch changes to the objects in the db
- * @return {Promise} - returns parsed rundown and userfields
- */
-export async function postPreviewExcel(file: File, setProgress: (value: number) => void, options?: ExcelImportMap) {
-  const formData = new FormData();
-  formData.append('userFile', file);
-  formData.append('options', JSON.stringify(options));
-
-  const response: AxiosResponse<PostPreviewExcelResponse> = await axios.post(
-    `${ontimeURL}/preview-spreadsheet`,
-    formData,
-    {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-      onUploadProgress: (progressEvent) => {
-        const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
-        setProgress(complete);
-      },
-    },
-  );
-
-  return response;
-}
-
 export type HasUpdate = {
   url: string;
   version: string;
@@ -253,144 +169,3 @@ export async function getLatestVersion(): Promise<HasUpdate> {
     version: res.data.tag_name as string,
   };
 }
-
-/**
- * @description HTTP request to get the list of available project files
- */
-export async function getProjects(): Promise<ProjectFileListResponse> {
-  const res = await axios.get(`${ontimeURL}/projects`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to load a project file
- */
-export async function loadProject(filename: string): Promise<MessageResponse> {
-  const res = await axios.post(`${ontimeURL}/load-project`, {
-    filename,
-  });
-  return res.data;
-}
-
-/**
- * @description STEP 1
- */
-export const uploadSheetClientFile = async (file: File) => {
-  const formData = new FormData();
-  formData.append('userFile', file);
-  const res = await axios
-    .post(`${ontimeURL}/sheet/clientsecret`, formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    })
-    .then((response) => response.data.id);
-  return res;
-};
-
-/**
- * @description STEP 1 test
- */
-export const getClientSecrect = async () => {
-  const response = await axios.get(`${ontimeURL}/sheet/clientsecret`);
-  return response.data;
-};
-
-/**
- * @description STEP 2
- */
-export const getSheetsAuthUrl = async () => {
-  const response = await axios.get(`${ontimeURL}/sheet/authentication/url`);
-  return response.data;
-};
-
-/**
- * @description STEP 2 test
- */
-export const getAuthentication = async () => {
-  const response = await axios.get(`${ontimeURL}/sheet/authentication`);
-  return response.data;
-};
-
-/**
- * @description STEP 3
- * @returns worksheetOptions
- */
-export const postId = async (id: string) => {
-  const response = await axios.post(`${ontimeURL}/sheet/id`, { id });
-  return response.data;
-};
-
-/**
- * @description STEP 4
- */
-export const postWorksheet = async (id: string, worksheet: string) => {
-  const response = await axios.post(`${ontimeURL}/sheet/worksheet`, { id, worksheet });
-  return response.data;
-};
-
-/**
- * @description STEP 5
- */
-export const postPreviewSheet = async (id: string, options: ExcelImportMap) => {
-  const response = await axios.post(`${ontimeURL}/sheet/pull`, { id, options });
-  return response.data.data;
-};
-
-/**
- * @description STEP 5
- */
-export const postPushSheet = async (id: string, options: ExcelImportMap) => {
-  const response = await axios.post(`${ontimeURL}/sheet-push`, { id, options });
-  return response.data.data;
-};
-
-/**
- * @description HTTP request to rename a project file
- */
-export async function renameProject(filename: string, newFilename: string): Promise<MessageResponse> {
-  const url = `${ontimeURL}/project/${filename}/rename`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.put(decodedUrl, {
-    newFilename,
-  });
-  return res.data;
-}
-
-/**
- * @description HTTP request to duplicate a project file
- */
-export async function duplicateProject(filename: string, newFilename: string): Promise<MessageResponse> {
-  const url = `${ontimeURL}/project/${filename}/duplicate`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.post(decodedUrl, {
-    newFilename,
-  });
-  return res.data;
-}
-
-/**
- * @description HTTP request to delete a project file
- */
-export async function deleteProject(filename: string): Promise<MessageResponse> {
-  const url = `${ontimeURL}/project/${filename}`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.delete(decodedUrl);
-  return res.data;
-}
-
-/**
- * @description HTTP request to create a project file
- */
-export async function createProject(
-  project: Partial<
-    ProjectData & {
-      filename: string;
-    }
-  >,
-): Promise<MessageResponse> {
-  const url = `${ontimeURL}/project`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.post(decodedUrl, project);
-  return res.data;
-}

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

@@ -1,21 +0,0 @@
-import axios from 'axios';
-import { ProjectData } from 'ontime-types';
-
-import { projectDataURL } from './apiConstants';
-
-/**
- * @description HTTP request to fetch project data
- * @return {Promise}
- */
-export async function getProjectData(): Promise<ProjectData> {
-  const res = await axios.get(projectDataURL);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate project data
- * @return {Promise}
- */
-export async function postProjectData(data: ProjectData) {
-  return axios.post(projectDataURL, data);
-}

apps/client/src/common/components/app-link/AppLink.module.scss

@@ -1,12 +0,0 @@
-@use "../../../theme/mixins" as *;
-
-.link {
-  @include action-link;
-  font-size: $inner-section-text-size;
-}
-
-.linkIcon {
-  margin-left: $element-inner-spacing;
-  display: inline-block;
-  transform: rotate(45deg);
-}

apps/client/src/common/components/app-link/AppLink.tsx

@@ -1,26 +0,0 @@
-import { MouseEvent, ReactNode } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-
-import { openLink } from '../../utils/linkUtils';
-
-import style from './AppLink.module.scss';
-
-interface AppLinkProps {
-  href: string;
-  children: ReactNode;
-}
-
-export default function AppLink(props: AppLinkProps) {
-  const { href, children } = props;
-
-  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    openLink(href);
-  };
-
-  return (
-    <a href='#!' target='_blank' rel='noreferrer' className={style.link} onClick={handleClick}>
-      {children} <IoArrowUp className={style.linkIcon} />
-    </a>
-  );
-}

apps/client/src/common/components/buttons/EnableBtn.jsx

@@ -0,0 +1,26 @@
+import { Button } from '@chakra-ui/react';
+import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
+import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
+import PropTypes from 'prop-types';
+
+export default function EnableBtn(props) {
+  const { active, text, actionHandler, size = 'xs' } = props;
+  return (
+    <Button
+      size={size}
+      leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
+      colorScheme='blue'
+      variant={active ? 'solid' : 'outline'}
+      onClick={actionHandler}
+    >
+      {text}
+    </Button>
+  );
+}
+
+EnableBtn.propTypes = {
+  active: PropTypes.bool,
+  text: PropTypes.string,
+  actionHandler: PropTypes.func,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+}

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

@@ -0,0 +1,28 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+interface PauseIconBtnProps {
+  clickhandler: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  active: boolean;
+  disabled: boolean;
+}
+
+export default function PauseIconBtn(props: PauseIconBtnProps) {
+  const { clickhandler, active, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Pause timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoPause size='24px' />}
+        colorScheme='orange'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        disabled={disabled}
+        aria-label='Pause playback'
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

apps/client/src/common/components/buttons/PublicIconBtn.jsx

@@ -0,0 +1,25 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
+import PropTypes from 'prop-types';
+
+export default function PublicIconBtn(props) {
+  const { actionHandler, active, size = 'xs', ...rest } = props;
+  return (
+    <Tooltip label={active ? 'Make event private' : 'Make event public'}>
+      <IconButton
+        size={size}
+        icon={<FiUsers />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={() => actionHandler('update', { field: 'isPublic', value: !active })}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+PublicIconBtn.propTypes = {
+  actionHandler: PropTypes.func,
+  active: PropTypes.bool,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+};

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

@@ -10,12 +10,14 @@ import {
   IconButton,
   Tooltip,
 } from '@chakra-ui/react';
-import { IoPowerOutline } from '@react-icons/all-files/io5/IoPowerOutline';
+import { FiPower } from '@react-icons/all-files/fi/FiPower';
 
+import { Size } from '../../models/Util.type';
 import { useEmitLog } from '../../stores/logger';
 
 interface QuitIconBtnProps {
   clickHandler: () => void;
+  size?: Size;
   disabled?: boolean;
 }
 
@@ -40,7 +42,7 @@ const quitBtnStyle = {
 };
 
 export default function QuitIconBtn(props: QuitIconBtnProps) {
-  const { clickHandler, disabled, ...rest } = props;
+  const { clickHandler, size = 'lg', disabled, ...rest } = props;
   const [isOpen, setIsOpen] = useState(false);
   const { emitInfo } = useEmitLog();
   const onClose = () => setIsOpen(false);
@@ -65,8 +67,8 @@ export default function QuitIconBtn(props: QuitIconBtnProps) {
       <Tooltip label='Quit Application'>
         <IconButton
           aria-label='Quit Application'
-          size='lg'
-          icon={<IoPowerOutline />}
+          size={size}
+          icon={<FiPower />}
           onClick={() => setIsOpen(true)}
           isDisabled={disabled}
           {...quitBtnStyle}
@@ -79,7 +81,7 @@ export default function QuitIconBtn(props: QuitIconBtnProps) {
             <AlertDialogHeader fontSize='lg' fontWeight='bold'>
               Ontime Shutdown
             </AlertDialogHeader>
-            <AlertDialogBody>This will shutdown the Ontime server. Are you sure?</AlertDialogBody>
+            <AlertDialogBody>This will shutdown the program and all running servers. Are you sure?</AlertDialogBody>
             <AlertDialogFooter>
               <Button ref={cancelRef} onClick={onClose} variant='ghost'>
                 Cancel

apps/client/src/common/components/buttons/RollIconBtn.jsx

@@ -0,0 +1,28 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function RollIconBtn(props) {
+  const { clickhandler, active, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Roll mode' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoTimeOutline size='24px' />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+RollIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool,
+};

apps/client/src/common/components/buttons/StartIconBtn.jsx

@@ -0,0 +1,28 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function StartIconBtn(props) {
+  const { clickhandler, active, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Start timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoPlay size='24px' />}
+        colorScheme='green'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+StartIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
+}

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

@@ -1,8 +1,7 @@
-import { MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
 
 interface TooltipActionBtnProps extends IconButtonProps {
-  clickHandler: (event: MouseEvent) => void | Promise<void>;
+  clickHandler: () => void;
   tooltip: string;
   openDelay?: number;
 }

apps/client/src/common/components/buttons/TransportIconBtn.jsx

@@ -0,0 +1,29 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function TransportIconBtn(props) {
+  const { clickHandler, icon, tooltip, disabled, ...rest } = props;
+  return (
+    <Tooltip label={tooltip} openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={icon}
+        colorScheme='white'
+        variant='outline'
+        _hover={!disabled && { bg: '#ebedf0', color: '#333' }}
+        onClick={clickHandler}
+        width={90}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+TransportIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  icon: PropTypes.element,
+  tooltip: PropTypes.string,
+  disabled: PropTypes.bool,
+};

apps/client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -0,0 +1,27 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function UnloadIconBtn(props) {
+  const { clickHandler, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Unload event' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoStop size='22px' />}
+        colorScheme='red'
+        variant='outline'
+        onClick={clickHandler}
+        width={90}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+UnloadIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  disabled: PropTypes.bool,
+};

apps/client/src/common/components/collapse-bar/CollapseBar.module.scss

@@ -0,0 +1,24 @@
+@use '../../../theme/v2Styles' as *;
+
+.header {
+  font-size: $inner-section-text-size;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  color: $section-white;
+  margin-top: $main-spacing;
+  border-bottom: 1px solid $border-color-ondark;
+  padding-bottom: $element-inner-spacing;
+  margin-bottom: $element-spacing;
+  cursor: pointer;
+}
+
+.moreExpanded {
+  transform: scaleY(-1);
+  transition: transform $transition-time-feedback;
+}
+
+.moreCollapsed {
+  transform: scaleY(1);
+  transition: transform $transition-time-feedback;
+}

apps/client/src/common/components/collapse-bar/CollapseBar.tsx

@@ -0,0 +1,20 @@
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+
+import style from './CollapseBar.module.scss';
+
+interface CollapseBarProps {
+  title: string;
+  isCollapsed: boolean;
+  onClick: () => void;
+}
+
+export default function CollapseBar(props: CollapseBarProps) {
+  const { title = 'Collapse bar', isCollapsed, onClick } = props;
+
+  return (
+    <div className={style.header} onClick={onClick}>
+      {title}
+      <FiChevronUp className={isCollapsed ? style.moreCollapsed : style.moreExpanded} />
+    </div>
+  );
+}

apps/client/src/common/components/context-menu/ContextMenu.module.scss

@@ -1,8 +0,0 @@
-.contextMenuButton {
-  position: absolute;
-}
-
-.contextMenuBackdrop {
-  position: fixed;
-  inset: 0;
-}

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

@@ -1,98 +0,0 @@
-// logic (with some modifications) culled from:
-// https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
-
-import { ReactElement } from 'react';
-import { Menu, MenuButton, MenuGroup, MenuList } from '@chakra-ui/react';
-import { IconType } from '@react-icons/all-files';
-import { create } from 'zustand';
-
-import { ContextMenuOption } from './ContextMenuOption';
-
-import style from './ContextMenu.module.scss';
-
-type ContextMenuCoords = {
-  x: number;
-  y: number;
-};
-
-export type OptionWithoutGroup = {
-  label: string;
-  isDisabled?: boolean;
-  icon: IconType;
-  onClick: () => void;
-  withDivider?: boolean;
-};
-
-export type OptionWithGroup = {
-  label: string;
-  group: Omit<OptionWithoutGroup, 'isGroup'>[];
-};
-
-export type Option = OptionWithoutGroup | OptionWithGroup;
-
-const isOptionWithGroup = (option: Option): option is OptionWithGroup => 'group' in option;
-
-type ContextMenuStore = {
-  coords: ContextMenuCoords;
-  options: Option[];
-  isOpen: boolean;
-  setContextMenu: (coords: ContextMenuCoords, options: Option[]) => void;
-  setIsOpen: (newIsOpen: boolean) => void;
-};
-
-export const useContextMenuStore = create<ContextMenuStore>((set) => ({
-  coords: { x: 0, y: 0 },
-  options: [],
-  isOpen: false,
-  setContextMenu: (coords, options) => set(() => ({ coords, options, isOpen: true })),
-  setIsOpen: (newIsOpen) => set(() => ({ isOpen: newIsOpen })),
-}));
-
-interface ContextMenuProps {
-  // ReactElement type required due to early `return` (line 51) returning {children}
-  children: ReactElement;
-}
-
-export const ContextMenu = ({ children }: ContextMenuProps) => {
-  const { coords, options, isOpen, setIsOpen } = useContextMenuStore();
-
-  const onClose = () => {
-    return setIsOpen(false);
-  };
-
-  if (!isOpen) {
-    return children;
-  }
-
-  return (
-    <>
-      {children}
-      <div className={style.contextMenuBackdrop} />
-      <Menu isOpen gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
-        <MenuButton
-          className={style.contextMenuButton}
-          aria-hidden
-          w={1}
-          h={1}
-          style={{
-            left: coords.x,
-            top: coords.y,
-          }}
-        />
-        <MenuList>
-          {options.map((option) =>
-            isOptionWithGroup(option) ? (
-              <MenuGroup key={option.label} title={option.label}>
-                {option.group.map((groupOption) => (
-                  <ContextMenuOption key={groupOption.label} {...groupOption} />
-                ))}
-              </MenuGroup>
-            ) : (
-              <ContextMenuOption key={option.label} {...option} />
-            ),
-          )}
-        </MenuList>
-      </Menu>
-    </>
-  );
-};

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

@@ -1,12 +0,0 @@
-import { MenuDivider, MenuItem } from '@chakra-ui/react';
-
-import { OptionWithoutGroup } from './ContextMenu';
-
-export const ContextMenuOption = ({ label, onClick, isDisabled, icon: Icon, withDivider }: OptionWithoutGroup) => (
-  <>
-    {withDivider && <MenuDivider />}
-    <MenuItem icon={<Icon />} onClick={onClick} isDisabled={isDisabled}>
-      {label}
-    </MenuItem>
-  </>
-);

apps/client/src/common/components/copy-tag/CopyTag.tsx

@@ -4,7 +4,6 @@ import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
 
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { Size } from '../../models/Util.type';
-import copyToClipboard from '../../utils/copyToClipboard';
 
 interface CopyTagProps {
   label: string;
@@ -15,15 +14,21 @@ interface CopyTagProps {
 export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
   const { label, className, size = 'xs', children } = props;
 
-  const handleClick = () => copyToClipboard(children as string);
-
   return (
     <Tooltip label={label} openDelay={tooltipDelayFast}>
-      <ButtonGroup size={size} isAttached className={className}>
-        <Button variant='ontime-subtle' tabIndex={-1}>
-          {children}
-        </Button>
-        <IconButton aria-label={label} icon={<IoCopy />} variant='ontime-filled' tabIndex={-1} onClick={handleClick} />
+      <ButtonGroup
+        size={size}
+        isAttached
+        className={className}
+      >
+        <Button variant='ontime-subtle' tabIndex={-1}>{children}</Button>
+        <IconButton
+          aria-label={label}
+          icon={<IoCopy />}
+          variant='ontime-filled'
+          tabIndex={-1}
+          onClick={() => navigator.clipboard.writeText(children as string)}
+        />
       </ButtonGroup>
     </Tooltip>
   );

apps/client/src/common/components/delay-indicator/DelayIndicator.module.scss

@@ -1,7 +0,0 @@
-.delaySymbol {
-  svg {
-    font-size: 1.5rem;
-    color: $ontime-delay;
-    margin: 0 auto;
-  }
-}

apps/client/src/common/components/delay-indicator/DelayIndicator.tsx

@@ -1,40 +0,0 @@
-import { Tooltip } from '@chakra-ui/react';
-import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
-import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
-
-import { tooltipDelayFast } from '../../../ontimeConfig';
-import { millisToDelayString } from '../../utils/dateConfig';
-
-import style from './DelayIndicator.module.scss';
-
-interface DelayIndicatorProps {
-  delayValue?: number;
-}
-
-export default function DelayIndicator(props: DelayIndicatorProps) {
-  const { delayValue } = props;
-
-  if (typeof delayValue === 'number') {
-    if (delayValue < 0) {
-      return (
-        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue, true)}>
-          <span className={style.delaySymbol}>
-            <IoChevronDown />
-          </span>
-        </Tooltip>
-      );
-    }
-
-    if (delayValue > 0) {
-      return (
-        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue, true)}>
-          <span className={style.delaySymbol}>
-            <IoChevronUp />
-          </span>
-        </Tooltip>
-      );
-    }
-  }
-
-  return null;
-}

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -1,11 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
-// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
 
-import { runtimeStore } from '@/common/stores/runtime';
-import { hasConnected, reconnectAttempts, shouldReconnect } from '@/common/utils/socket';
-
 import style from './ErrorBoundary.module.scss';
 
 class ErrorBoundary extends React.Component {
@@ -23,17 +19,21 @@ class ErrorBoundary extends React.Component {
 
   componentDidCatch(error, info) {
     this.setState({
-      error,
+      error: error,
       errorInfo: info,
     });
 
     Sentry.withScope((scope) => {
-      scope.setExtras('error', error);
-      scope.setExtras('store', runtimeStore.getState());
-      scope.setExtras('hasSocket', { hasConnected, shouldReconnect, reconnectAttempts });
+      scope.setExtras(error);
       const eventId = Sentry.captureException(error);
       this.setState({ eventId, info });
     });
+
+    try {
+      this.context.emitError(error.toString());
+    } catch (e) {
+      Sentry.captureMessage(`Unable to emit error ${error} ${e}`);
+    }
     this.reportContent = `${error} ${info.componentStack}`;
   }
 

apps/client/src/common/components/error-boundary/ErrorBoundary.module.scss

@@ -1,3 +1,5 @@
+@use '../../../theme/v2Styles' as *;
+
 .errorContainer {
   width: 100%;
   height: 100%;

apps/client/src/common/components/external-link/ExternalLink.module.scss

@@ -1,17 +0,0 @@
-.link {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-
-  color: $blue-500;
-  transition-property: color;
-  transition-duration: $transition-time-action;
-
-  &.inline {
-    display: inline-flex;
-  }
-
-  &:hover {
-    color: $ontime-color;
-  }
-}

apps/client/src/common/components/external-link/ExternalLink.tsx

@@ -1,29 +0,0 @@
-import { MouseEvent, ReactNode } from 'react';
-import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';
-
-import { openLink } from '../../utils/linkUtils';
-import { cx } from '../../utils/styleUtils';
-
-import style from './ExternalLink.module.scss';
-
-interface ExternalLinkProps {
-  href: string;
-  children: ReactNode;
-  inline?: boolean;
-}
-
-export default function ExternalLink(props: ExternalLinkProps) {
-  const { href, inline, children } = props;
-  const classes = cx([style.link, inline ? style.inline : null]);
-
-  const handleClick = (event: MouseEvent) => {
-    event.preventDefault();
-    openLink(href);
-  };
-
-  return (
-    <a href='#!' target='_blank' rel='noreferrer' className={classes} onClick={handleClick}>
-      {children} <IoOpenOutline />
-    </a>
-  );
-}

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

@@ -3,9 +3,12 @@ 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;
+interface AutoTextAreaProps extends TextareaProps {
+  isDark?: boolean;
+}
 
+export const AutoTextArea = (props: AutoTextAreaProps) => {
+  const { isDark, ...rest } = props;
   const ref = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -14,7 +17,8 @@ export const AutoTextArea = (props: TextareaProps) => {
     return () => {
       autosize.destroy(node);
     };
-  }, [value]);
+  }, []);
+
 
   return (
     <Textarea
@@ -23,8 +27,8 @@ export const AutoTextArea = (props: TextareaProps) => {
       resize='none'
       ref={ref}
       transition='height none'
-      variant='ontime-transparent'
-      {...props}
+      variant={isDark ? 'ontime-filled' : 'ontime-filled-onlight'}
+      {...rest}
     />
   );
 };

apps/client/src/common/components/input/colour-input/SwatchSelect.module.scss

@@ -1,24 +1,24 @@
+
 .list {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem
+  gap: 4px;
 }
 
 .swatch {
   cursor: pointer;
+  aspect-ratio: 1;
   width: 2rem;
   height: 2rem;
-  aspect-ratio: 1;
-  border-radius: 99px;
-  border: 2px solid $gray-1200;
+  border-radius: 16px;
+  border: 4px solid #262626;
 
   &.selected {
-    border: 2px solid $blue-500;
+    border: 2px solid #578AF4;
   }
 }
 
 .center {
   display: grid;
   place-content: center;
-  color: $ui-white;
-}
+  color: #578AF4;
+}

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

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

apps/client/src/common/components/input/delay-input/DelayInput.module.scss

@@ -1,3 +1,5 @@
+@use '../../../../theme/v2Styles' as *;
+
 $input-font-size: 15px;
 
 .delayInput {

apps/client/src/common/components/input/popover-picker/PopoverPicker.module.scss

@@ -1,16 +0,0 @@
-.swatch {
-  width: 24px;
-  height: 24px;
-  border-radius: 12px;
-  border: 1px solid white;
-  box-shadow: 0 0 0 1px $gray-300;
-  cursor: pointer;
-
-  transition-property: box-shadow;
-  transition-duration: $transition-time-action;
-}
-
-.swatch:hover {
-  box-shadow: 0 0 0 1px $blue-300;
-}
-

apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx

@@ -1,35 +0,0 @@
-import { HexAlphaColorPicker } from 'react-colorful';
-import { useController, UseControllerProps } from 'react-hook-form';
-import { Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react';
-import { ViewSettings } from 'ontime-types';
-
-import style from './PopoverPicker.module.scss';
-
-export function PopoverPickerRHF(props: UseControllerProps<ViewSettings>) {
-  const { name, control } = props;
-  const {
-    field: { onChange, value },
-  } = useController({ control, name });
-
-  return <PopoverPicker color={value as string} onChange={onChange} />;
-}
-
-interface PopoverPickerProps {
-  color: string;
-  onChange: (color: string) => void;
-}
-
-export default function PopoverPicker(props: PopoverPickerProps) {
-  const { color, onChange } = props;
-
-  return (
-    <Popover>
-      <PopoverTrigger>
-        <div className={style.swatch} style={{ backgroundColor: color }} />
-      </PopoverTrigger>
-      <PopoverContent style={{ width: 'auto' }}>
-        <HexAlphaColorPicker color={color} onChange={onChange} />
-      </PopoverContent>
-    </Popover>
-  );
-}

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

@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'react';
 import { Input, Textarea } from '@chakra-ui/react';
 
-import { EventEditorSubmitActions } from '../../../../features/rundown/event-editor/EventEditor';
+import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
 import { Size } from '../../../models/Util.type';
 
 import useReactiveTextInput from './useReactiveTextInput';
@@ -19,11 +19,9 @@ interface TextInputProps extends BaseProps {
   isTextArea?: false;
 }
 
-type ResizeOptions = 'horizontal' | 'vertical' | 'none';
-
 interface TextAreaProps extends BaseProps {
   isTextArea: true;
-  resize?: ResizeOptions;
+  resize?: 'horizontal' | 'vertical' | 'none';
 }
 
 type InputProps = TextInputProps | TextAreaProps;
@@ -37,7 +35,7 @@ export default function TextInput(props: InputProps) {
   const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
   const textAreaProps = useReactiveTextInput(initialText, submitCallback);
 
-  let resize: ResizeOptions = 'none';
+  let resize = 'none';
   if (isTextArea) {
     resize = (props as TextAreaProps)?.resize ?? 'none';
   }

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

@@ -1,4 +1,37 @@
+@use "../../../../theme/v2Styles" as *;
+
+$input-font-size: 15px;
+$input-delayed-border-color: #E69056;
+
 .timeInput {
+  width: fit-content !important;
+
+  .inputLeft {
+    max-width: fit-content;
+  }
+
+  .inputLeft,
+  .inputButton {
+    aspect-ratio: 1;
+  }
+
+  .inputField {
+    font-size: $input-font-size;
     letter-spacing: 1px;
-    width: 6.5em;
+    width: 7.5em;
+    padding: 0 0 0 2.6em;
+  }
+
+  .warn {
+    &::after {
+      content: "*";
+      color: $warning-orange;
+    }
+  }
+
+  &.delayed {
+    .inputField {
+      border: 1px solid $input-delayed-border-color;
+    }
+  }
 }

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

@@ -1,23 +1,28 @@
 import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@chakra-ui/react';
+import { Button, Input, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
 import { millisToString } from 'ontime-utils';
 
+import { tooltipDelayFast } from '../../../../ontimeConfig';
 import { useEmitLog } from '../../../stores/logger';
 import { forgivingStringToMillis } from '../../../utils/dateConfig';
 import { cx } from '../../../utils/styleUtils';
+import { TimeEntryField } from '../../../utils/timesManager';
 
 import style from './TimeInput.module.scss';
-interface TimeInputProps<T extends string> {
-  name: T;
-  submitHandler: (field: T, value: string) => void;
+
+interface TimeInputProps {
+  name: TimeEntryField;
+  submitHandler: (field: TimeEntryField, value: number) => void;
   time?: number;
+  delay?: number;
   placeholder: string;
-  disabled?: boolean;
-  className?: string;
+  validationHandler: (entry: TimeEntryField, val: number) => boolean;
+  previousEnd?: number;
+  warning?: string;
 }
 
-export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
-  const { name, submitHandler, time = 0, placeholder, disabled, className } = props;
+export default function TimeInput(props: TimeInputProps) {
+  const { name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0, warning } = props;
   const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
@@ -53,20 +58,35 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
         return false;
       }
 
-      // we dont know the values in the rundown, escalate to handler
-      if (newValue.startsWith('p') || newValue.startsWith('+')) {
-        submitHandler(name, newValue);
+      let newValMillis = 0;
+
+      // check for known aliases
+      if (newValue === 'p' || newValue === 'prev' || newValue === 'previous') {
+        // string to pass should be the time of the end before
+        if (previousEnd != null) {
+          newValMillis = previousEnd;
+        }
+      } else if (newValue.startsWith('+') || newValue.startsWith('p+') || newValue.startsWith('p +')) {
+        // string to pass should add to the end before
+        const val = newValue.substring(1);
+        newValMillis = previousEnd + forgivingStringToMillis(val);
+      } else {
+        // convert entered value to milliseconds
+        newValMillis = forgivingStringToMillis(newValue);
       }
 
-      const valueInMillis = forgivingStringToMillis(newValue);
-      if (valueInMillis === time) {
-        return false;
-      }
+      // check if time is different from before
+      if (newValMillis === time) return false;
+
+      // validate with parent
+      if (!validationHandler(name, newValMillis)) return false;
+
+      // update entry
+      submitHandler(name, newValMillis);
 
-      submitHandler(name, newValue);
       return true;
     },
-    [name, submitHandler, time],
+    [name, previousEnd, submitHandler, time, validationHandler],
   );
 
   /**
@@ -76,11 +96,15 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
   const validateAndSubmit = useCallback(
     (newValue: string) => {
       const success = handleSubmit(newValue);
-      if (!success) {
+      if (success) {
+        const ms = forgivingStringToMillis(newValue);
+        const delayed = name === 'timeEnd' ? Math.max(0, ms + delay) : Math.max(0, ms + delay);
+        setValue(millisToString(delayed));
+      } else {
         resetValue();
       }
     },
-    [handleSubmit, resetValue],
+    [delay, handleSubmit, name, resetValue],
   );
 
   /**
@@ -118,28 +142,57 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
   useEffect(() => {
     if (time == null) return;
     resetValue();
-  }, [resetValue, time]);
+  }, [emitError, resetValue, time]);
 
-  const timeInputClasses = cx([style.timeInput, className]);
+  const ButtonInitial = () => {
+    if (name === 'timeStart') return 'S';
+    if (name === 'timeEnd') return 'E';
+    if (name === 'durationOverride') return 'D';
+    return '';
+  };
+
+  const ButtonTooltip = () => {
+    if (name === 'timeStart') return `Start${warning ? `: ${warning}` : ''}`;
+    if (name === 'timeEnd') return `End${warning ? `: ${warning}` : ''}`;
+    if (name === 'durationOverride') return `Duration${warning ? `: ${warning}` : ''}`;
+    return '';
+  };
+
+  const isDelayed = delay !== 0;
+  const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
+  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
 
   return (
-    <Input
-      disabled={disabled}
-      size='sm'
-      ref={inputRef}
-      data-testid={`time-input-${name}`}
-      className={timeInputClasses}
-      fontSize='1rem'
-      type='text'
-      placeholder={placeholder}
-      variant='ontime-filled'
-      onFocus={handleFocus}
-      onChange={(event) => setValue(event.target.value)}
-      onBlur={onBlurHandler}
-      onKeyDown={onKeyDownHandler}
-      value={value}
-      maxLength={8}
-      autoComplete='off'
-    />
+    <InputGroup size='sm' className={inputClasses}>
+      <InputLeftElement className={style.inputLeft}>
+        <Tooltip label={ButtonTooltip()} openDelay={tooltipDelayFast} variant='ontime-ondark'>
+          <Button
+            size='sm'
+            variant='ontime-subtle-white'
+            className={buttonClasses}
+            tabIndex={-1}
+            border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
+            borderRight='1px solid transparent'
+            borderRadius='2px 0 0 2px'
+          >
+            {ButtonInitial()}
+          </Button>
+        </Tooltip>
+      </InputLeftElement>
+      <Input
+        ref={inputRef}
+        data-testid='time-input'
+        className={style.inputField}
+        type='text'
+        placeholder={placeholder}
+        variant='ontime-filled'
+        onFocus={handleFocus}
+        onChange={(event) => setValue(event.target.value)}
+        onBlur={onBlurHandler}
+        onKeyDown={onKeyDownHandler}
+        value={value}
+        maxLength={8}
+      />
+    </InputGroup>
   );
 }

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

@@ -1,12 +0,0 @@
-$input-delayed-border-color: $ontime-delay-text;
-
-.timeInput {
-  border: 1px solid transparent;
-  &.delayed {
-    border: 1px solid $input-delayed-border-color;
-  }
-}
-
-.inputField {
-  max-width: 7.75em;
-}

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

@@ -1,40 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { InputGroup, Tooltip } from '@chakra-ui/react';
-
-import { tooltipDelayFast } from '../../../../ontimeConfig';
-import { cx } from '../../../utils/styleUtils';
-
-import TimeInput from './TimeInput';
-
-import style from './TimeInputWithButton.module.scss';
-
-interface TimeInputWithButtonProps<T extends string> {
-  name: T;
-  submitHandler: (field: T, value: string) => void;
-  time?: number;
-  hasDelay?: boolean;
-  disabled?: boolean;
-  placeholder: string;
-}
-
-export default function TimeInputWithButton<T extends string>(props: PropsWithChildren<TimeInputWithButtonProps<T>>) {
-  const { name, submitHandler, time, hasDelay, placeholder, disabled, children } = props;
-
-  const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]);
-
-  return (
-    <InputGroup size='sm' className={inputClasses} width='fit-content'>
-      <Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'>
-        <TimeInput<T>
-          name={name}
-          submitHandler={submitHandler}
-          time={time}
-          placeholder={placeholder}
-          className={style.inputField}
-          disabled={disabled}
-        />
-      </Tooltip>
-      {children}
-    </InputGroup>
-  );
-}

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

@@ -1,48 +0,0 @@
-@use '../../../theme/viewerDefs' as *;
-
-$progress-bar-size: 12px;
-$progress-bar-br: 3px;
-
-.multiprogress-bar {
-  position: relative;
-  width: 100%;
-  height: $progress-bar-size;
-  border-radius: $progress-bar-br;
-  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
-  display: flex;
-  overflow: hidden;
-
-  &--hidden {
-    display: none;
-    transition: display 0.5s;
-  }
-}
-
-.multiprogress-bar__indicator {
-  position: absolute;
-  height: inherit;
-  background-color: black;
-  opacity: 0.8;
-  transition: 1s linear;
-  transition-property: width;
-  right: 0;
-}
-
-.multiprogress-bar__bg-normal {
-  position: absolute;
-  height: inherit;
-  right: 0;
-  width: 100%;
-}
-
-.multiprogress-bar__bg-warning {
-  position: absolute;
-  height: inherit;
-  right: 0;
-}
-
-.multiprogress-bar__bg-danger {
-  position: absolute;
-  height: inherit;
-  right: 0;
-}

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

@@ -1,45 +0,0 @@
-import { MaybeNumber } from 'ontime-types';
-
-import { clamp } from '../../utils/math';
-
-import './MultiPartProgressBar.scss';
-
-interface MultiPartProgressBar {
-  now: MaybeNumber;
-  complete: number;
-  normalColor: string;
-  warning?: MaybeNumber;
-  warningColor: string;
-  danger?: MaybeNumber;
-  dangerColor: string;
-  hidden?: boolean;
-  className?: string;
-}
-
-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 dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
-  const warningWidth = warning ? clamp((warning / complete) * 100, 0, 100) : 0;
-
-  return (
-    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
-      {now !== null && (
-        <>
-          <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-          <div
-            className='multiprogress-bar__bg-warning'
-            style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
-          />
-          <div
-            className='multiprogress-bar__bg-danger'
-            style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
-          />
-          <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
-        </>
-      )}
-    </div>
-  );
-}

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

@@ -1,4 +1,6 @@
-@use '../../../theme/mixins' as *;
+@use "../../../theme/v2Styles" as *;
+@use "../../../theme/mixins" as *;
+@use "../../../theme/ontimeColours" as *;
 
 $menu-bg: $gray-1200;
 $menu-hover-bg: $gray-1350;
@@ -8,27 +10,18 @@ $icon-color: $ui-white;
 $button-bg: $gray-1050;
 $button-size: 48px;
 
-.buttonContainer {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1rem;
-  padding: 0.5em;
-
-  transition-property: opacity;
-  transition-duration: 0.3s;
-
-  opacity: 1;
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 2;
-
-  &.hidden {
-    opacity: 0;
-  }
+.mirror {
+  transform: rotate(180deg);
 }
 
-.button {
+.navButton {
+  z-index: 2;
+  position: absolute;
+  left: 0.5em;
+  top: 0.5em;
+  transition-property: opacity;
+  transition-duration: 0.3s;
+  opacity: 1;
   font-size: 24px;
   color: $icon-color;
   background-color: $button-bg;
@@ -37,11 +30,10 @@ $button-size: 48px;
   display: grid;
   place-content: center;
   border-radius: 3px;
-}
 
-.navButton {
-  @extend .button;
-  z-index: 3;
+  &.hidden {
+    opacity: 0;
+  }
 }
 
 .menuContainer {
@@ -69,6 +61,7 @@ $button-size: 48px;
   @include action-link;
   justify-content: space-between;
   padding: 0.5rem 1rem;
+  cursor: pointer;
 
   &:hover {
     background-color: $menu-hover-bg;

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

@@ -1,41 +1,33 @@
-import { memo, useEffect, useRef, useState } from 'react';
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Link, useLocation, useSearchParams } from 'react-router-dom';
-import { useDisclosure } from '@chakra-ui/react';
+import { Link, useLocation } from 'react-router-dom';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
-import { IoPencilSharp } from '@react-icons/all-files/io5/IoPencilSharp';
 import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
 import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
 import useFullscreen from '../../hooks/useFullscreen';
+import { useKeyDown } from '../../hooks/useKeyDown';
 import { useViewOptionsStore } from '../../stores/viewOptions';
-import { isKeyEnter } from '../../utils/keyEvent';
-
-import RenameClientModal from './rename-client-modal/RenameClientModal';
 
 import style from './NavigationMenu.module.scss';
 
-function NavigationMenu() {
+export default function NavigationMenu() {
   const location = useLocation();
 
   const { isFullScreen, toggleFullScreen } = useFullscreen();
-  const { toggleMirror } = useViewOptionsStore();
+  const { mirror, toggleMirror } = useViewOptionsStore();
   const [showButton, setShowButton] = useState(false);
-  const [searchParams, setSearchParams] = useSearchParams();
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement | null>(null);
-
   useClickOutside(menuRef, () => setShowMenu(false));
 
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
   const toggleMenu = () => setShowMenu((prev) => !prev);
+  useKeyDown(toggleMenu, ' ');
 
-  // show on mouse move
   useEffect(() => {
     let fadeOut: NodeJS.Timeout | null = null;
     const setShowMenuTrue = () => {
@@ -54,91 +46,66 @@ function NavigationMenu() {
     };
   }, []);
 
+  const isKeyEnter = (event: KeyboardEvent<HTMLDivElement>) => event.key === 'Enter';
   const handleFullscreen = () => toggleFullScreen();
   const handleMirror = () => toggleMirror();
 
-  const showEditFormDrawer = () => {
-    searchParams.set('edit', 'true');
-    setSearchParams(searchParams);
-  };
-
   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'>
-            <div className={style.buttonsContainer}>
-              <div
-                className={style.link}
-                tabIndex={0}
-                role='button'
-                onClick={handleFullscreen}
-                onKeyDown={(event) => {
-                  isKeyEnter(event) && handleFullscreen();
-                }}
-              >
-                Toggle Fullscreen
-                {isFullScreen ? <IoContract /> : <IoExpand />}
-              </div>
-              <div
-                className={style.link}
-                tabIndex={0}
-                role='button'
-                onClick={handleMirror}
-                onKeyDown={(event) => {
-                  isKeyEnter(event) && handleMirror();
-                }}
-              >
-                Flip Screen
-                <IoSwapVertical />
-              </div>
-              <div
-                className={style.link}
-                tabIndex={0}
-                role='button'
-                onClick={onOpen}
-                onKeyDown={(event) => {
-                  isKeyEnter(event) && onOpen();
-                }}
-              >
-                Rename Client
-              </div>
-            </div>
-            <hr className={style.separator} />
-            <Link to='/cuesheet' className={style.link} tabIndex={0}>
-              Cuesheet
-              <IoArrowUp className={style.linkIcon} />
-            </Link>
-            <Link to='/op' className={style.link} tabIndex={0}>
-              Operator
-              <IoArrowUp className={style.linkIcon} />
-            </Link>
-            <hr className={style.separator} />
-            {navigatorConstants.map((route) => (
-              <Link
-                key={route.url}
-                to={route.url}
-                className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
-                tabIndex={0}
-              >
-                {route.label}
-                <IoArrowUp className={style.linkIcon} />
-              </Link>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>,
+    <div id='navigation-menu-portal' ref={menuRef} className={mirror ? style.mirror : ''}>
+      <button
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        className={`${style.navButton} ${!showButton && !showMenu ? style.hidden : ''}`}
+      >
+        <IoApps />
+      </button>
 
+      {showMenu && (
+        <div className={style.menuContainer} data-testid='navigation-menu'>
+          <div className={style.buttonsContainer}>
+            <div
+              className={style.link}
+              tabIndex={0}
+              role='button'
+              onClick={handleFullscreen}
+              onKeyDown={(event) => {
+                isKeyEnter(event) && handleFullscreen();
+              }}
+            >
+              Toggle Fullscreen
+              {isFullScreen ? <IoContract /> : <IoExpand />}
+            </div>
+            <div
+              className={style.link}
+              tabIndex={0}
+              role='button'
+              onClick={handleMirror}
+              onKeyDown={(event) => {
+                isKeyEnter(event) && handleMirror();
+              }}
+            >
+              Flip Screen
+              <IoSwapVertical />
+            </div>
+            {/*<div className={style.link} tabIndex={0}>*/}
+            {/*  Rename Client*/}
+            {/*</div>*/}
+          </div>
+          <hr className={style.separator} />
+          {navigatorConstants.map((route) => (
+            <Link
+              key={route.url}
+              to={route.url}
+              className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
+              tabIndex={0}
+            >
+              {route.label}
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>,
     document.body,
   );
 }
-
-export default memo(NavigationMenu);

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

@@ -1,73 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-  Button,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/react';
-
-import { setClientName } from '../../../hooks/useSocket';
-import { useSocketClientName } from '../../../stores/connectionName';
-
-import style from './RenameClientModal.module.scss';
-
-interface RenameClientModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export default function RenameClientModal({ isOpen, onClose }: RenameClientModalProps) {
-  const { name: clientName, persistName } = useSocketClientName();
-  const [newName, setNewName] = useState(clientName);
-
-  useEffect(() => {
-    setNewName(clientName);
-  }, [isOpen, clientName]);
-
-  const handleRename = async () => {
-    if (newName) {
-      setClientName(newName);
-      persistName(newName);
-      onClose();
-    }
-  };
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size='sm'
-      closeOnOverlayClick={false}
-      motionPreset='slideInBottom'
-      scrollBehavior='inside'
-      preserveScrollBarGap
-      variant='ontime-small'
-    >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Rename client</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody className={style.modalBody}>
-          <Input
-            placeholder='Connection must have a name'
-            defaultValue={newName}
-            onChange={(e) => setNewName(e.target.value)}
-            variant='ontime-filled-on-light'
-          />
-          <Button
-            isDisabled={newName === clientName || !newName}
-            onClick={handleRename}
-            width='100%'
-            variant='ontime-filled'
-          >
-            Save
-          </Button>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-}

apps/client/src/common/components/playback-icon/PlaybackIcon.tsx

@@ -1,42 +0,0 @@
-import { Tooltip } from '@chakra-ui/react';
-import { IoPause } from '@react-icons/all-files/io5/IoPause';
-import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
-import { IoStop } from '@react-icons/all-files/io5/IoStop';
-import { Playback } from 'ontime-types';
-
-import { tooltipDelayFast } from '../../../ontimeConfig';
-
-interface PlaybackIconProps {
-  state: Playback;
-  skipTooltip?: boolean;
-  className?: string;
-}
-
-export default function PlaybackIcon(props: PlaybackIconProps) {
-  const { state, skipTooltip, className } = props;
-
-  // if timer is Pause or Armed
-  let label = 'Timer Paused';
-  let Icon = IoPause;
-
-  if (state === Playback.Roll) {
-    label = 'Timer Rolling';
-    Icon = IoPlay;
-  } else if (state === Playback.Play) {
-    label = 'Timer Playing';
-    Icon = IoPlay;
-  } else if (state === Playback.Stop) {
-    label = 'Timer Stopped';
-    Icon = IoStop;
-  }
-
-  if (skipTooltip) {
-    return <Icon className={className} />;
-  }
-
-  return (
-    <Tooltip openDelay={tooltipDelayFast} label={label} shouldWrapChildren>
-      <Icon className={className} />
-    </Tooltip>
-  );
-}

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

@@ -16,8 +16,8 @@ $progress-bar-br: 6px;
 
 .progress-bar__indicator {
   height: $progress-bar-size;
+  border-radius: $progress-bar-br;
   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,64 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { HStack, IconButton, PinInput, PinInputField } from '@chakra-ui/react';
-import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
-
-import style from './ProtectRoute.module.scss';
-
-interface PinPageProps {
-  permission: 'editor' | 'operator';
-  handleValidation: (pin: string) => boolean;
-}
-
-export default function PinPage(props: PinPageProps) {
-  const { permission, handleValidation } = props;
-  const [pin, setPin] = useState('');
-  const [failed, setFailed] = useState(false);
-
-  const validate = useCallback(() => {
-    const isValid = handleValidation(pin);
-    if (!isValid) {
-      setFailed(true);
-      setPin('');
-    }
-  }, [handleValidation, pin]);
-
-  useEffect(() => {
-    const handleKeyPress = (event: KeyboardEvent) => {
-      if (event.repeat) return;
-      if (event.key === 'Enter') {
-        validate();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyPress);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyPress);
-    };
-  }, [validate]);
-
-  return (
-    <div className={style.container}>
-      {`Ontime ${permission || ''}`}
-      <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
-        <PinInput
-          type='alphanumeric'
-          size='lg'
-          mask
-          autoFocus
-          value={pin}
-          onChange={(value) => {
-            setFailed(false);
-            setPin(value);
-          }}
-        >
-          <PinInputField />
-          <PinInputField />
-          <PinInputField />
-          <PinInputField />
-        </PinInput>
-        <IconButton aria-label='Enter' size='lg' isRound icon={<IoCheckmark />} onClick={validate} />
-      </HStack>
-    </div>
-  );
-}

apps/client/src/common/components/protect-route/ProtectRoute.jsx

@@ -0,0 +1,91 @@
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { HStack, IconButton, PinInput, PinInputField } from '@chakra-ui/react';
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+import PropTypes from 'prop-types';
+
+import { AppContext } from '../../context/AppContext';
+
+import style from './ProtectRoute.module.scss';
+
+export default function ProtectRoute({ children }) {
+  const isLocal =
+    window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+  const [pin, setPin] = useState('');
+  const [failed, setFailed] = useState(false);
+  const { auth, validate } = useContext(AppContext);
+
+  const handleValidation = useCallback(() => {
+    const r = validate(pin);
+    if (!r) {
+      setFailed(true);
+      setPin('');
+    }
+  }, [pin, validate]);
+
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime';
+  }, []);
+
+  // Handle keyboard shortcuts
+  const handleKeyPress = useCallback(
+    (e) => {
+      // handle held key
+      if (e.repeat) return;
+      // Space bar
+      if (e.keyCode === 13) {
+        handleValidation();
+      }
+    },
+    [handleValidation]
+  );
+
+  useEffect(() => {
+    // attach the event listener
+    document.addEventListener('keydown', handleKeyPress);
+
+    // remove the event listener
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
+  if (isLocal || auth) {
+    return children;
+  }
+
+  return (
+    <div className={style.container}>
+      ontime
+      <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
+        <PinInput
+          type='alphanumeric'
+          size='lg'
+          mask
+          autoFocus
+          value={pin}
+          onChange={(value) => {
+            setFailed(false);
+            setPin(value);
+          }}
+        >
+          <PinInputField />
+          <PinInputField />
+          <PinInputField />
+          <PinInputField />
+        </PinInput>
+        <IconButton
+          aria-label='Enter'
+          size='lg'
+          isRound
+          icon={<FiCheck />}
+          onClick={() => handleValidation()}
+        />
+      </HStack>
+    </div>
+  );
+}
+
+ProtectRoute.propTypes = {
+  children: PropTypes.node.isRequired,
+};

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

@@ -1,3 +1,5 @@
+@use '../../../theme/v2Styles' as *;
+
 .container {
   display: grid;
   place-content: center;

apps/client/src/common/components/protect-route/ProtectRoute.tsx

@@ -1,38 +0,0 @@
-import { PropsWithChildren, useCallback, useContext } from 'react';
-
-import { AppContext } from '../../context/AppContext';
-
-import PinPage from './PinPage';
-
-interface ProtectRouteProps {
-  permission: 'editor' | 'operator';
-}
-
-export default function ProtectRoute({ permission, children }: PropsWithChildren<ProtectRouteProps>) {
-  const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-  const { editorAuth, operatorAuth, validate } = useContext(AppContext);
-
-  const handleValidation = useCallback(
-    (pin: string) => {
-      return validate(pin, permission);
-    },
-    [permission, validate],
-  );
-
-  const hasRelevantAuth = () => {
-    if (permission === 'editor') {
-      return editorAuth;
-    }
-    if (permission === 'operator') {
-      return operatorAuth;
-    }
-    return false;
-  };
-
-  if (isLocal || hasRelevantAuth()) {
-    // eslint-disable-next-line react/jsx-no-useless-fragment -- trying to make typescript happy
-    return <>{children}</>;
-  }
-
-  return <PinPage permission={permission} handleValidation={handleValidation} />;
-}

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

@@ -1,19 +1,19 @@
+import Empty from '../state/Empty';
+
 import { useSchedule } from './ScheduleContext';
 import ScheduleItem from './ScheduleItem';
 
 import './Schedule.scss';
 
 interface ScheduleProps {
-  isProduction?: boolean;
   className?: string;
 }
 
-export default function Schedule({ isProduction, className }: ScheduleProps) {
-  const { paginatedEvents, selectedEventId, isBackstage, scheduleType } = useSchedule();
+export default function Schedule({ className }: ScheduleProps) {
+  const { paginatedEvents, selectedEventId, isBackstage } = useSchedule();
 
-  // TODO: design a nice placeholder for empty schedules
   if (paginatedEvents?.length < 1) {
-    return null;
+    return <Empty text='No events to show' />;
   }
 
   let selectedState: 'past' | 'now' | 'future' = 'past';
@@ -21,25 +21,17 @@ export default function Schedule({ isProduction, className }: ScheduleProps) {
   return (
     <ul className={`schedule ${className}`}>
       {paginatedEvents.map((event) => {
-        if (scheduleType === 'past' || scheduleType === 'future') {
-          selectedState = scheduleType;
-        } else {
-          if (event.id === selectedEventId) {
-            selectedState = 'now';
-          } else if (selectedState === 'now') {
-            selectedState = 'future';
-          }
+        if (event.id === selectedEventId) {
+          selectedState = 'now';
+        } else if (selectedState === 'now') {
+          selectedState = 'future';
         }
-
-        const timeStart = isProduction ? event.timeStart + (event?.delay ?? 0) : event.timeStart;
-        const timeEnd = isProduction ? event.timeEnd + (event?.delay ?? 0) : event.timeEnd;
-
         return (
           <ScheduleItem
             key={event.id}
             selected={selectedState}
-            timeStart={timeStart}
-            timeEnd={timeEnd}
+            timeStart={event.timeStart}
+            timeEnd={event.timeEnd}
             title={event.title}
             colour={isBackstage ? event.colour : ''}
             backstageEvent={!event.isPublic}

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

@@ -1,15 +1,12 @@
 import { createContext, PropsWithChildren, useContext, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
 import { OntimeEvent } from 'ontime-types';
 
 import { useInterval } from '../../hooks/useInterval';
-import { isStringBoolean } from '../../utils/viewUtils';
 
 interface ScheduleContextState {
   events: OntimeEvent[];
   paginatedEvents: OntimeEvent[];
   selectedEventId: string | null;
-  scheduleType: 'past' | 'now' | 'future';
   numPages: number;
   visiblePage: number;
   isBackstage: boolean;
@@ -21,6 +18,7 @@ interface ScheduleProviderProps {
   events: OntimeEvent[];
   selectedEventId: string | null;
   isBackstage?: boolean;
+  eventsPerPage?: number;
   time?: number;
 }
 
@@ -29,46 +27,19 @@ export const ScheduleProvider = ({
   events,
   selectedEventId,
   isBackstage = false,
+  eventsPerPage = 8,
   time = 10,
 }: PropsWithChildren<ScheduleProviderProps>) => {
   const [visiblePage, setVisiblePage] = useState(0);
-  const [searchParams] = useSearchParams();
 
-  // look for overrides from views
-  const hidePast = isStringBoolean(searchParams.get('hidePast'));
-  const stopCycle = isStringBoolean(searchParams.get('stopCycle'));
-  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? 7);
-
-  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
-
-  const viewEvents = [...events];
-  if (hidePast) {
-    // we want to show the event after the next
-    viewEvents.splice(0, selectedEventIndex + 2);
-    selectedEventIndex = 0;
-  }
-
-  const numPages = Math.ceil(viewEvents.length / eventsPerPage);
+  const numPages = Math.ceil(events.length / eventsPerPage);
   const eventStart = eventsPerPage * visiblePage;
   const eventEnd = eventsPerPage * (visiblePage + 1);
-  const paginatedEvents = viewEvents.slice(eventStart, eventEnd);
-
-  const resolveScheduleType = () => {
-    if (selectedEventIndex >= eventStart && selectedEventIndex < eventEnd) {
-      return 'now';
-    }
-    if (selectedEventIndex > eventEnd) {
-      return 'past';
-    }
-    return 'future';
-  };
-  const scheduleType = resolveScheduleType();
+  const paginatedEvents = events.slice(eventStart, eventEnd);
 
   // every SCROLL_TIME go to the next array
   useInterval(() => {
-    if (stopCycle) {
-      setVisiblePage(0);
-    } else if (events.length > eventsPerPage) {
+    if (events.length > eventsPerPage) {
       const next = (visiblePage + 1) % numPages;
       setVisiblePage(next);
     }
@@ -80,7 +51,6 @@ export const ScheduleProvider = ({
         events,
         paginatedEvents,
         selectedEventId,
-        scheduleType,
         numPages,
         visiblePage,
         isBackstage,

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

@@ -1,13 +1,7 @@
-import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';
 import { formatTime } from '../../utils/time';
 
 import './Schedule.scss';
 
-const formatOptions = {
-  format12: 'hh:mm a',
-  format24: 'HH:mm',
-};
-
 interface ScheduleItemProps {
   selected: 'past' | 'now' | 'future';
   timeStart: number;
@@ -20,10 +14,19 @@ interface ScheduleItemProps {
 }
 
 export default function ScheduleItem(props: ScheduleItemProps) {
-  const { selected, timeStart, timeEnd, title, presenter, backstageEvent, colour, skip } = props;
+  const {
+    selected,
+    timeStart,
+    timeEnd,
+    title,
+    presenter,
+    backstageEvent,
+    colour,
+    skip,
+  } = props;
 
-  const start = formatTime(timeStart, formatOptions);
-  const end = formatTime(timeEnd, formatOptions);
+  const start = formatTime(timeStart, { format: 'hh:mm' });
+  const end = formatTime(timeEnd, { format: 'hh:mm' });
   const userColour = colour !== '' ? colour : '';
   const selectStyle = `entry--${selected}`;
 
@@ -31,15 +34,12 @@ export default function ScheduleItem(props: ScheduleItemProps) {
     <li className={`entry ${selectStyle} ${skip ? 'skip' : ''}`}>
       <div className='entry-times'>
         <span className='entry-colour' style={{ backgroundColor: userColour }} />
-        <div style={{ display: 'flex' }}>
-          <SuperscriptTime time={start} />
-          {' → '}
-          <SuperscriptTime time={end} />
-          {backstageEvent ? '*' : ''}
-        </div>
+        {`${start} → ${end} ${backstageEvent ? '*' : ''}`}
       </div>
       <div className='entry-title'>{title}</div>
-      {presenter && <div className='entry-presenter'>{presenter}</div>}
+      {presenter && (
+        <div className='entry-presenter'>{presenter}</div>
+      )}
     </li>
   );
 }

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

@@ -13,11 +13,12 @@ export default function ScheduleNav({ className }: ScheduleNavProps) {
     <div className={`schedule-nav ${className}`}>
       {numPages > 1 &&
         [...Array(numPages).keys()].map((i) => (
-          <div
-            key={i}
-            className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
-          />
-        ))}
+            <div
+              key={i}
+              className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
+            />
+          ),
+        )}
     </div>
   );
 }

apps/client/src/common/components/state/Empty.module.scss

@@ -1,3 +1,5 @@
+@use '../../../theme/ontimeColours' as *;
+
 .emptyContainer {
   width: 100%;
   text-align: center;

apps/client/src/common/components/state/Empty.tsx

@@ -1,6 +1,5 @@
 import { CSSProperties } from 'react';
-
-import EmptyImage from '../../../assets/images/empty.svg?react';
+import { ReactComponent as Emptyimage } from '@/assets/images/empty.svg';
 
 import style from './Empty.module.scss';
 
@@ -13,7 +12,7 @@ export default function Empty(props: EmptyProps) {
   const { text, ...rest } = props;
   return (
     <div className={style.emptyContainer} {...rest}>
-      <EmptyImage className={style.empty} />
+      <Emptyimage className={style.empty} />
       <span className={style.text}>{text}</span>
     </div>
   );

apps/client/src/common/components/timer-display/TimerDisplay.scss

@@ -1,20 +1,15 @@
-@use '../../../../theme/viewerDefs' as *;
+@use '../../../theme/viewerDefs' as *;
 
 .timer {
-  grid-area: clk;
-  white-space: nowrap;
-  max-width: 18.75rem;
-
-
   font-family: var(--font-family-override, $viewer-font-family);
   color: var(--timer-color-override, $timer-color);
   line-height: 0.9em;
   text-align: center;
   letter-spacing: 0.1em;
   font-weight: 600;
-  font-size: 3.5rem;
+  font-size: 3.75em;
   
-  &.finished {
+  &--finished {
     color: $timer-finished-color;
   }
 }

apps/client/src/common/components/timer-display/TimerDisplay.tsx

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+
+import { formatDisplay } from '../../utils/dateConfig';
+
+import './TimerDisplay.scss';
+
+interface TimerDisplayProps {
+  time?: number | null;
+}
+
+/**
+ * Displays time in ms in formatted timetag
+ * @param props
+ * @constructor
+ */
+const TimerDisplay = (props: TimerDisplayProps) => {
+  const { time } = props;
+
+  let display = '';
+
+  if (time === null || typeof time === 'undefined' || isNaN(time)) {
+    display = '-- : -- : --';
+  } else {
+    display = formatDisplay(time);
+  }
+
+  const isNegative = (time ?? 0) < 0;
+
+  const classes = `timer ${isNegative ? 'timer--finished' : ''}`;
+
+  return <div className={classes}>{display}</div>;
+};
+
+export default memo(TimerDisplay);

apps/client/src/common/components/title-card/TitleCard.tsx

@@ -4,9 +4,9 @@ import './TitleCard.scss';
 
 interface TitleCardProps {
   label: 'now' | 'next';
-  title: string | null;
-  subtitle: string | null;
-  presenter: string | null;
+  title: string;
+  subtitle: string;
+  presenter: string;
 }
 
 export default function TitleCard(props: TitleCardProps) {

apps/client/src/common/components/upload-modal/UploadModal.module.scss

@@ -0,0 +1,45 @@
+@use '../../../theme/v2Styles' as *;
+
+.modalBody {
+  min-height: 40vh;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .options {
+    margin-bottom: 1.5em;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .notes {
+    font-size: 0.9em;
+  }
+
+  .info {
+    background-color: $bg-container-onlight;
+    margin: 1em 0;
+    padding: 0.5em;
+    border-radius: 2px;
+    color: $text-black;
+    position: relative;
+  }
+
+  .corner {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+  }
+
+  .infoList {
+    font-size: 0.9em;
+    padding-left: 8px;
+  }
+
+  .flexColumnLeft {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

apps/client/src/common/components/upload-modal/UploadModal.tsx

@@ -0,0 +1,137 @@
+import { ChangeEvent, useCallback, useRef, useState } from 'react';
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Progress,
+} from '@chakra-ui/react';
+import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { RUNDOWN_TABLE } from '../../api/apiConstants';
+import { uploadData } from '../../api/ontimeApi';
+import { useEmitLog } from '../../stores/logger';
+import TooltipActionBtn from '../buttons/TooltipActionBtn';
+
+import { validateFile } from './utils';
+
+import style from './UploadModal.module.scss';
+
+interface UploadModalProps {
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
+  const queryClient = useQueryClient();
+  const { emitError } = useEmitLog();
+  const [errors, setErrors] = useState<string[]>([]);
+  const [file, setFile] = useState<File | null>(null);
+  const [progress, setProgress] = useState(0);
+  const overrideOptionRef = useRef<HTMLInputElement>(null);
+
+  const handleFile = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    const fileUploaded = event?.target?.files?.[0];
+    if (!fileUploaded) return;
+
+    const validate = validateFile(fileUploaded);
+    setErrors(validate.errors);
+
+    if (validate.isValid) {
+      setFile(fileUploaded);
+    } else {
+      setFile(null);
+    }
+  }, []);
+
+  const handleUpload = useCallback(async () => {
+    if (file) {
+      try {
+        await uploadData(file, setProgress, { onlyEvents: overrideOptionRef?.current?.checked });
+      } catch (error) {
+        emitError(`Failed uploading file: ${error}`);
+      } finally {
+        await queryClient.invalidateQueries(RUNDOWN_TABLE);
+        setFile(null);
+      }
+    }
+  }, [emitError, file, queryClient]);
+
+  return (
+    <Modal
+      onClose={onClose}
+      isOpen={isOpen}
+      closeOnOverlayClick={false}
+      motionPreset='slideInBottom'
+      size='xl'
+      scrollBehavior='inside'
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>File upload</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody className={style.modalBody}>
+          <FormControl isInvalid={errors.length > 0}>
+            <FormLabel>Select file to upload</FormLabel>
+            <Input type='file' onChange={handleFile} accept='.json, .xlsx' />
+            {errors.length === 0 ? (
+              <FormHelperText>.XLSX .JSON with max 1MB</FormHelperText>
+            ) : (
+              <FormErrorMessage className={style.flexColumnLeft}>
+                {errors.map((error) => (
+                  <span key={error}>{error}</span>
+                ))}
+              </FormErrorMessage>
+            )}
+          </FormControl>
+          <div className={style.options}>
+            <b>Options</b>
+            <Checkbox ref={overrideOptionRef}>Import only events</Checkbox>
+            <span className={style.notes}>This will prevent overriding user settings</span>
+          </div>
+          {file && (
+            <div className={style.info}>
+              <span>File ready to upload</span>
+              <TooltipActionBtn
+                clickHandler={() => setFile(null)}
+                tooltip='Cancel'
+                aria-label='Cancel'
+                className={style.corner}
+                size='sm'
+                variant='ghosted'
+                icon={<IoCloseSharp />}
+              />
+              <ul className={style.infoList}>
+                <li>{file.name}</li>
+                <li>{`${(file.size / 1024).toFixed(2)}kb`}</li>
+                <li>{file.type}</li>
+              </ul>
+            </div>
+          )}
+          <Progress value={progress} />
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            colorScheme='blue'
+            disabled={!file || errors.length > 0}
+            onClick={handleUpload}
+            isLoading={progress < 0 && progress >= 100}
+          >
+            Upload
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

apps/client/src/common/components/upload-modal/utils.ts

@@ -0,0 +1,25 @@
+type ValidationStatus = {
+  errors: string[];
+  isValid: boolean;
+};
+
+export function validateFile(file: File): ValidationStatus {
+  const status:ValidationStatus = { errors: [], isValid: true };
+  if (!file) {
+    status.errors.push('No file to upload');
+    status.isValid = false;
+  }
+
+  // Limit file size to 1MB
+  if (file.size > 1000000) {
+    status.errors.push('File size limit (1MB) exceeded');
+    status.isValid = false;
+  }
+
+  // Check file extension
+  if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.json')) {
+    status.errors.push('Unhandled file type');
+    status.isValid = false;
+  }
+  return status;
+}

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

@@ -1,72 +0,0 @@
-import { useSearchParams } from 'react-router-dom';
-import { Input, InputGroup, InputLeftElement, Select, Switch } from '@chakra-ui/react';
-
-import { isStringBoolean } from '../../utils/viewUtils';
-
-import { ParamField } from './types';
-
-interface EditFormInputProps {
-  paramField: ParamField;
-}
-
-export default function ParamInput(props: EditFormInputProps) {
-  const [searchParams] = useSearchParams();
-  const { paramField } = props;
-  const { id, type, defaultValue } = paramField;
-
-  if (type === 'option') {
-    const optionFromParams = searchParams.get(id);
-    const defaultOptionValue = optionFromParams || defaultValue;
-
-    return (
-      <Select
-        placeholder={defaultValue ? undefined : 'Select an option'}
-        variant='ontime'
-        name={id}
-        defaultValue={defaultOptionValue}
-      >
-        {Object.entries(paramField.values).map(([key, value]) => (
-          <option key={key} value={key}>
-            {value}
-          </option>
-        ))}
-      </Select>
-    );
-  }
-
-  if (type === 'boolean') {
-    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) || defaultValue;
-
-    // checked value should be 'true', so it can be captured by the form event
-    return <Switch variant='ontime' name={id} defaultChecked={defaultCheckedValue} value='true' />;
-  }
-
-  if (type === 'number') {
-    const { prefix, placeholder } = paramField;
-    const defaultNumberValue = searchParams.get(id) ?? defaultValue;
-
-    return (
-      <InputGroup variant='ontime-filled'>
-        {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
-        <Input
-          type='number'
-          step='any'
-          variant='ontime-filled'
-          name={id}
-          defaultValue={defaultNumberValue}
-          placeholder={placeholder}
-        />
-      </InputGroup>
-    );
-  }
-
-  const defaultStringValue = searchParams.get(id) ?? defaultValue;
-  const { prefix, placeholder } = paramField;
-
-  return (
-    <InputGroup variant='ontime-filled'>
-      {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
-      <Input name={id} defaultValue={defaultStringValue} placeholder={placeholder} />
-    </InputGroup>
-  );
-}

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

@@ -1,48 +0,0 @@
-.drawerContent {
-  background-color: $gray-1250;
-}
-
-.drawerHeader {
-  @extend .drawerContent;
-  color: $section-white;
-}
-
-.drawerFooter {
-  @extend .drawerContent;
-  display: flex;
-  justify-content: start;
-  gap: $element-spacing;
-
-  button[type='reset'] {
-    padding: 0 2em;
-    margin-right: auto;
-  }
-
-  button[type='submit'] {
-    padding: 0 2em;
-  }
-}
-
-.label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-}
-
-.columnSection {
-  display: flex;
-  padding: $element-spacing;
-  flex-direction: column;
-  gap: $element-inner-spacing;
-}
-
-.title {
-  font-size: $inner-section-text-size;
-  display: block;
-  width: 100%;
-}
-
-.description {
-  font-size: $inner-section-text-size;
-  display: block;
-  color: $modal-note-color;
-}

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

@@ -1,141 +0,0 @@
-import { FormEvent, useEffect } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
-import {
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  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>;
-
-const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
-  const defaultValues = paramFields.reduce<Record<string, string>>((acc, { id, defaultValue }) => {
-    return { ...acc, [id]: String(defaultValue) };
-  }, {});
-  return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
-    if (typeof value === 'string' && value.length) {
-      if (defaultValues[id] === value) {
-        return newSearchParams;
-      }
-      newSearchParams.set(id, value);
-
-      return newSearchParams;
-    }
-
-    return newSearchParams;
-  }, new URLSearchParams());
-};
-
-interface EditFormDrawerProps {
-  paramFields: ParamField[];
-}
-
-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');
-
-    if (isEditing === 'true') {
-      return onOpen();
-    }
-  }, [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();
-
-    searchParams.delete('edit');
-    setSearchParams(searchParams);
-  };
-
-  const resetParams = () => {
-    setStoredViewParams({ ...storedViewParams, [pathname]: {} });
-    setSearchParams();
-  };
-
-  const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
-    formEvent.preventDefault();
-
-    const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
-    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
-
-    setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject });
-    setSearchParams(newSearchParams);
-  };
-
-  return (
-    <Drawer isOpen={isOpen} placement='right' onClose={onCloseWithoutSaving} size='lg'>
-      <DrawerOverlay />
-      <DrawerContent>
-        <DrawerHeader className={style.drawerHeader}>
-          <DrawerCloseButton _hover={{ bg: '#ebedf0', color: '#333' }} size='lg' />
-          Customise
-        </DrawerHeader>
-
-        <DrawerBody className={style.drawerContent}>
-          <form id='edit-params-form' onSubmit={onParamsFormSubmit}>
-            {paramFields.map((field) => (
-              <div key={field.title} className={style.columnSection}>
-                <label className={style.label}>
-                  <span className={style.title}>{field.title}</span>
-                  <span className={style.description}>{field.description}</span>
-                  <ParamInput key={field.title} paramField={field} />
-                </label>
-              </div>
-            ))}
-          </form>
-        </DrawerBody>
-
-        <DrawerFooter className={style.drawerFooter}>
-          <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
-            Reset
-          </Button>
-          <Button variant='ontime-subtle' onClick={onCloseWithoutSaving}>
-            Cancel
-          </Button>
-          <Button variant='ontime-filled' form='edit-params-form' type='submit'>
-            Save
-          </Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  );
-}

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

@@ -1,467 +0,0 @@
-import { UserFields } from 'ontime-types';
-
-import { ParamField } from './types';
-
-const getTimeOption = (timeFormat: string): ParamField => {
-  const placeholder = `${timeFormat} (default)`;
-  return {
-    id: 'timeformat',
-    title: 'Time format string, taken from the Application Settings',
-    description: 'Format for auxiliar time fields (not the running), eg. HH:mm:ss or hh:mm:ss a, see docs for help',
-    type: 'string',
-    placeholder,
-  };
-};
-
-const hideTimerSeconds: ParamField = {
-  id: 'hideTimerSeconds',
-  title: 'Hide seconds in timer',
-  description: 'Whether to hide seconds in the running timer',
-  type: 'boolean',
-  defaultValue: false,
-};
-
-export const getClockOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  {
-    id: 'key',
-    title: 'Key Colour',
-    description: 'Background colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'text',
-    title: 'Text Colour',
-    description: 'Text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'fffff (default)',
-  },
-  {
-    id: 'textbg',
-    title: 'Text Background',
-    description: 'Colour of text background in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'font',
-    title: 'Font',
-    description: 'Font family, will use the fonts available in the system',
-    type: 'string',
-    placeholder: 'Arial Black (default)',
-  },
-  {
-    id: 'size',
-    title: 'Text Size',
-    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
-    type: 'number',
-    placeholder: '1 (default)',
-  },
-  {
-    id: 'alignx',
-    title: 'Align Horizontal',
-    description: 'Moves the horizontally in page to start = left | center | end = right',
-    type: 'option',
-    values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
-  },
-  {
-    id: 'offsetx',
-    title: 'Offset Horizontal',
-    description: 'Offsets the timer horizontal position by a given amount in pixels',
-    type: 'number',
-    placeholder: '0 (default)',
-  },
-  {
-    id: 'aligny',
-    title: 'Align Vertical',
-    description: 'Moves the vertically in page to start = left | center | end = right',
-    type: 'option',
-    values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
-  },
-  {
-    id: 'offsety',
-    title: 'Offset Vertical',
-    description: 'Offsets the timer vertical position by a given amount in pixels',
-    type: 'number',
-    placeholder: '0 (default)',
-  },
-];
-
-export const getTimerOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  hideTimerSeconds,
-  {
-    id: 'hideClock',
-    title: 'Hide Time Now',
-    description: 'Hides the Time Now field',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideCards',
-    title: 'Hide Cards',
-    description: 'Hides the Now and Next cards',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideProgress',
-    title: 'Hide progress bar',
-    description: 'Hides the progress bar',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideMessage',
-    title: 'Hide Presenter Message',
-    description: 'Prevents the screen from displaying messages from the presenter',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideExternal',
-    title: 'Hide External',
-    description: 'Prevents the screen from displaying the external field',
-    type: 'boolean',
-    defaultValue: false,
-  },
-];
-
-export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
-  hideTimerSeconds,
-  {
-    id: 'key',
-    title: 'Key Colour',
-    description: 'Background colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'text',
-    title: 'Text Colour',
-    description: 'Text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'fffff (default)',
-  },
-  {
-    id: 'textbg',
-    title: 'Text Background',
-    description: 'Colour of text background in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'font',
-    title: 'Font',
-    description: 'Font family, will use the fonts available in the system',
-    type: 'string',
-    placeholder: 'Arial Black (default)',
-  },
-  {
-    id: 'size',
-    title: 'Text Size',
-    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
-    type: 'number',
-    placeholder: '1 (default)',
-  },
-  {
-    id: 'alignx',
-    title: 'Align Horizontal',
-    description: 'Moves the horizontally in page to start = left | center | end = right',
-    type: 'option',
-    values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
-  },
-  {
-    id: 'offsetx',
-    title: 'Offset Horizontal',
-    description: 'Offsets the timer horizontal position by a given amount in pixels',
-    type: 'number',
-    placeholder: '0 (default)',
-  },
-  {
-    id: 'aligny',
-    title: 'Align Vertical',
-    description: 'Moves the vertically in page to start = left | center | end = right',
-    type: 'option',
-    values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
-  },
-  {
-    id: 'offsety',
-    title: 'Offset Vertical',
-    description: 'Offsets the timer vertical position by a given amount in pixels',
-    type: 'number',
-    placeholder: '0 (default)',
-  },
-  {
-    id: 'hideovertime',
-    title: 'Hide Overtime',
-    description: 'Whether to suppress overtime styles (red borders and red text)',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hidemessages',
-    title: 'Hide Message Overlay',
-    description: 'Whether to hide the overlay from showing timer screen messages',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideendmessage',
-    title: 'Hide End Message',
-    description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
-    type: 'boolean',
-    defaultValue: false,
-  },
-];
-
-export const LOWER_THIRD_OPTIONS: ParamField[] = [
-  {
-    id: 'trigger',
-    title: 'Animation Trigger',
-    description: '',
-    type: 'option',
-    values: {
-      event: 'Event Load',
-      manual: 'Manual',
-    },
-    defaultValue: 'event',
-  },
-  {
-    id: 'top-src',
-    title: 'Top Text',
-    description: '',
-    type: 'option',
-    values: {
-      title: 'Title',
-      subtitle: 'Subtitle',
-      presenter: 'Presenter',
-      lowerMsg: 'Lower Thrid Message',
-    },
-    defaultValue: 'title',
-  },
-  {
-    id: 'bottom-src',
-    title: 'Bottom Text',
-    description: 'Select the text source for the bottom element',
-    type: 'option',
-    values: {
-      title: 'Title',
-      subtitle: 'Subtitle',
-      presenter: 'Presenter',
-      lowerMsg: 'Lower Thrid Message',
-    },
-    defaultValue: 'subtitle',
-  },
-  {
-    id: 'top-colour',
-    title: 'Top Text Colour',
-    description: 'Top text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '0000ff (default)',
-  },
-  {
-    id: 'bottom-colour',
-    title: 'Bottom Text Colour',
-    description: 'Bottom text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '0000ff (default)',
-  },
-  {
-    id: 'top-bg',
-    title: 'Top Background Colour',
-    description: 'Top text background colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'bottom-bg',
-    title: 'Bottom Background Colour',
-    description: 'Bottom text background colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'top-size',
-    title: 'Top Text Size',
-    description: 'Font size of the top text',
-    type: 'string',
-    placeholder: '65px',
-  },
-  {
-    id: 'bottom-size',
-    title: 'Bottom Text Size',
-    description: 'Font size of the bottom text',
-    type: 'string',
-    placeholder: '64px',
-  },
-  {
-    id: 'width',
-    title: 'Minimum Width',
-    description: 'Minimum Width of the element',
-    type: 'number',
-    prefix: '%',
-    placeholder: '45 (default)',
-  },
-  {
-    id: 'transition',
-    title: 'Transition',
-    description: 'Transition in time in seconds (default 3)',
-    type: 'number',
-    placeholder: '3 (default)',
-  },
-  {
-    id: 'delay',
-    title: 'Delay',
-    description: 'Delay between transition in and out in seconds (default 3)',
-    type: 'number',
-    placeholder: '3 (default)',
-  },
-  {
-    id: 'key',
-    title: 'Key Colour',
-    description: 'Colour of the background',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'ffffffff (default)',
-  },
-  {
-    id: 'line-colour',
-    title: 'Line Colour',
-    description: 'Colour of the line',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'ff0000ff (default)',
-  },
-];
-
-export const getBackstageOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  {
-    id: 'hidePast',
-    title: 'Hide past events',
-    description: 'Scheduler will only show upcoming events',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'stopCycle',
-    title: 'Stop cycling through event pages',
-    description: 'Schedule will not auto-cycle through events',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'eventsPerPage',
-    title: 'Events per page',
-    description: 'Sets the number of events on the page, can cause overlow',
-    type: 'number',
-    placeholder: '7 (default)',
-  },
-];
-
-export const getPublicOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  {
-    id: 'hidePast',
-    title: 'Hide past events',
-    description: 'Scheduler will only show upcoming events',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'stopCycle',
-    title: 'Stop cycling through event pages',
-    description: 'Schedule will not auto-cycle through events',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'eventsPerPage',
-    title: 'Events per page',
-    description: 'Sets the number of events on the page, can cause overlow',
-    type: 'number',
-    placeholder: '7 (default)',
-  },
-];
-export const getStudioClockOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  hideTimerSeconds,
-];
-
-export const getOperatorOptions = (userFields: UserFields, timeFormat: string): ParamField[] => {
-  return [
-    getTimeOption(timeFormat),
-    {
-      id: 'hidepast',
-      title: 'Hide Past Events',
-      description: 'Whether to events that have passed',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'main',
-      title: 'Main data field',
-      description: 'Field to be shown in the first line of text',
-      type: 'option',
-      values: {
-        title: 'Title',
-        subtitle: 'Subtitle',
-        presenter: 'Presenter',
-      },
-    },
-    {
-      id: 'secondary',
-      title: 'Secondary data field',
-      description: 'Field to be shown in the second line of text',
-      type: 'option',
-      values: {
-        title: 'Title',
-        subtitle: 'Subtitle',
-        presenter: 'Presenter',
-      },
-    },
-    {
-      id: 'subscribe',
-      title: 'Highlight Field',
-      description: 'Choose a field to highlight',
-      type: 'option',
-      values: {
-        user0: userFields.user0 || 'user0',
-        user1: userFields.user1 || 'user1',
-        user2: userFields.user2 || 'user2',
-        user3: userFields.user3 || 'user3',
-        user4: userFields.user4 || 'user4',
-        user5: userFields.user5 || 'user5',
-        user6: userFields.user6 || 'user6',
-        user7: userFields.user7 || 'user7',
-        user8: userFields.user8 || 'user8',
-        user9: userFields.user9 || 'user9',
-      },
-    },
-    {
-      id: 'shouldEdit',
-      title: 'Edit user field',
-      description: 'Allows editing an events user field by long pressing on it. Needs a selected highlighted field',
-      type: 'boolean',
-      defaultValue: false,
-    },
-  ];
-};
-
-export const getCountdownOptions = (timeFormat: string): ParamField[] => [getTimeOption(timeFormat), hideTimerSeconds];

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

@@ -1,16 +0,0 @@
-type BaseField = {
-  id: string;
-  title: string;
-  description: string;
-};
-
-type OptionsField = {
-  type: 'option';
-  values: Record<string, string>;
-  defaultValue?: string;
-};
-type StringField = { type: 'string'; defaultValue?: string; prefix?: string; placeholder?: string };
-type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
-type BooleanField = { type: 'boolean'; defaultValue: boolean };
-
-export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);

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

@@ -0,0 +1,54 @@
+import { createContext, useCallback, useEffect, useState } from 'react';
+
+import useSettings from '../hooks-query/useSettings';
+
+export const AppContext = createContext({
+  auth: false,
+  data: {
+    pinCode: null,
+  },
+});
+
+export const AppContextProvider = ({ children }) => {
+  const [auth, setAuth] = useState(true);
+  const { data } = useSettings();
+
+  useEffect(() => {
+    if (data == null) return;
+    const previousEntry = sessionStorage.getItem('ontime-entry');
+    if (previousEntry) {
+      if (previousEntry === data?.pinCode) {
+        setAuth(true);
+      } else {
+        sessionStorage.removeItem('ontime-entry');
+      }
+    } else if (data?.pinCode == null || data?.pinCode === '') {
+      setAuth(true);
+    } else {
+      setAuth(false);
+    }
+  }, [data]);
+
+  /**
+   * Validates a pincode
+   * @return boolean - whether the pin is valid
+   */
+  const validate = useCallback(
+    (pin) => {
+      let correct;
+      if (data?.pinCode == null || data?.pinCode === '') {
+        correct = true;
+      } else {
+        correct = pin === data?.pinCode;
+      }
+      if (correct) {
+        sessionStorage.setItem('ontime-entry', pin);
+      }
+      setAuth(correct);
+      return correct;
+    },
+    [data],
+  );
+
+  return <AppContext.Provider value={{ auth, validate }}>{children}</AppContext.Provider>;
+};

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

@@ -1,81 +0,0 @@
-import { createContext, PropsWithChildren, useCallback, useEffect, useState } from 'react';
-
-import useSettings from '../hooks-query/useSettings';
-
-interface AppContextType {
-  editorAuth: boolean;
-  operatorAuth: boolean;
-  validate: (pin: string, permission: 'editor' | 'operator') => boolean;
-}
-
-export const AppContext = createContext<AppContextType>({
-  editorAuth: false,
-  operatorAuth: false,
-  validate: () => false,
-});
-
-const storageKeys = {
-  editor: 'ontime-editor-entry',
-  operator: 'ontime-operator-entry',
-};
-
-export const AppContextProvider = ({ children }: PropsWithChildren) => {
-  const { status, data } = useSettings();
-  const [editorAuth, setEditorAuth] = useState(true);
-  const [operatorAuth, setOperatorAuth] = useState(true);
-
-  useEffect(() => {
-    if (status === 'pending') return;
-    if (!data) return;
-    const previousEditor = sessionStorage.getItem(storageKeys.editor);
-
-    if (previousEditor && previousEditor === data.editorKey) {
-      setEditorAuth(true);
-    } else {
-      setEditorAuth(data.editorKey == null || data.editorKey === '');
-    }
-
-    const previousOperator = sessionStorage.getItem(storageKeys.operator);
-    if (previousOperator && previousOperator === data.operatorKey) {
-      setOperatorAuth(true);
-    } else {
-      setOperatorAuth(data.operatorKey == null || data.operatorKey === '');
-    }
-  }, [data, status]);
-
-  /**
-   * Validates a pincode
-   * @return boolean - whether the pin is valid
-   */
-  const validate = useCallback(
-    (pin: string, permission: 'editor' | 'operator'): boolean => {
-      function isValid(pin: string, savedPin?: string | null): boolean {
-        return savedPin == null || savedPin === '' || pin === savedPin;
-      }
-
-      if (!data) {
-        return false;
-      }
-
-      if (permission === 'editor') {
-        const correct = isValid(pin, data.editorKey);
-        if (correct) {
-          sessionStorage.setItem(storageKeys.editor, pin);
-        }
-        setEditorAuth(correct);
-        return correct;
-      } else if (permission === 'operator') {
-        const correct = isValid(pin, data.operatorKey);
-        if (correct) {
-          sessionStorage.setItem(storageKeys.operator, pin);
-        }
-        setOperatorAuth(correct);
-        return correct;
-      }
-      return false;
-    },
-    [data],
-  );
-
-  return <AppContext.Provider value={{ editorAuth, operatorAuth, validate }}>{children}</AppContext.Provider>;
-};

apps/client/src/common/context/TableSettingsContext.jsx

@@ -0,0 +1,79 @@
+import { createContext, useCallback, useState } from 'react';
+
+import { useLocalStorage } from '../hooks/useLocalStorage';
+
+export const TableSettingsContext = createContext({
+  theme: '',
+  showSettings: false,
+  followSelected: false,
+
+  toggleSettings: () => undefined,
+  toggleTheme: () => undefined,
+  toggleFollow: () => undefined,
+});
+
+export const TableSettingsProvider = ({ children }) => {
+  const [theme, setTheme] = useLocalStorage('table-color-theme', 'dark');
+  const [followSelected, setFollowSelected] = useLocalStorage('table-follow-selected', false);
+  const [showSettings, setShowSettings] = useState(false);
+
+  /**
+   * @description Toggles the current value of dark mode
+   * @param {string} val - 'light' or 'dark'
+   */
+  const toggleTheme = useCallback(
+    (val) => {
+      if (val === undefined) {
+        setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
+      } else {
+        setTheme(val);
+      }
+    },
+    [setTheme]
+  );
+
+  /**
+   * @description Toggles visibility state for settings
+   * @param {boolean} val - whether the settings window is visible
+   */
+  const toggleSettings = useCallback(
+    (val) => {
+      if (val === undefined) {
+        setShowSettings((prev) => !prev);
+      } else {
+        setShowSettings(val);
+      }
+    },
+    [setShowSettings]
+  );
+
+  /**
+   * @description Toggles follow option
+   * @param {boolean} val - whether the window follows selected event
+   */
+  const toggleFollow = useCallback(
+    (val) => {
+      if (val === undefined) {
+        setFollowSelected((prev) => !prev);
+      } else {
+        setFollowSelected(val);
+      }
+    },
+    [setFollowSelected]
+  );
+
+  return (
+    <TableSettingsContext.Provider
+      value={{
+        theme,
+        showSettings,
+        followSelected,
+        toggleSettings,
+        toggleTheme,
+        toggleFollow,
+      }}
+    >
+      {children}
+    </TableSettingsContext.Provider>
+  );
+};