refactor: ensure start order (#322 )

V2 align (#321 )
* fix: fetch in offline environments (#295) * Add arm platforms to docker build (#297) * add arm platforms to docker build --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> * fix: docker build (#298) Co-authored-by: Fabian Posenau <fabian@fphome.de> * Timer: fix too many renders error when using ?progress (#305) * Timer: fix too many renders error when using ?progress * version bump (#314) * style: small tweaks * fix: prevent actions in roll mode * chore: update external assets * style: show shortcuts in quick blocks * refactor: revert optimisations on callbacks * fun: industry dictionary * style: indicators for event features --------- Co-authored-by: Fabian Posenau <fabian.p99@gmx.de> Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: Marks Polakovs <github@markspolakovs.me>
2026-07-26 10:38:55 +00:00 · 2023-04-03 11:10:51 +02:00 · 2023-04-03 09:03:36 +02:00 · 2023-04-02 19:07:13 +02:00 · 2023-04-02 13:30:24 +02:00 · 2023-04-02 13:24:07 +02:00
636 changed files with 27145 additions and 30699 deletions
@@ -3,7 +3,6 @@ version = 1
 test_patterns = [
  "__mocks__/**",
  "__tests__/**",
-  "cypress/**",
  "*.test.*",
  "*.mock.*",
  "*.spec.*"
@@ -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": {}
 }
@@ -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 }}
@@ -0,0 +1,55 @@
+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
+      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
+
@@ -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 }}
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,8 +1,8 @@
 {
-  "trailingComma": "es5",
+  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
-  "printWidth": 100
-}
+  "printWidth": 120
+}
@@ -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>`
@@ -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
@@ -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

@@ -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": [
@@ -0,0 +1,8 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120
+}
@@ -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>
@@ -0,0 +1,98 @@
+{
+  "name": "ontime-ui",
+  "version": "2.0.0-beta1",
+  "private": true,
+  "dependencies": {
+    "@chakra-ui/react": "^2.5.1",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@react-icons/all-files": "^4.1.0",
+    "@sentry/react": "^7.28.1",
+    "@sentry/tracing": "^7.24.1",
+    "@tanstack/react-query": "^4.26.1",
+    "@tanstack/react-query-devtools": "^4.26.1",
+    "autosize": "^5.0.2",
+    "axios": "^1.2.0",
+    "color": "^4.2.3",
+    "csv-stringify": "^6.2.3",
+    "deepmerge": "^4.3.0",
+    "framer-motion": "^8.0.2",
+    "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.3.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"
+  }
+}
@@ -0,0 +1,67 @@
+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 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}>
+                  <AppRouter />
+                </Suspense>
+              </ErrorBoundary>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </div>
+          </BrowserRouter>
+        </AppContextProvider>
+      </QueryClientProvider>
+    </ChakraProvider>
+  );
+}
+
+export default App;
@@ -1,51 +1,46 @@
 import { lazy, useEffect } from 'react';
-import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';

-import { ALIASES } from './common/api/apiConstants';
-import { getAliases } from './common/api/ontimeApi';
-import { useFetch } from './common/hooks/useFetch';
-import { useSocketProvider } from './common/hooks/useSocketProvider';
-import withSocket from './features/viewers/ViewWrapper';
+import useAliases from './common/hooks-query/useAliases';
+import withData from './features/viewers/ViewWrapper';

-const Editor = lazy(() => import('features/editors/ProtectedEditor'));
-const Table = lazy(() => import('features/table/ProtectedTable'));
+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 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 Pip = lazy(() => import('features/viewers/picture-in-picture/Pip'));
-const StudioClock = lazy(() => import('features/viewers/studio/StudioClock'));
+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 = withSocket(TimerView);
-const SMinimalTimer = withSocket(MinimalTimerView);
-const SClock = withSocket(ClockView);
-const SCountdown = withSocket(Countdown);
-const SBackstage = withSocket(Backstage);
-const SPublic = withSocket(Public);
-const SLowerThird = withSocket(Lower);
-const SPip = withSocket(Pip);
-const SStudio = withSocket(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 EventList = lazy(() => import('features/editors/list/EventListExport'));
-const TimerControl = lazy(() => import('features/control/playback/TimerControlExport'));
-const MessageControl = lazy(() => import('features/control/message/MessageControlExport'));
-const Info = lazy(() => import('features/info/InfoExport'));
+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() {
-  useSocketProvider();
-  const { data } = useFetch(ALIASES, getAliases);
+  const { data } = useAliases();
  const location = useLocation();
  const navigate = useNavigate();

  // navigate if is alias route
  useEffect(() => {
    if (!data) return;
+
    for (const d of data) {
      if (`/${d.alias}` === location.pathname && d.enabled) {
        navigate(`/${d.pathAndParams}`);
@@ -54,9 +49,9 @@ export default function AppRouter() {
    }
  }, [data, location, navigate]);

-  return(
+  return (
    <Routes>
-      <Route path='/' element={<STimer />} />
+      <Route path='/' element={<Navigate to='/timer' />} />
      <Route path='/speaker' element={<STimer />} />
      <Route path='/presenter' element={<STimer />} />
      <Route path='/stage' element={<STimer />} />
@@ -74,7 +69,6 @@ export default function AppRouter() {
      <Route path='/backstage' element={<SBackstage />} />

      <Route path='/public' element={<SPublic />} />
-      <Route path='/pip' element={<SPip />} />
      <Route path='/studio' element={<SStudio />} />
      {/*/!* Lower cannot have fallback *!/*/}
      <Route path='/lower' element={<SLowerThird />} />
@@ -87,10 +81,10 @@ export default function AppRouter() {

      {/*/!* Protected Routes - Elements *!/*/}
      <Route
-        path='/eventlist'
+        path='/rundown'
        element={
          <FeatureWrapper>
-            <EventList />
+            <RundownPanel />
          </FeatureWrapper>
        }
      />
@@ -118,8 +112,8 @@ export default function AppRouter() {
          </FeatureWrapper>
        }
      />
-      {/* Send to default if nothing found */}
+      {/*/!* Send to default if nothing found *!/*/}
      <Route path='*' element={<STimer />} />
    </Routes>
-  )
+  );
 }
@@ -0,0 +1,24 @@
+// Exported viewer link location
+const minimalLocation = 'minimal';
+const speakerLocation = 'speaker';
+const smLocation = 'sm';
+const publicLocation = 'public';
+const pipLocation = 'pip';
+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: pipLocation, label: 'Picture in Picture' },
+  { link: studioLocation, label: 'Studio clock' },
+  { link: countdownLocation, label: 'Countdown' },
+  { link: cuesheetLocation, label: 'Cuesheet' },
+];
@@ -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}/eventlist`;
+export const ontimeURL = `${serverURL}/ontime`;
+
+export const stylesPath = 'external/styles/override.css';
+export const overrideStylesURL = `${serverURL}/${stylesPath}`;
@@ -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);
+}
@@ -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`);
+}
@@ -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 };
+}
@@ -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';
@@ -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
-}
@@ -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';

@@ -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']),
-};
@@ -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,
+};
@@ -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';

@@ -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;
@@ -14,7 +12,6 @@ export default function TooltipActionBtn(props: TooltipActionBtnProps) {
    <Tooltip label={tooltip} openDelay={openDelay}>
      <IconButton
        {...rest}
-        aria-label={tooltip}
        size={size}
        icon={icon}
        onClick={clickHandler}
@@ -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';
@@ -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';

@@ -0,0 +1,23 @@
+@use '../../../theme/v2Styles' as *;
+
+.header {
+  font-size: $inner-section-text-size;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  color: $section-white;
+  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;
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
      );
@@ -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 {
@@ -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}
+    />
+  );
+};
@@ -0,0 +1,7 @@
+input[type="color"] {
+  appearance: none;
+  cursor: pointer;
+  height: 32px;
+  width: 32px;
+  padding: 0;
+}
@@ -0,0 +1,25 @@
+import { Input } from '@chakra-ui/react';
+
+import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
+
+import style from './ColourInput.module.scss';
+
+interface ColourInputProps {
+  value: string;
+  name: EventEditorSubmitActions;
+  handleChange: (newValue: EventEditorSubmitActions, name: string) => void;
+}
+
+export default function ColourInput(props: ColourInputProps) {
+  const { value, name, handleChange } = props;
+  return (
+    <Input
+      size='sm'
+      variant='ontime-filled'
+      className={style.colourInput}
+      type='color'
+      value={value}
+      onChange={(event) => handleChange(name, event.target.value)}
+    />
+  );
+}
@@ -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;
+}
@@ -0,0 +1,82 @@
+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',
+};
+
+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 == null) 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>
+  );
+}
@@ -0,0 +1,47 @@
+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 TextAreaProps {
+  isTextArea: true;
+  resize?: 'horizontal' | 'vertical' | 'none';
+}
+
+type TextInputProps = BaseProps & TextAreaProps;
+
+export default function TextInput(props: TextInputProps) {
+  const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler, resize = 'none' } = 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);
+
+  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' />
+  );
+}
@@ -0,0 +1,88 @@
+import { ChangeEvent, 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(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) => handleChange((event.target as HTMLInputElement).value),
+    onBlur: (event) => handleSubmit((event.target as HTMLInputElement).value),
+    onKeyDown: (event) => keyHandler(event.key),
+  };
+}
@@ -0,0 +1,23 @@
+$input-font-size: 15px;
+$input-delayed-border-color: #E69056;
+
+.timeInput {
+  width: fit-content !important;
+
+  .inputButton {
+    aspect-ratio: 1;
+  }
+
+  .inputField {
+    font-size: $input-font-size;
+    letter-spacing: 1px;
+    width: 7.5em;
+    padding: 0 0 0 2.6em;
+  }
+
+  &.delayed {
+    .inputField {
+      border: 1px solid $input-delayed-border-color;
+    }
+  }
+}
@@ -0,0 +1,191 @@
+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 { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
+import { tooltipDelayFast } from '../../../../ontimeConfig';
+import { useEmitLog } from '../../../stores/logger';
+import { forgivingStringToMillis } from '../../../utils/dateConfig';
+import { TimeEntryField } from '../../../utils/timesManager';
+
+import style from './TimeInput.module.scss';
+
+interface TimeInputProps {
+  name: TimeEntryField;
+  submitHandler: (field: EventEditorSubmitActions, value: number) => void;
+  time?: number;
+  delay?: number;
+  placeholder: string;
+  validationHandler: (entry: TimeEntryField, val: number) => boolean;
+  previousEnd?: number;
+}
+
+export default function TimeInput(props: TimeInputProps) {
+  const { name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0 } = props;
+  const { emitError } = useEmitLog();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [value, setValue] = useState('');
+
+  /**
+   * @description Resets input value to given
+   */
+  const resetValue = useCallback(() => {
+    // Todo: check if change is necessary
+    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';
+    if (name === 'timeEnd') return 'End';
+    if (name === 'durationOverride') return 'Duration';
+    return '';
+  };
+
+  return (
+    <InputGroup size='sm' className={`${style.timeInput} ${isDelayed ? style.delayed : ''}`}>
+      <InputLeftElement width='fit-content'>
+        <Tooltip label={ButtonTooltip()} openDelay={tooltipDelayFast} variant='ontime-ondark'>
+          <Button
+            size='sm'
+            variant='ontime-subtle-white'
+            className={`${style.inputButton} ${isDelayed ? style.delayed : ''}`}
+            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>
+  );
+}
@@ -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;
+}
@@ -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,
+  );
+}
@@ -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(--card-background-color-override, $viewer-card-bg-color);
+
+  &--hidden {
+    display: none;
+  }
+}
+
+.progress-bar__indicator {
+  height: $progress-bar-size;
+  border-radius: $progress-bar-br;
+  background-color: var(--accent-color-override, $accent-color);
+  transition: 1s linear;
+  transition-property: width;
+}
@@ -0,0 +1,25 @@
+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>
+  );
+}
@@ -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';

@@ -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);
  }
 }
@@ -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);
+    }
+  }
+}
+
@@ -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>
+  );
+}
@@ -0,0 +1,72 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
+import { OntimeEvent } from 'ontime-types';
+
+import { useInterval } from '../../hooks/useInterval';
+
+interface ScheduleContextState {
+  events: OntimeEvent[];
+  paginatedEvents: OntimeEvent[];
+  selectedEventId: string;
+  numPages: number;
+  visiblePage: number;
+  isBackstage: boolean;
+}
+
+const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);
+
+interface ScheduleProviderProps {
+  events: OntimeEvent[];
+  selectedEventId: string;
+  isBackstage?: boolean;
+  eventsPerPage?: number;
+  time?: number;
+}
+
+export const ScheduleProvider = (
+  {
+    children,
+    events,
+    selectedEventId,
+    isBackstage = false,
+    eventsPerPage = 4,
+    time = 10,
+  }: PropsWithChildren<ScheduleProviderProps>) => {
+
+  const [visiblePage, setVisiblePage] = useState(0);
+
+  const numPages = Math.ceil(events.length / eventsPerPage);
+  const eventStart = eventsPerPage * visiblePage;
+  const eventEnd = eventsPerPage * (visiblePage + 1);
+  const paginatedEvents = events.slice(eventStart, eventEnd);
+
+  // every SCROLL_TIME go to the next array
+  useInterval(() => {
+    if (events.length > eventsPerPage) {
+      const next = (visiblePage + 1) % numPages;
+      setVisiblePage(next);
+    }
+  }, time * 1000);
+
+  return (
+    <ScheduleContext.Provider
+      value={{
+        events,
+        paginatedEvents,
+        selectedEventId,
+        numPages,
+        visiblePage,
+        isBackstage,
+      }}
+    >
+      {children}
+    </ScheduleContext.Provider>
+  );
+};
+
+export const useSchedule = () => {
+  const context = useContext(ScheduleContext);
+  if (!context) {
+    throw new Error('useSchedule() can only be used inside a ScheduleContext');
+  }
+  return context;
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	b778835469	refactor: ensure start order (#322 )	2023-04-03 11:10:51 +02:00
Carlos Valente	32b5ab0574	V2 align (#321 ) * fix: fetch in offline environments (#295) * Add arm platforms to docker build (#297) * add arm platforms to docker build --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> * fix: docker build (#298) Co-authored-by: Fabian Posenau <fabian@fphome.de> * Timer: fix too many renders error when using ?progress (#305) * Timer: fix too many renders error when using ?progress * version bump (#314) * style: small tweaks * fix: prevent actions in roll mode * chore: update external assets * style: show shortcuts in quick blocks * refactor: revert optimisations on callbacks * fun: industry dictionary * style: indicators for event features --------- Co-authored-by: Fabian Posenau <fabian.p99@gmx.de> Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: Marks Polakovs <github@markspolakovs.me>	2023-04-03 09:03:36 +02:00
Carlos Valente	03e7428348	V2 e2e (#320 ) * chore: cleanup handling of a bad read * chore: configure e2e testing * chore: version bump	2023-04-02 19:07:13 +02:00
Carlos Valente	0e47b5c10c	Update test_v2.yml	2023-04-02 13:30:24 +02:00
Carlos Valente	6582f4a9bc	Update test_v2.yml	2023-04-02 13:24:07 +02:00
Carlos Valente	7456205b6e	V2 build (#319 ) * chore: build pipeline for v2 * chore: run unit tests * chore: configure sentry build	2023-04-01 23:06:42 +02:00
Carlos Valente	9338a615d4	v2 lazy rundown (#317 ) * chore: update related deps * refactor: memoise entrypoints * refactor: store selectors * refactor: improve component performance * chore: remove unused dependencies * refactor: improve component dnd	2023-03-30 21:22:36 +02:00
Fabian Posenau	03d5389540	V2 docker (#312 ) * Create docker-ci.yml * docker build * add build app * path changes * delete double workflow * update docker run template * cleanup * resolve wierd path issue * wrong path * again wrong path * rename docker releases * move styles population and change to function call * re-add old build pipeline * rename buld file * feractor init function * refactor: startDb to initAssets * refactor: startDB to initAssets * fix: docker.cjs building whole app * fix: docker environment * update docker paths * update: build command * cleanup * cleanup: commented code --------- Co-authored-by: Fabian Posenau <fabian@fphome.de>	2023-03-28 20:12:44 +02:00
Carlos Valente	bca7ad30b1	v2 alpha5 (#315 ) * fix: fetch in offline environments (#295) * add arm platforms to docker build --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> * fix: docker build (#298) Co-authored-by: Fabian Posenau <fabian@fphome.de> * Timer: fix too many renders error when using ?progress (#305) * ux: remove duplicate showing of selected event * several small fixes and UX improvements --------- Co-authored-by: Fabian Posenau <fabian.p99@gmx.de> Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: Marks Polakovs <github@markspolakovs.me>	2023-03-24 08:19:47 +01:00
Carlos Valente	e937af62b1	V2 osc (#313 ) * chore: upgrade relevant deps * fix: electron app to tray * chore: cleanup dictionary * feat: handle several messages in a event * ux: disable irrelevant buttons in browser * feat: parse and validate subscriptions * feat: create UI for OSC Integration * fix: cleanup logger behaviour * feat: allow OSC settings to be changed at runtime	2023-03-23 08:33:22 +01:00
Fabian Posenau	73533600a0	Feat/end action (#308 ) * feat: end action --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com>	2023-03-16 19:27:15 +01:00
Carlos Valente	76c8f8a4d5	V2 ws store (#310 ) * Update TimerService.ts * refactor: message service publishes to store * refactor: several type improvements * V2 ws store wss (#309) * refactor: shared logging types * refactor: simplify message service consumption * refactor: create discrete logging system * refactor: move socket.io > websocket	2023-03-15 22:06:47 +01:00
Fabian Posenau	11648ee546	improve time input (#307 ) * add the ability to parse time like 2h20m --------- Co-authored-by: Fabian Posenau <fabian@fphome.de>	2023-03-06 19:47:09 +01:00
Fabian Posenau	5b977790b0	Feat/update check (#303 ) * feat: show latest version in settings modal --------- Co-authored-by: Fabian Posenau <fabian@fphome.de>	2023-03-04 22:40:19 +01:00
Carlos Valente	3e2626d4f9	V2 fix timer (#304 )	2023-02-28 19:50:37 +01:00
Fabian Posenau	99f4738f4a	fix: wrong parameter (#302 ) Co-authored-by: Fabian Posenau <fabian@fphome.de>	2023-02-26 20:06:40 +01:00
Fabian Posenau	c405698813	Feat/countdown style (#290 ) * feat: Countdown Style --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com>	2023-02-26 19:53:26 +01:00
Fabian Posenau	6d138ce9f1	fix: backgroundcolor for .blockNotes (#300 ) Co-authored-by: Fabian Posenau <fabian@fphome.de>	2023-02-25 17:41:42 +01:00
Carlos Valente	068c72662d	style: alpha4 style tweaks (#299 )	2023-02-25 17:27:47 +01:00
Carlos Valente	edac1d7f75	V2 fix socket (#296 ) * refactor: rename timer endpoint * refactor: typescript * refactor: rename eventData and viewSettings * refactor: message manager uses event store	2023-02-24 22:47:07 +01:00
Carlos Valente	03552056cb	V2 fix offline (#294 ) * fix: resolve path to UI build in dev * fix: configure offline fetching	2023-02-23 21:10:41 +01:00
Carlos Valente	70cc071425	V2 integration (#293 ) * feat: integrations and lifecycles * refactor: prevent issues with start order	2023-02-23 20:22:38 +01:00
Carlos Valente	d8a84ac88d	V2 types (#291 )	2023-02-20 18:28:54 +01:00
Fabian Posenau	63d763cbaf	Feature/#276/qrcodes (#289 ) * bugfix: wrong format when on 12h format * update: website link in placeholder --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com>	2023-02-19 20:52:42 +01:00
Carlos Valente	df351b8cba	hotfix: resolve data directory (#288 )	2023-02-17 20:23:00 +01:00
Fabian Posenau	298af3ec5a	Fix: #279 End Message in Minimal Timer (#286 ) * fix: Minimal View #279 end message --------- Co-authored-by: Fabian Posenau <fabian@fphome.de>	2023-02-16 21:46:40 +01:00
Carlos Valente	de9a7a87fd	V2 monorepo (#285 ) * refactor(project structure): UI * refactor(project structure): extract utilities * refactor(project structure): remove unused * refactor(project structure): electron * refactor(project structure): server refactor: migrate to vitest refactor: monorepo config * refactor: extract application menu * refactor: exit process * refactor: extract tray menu * chore: electron build * Added Seconds in studio clock #282 --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> --------- Co-authored-by: Fabian Posenau <fabian.p99@gmx.de> Co-authored-by: Fabian Posenau <fabian@fphome.de>	2023-02-14 22:02:15 +01:00
Carlos Valente	3918758d32	v2: roll (#280 ) * ux: delete flow * style: small tweaks in interface * refactor: gracefully quit on error * fix: logic around updating events * chore: cleanup dictionary * refactor: improve DX on creating aux files * fix: safe destructure function return * refactor: safe handling of falsy timer values * fix: improve ux on stopping roll mode * chore: upgrade deps * feat: roll mode * refactor: remove unused	2023-01-07 22:44:21 +01:00
Carlos Valente	832c060940	v2: views (#278 ) * config(sentry): instrumentation only in production * chore: upgrade deps * refactor: simplify and convert to ts * refactor: composition and styles * chore: remove deprecated deps * ux: close menu on click outside * style: small tweaks and clarifications * refactor: retire PiP view * ux: small tweaks * style: cleanup deprecated styles * chore: remove unused * refactor: remove usages of deprecated fields and improve null timer presentation * refactor: improve composition of countdown * style: cleanup overridable styles * ux: show event overtime status * style: correct logic in paused timers	2022-12-30 11:41:03 +01:00
Carlos Valente	110d3fb7a3	v2 event timer (#274 ) * lint: cleanup unused * refactor: rename component to avoid conflict * style: gap in element row * refactor: rename playstate -> playback * refactor: cleanup usages of timer and prepare integration manager * style: re-arrange button order * refactor: improve event loading * feat(timer-service): hot reload * fix: issue with duration input * chore: cleanup debug * refactor: resolve poll from runtime store * refactor: cleanup merge * refactor: small improvements in timer hot-reload	2022-12-26 12:58:33 +01:00
cv	062ff7226a	Merge remote-tracking branch 'origin/master' into v-2	2022-12-26 09:47:18 +01:00
Carlos Valente	6f634c36f9	v2 alpha 3 (#272 ) * style: correct background colours * chore: add folder resolutions to vite * refactor: add auto refetch to HTTP APIs * fix: view settings override endpoint * refactor: memoize callbacks * fix: reorder reaching wrong data adapter * refactor: memoize callbacks * style: presentation cleanup * fix(delete): prevent flow with deleted event in playback * refactor: convert to typescript * refactor: small fixes and typescript conversion * ux: improve feedback on local changes * refactor: cleanup props	2022-12-26 09:40:33 +01:00
Carlos Valente	1bb67eb82a	V2 sentry (#267 ) * chore: add sentry to frontend * chore: add sentry to server * chore: report only in production * chore: add sentry source maps	2022-12-08 22:34:17 +01:00
Carlos Valente	6720626bd3	v2 event editor (#265 ) * style: add cursor indicator in all blocks * style: prevent reflows on width * style: harmonise white range * ux: focus elements on cursor nav * ux: prevent focus on indicators * refactor: convert to typescript * fix: missing dependency * chore: add linter rules for dependency arrays * style: style editable component * style: tweak input styles * style: tweak switch styles * style: style tweaks	2022-12-08 22:22:08 +01:00
Carlos Valente	c56c5a636d	v2: refactor (#264 ) * chore: upgrade dependencies * chore: remove unused * fix: issue with missing index data * fix: discrepancy on counting events * fix: swapped classes * fix: prevent attempting load in empty list * chore: cleanup completed * chore: remove unused * refactor: convert to typescript * refactor: migrate to new endpoints * refactor: convert to typescript * fix: prevent issue with undefined process * fix: small code smells * fix: issue with missing version variable on build * refactor: configure retries on data fetching * style: design review * fix: prevent cursor out of range * lint: react query linting * style: checkbox styles	2022-12-07 09:58:11 +01:00
Carlos Valente	d486d78594	v2 styling (#263 ) * feat: implement progress bar on running event * refactor: use event action hook * refactor: align backend data * style: v2 style tweaks * style: v2 style tweaks + ts <Info> * fix: fix delay increment calls * style: v2 style tweaks + ts <Playback> * style: v2 style tweaks + ts <EventEditor> * style: v2 style tweaks + ts <MessageControl> * fix: naming issue with message control socket endpoint * chore: upgrade style dependencies * style: v2 style tweaks + ts <MenuBar> * style: v2 style tweaks + ts <RundownMenu> * style: v2 style tweaks + ts <Playback> * fix: add selected and next information to EventTimer * style: v2 style tweaks + ts <EventBlock> * style: v2 style tweaks + ts <DelayBlock> * style: v2 style tweaks + ts <BlockBlock> * style: v2 style tweaks + ts <QuickEntry> * refactor: extract <TextInput> logic * chore: upgrade build dependencies * chore: folder structure refactor * fix: issue with dependency path in electron * chore: update version in demo db	2022-11-27 14:56:09 +01:00
Carlos Valente	3626b5b357	V2 event block (#261 ) * feat: implement progress bar on running event * refactor: use event action hook * refactor: align backend data	2022-11-22 22:53:52 +01:00
cv	b54c7dd454	Merge branch 'v2' of https://github.com/cpvalente/ontime into v2	2022-11-22 22:02:45 +01:00
cv	ed3554d033	refactor: ensure consistent routing	2022-11-22 22:02:25 +01:00
cv	139f466beb	lint: reorder imports	2022-11-22 21:58:02 +01:00
cv	23b1ced3fb	refactor: run test CI on master or manual run	2022-11-22 21:48:34 +01:00
cv	0f5747839c	Merge remote-tracking branch 'origin/master' into v1	2022-11-22 21:47:31 +01:00
Carlos Valente	ff5735fe36	refactor: v2 event loader (#260 ) * refactor: extract jest config * refactor: rename params in reoder endpoint * refactor: avoid app exports * refactor: small code smells * refactor: run development server * refactor: extract rundown service and event loader logic * refactor: rename events > rundown * refactor: code style * fix: handle external change of title * refactor: cleanup dictionary * refactor: rename MessageService * refactor: use eventID for operations * refactor: migrate OSC controller to service * refactor: migrate Socket controller to service * refactor: migrate HTTP controller to service * refactor: extract logic into discrete services * refactor: remove rundown from event timer * refactor: remove duplicate * refactor: remove unused * chore: update tests	2022-11-22 21:25:55 +01:00
Carlos Valente	c1f87736eb	V2 socket store (#254 ) * refactor: create socket utility * refactor: ensure a single subscription to topics * refactor: replace usages of socket object with subscription store handler	2022-11-20 18:08:49 +01:00
Carlos Valente	edd983dfd6	feat: V2 ontime menu (#259 )	2022-11-20 15:31:07 +01:00
Carlos Valente	2a5ba90530	hotfix: fix object naming error on excel import (#252 )	2022-11-13 18:57:50 +01:00
Carlos Valente	c03ed07762	V2 rundown manager (#237 ) * refactor: migrate eventlist > rundown	2022-10-30 21:07:18 +01:00
Carlos Valente	a3f14182a4	V2 message manager (#234 ) * refactor: server run script * refactor: extract message control feature * refactor: socket usage for message control feature * refactor: migrate e2e testing to playwright * chore: add feature tests * refactor: add validation on socket controller * chore: jest tests server logic * chore: update tests * chore: run playwright tests on pull_requests	2022-10-29 20:40:38 +02:00
cv	918f8517d2	Merge remote-tracking branch 'origin/master' into v1	2022-10-27 19:32:02 +02:00
Carlos Valente	54442dc9a1	V2 styles part2 (#233 ) * style: create tag to display network messages * style: create button style for playback * style: review style for QuickEntry * style: review style for Info panel * style: review style for Event blocks * style: review style for Message control panel * style: review style for Playback control * style: review application styles * style: review block styles * refactor: TapButton has active state * style: small style tweaks * refactor: type checks	2022-10-26 15:12:57 +02:00
Carlos Valente	1b1aced296	v2:feat (#231 ) * style: element relationship * feat: utility to add first element * refactor: organise dir * ux: deleting element closes drawer * fix: issue with escaped characters * fix: issue with overflow in events list * fix: prevent event timer from receiving non event * style: prevent small shift on class change * style: visually detach event editor * fix: entry block knows last event * fix: skip event timer updates on non events * fix: prevent electron OPENGL error * style: cleanup text styles * style: unify input styles * refactor: simplify style and composition * refactor: tweaks on style + ts * refactor: add validation to events post * fix: handle non events in event timer * refactor: cleanup unused	2022-10-23 19:21:49 +02:00
Carlos Valente	d8ee0d4f82	styles: v2 (#229 ) * style: revise selected style * style: revise editor styles * style: revise viewer styles * chore: update tests	2022-10-21 19:50:25 +02:00
Carlos Valente	08d2ebcc5e	fix: remove problematic (#228 )	2022-10-19 21:56:10 +02:00
Carlos Valente	0fea4064c3	Feat/55 v2 (#225 ) * chore: upgrade relevant libraries * feat(skip): add skip styling to paginated items * chore: upgrade relevant libraries * Fix: issue with text colour (#214) * fix: adjust text colour from context * fix: issue with wrong proptype * fix issue with vite migration (#217) * hotfix: 1.8.2 issues vite migration * fix: file import options * feat(55): styling * refactor: remove onhover option for entry block * refactor: relocate logging provider * refactor: convert to typescript * feat(55): add event editor * refactor: extract event actions * fix: bad import * feat(55): redesign components * fix: issues with not awaiting async * refactor: replace socket with subscription * refactor: remove unused * style: small tweaks * refactor: extract event actions * refactor: cleanup debug * refactor: chakra imports * fix: optimistic mutations * refactor: handle promise rejections * refactor: validation * fix: rq optimistic mutations * feat: add playback feedback to block * refactor: no optimistic adding of events * refactor: simplify cursor state * styles: cleanup editor style * refactor: cleanup duration update * fix: revert package upgrade (issues with vitest) * fix: prevent cyclic imports * refactor: extract data fetcher * refactor: typescript migration * chore: update tests	2022-10-19 21:30:25 +02:00
Carlos Valente	13be6ea2bc	chore: upgrade electron (#215 ) * Fix: issue with text colour (#214) * fix: adjust text colour from context * fix: issue with wrong proptype * chore: upgrade electron * chore: declare node version * chore: upgrade node actions	2022-10-12 20:47:53 +02:00
Carlos Valente	c2ed9d7634	Refactor/socket controller (#212 ) * refactor(socket): dictionary cleanup * refactor(socket): detangle socket from EventTimer * refactor(socket): poll object * refactor(socket): wip, extract data responsibilities to provider * fix: issue with onAir * refactor: create data provider and validation utils * refactor: remove deprecated endpoint * refactor: detangle and validate ontime controller * refactor: detangle and validate events controller * refactor: validate routers * refactor: handle post failure in modals	2022-10-09 19:10:48 +02:00
Carlos Valente	cd0577bf99	Refactor/ts sockets (#210 ) * refactor(ts): create socket subscription service * refactor(ts-sockets): useSubscription hook * refactor(ts-sockets): extract colour selection to utility	2022-10-09 19:09:47 +02:00