fix: sentry hangs node process

* style: labels on added time

* style: remove mentions of PiP

* refactor: unify usage of ms for timers

* refactor: create events with 0 duration

* style: several small tweaks

* refactor: keep block when applying delays

* feat: blocks have titles

* style: improvements in time entry warnings

* style: override progress bar styles

* style: prevent overflow

* feat: show character count in editor

* refactor: provide initial payload

* refactor: lower test boundary

* refactor: get colour from swatches

* style: rename title block

* chore: version bump

.deepsource.toml

@@ -3,7 +3,6 @@ version = 1
 test_patterns = [
   "__mocks__/**",
   "__tests__/**",
-  "cypress/**",
   "*.test.*",
   "*.mock.*",
   "*.spec.*"

.eslintrc

@@ -9,26 +9,11 @@
   "extends": [
     "eslint:recommended"
   ],
-  "rules": {
-    // disallow certain object properties
-    // https://eslint.org/docs/rules/no-restricted-properties
-    "no-restricted-properties": [
-      "error",
-      {
-        "object": "global",
-        "property": "isNaN",
-        "message": "Please use Number.isNaN instead"
-      },
-      {
-        "object": "self",
-        "property": "isNaN",
-        "message": "Please use Number.isNaN instead"
-      },
-      {
-        "object": "window",
-        "property": "isNaN",
-        "message": "Please use Number.isNaN instead"
-      }
-    ]
-  }
+  "overrides": [
+    {
+      "files": ["e2e/**/**.spec.ts", "e2e/**/**.test.ts"],
+      "extends": ["plugin:playwright/playwright-test"]
+    }
+  ],
+  "rules": {}
 }

.github/workflows/build.yml

@@ -2,14 +2,12 @@ name: Ontime build
 
 on:
   push:
-    # run when a tag is created
-    tags:
-      - '*'
+    tags: [ "v1.*.*" ]
   workflow_dispatch:
 
 jobs:
   build_mac:
-    runs-on: macOS-latest
+    runs-on: macos-latest
     timeout-minutes: 20
     env:
       CI: ''
@@ -138,53 +136,4 @@ jobs:
         with:
           files: ./server/dist/ontime-linux.AppImage
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  publish_docker:
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Setup env
-        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install --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
-
-      # Login to docker
-      - name: Login to Docker Hub
-        uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      
-      # Prepare builder
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
-
-      # Build and push
-      - name: Build and push
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/build_docker_v2.yml

@@ -0,0 +1,56 @@
+name: Docker Image CI Ontime V2
+
+on:
+  push:
+    tags: [ "v2.*.*" ]
+  workflow_dispatch:
+
+jobs:
+
+  publish_docker:
+    runs-on: ubuntu-latest
+    env:
+      CI: ''
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Setup env
+      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+      
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v3.6.0
+      with:
+        version: 16.16.0
+        
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v2.2.4
+      with:
+        version: 7.26.3
+          
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Build project packages
+      env:
+        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      run: pnpm turbo build:docker
+        
+    - name: Docker Login
+      uses: docker/login-action@v2.1.0
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+    - name: Docker Setup Buildx
+      uses: docker/setup-buildx-action@v2.5.0
+
+    - name: Build and push Docker images
+      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:beta_${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:beta_v2
+

.github/workflows/build_v2.yml

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

.github/workflows/codeql-analysis.yml

@@ -1,70 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ master ]
-  schedule:
-    - cron: '33 02 * * 5'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://git.io/codeql-language-support
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.github/workflows/ontime_cy.yml

@@ -3,7 +3,10 @@
 
 name: ontime_test_CI
 
-on: [push, pull_request]
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
 
 jobs:
   build:
@@ -14,11 +17,11 @@ jobs:
       CI: ''
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: 16
 
       # React
       - name: React - Install dependencies
@@ -40,15 +43,24 @@ jobs:
 
       # App
       - name: Electron - Install dependencies
-        run: yarn install && yarn setdb
+        run: yarn setup
         working-directory: ./server
 
-      - name: Electron - Run tests
+      - name: Server - run tests
         run: yarn test
         working-directory: ./server
 
-      - name: Cypress run
-        uses: cypress-io/github-action@v2
-        with:
-          working-directory: ./server
-          start: yarn cypress
+#      - 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

@@ -0,0 +1,76 @@
+name: Ontime test v2
+
+on:
+  pull_request:
+    branches: [ v2 ]
+  workflow_dispatch:
+
+jobs:
+  unit-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.26.3
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      # We choose to run tests separately
+      - name: React - Run unit tests
+        run: pnpm test:pipeline
+        working-directory: ./apps/client
+
+      - name: Server - Run unit tests
+        run: pnpm test:pipeline
+        working-directory: ./apps/server
+
+      - name: Utils - Run unit tests
+        run: pnpm test:pipeline
+        working-directory: ./packages/utils
+
+  e2e-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.26.3
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build client
+        run: pnpm build:local
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -5,38 +5,42 @@ node_modules/
 /.pnp
 .pnp.js
 
-# testing
-coverage/
-*.mp4
-
-# production
-build/
-dist/
-
 # misc
 .DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.local
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# working stuff
-_SS/
-db backup.json
-server/src/preloaded-db/db.json
-server/src/models/db.json
-TODO.md
-ontime-db/
-ontime-external/
-
 # vscode stuff
 .vscode/*
 ontime.code-workspace
 
 # webstorm stuff
-.idea/*
+.idea/*
+
+# turborepo stuff
+.turbo
+
+# testing
+test-results
+playwright-report
+/playwright/.cache/
+
+# production
+build/
+dist/
+
+# working stuff
+**/TODO.md
+
+# docker utils
+ontime-db
+ontime-external/
+
+# working database
+apps/server/src/preloaded-db/db.json
+
+# versioning file
+**/ONTIME_VERSION.js

.prettierrc

@@ -1,8 +1,8 @@
 {
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
   "jsxSingleQuote": true,
-  "printWidth": 100
-}
+  "printWidth": 120
+}

DEVELOPMENT.md

@@ -0,0 +1,47 @@
+# GETTING STARTED
+
+Ontime consists of 3 distinct parts
+- __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. 
+Other dependencies will be installed as part of the setup
+- __node__ (>=16.16)
+- __pnpm__ (>=7)
+- __docker__ (only necessary to run and build docker images)
+
+## LOCAL DEVELOPMENT
+
+The electron app is only necessary to distribute an installable version of the app and is not required for local development.
+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`
+
+## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)
+
+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`
+- __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`
+
+## DOCKER
+
+Ontime provides a docker-compose file to aid with building and running docker images.
+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 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>`

Dockerfile

@@ -1,20 +1,27 @@
-FROM node:14-alpine
+FROM node:16-alpine
 
-WORKDIR /app/server
+# Set environment variables
+# Environment Variable to signal that we are running production
+ENV NODE_ENV=docker
+# Ontime Data path
+ENV ONTIME_DATA=/external/
+
+WORKDIR /app/
 
 # Prepare UI
-COPY /client/build ../client/build
+COPY /apps/client/build ./client/
 
 # Prepare Backend
-COPY /server/src ./
+COPY /apps/server/dist/ ./server/
+COPY /demo-db/ ./preloaded-db/
+COPY /apps/server/src/external/ ./external/
 
-# Export default ports Main - OSC IN
-EXPOSE 4001/tcp 8888/udp
-ENV NODE_ENV=production
-ENV ONTIME_DATA=/server/
+# Export default ports
+EXPOSE 4001/tcp 8888/udp 9999/udp
 
-CMD ["yarn", "start:headless"]
+CMD ["node", "server/docker.cjs"]
 
-# Build an run commandsN
-# docker build -t getontime/ontime .
-# docker run -p 4001:4001 -p 10.0.0.12:8888:8888/udp --mount type=bind,source="$(pwd)/ontime-db",target=/server/preloaded-db getontime/ontime
+# Build and run commands
+# !!! Note that this command needs pre-build versions of the UI and server apps
+# docker buildx build . -t getontime/ontime
+# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/external/db/ -v ./ontime-styles:/external/styles/ getontime/ontime

README.md

@@ -14,120 +14,114 @@
 
 Ontime is an application for managing event rundowns and running stage timers.
 
-It allows a center application to be able to distribute event information in the local network. This
-minimises needs for using Media Server outputs or expensive video distribution while allowing easy
-integration in workflows including OBS and d3.
+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.
 
-![App Window](https://github.com/cpvalente/ontime/blob/master/.github/app.jpg)
+![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.jpg)
 
-![Views](https://github.com/cpvalente/ontime/blob/master/.github/02_screentypes.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.
-The app, is used to add / edit your running order in the event list, and running the timers using
-the Playback Control function.
+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.
 
-From here, any device in the same network with a browser is able to render the views as described.
+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`
-You can then use the ontime logo in the top right corner to select the desired view (event in the
-lower thirds view, where it is hidden).
+<br />
+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 case of unattended machines or automations, it is possible to use different URL to recall
-individual views and extend with using the URL aliases feature
+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
 
 ```
-For the presentation views...
+For the presentation views
 -------------------------------------------------------------
 IP.ADDRESS:4001            > Web server default to presenter timer view
 IP.ADDRESS:4001/timer      > Presenter / Stage timer view
+IP.ADDRESS:4001/minimal    > Simple timer view
+IP.ADDRESS:4001/clock      > Simple clock view
 IP.ADDRESS:4001/sm         > Stage Manager / Backstage view
 IP.ADDRESS:4001/public     > Public / Foyer view
-IP.ADDRESS:4001/pip        > Picture in Picture view
 IP.ADDRESS:4001/lower      > Lower Thirds
 IP.ADDRESS:4001/studio     > Studio Clock
-IP.ADDRESS:4001/cuesheet   > Cue Sheet
-
-...and for the editor (the control interface, same as the app)
+```
+```
+For management views 
 -------------------------------------------------------------
-IP.ADDRESS:4001/editor
-
+IP.ADDRESS:4001/editor    > the control interface, same as the app
+IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
 ```
 
-More documentation available [here](https://cpvalente.gitbook.io/ontime/)
+More documentation is available [in our docs](https://cpvalente.gitbook.io/ontime/)
 
 ## Feature List (in no specific order)
 
-- [x] Distribute Data over network and render in the browser
+- [x] Distribute data over network and render it in the browser
 - [x] Different screen types
     - Stage Timer
     - Backstage Info
     - Public Info
-    - Picture in Picture
     - Studio Clock
     - [Make your own?](#make-your-own-viewer)
-- [x] Configurable realtime Lower Thirds
-- [x] Cuesheets with additional custom fields
+- [x] Configurable Lower Thirds
+- [x] Cuesheets with user definable fields
 - [x] Send live messages to different screen types
-- [x] Ability to differentiate between backstage and public data
-- [x] Manage delays workflow
-- [x] Open Sound Control (OSC) Control and Feedback
-- [x] Integrate with hardware using Companion or one of the APIs
+- [x] Differentiate between backstage and public data
+- [x] Workflow for managing delays
+- [x] Protocol integrations for Control and Feedback
+  - OSC (Open Sound Control)
+  - HTTP
+  - WebSockets
 - [x] Roll mode: run independently using the system clock
-- [x] Import event list from Excel
-- [x] URL Aliases (define configurable aliases to ease onsite setup)
-- [x] Logging view
-- [x] Edit anywhere: run ontime in your local network and use any machine to reach the editor page (
-  same as app)
-- [x] Multi platform (available on Windows, MacOS and Linux)
-- [x] [Headless run](#headless-run) (run server only, configure from a browser locally)
-- [x] [Countdown to anything!](https://cpvalente.gitbook.io/ontime/views/countdown): ability to have
+- [x] [Headless run](#headless-run): run server in a separate machine, configure from a browser locally
+- [x] [Countdown to anything!](https://cpvalente.gitbook.io/ontime/views/countdown): have
   a countdown to any scheduled event
+- [x] Multi-platform  (available on Windows, MacOS and Linux)
+- [x] [Companion integration](https://bitfocus.io/connections/getontime-ontime)
 
 ## Unopinionated
 
-We are not interested in forcing workflows and have made ontime, so it is flexible to whichever way
+We are not interested in forcing workflows and have made Ontime, so it is flexible to whichever way
 you would like to work.
 
-- [x] You do not need an order list to use the timer. Create an empty event and the OSC API works
-  just the same
-- [x] If you want just the info screens, no need to use the timer!
+- [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 the OSC API and get going
+    - [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 as
-      always
+      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
 
-The app is being currently developed to a wide user base, from broadcast to entertainment and
+The app is currently being developed for a broad user base, from broadcast to entertainment and
 conference halls.
 
-Taking advantage of the integrations in Ontime, we currently use Ontime with:
+Taking advantage of the integrations, we currently use Ontime with:
 
-- `disguise`: trigger ontime from d3's timeline using the **OSC API**, **render views** using d3's
+- `disguise`: trigger Ontime from d3's timeline using the **OSC API**, and **render views** using d3's
   webmodule
 - `OBS`: **render views** using the Browser Module
-- `QLab`: trigger ontime using **OSC API**
+- `QLab`: trigger Ontime using **OSC API**
 - `Companion`: Ontime has a **companion module**. Issue report and feature requests should be done
-  in
-  the [repository getontime/ontime](https://github.com/bitfocus/companion-module-getontime-ontime)
+  in the [repository getontime/ontime](https://github.com/bitfocus/companion-module-getontime-ontime)
 
 ### Make your own viewer
 
-Ontime broadcasts its data over websockets. This allows you to build your own viewers by leveranging
-basic knowledge of HTML + CSS + Javascript (or any other language that can run in the browser).
+Ontime broadcasts its data over WebSockets. This allows you to consume its data outside of the application.
 
+Writing a new view for the browser can be done with basic knowledge of HTML + CSS + Javascript (or any other language that can run in the browser).
+<br />
 See [this repository](https://github.com/cpvalente/ontime-viewer-template) with a small template on
 how to get you started and read the docs about
 the [Websocket API](https://app.gitbook.com/s/-Mc0giSOToAhq0ROd0CR/control-and-feedback/websocket-api)
 
 ### Headless run️
 
-You can self host and run ontime in a docker image, the run command should:
+You can self-host and run Ontime in a docker image. The run command will:
 
-- expose the necessary ports (listen in Dockerfile)
+- 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__
 
@@ -154,19 +148,14 @@ docker-compose up
 
 ### Continued development
 
-There are several features planned in the roadmap. These will be implemented in a development
-friendly order unless there is user demand to bump any of them.
-
-- [ ] HTTP Server (vMix integration)
-- [ ] Improvements in event interface
-- [ ] Moderator view
-- [ ] New playback mode for [cumulative time keeping](https://github.com/cpvalente/ontime/issues/100)
-- [ ] Lower Third Manager
-- [ ] Reach Schedule: way to speedup timer to meet a deadline
+Several features are planned in the roadmap, and we continuously adjust this to match how users interact with the app.
+<br />
+Have an idea? Reach out via [email](mail@getontime.no) or [open an issue](https://github.com/cpvalente/ontime/issues/new)
 
 ### Issues
 
-If you come across any bugs, [please open an issue]((https://github.com/cpvalente/ontime/issues/new)). Usually bugs get fixed pretty quickly when reported 
+We use Github's issue tracking for bug reporting and feature requests. <br />
+Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new). 
 
 #### Unsigned App
 
@@ -192,22 +181,28 @@ You can circumvent this by allowing the execution of the app manually.
 
 Long story short: Ontime app is unsigned. </br>Purchasing the certificates for both Mac and Windows
 would mean a recurrent expense and is not a priority. This is unlikely to change in future. If you
-have tips on how to improve this, or would like to sponsor the code signing,
-please [open an issue, so we can discuss it](https://github.com/cpvalente/ontime/issues/new)
+have tips on how to improve this or would like to sponsor the code signing,
+please [open an issue](https://github.com/cpvalente/ontime/issues/new)
 
 #### Safari
 
-There are some issues with Safari versions lower than 13:
-
+There are known issues with Safari versions lower than 13:
 - Spacing and text styles might have small inconsistencies
 - Table view does not work
 
-There is no plan for any further work on this since the breaking code belongs to third party
-libraries.
+There is no plan for any further work on this.
+
+# Contributing
+
+Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
+<br /><br />
+If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a Pull Request.
+<br />
+Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)
 
 # Help
 
-Help is underway! ... and can be viewed [here](https://cpvalente.gitbook.io/ontime/)
+Help is underway! ... and can be found [here](https://cpvalente.gitbook.io/ontime/)
 
 # License
 

apps/client/.eslintrc

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

apps/client/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120
+}

apps/client/index.html

@@ -32,6 +32,6 @@
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id='root'></div>
-<script type='module' src='/src/index.jsx'></script>
+<script type='module' src='/src/index.tsx'></script>
 </body>
 </html>

apps/client/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "ontime-ui",
+  "version": "2.0.0-beta2",
+  "private": true,
+  "dependencies": {
+    "@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.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.2.3",
+    "deepmerge": "^4.3.0",
+    "framer-motion": "^10.10.0",
+    "luxon": "^3.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "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.3.6"
+  },
+  "scripts": {
+    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
+    "postinstall": "pnpm addversion",
+    "dev": "cross-env BROWSER=none vite",
+    "build": "vite build",
+    "build:local": "cross-env NODE_ENV=local vite build",
+    "build:docker": "vite build",
+    "lint": "eslint .",
+    "stylelint": "npx stylelint \"**/*.scss\"\n",
+    "test": "vitest",
+    "test:pipeline": "vitest run",
+    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@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": "^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",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "jsdom": "^21.1.0",
+    "ontime-types": "workspace:*",
+    "ontime-utils": "workspace:*",
+    "prettier": "^2.8.3",
+    "prop-types": "^15.8.1",
+    "sass": "^1.57.1",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vite-plugin-svgr": "^2.4.0",
+    "vite-tsconfig-paths": "^4.0.3",
+    "vitest": "^0.29.8"
+  }
+}

apps/client/src/App.tsx

@@ -0,0 +1,70 @@
+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 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 { connectSocket } from './common/utils/socket';
+import theme from './theme/theme';
+import { TranslationProvider } from './translation/TranslationProvider';
+import AppRouter from './AppRouter';
+
+// Load Open Sans typeface
+// @ts-expect-error no types from font import
+import('typeface-open-sans');
+
+connectSocket();
+
+function App() {
+  const { isElectron, sendToElectron } = useElectronEvent();
+
+  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);
+    }
+    return () => {
+      if (isElectron) {
+        document.removeEventListener('keydown', handleKeyPress);
+      }
+    };
+  }, []);
+
+  return (
+    <ChakraProvider resetCSS theme={theme}>
+      <QueryClientProvider client={ontimeQueryClient}>
+        <AppContextProvider>
+          <BrowserRouter>
+            <div className='App'>
+              <ErrorBoundary>
+                <Suspense fallback={null}>
+                  <TranslationProvider>
+                    <AppRouter />
+                  </TranslationProvider>
+                </Suspense>
+              </ErrorBoundary>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </div>
+          </BrowserRouter>
+        </AppContextProvider>
+      </QueryClientProvider>
+    </ChakraProvider>
+  );
+}
+
+export default App;

apps/client/src/AppRouter.tsx

@@ -0,0 +1,131 @@
+import { lazy, useEffect } from 'react';
+import { Navigate, Route, Routes, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+
+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 Table = lazy(() => import('./features/table/ProtectedTable'));
+
+const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
+const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
+const ClockView = lazy(() => import('./features/viewers/clock/Clock'));
+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/LowerWrapper'));
+const StudioClock = lazy(() => import('./features/viewers/studio/StudioClock'));
+
+const STimer = withData(TimerView);
+const SMinimalTimer = withData(MinimalTimerView);
+const SClock = withData(ClockView);
+const SCountdown = withData(Countdown);
+const SBackstage = withData(Backstage);
+const SPublic = withData(Public);
+const SLowerThird = withData(Lower);
+const SStudio = withData(StudioClock);
+
+const 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 (
+    <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='/minimalTimer' element={<SMinimalTimer />} />
+      <Route path='/simpleTimer' element={<SMinimalTimer />} />
+
+      <Route path='/clock' element={<SClock />} />
+
+      <Route path='/countdown' element={<SCountdown />} />
+
+      <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 />} />
+
+      {/*/!* Protected Routes *!/*/}
+      <Route path='/editor' element={<Editor />} />
+      <Route path='/cuesheet' element={<Table />} />
+      <Route path='/cuelist' element={<Table />} />
+      <Route path='/table' element={<Table />} />
+
+      {/*/!* 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/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

@@ -0,0 +1,32 @@
+export const STATIC_PORT = 4001;
+
+// REST stuff
+export const EVENTDATA_TABLE = ['eventdata'];
+export const ALIASES = ['aliases'];
+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'];
+
+// external stuff
+export const githubURL = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
+
+/**
+ * @description finds server path given the current location, it
+ * @return {*}
+ */
+export const calculateServer = () => (import.meta.env.DEV ? `http://localhost:${STATIC_PORT}` : window.location.origin);
+
+export const serverURL = calculateServer();
+export const websocketUrl = `ws://${window.location.hostname}:${STATIC_PORT}/ws`;
+
+export const eventURL = `${serverURL}/eventdata`;
+export const rundownURL = `${serverURL}/events`;
+export const ontimeURL = `${serverURL}/ontime`;
+
+export const stylesPath = 'external/styles/override.css';
+export const overrideStylesURL = `${serverURL}/${stylesPath}`;

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

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { EventData } from 'ontime-types';
 
 import { eventURL } from './apiConstants';
 
@@ -6,13 +7,15 @@ import { eventURL } from './apiConstants';
  * @description HTTP request to fetch event data
  * @return {Promise}
  */
-export const fetchEvent = async () => {
+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 const postEvent = async (data) => axios.post(eventURL, data);
+export async function postEventData(data: EventData) {
+  return axios.post(eventURL, data);
+}

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

@@ -0,0 +1,75 @@
+import axios from 'axios';
+import { OntimeRundown, OntimeRundownEntry } from 'ontime-types';
+
+import { rundownURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch all events
+ * @return {Promise}
+ */
+export async function fetchRundown(): Promise<OntimeRundown> {
+  const res = await axios.get(rundownURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to post new event
+ * @return {Promise}
+ */
+export async function requestPostEvent(data: OntimeRundownEntry) {
+  return axios.post(rundownURL, data);
+}
+
+/**
+ * @description HTTP request to put new event
+ * @return {Promise}
+ */
+export async function requestPutEvent(data: Partial<OntimeRundownEntry>) {
+  return axios.put(rundownURL, data);
+}
+
+/**
+ * @description HTTP request to modify event
+ * @return {Promise}
+ */
+export async function requestPatchEvent(data: OntimeRundownEntry) {
+  return axios.patch(rundownURL, data);
+}
+
+export type ReorderEntry = {
+  eventId: string;
+  from: number;
+  to: number;
+};
+
+/**
+ * @description HTTP request to reorder events
+ * @return {Promise}
+ */
+export async function requestReorderEvent(data: ReorderEntry) {
+  return axios.patch(`${rundownURL}/reorder`, data);
+}
+
+/**
+ * @description HTTP request to request application of delay
+ * @return {Promise}
+ */
+export async function requestApplyDelay(eventId: string) {
+  return axios.patch(`${rundownURL}/applydelay/${eventId}`);
+}
+
+/**
+ * @description HTTP request to delete given event
+ * @return {Promise}
+ */
+export async function requestDelete(eventId: string) {
+  return axios.delete(`${rundownURL}/${eventId}`);
+}
+
+/**
+ * @description HTTP request to delete all events
+ * @return {Promise}
+ */
+export async function requestDeleteAll() {
+  return axios.delete(`${rundownURL}/all`);
+}

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

@@ -0,0 +1,162 @@
+import axios from 'axios';
+import { Alias, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-types';
+
+import { InfoType } from '../models/Info';
+
+import { githubURL, ontimeURL } from './apiConstants';
+
+/**
+ * @description HTTP request to retrieve application settings
+ * @return {Promise}
+ */
+export async function getSettings(): Promise<Settings> {
+  const res = await axios.get(`${ontimeURL}/settings`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate application settings
+ * @return {Promise}
+ */
+export async function postSettings(data: Settings) {
+  return axios.post(`${ontimeURL}/settings`, data);
+}
+
+/**
+ * @description HTTP request to retrieve application info
+ * @return {Promise}
+ */
+export async function getInfo(): Promise<InfoType> {
+  const res = await axios.get(`${ontimeURL}/info`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to retrieve view settings
+ * @return {Promise}
+ */
+export async function getView(): Promise<ViewSettings> {
+  const res = await axios.get(`${ontimeURL}/views`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate view settings
+ * @return {Promise}
+ */
+export async function postView(data: ViewSettings) {
+  return axios.post(`${ontimeURL}/views`, data);
+}
+
+/**
+ * @description HTTP request to retrieve aliases
+ * @return {Promise}
+ */
+export async function getAliases(): Promise<Alias[]> {
+  const res = await axios.get(`${ontimeURL}/aliases`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate aliases
+ * @return {Promise}
+ */
+export async function postAliases(data: Alias[]) {
+  return axios.post(`${ontimeURL}/aliases`, data);
+}
+
+/**
+ * @description HTTP request to retrieve user fields
+ * @return {Promise}
+ */
+export async function getUserFields(): Promise<UserFields> {
+  const res = await axios.get(`${ontimeURL}/userfields`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate user fields
+ * @return {Promise}
+ */
+export async function postUserFields(data: UserFields) {
+  return axios.post(`${ontimeURL}/userfields`, data);
+}
+
+/**
+ * @description HTTP request to retrieve osc settings
+ * @return {Promise}
+ */
+export async function getOSC(): Promise<OSCSettings> {
+  const res = await axios.get(`${ontimeURL}/osc`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate osc settings
+ * @return {Promise}
+ */
+export async function postOSC(data: OSCSettings) {
+  return axios.post(`${ontimeURL}/osc`, data);
+}
+
+/**
+ * @description HTTP request to download db
+ * @return {Promise}
+ */
+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';
+
+    // 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);
+    }
+
+    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}
+ */
+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 = options?.onlyRundown || 'false';
+  await axios
+    .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
+        setProgress(complete);
+      },
+    })
+    .then((response) => response.data.id);
+};
+
+/**
+ * @description HTTP request to get the latest version and url from github
+ * @return {Promise}
+ */
+export async function getLatestVersion(): Promise<object> {
+  const res = await axios.get(`${githubURL}`);
+  return { url: res.data.html_url, version: res.data.tag_name };
+}

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

@@ -1,4 +1,4 @@
-import { Button } from '@chakra-ui/button';
+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';

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

@@ -1,30 +1,28 @@
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
+import { IconButton, Tooltip } from '@chakra-ui/react';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
-import PropTypes from 'prop-types';
 
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
-export default function PauseIconBtn(props) {
+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'
-        _hover={!disabled && { bg: 'orange.400' }}
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         width={120}
         disabled={disabled}
+        aria-label='Pause playback'
         {...rest}
       />
     </Tooltip>
   );
 }
-
-PauseIconBtn.propTypes = {
-  clickhandler: PropTypes.func,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool
-}

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

@@ -1,5 +1,4 @@
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
+import { IconButton, Tooltip } from '@chakra-ui/react';
 import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
 import PropTypes from 'prop-types';
 

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

@@ -1,5 +1,4 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { Button, IconButton } from '@chakra-ui/button';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   AlertDialog,
   AlertDialogBody,
@@ -7,24 +6,47 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogOverlay,
-} from '@chakra-ui/modal';
-import { Tooltip } from '@chakra-ui/tooltip';
+  Button,
+  IconButton,
+  Tooltip,
+} from '@chakra-ui/react';
 import { FiPower } from '@react-icons/all-files/fi/FiPower';
-import PropTypes from 'prop-types';
 
-import { LoggingContext } from '../../context/LoggingContext';
+import { Size } from '../../models/Util.type';
+import { useEmitLog } from '../../stores/logger';
 
-export default function QuitIconBtn(props) {
+interface QuitIconBtnProps {
+  clickHandler: () => void;
+  size?: Size;
+}
+
+const quitBtnStyle = {
+  color: '#D20300', // $red-700
+  borderColor: '#D20300', // $red-700
+  _focus: { boxShadow: 'none' },
+  _hover: {
+    background: '#D20300', // $red-700
+    color: 'white',
+  },
+  _active: {
+    background: '#9A0000', // $red-1000
+    color: 'white',
+  },
+  variant: 'outline',
+  isRound: true,
+};
+
+export default function QuitIconBtn(props: QuitIconBtnProps) {
   const { clickHandler, size = 'lg', ...rest } = props;
   const [isOpen, setIsOpen] = useState(false);
-  const { emitInfo } = useContext(LoggingContext);
+  const { emitInfo } = useEmitLog();
   const onClose = () => setIsOpen(false);
-  const cancelRef = useRef();
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     if (window.process?.type === 'renderer') {
       window.ipcRenderer.on('user-request-shutdown', () => {
-        emitInfo('Shutdown request')
+        emitInfo('Shutdown request');
         setIsOpen(true);
       });
     }
@@ -39,13 +61,11 @@ export default function QuitIconBtn(props) {
     <>
       <Tooltip label='Quit Application'>
         <IconButton
+          aria-label='Quit Application'
           size={size}
           icon={<FiPower />}
-          colorScheme='red'
-          variant='outline'
-          isRound
           onClick={() => setIsOpen(true)}
-          _focus={{ boxShadow: 'none' }}
+          {...quitBtnStyle}
           {...rest}
         />
       </Tooltip>
@@ -53,13 +73,13 @@ export default function QuitIconBtn(props) {
         <AlertDialogOverlay>
           <AlertDialogContent>
             <AlertDialogHeader fontSize='lg' fontWeight='bold'>
-              Server Shutdown
+              Ontime Shutdown
             </AlertDialogHeader>
             <AlertDialogBody>
               This will shutdown the program and all running servers. Are you sure?
             </AlertDialogBody>
             <AlertDialogFooter>
-              <Button ref={cancelRef} onClick={onClose}>
+              <Button ref={cancelRef} onClick={onClose} variant='ghost'>
                 Cancel
               </Button>
               <Button colorScheme='red' onClick={handleShutdown} ml={3}>
@@ -72,8 +92,3 @@ export default function QuitIconBtn(props) {
     </>
   );
 }
-
-QuitIconBtn.propTypes = {
-  clickHandler: PropTypes.func,
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-};

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

@@ -1,5 +1,4 @@
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
+import { IconButton, Tooltip } from '@chakra-ui/react';
 import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
 import PropTypes from 'prop-types';
 
@@ -25,5 +24,5 @@ export default function RollIconBtn(props) {
 RollIconBtn.propTypes = {
   clickhandler: PropTypes.func,
   active: PropTypes.bool,
-  disabled: PropTypes.bool
-}
+  disabled: PropTypes.bool,
+};

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

@@ -1,5 +1,4 @@
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
+import { IconButton, Tooltip } from '@chakra-ui/react';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import PropTypes from 'prop-types';
 

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

@@ -1,6 +1,4 @@
-import { IconButton } from '@chakra-ui/button';
-import { IconButtonProps } from '@chakra-ui/react';
-import { Tooltip } from '@chakra-ui/tooltip';
+import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
 
 interface TooltipActionBtnProps extends IconButtonProps {
   clickHandler: () => void;
@@ -12,14 +10,7 @@ export default function TooltipActionBtn(props: TooltipActionBtnProps) {
   const { clickHandler, icon, size = 'xs', tooltip, openDelay = 0, className, ...rest } = props;
   return (
     <Tooltip label={tooltip} openDelay={openDelay}>
-      <IconButton
-        {...rest}
-        aria-label={tooltip}
-        size={size}
-        icon={icon}
-        onClick={clickHandler}
-        className={className}
-      />
+      <IconButton {...rest} size={size} icon={icon} onClick={clickHandler} className={className} />
     </Tooltip>
   );
 }

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

@@ -1,5 +1,4 @@
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
+import { IconButton, Tooltip } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
 
 import { tooltipDelayMid } from '../../../ontimeConfig';

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

@@ -1,5 +1,4 @@
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
+import { IconButton, Tooltip } from '@chakra-ui/react';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import PropTypes from 'prop-types';
 

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/copy-tag/CopyTag.tsx

@@ -0,0 +1,35 @@
+import { PropsWithChildren } from 'react';
+import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
+import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { Size } from '../../models/Util.type';
+
+interface CopyTagProps {
+  label: string;
+  className?: string;
+  size?: Size;
+}
+
+export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
+  const { label, className, size = 'xs', children } = props;
+
+  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={() => navigator.clipboard.writeText(children as string)}
+        />
+      </ButtonGroup>
+    </Tooltip>
+  );
+}

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

@@ -1,13 +1,10 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
-
-import { version as appVersion } from '../../../../package.json';
-import { LoggingContext } from '../../context/LoggingContext';
+import * as Sentry from '@sentry/react';
 
 import style from './ErrorBoundary.module.scss';
 
 class ErrorBoundary extends React.Component {
-  static contextType = LoggingContext;
   reportContent = '';
 
   constructor(props) {
@@ -25,10 +22,17 @@ class ErrorBoundary extends React.Component {
       error: error,
       errorInfo: info,
     });
+
+    Sentry.withScope((scope) => {
+      scope.setExtras(error);
+      const eventId = Sentry.captureException(error);
+      this.setState({ eventId, info });
+    });
+
     try {
       this.context.emitError(error.toString());
     } catch (e) {
-      console.log('Unable to emit error', error, e )
+      Sentry.captureMessage(`Unable to emit error ${error} ${e}`);
     }
     this.reportContent = `${error} ${info.componentStack}`;
   }
@@ -36,25 +40,22 @@ class ErrorBoundary extends React.Component {
   render() {
     if (this.state.errorMessage) {
       return (
-        <div className={style.errorContainer} data-testid="error-container">
+        <div className={style.errorContainer} data-testid='error-container'>
           <div>
             <p className={style.error}>:/</p>
             <p>Something went wrong</p>
-            <p
+            <div
+              role='button'
               className={style.report}
-              onClick={() => {
-                if (navigator.clipboard) {
-                  const copyContent = `ontime version ${appVersion} \n ${this.reportContent}`;
-                  navigator.clipboard.writeText(copyContent);
-                }
-              }}
+              onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
             >
-              Copy error
-            </p>
-            <p
+              Report error
+            </div>
+            <div
+              role='button'
               className={style.report}
               onClick={() => {
-                if (window.process.type === 'renderer') {
+                if (window?.process?.type === 'renderer') {
                   window.ipcRenderer.send('reload');
                 } else {
                   window.location.reload();
@@ -62,7 +63,7 @@ class ErrorBoundary extends React.Component {
               }}
             >
               Reload interface
-            </p>
+            </div>
           </div>
         </div>
       );

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

@@ -1,4 +1,4 @@
-@use '../../../theme/main' as *;
+@use '../../../theme/v2Styles' as *;
 
 .errorContainer {
   width: 100%;
@@ -9,17 +9,17 @@
   color: white;
 
   .error {
-    color: $ontime-pink;
+    color: $error-red;
     font-weight: 600;
   }
 
   .report {
-    text-decoration: underline  $ontime-pink;
+    text-decoration: underline  $error-red;
     cursor: pointer;
   }
 
   .report:hover {
-    color: $ontime-pink;
+    color: $error-red;
   }
 
   .report:active {

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

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import { Textarea, TextareaProps } from '@chakra-ui/react';
+// @ts-expect-error no types from library
+import autosize from 'autosize/dist/autosize';
+
+interface AutoTextAreaProps extends TextareaProps {
+  isDark?: boolean;
+}
+
+export const AutoTextArea = (props: AutoTextAreaProps) => {
+  const { isDark, ...rest } = props;
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    autosize(ref.current);
+    return () => {
+      autosize.destroy(node);
+    };
+  }, []);
+
+
+  return (
+    <Textarea
+      overflow='hidden'
+      w='100%'
+      resize='none'
+      ref={ref}
+      transition='height none'
+      variant={isDark ? 'ontime-filled' : 'ontime-filled-onlight'}
+      {...rest}
+    />
+  );
+};

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

@@ -0,0 +1,26 @@
+import { IoBan } from '@react-icons/all-files/io5/IoBan';
+
+import { cx } from '../../../utils/styleUtils';
+
+import style from './SwatchSelect.module.scss';
+
+interface SwatchProps {
+  color: string;
+  onClick: (color: string) => void;
+  isSelected?: boolean;
+}
+
+export default function Swatch(props: SwatchProps) {
+  const { color, isSelected, onClick } = props;
+
+  const classes = cx([style.swatch, isSelected ? style.selected : null]);
+
+  if (!color) {
+    return (
+      <div className={`${classes} ${style.center}`}>
+        <IoBan />
+      </div>
+    );
+  }
+  return <div className={classes} style={{ backgroundColor: `${color}` }} onClick={() => onClick(color)} />;
+}

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

@@ -0,0 +1,24 @@
+
+.list {
+  display: flex;
+  gap: 4px;
+}
+
+.swatch {
+  cursor: pointer;
+  aspect-ratio: 1;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 16px;
+  border: 4px solid #262626;
+
+  &.selected {
+    border: 2px solid #578AF4;
+  }
+}
+
+.center {
+  display: grid;
+  place-content: center;
+  color: #578AF4;
+}

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

@@ -0,0 +1,50 @@
+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: TitleActions;
+  handleChange: (newValue: TitleActions, name: string) => void;
+}
+
+const colours = [
+  '',
+  '#FFCC78', // $orange-400
+  '#FFAB33', // $orange-600
+  '#77C785', // $green-400
+  '#339E4E', // $green-600
+  '#779BE7', // $blue-400
+  '#3E75E8', // $blue-600
+  '#FF7878', // $red-400
+  '#ED3333', // $red-600
+  '#A790F5', // $violet-400
+  '#8064E1', // $violet-600
+  '#9d9d9d', // $gray-500
+  '#ececec', // $gray-100
+];
+
+export default function SwatchSelect(props: ColourInputProps) {
+  const { value, name, handleChange } = props;
+
+  const setColour = useCallback(
+    (newValue: string) => {
+      if (newValue !== value) {
+        handleChange(name, newValue);
+      }
+    },
+    [handleChange, name, value],
+  );
+
+  return (
+    <div className={style.list}>
+      {colours.map((colour) => (
+        <Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+@use '../../../../theme/v2Styles' as *;
+
+.delayInput {
+  display: flex;
+  gap: $element-spacing;
+  align-items: center;
+  color: $ontime-delay-text;
+  font-size: $text-body-size;
+}
+
+.inputField {
+  text-align: center;
+}

apps/client/src/common/components/input/delay-input/DelayInput.tsx

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Input } from '@chakra-ui/react';
+
+import { clamp } from '../../../utils/math';
+
+import style from './DelayInput.module.scss';
+
+const inputStyleProps = {
+  width: 20,
+  placeholder: '-',
+  size: 'sm',
+  color: '#E69056',
+  variant: 'ontime-filled',
+  fontSize: '15px',
+  letterSpacing: '0.3px',
+};
+
+interface DelayInputProps {
+  submitHandler: (value: number) => void;
+  value?: number;
+}
+
+export default function DelayInput(props: DelayInputProps) {
+  const { submitHandler, value = 0 } = props;
+  const [_value, setValue] = useState(value);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (!value) {
+      return;
+    }
+    setValue(value);
+  }, [value]);
+
+  /**
+   * @description Prepare delay value for update
+   * @param {string} value string to be parsed
+   */
+  const validate = useCallback(
+    (newValue?: string) => {
+      if (newValue === '') setValue(0);
+      const delayValue = clamp(Number(newValue), -60, 60);
+      if (delayValue === value) return;
+      setValue(delayValue);
+
+      submitHandler(delayValue);
+    },
+    [submitHandler, value],
+  );
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = useCallback(
+    (key: string) => {
+      if (key === 'Enter') {
+        inputRef.current?.blur();
+        validate(inputRef.current?.value);
+      } else if (key === 'Escape') {
+        inputRef.current?.blur();
+        setValue(value);
+      }
+    },
+    [validate, value],
+  );
+
+  const labelText = `${Math.abs(value) !== 1 ? 'minutes' : 'minute'} ${
+    value !== undefined && value >= 0 ? 'delayed' : 'ahead'
+  }`;
+
+  return (
+    <label className={style.delayInput}>
+      <Input
+        {...inputStyleProps}
+        ref={inputRef}
+        data-testid='delay-input'
+        className={style.inputField}
+        value={_value}
+        onChange={(event) => setValue(Number(event.target.value))}
+        onBlur={(event) => validate(event.target.value)}
+        onKeyDown={(event) => onKeyDownHandler(event.key)}
+        type='number'
+      />
+      {labelText}
+    </label>
+  );
+}

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

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

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

@@ -0,0 +1,86 @@
+import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
+
+interface UseReactiveTextInputReturn {
+  value: string;
+  onChange: (event: ChangeEvent) => void;
+  onBlur: (event: ChangeEvent) => void;
+  onKeyDown: (event: KeyboardEvent) => void;
+}
+
+export default function useReactiveTextInput(
+  initialText: string,
+  submitCallback: (newValue: string) => void,
+  options?: {
+    submitOnEnter?: boolean;
+  },
+): UseReactiveTextInputReturn {
+  const [text, setText] = useState<string>(initialText);
+
+  useEffect(() => {
+    if (typeof initialText === 'undefined') {
+      setText('');
+    } else {
+      setText(initialText);
+    }
+  }, [initialText]);
+
+  /**
+   * @description Handles Input value change
+   * @param {string} newValue
+   */
+  const handleChange = useCallback(
+    (newValue: string) => {
+      if (newValue !== text) {
+        setText(newValue);
+      }
+    },
+    [text],
+  );
+
+  /**
+   * @description Handles submit events
+   * @param {string} valueToSubmit
+   */
+  const handleSubmit = useCallback(
+    (valueToSubmit: string) => {
+      // No need to update if it hasn't changed
+      if (valueToSubmit === initialText) {
+        return;
+      }
+      const cleanVal = valueToSubmit.trim();
+      submitCallback(cleanVal);
+
+      if (cleanVal !== valueToSubmit) {
+        setText(cleanVal);
+      }
+    },
+    [initialText, submitCallback],
+  );
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {string} key
+   */
+  const keyHandler = useCallback(
+    (key: string) => {
+      switch (key) {
+        case 'Escape':
+          setText(initialText);
+          break;
+        case 'Enter':
+          if (options?.submitOnEnter) {
+            handleSubmit(text);
+          }
+          break;
+      }
+    },
+    [initialText, options?.submitOnEnter, handleSubmit, text],
+  );
+
+  return {
+    value: text,
+    onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
+    onBlur: (event: ChangeEvent) => handleSubmit((event.target as HTMLInputElement).value),
+    onKeyDown: (event: KeyboardEvent) => keyHandler(event.key),
+  };
+}

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

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

@@ -0,0 +1,194 @@
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from '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 {
+  name: TimeEntryField;
+  submitHandler: (field: TimeEntryField, value: number) => void;
+  time?: number;
+  delay?: number;
+  placeholder: string;
+  validationHandler: (entry: TimeEntryField, val: number) => boolean;
+  previousEnd?: number;
+  warning?: string;
+}
+
+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('');
+
+  /**
+   * @description Resets input value to given
+   */
+  const resetValue = useCallback(() => {
+    try {
+      setValue(millisToString(time + delay));
+    } catch (error) {
+      emitError(`Unable to parse date: ${error}`);
+    }
+  }, [delay, emitError, time]);
+
+  /**
+   * @description Selects input text on focus
+   */
+  const handleFocus = useCallback(() => {
+    inputRef.current?.select();
+  }, []);
+
+  /**
+   * @description Submit handler
+   * @param {string} newValue
+   */
+  const handleSubmit = useCallback(
+    (newValue: string) => {
+      // Check if there is anything there
+      if (newValue === '') {
+        return false;
+      }
+
+      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);
+      }
+
+      // Time now and time submittedVal
+      const originalMillis = time + delay;
+
+      // check if time is different from before
+      if (newValMillis === originalMillis) return false;
+
+      // validate with parent
+      if (!validationHandler(name, newValMillis)) return false;
+
+      // update entry
+      submitHandler(name, newValMillis);
+
+      return true;
+    },
+    [delay, name, previousEnd, submitHandler, time, validationHandler],
+  );
+
+  /**
+   * @description Prepare time fields
+   * @param {string} value string to be parsed
+   */
+  const validateAndSubmit = useCallback(
+    (newValue: string) => {
+      const success = handleSubmit(newValue);
+      if (success) {
+        const ms = forgivingStringToMillis(newValue);
+        setValue(millisToString(ms + delay));
+      } else {
+        resetValue();
+      }
+    },
+    [delay, handleSubmit, resetValue],
+  );
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        inputRef.current?.blur();
+        validateAndSubmit((event.target as HTMLInputElement).value);
+      } else if (event.key === 'Tab') {
+        validateAndSubmit((event.target as HTMLInputElement).value);
+      }
+      if (event.key === 'Escape') {
+        inputRef.current?.blur();
+        resetValue();
+      }
+    },
+    [resetValue, validateAndSubmit],
+  );
+
+  const onBlurHandler = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      validateAndSubmit((event.target as HTMLInputElement).value);
+    },
+    [validateAndSubmit],
+  );
+
+  useEffect(() => {
+    if (time == null) return;
+    resetValue();
+  }, [emitError, resetValue, time]);
+
+  const isDelayed = delay != null && delay !== 0;
+
+  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 inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
+  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
+
+  return (
+    <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/navigation-menu/NavigationMenu.module.scss

@@ -0,0 +1,93 @@
+@use "../../../theme/v2Styles" as *;
+@use "../../../theme/mixins" as *;
+@use "../../../theme/ontimeColours" as *;
+
+$menu-bg: $gray-1200;
+$menu-hover-bg: $gray-1350;
+$menu-focus-bg: $gray-1300;
+
+$icon-color: $ui-white;
+$button-bg: $gray-1050;
+$button-size: 48px;
+
+.mirror {
+  transform: rotate(180deg);
+}
+
+.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;
+  width: $button-size;
+  height: $button-size;
+  display: grid;
+  place-content: center;
+  border-radius: 3px;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.menuContainer {
+  top: 0;
+  left: 0;
+  height: fit-content;
+  position: absolute;
+  background-color: $menu-bg;
+  min-width: 200px;
+  border-radius: 0 0 24px 0;
+  border-right: 1px solid $border-color-ondark;
+
+  box-shadow: $box-shadow-l2;
+  padding-bottom: 1rem;
+
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.buttonsContainer {
+  margin-top: calc(56px + 1rem);
+}
+
+.link {
+  @include action-link;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $menu-hover-bg;
+  }
+
+  &:active {
+    background-color: $border-color-ondark;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: $menu-focus-bg;
+    border-left: 2px solid $action-text-color;
+  }
+
+  &.current {
+    background-color: $menu-hover-bg;
+    border-left: 4px solid $action-text-color;
+  }
+}
+
+.linkIcon {
+  display: inline-block;
+  transform: rotate(45deg);
+}
+
+.separator {
+  border-color: $border-color-ondark;
+}

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

@@ -0,0 +1,111 @@
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+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 { 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 style from './NavigationMenu.module.scss';
+
+export default function NavigationMenu() {
+  const location = useLocation();
+
+  const { isFullScreen, toggleFullScreen } = useFullscreen();
+  const { mirror, toggleMirror } = useViewOptionsStore();
+  const [showButton, setShowButton] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  useClickOutside(menuRef, () => setShowMenu(false));
+
+  const toggleMenu = () => setShowMenu((prev) => !prev);
+  useKeyDown(toggleMenu, ' ');
+
+  useEffect(() => {
+    let fadeOut: NodeJS.Timeout | null = null;
+    const setShowMenuTrue = () => {
+      setShowButton(true);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+      fadeOut = setTimeout(() => setShowButton(false), 3000);
+    };
+    document.addEventListener('mousemove', setShowMenuTrue);
+    return () => {
+      document.removeEventListener('mousemove', setShowMenuTrue);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+    };
+  }, []);
+
+  const isKeyEnter = (event: KeyboardEvent<HTMLDivElement>) => event.key === 'Enter';
+  const handleFullscreen = () => toggleFullScreen();
+  const handleMirror = () => toggleMirror();
+
+  return createPortal(
+    <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,
+  );
+}

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

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

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

@@ -0,0 +1,22 @@
+import { clamp } from '../../utils/math';
+
+import './ProgressBar.scss';
+
+interface ProgressBarProps {
+  now?: number;
+  complete?: number;
+  hidden?: boolean;
+  className?: string;
+}
+
+export default function ProgressBar(props: ProgressBarProps) {
+  const { now = 0, complete = 100, hidden, className = '' } = props;
+
+  const percentComplete = clamp(100 - (Math.max(now, 0) * 100) / complete, 0, 100);
+
+  return (
+    <div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
+      <div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+    </div>
+  );
+}

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

@@ -1,6 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { HStack, PinInput, PinInputField } from '@chakra-ui/react';
+import { HStack, IconButton, PinInput, PinInputField } from '@chakra-ui/react';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
 import PropTypes from 'prop-types';
 

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

@@ -1,16 +1,14 @@
-@use '../../../theme/main' as *;
-@use '../../../theme/mixins' as *;
+@use '../../../theme/v2Styles' as *;
 
 .container {
-  background: $bg-black;
-
   display: grid;
   place-content: center;
   height: 100vh;
   padding-bottom: 30vh;
 
-  color: $ontime-pink;
-  font-family: 'Open Sans', sans-serif;
+  background: $bg-container-l1;
+  color: $ontime-color;
+  font-family: $ontime-font-family;
   font-weight: 200;
   text-align: center;
   font-size: 3vw;
@@ -37,9 +35,9 @@
 
 @keyframes colourFade {
   from {
-    background: $ontime-pink;
+    background: $action-blue;
   }
   to {
-    background: rgba($ontime-pink, 0);
+    background: rgba($action-blue, 0);
   }
 }

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

@@ -0,0 +1,71 @@
+@use '../../../theme/viewerDefs' as *;
+
+.schedule {
+  width: 100%;
+  border-spacing: 50px;
+
+  .entry {
+    font-size: clamp(16px, 1.5vw, 24px);
+
+    .entry-colour {
+      background-color: var(--card-background-color-override, $viewer-card-bg-color);
+      height: clamp(8px, 0.75vw, 12px);
+      width: clamp(8px, 0.75vw, 12px);
+      border-radius: 6px;
+      display: inline-block;
+    }
+
+    .entry-times {
+      font-family: $viewer-font-family;
+      color: var(--secondary-color-override, $viewer-secondary-color);
+      font-weight: 300;
+      letter-spacing: 0.05em;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .entry-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:not(:last-child) {
+      padding-bottom: clamp(16px, 1.5vw, 24px);
+    }
+
+    &--past {
+      color: var(--secondary-color-override, $viewer-secondary-color);
+    }
+
+    &--now {
+      .entry-title {
+        color: var(--accent-color-override, $accent-color);
+        font-weight: 600;
+      }
+    }
+
+    &.skip {
+      text-decoration: line-through;
+    }
+  }
+}
+
+.schedule-nav {
+  display: flex;
+  justify-content: flex-end;
+
+  .schedule-nav__item {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    margin-left: 8px;
+
+    &--selected {
+      background-color: var(--color-override, $viewer-color);
+    }
+  }
+}
+

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

@@ -0,0 +1,44 @@
+import Empty from '../state/Empty';
+
+import { useSchedule } from './ScheduleContext';
+import ScheduleItem from './ScheduleItem';
+
+import './Schedule.scss';
+
+interface ScheduleProps {
+  className?: string;
+}
+
+export default function Schedule({ className }: ScheduleProps) {
+  const { paginatedEvents, selectedEventId, isBackstage } = useSchedule();
+
+  if (paginatedEvents?.length < 1) {
+    return <Empty text='No events to show' />;
+  }
+
+  let selectedState: 'past' | 'now' | 'future' = 'past';
+
+  return (
+    <ul className={`schedule ${className}`}>
+      {paginatedEvents.map((event) => {
+        if (event.id === selectedEventId) {
+          selectedState = 'now';
+        } else if (selectedState === 'now') {
+          selectedState = 'future';
+        }
+        return (
+          <ScheduleItem
+            key={event.id}
+            selected={selectedState}
+            timeStart={event.timeStart}
+            timeEnd={event.timeEnd}
+            title={event.title}
+            colour={isBackstage ? event.colour : ''}
+            backstageEvent={!event.isPublic}
+            skip={event.skip}
+          />
+        );
+      })}
+    </ul>
+  );
+}