wip: upload review

wip: create preview components
2026-08-05 07:28:01 +00:00 · 2023-09-10 19:23:13 +02:00 · 2023-09-02 21:25:30 +02:00 · 2023-09-02 15:46:16 +02:00 · 2023-09-02 14:58:20 +02:00 · 2023-09-02 14:53:58 +02:00
382 changed files with 10777 additions and 6729 deletions
@@ -1,139 +0,0 @@
-name: Ontime build
-
-on:
-  push:
-    tags: [ "v1.*.*" ]
-  workflow_dispatch:
-
-jobs:
-  build_mac:
-    runs-on: macos-latest
-    timeout-minutes: 20
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install --frozen-lockfile --network-timeout 300000
-        working-directory: ./client
-
-      - name: React - Build project
-        run: yarn build
-        working-directory: ./client
-
-      # Node server
-      - name: Server - Install dependencies
-        run: yarn install --frozen-lockfile --production --network-timeout 300000
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        shell: bash
-        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
-        working-directory: ./server
-      - name: Electron - Build app
-        run: yarn dist-mac
-        working-directory: ./server
-
-      # Release
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: ./server/dist/ontime-macOS.dmg
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  build_win:
-    runs-on: windows-latest
-    timeout-minutes: 20
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install --frozen-lockfile --network-timeout 300000
-        working-directory: ./client
-
-      - name: React - Build project
-        run: yarn build
-        working-directory: ./client
-
-      # Node server
-      - name: Server - Install dependencies
-        run: yarn install --frozen-lockfile --production --network-timeout 300000
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        shell: bash
-        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
-        working-directory: ./server
-      - name: Electron - Build app
-        run: yarn dist-win
-        working-directory: ./server
-
-      # Release
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: ./server/dist/ontime-win64.exe
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  build_linux:
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install --frozen-lockfile --network-timeout 300000
-        working-directory: ./client
-
-      - name: React - Build project
-        run: yarn build
-        working-directory: ./client
-
-      # Node server
-      - name: Server - Install dependencies
-        run: yarn install --frozen-lockfile --production --network-timeout 300000
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        shell: bash
-        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
-        working-directory: ./server
-      - name: Electron - Build app
-        run: yarn dist-linux
-        working-directory: ./server
-
-      # Release
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: ./server/dist/ontime-linux.AppImage
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -2,7 +2,7 @@ name: Docker Image CI Ontime V2

 on:
  push:
-    tags: [ "v2.*.*" ]
+    tags: [ "*" ]
  workflow_dispatch:

 jobs:
@@ -52,5 +52,5 @@ jobs:
        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
        # Push is a shorthand for --output=type=registry
        push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:beta_${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:beta_v2
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest

@@ -2,7 +2,7 @@ name: Ontime build v2

 on:
  push:
-    tags: [ "v2.*.*" ]
+    tags: [ "*" ]
  workflow_dispatch:

 jobs:
@@ -35,7 +35,9 @@ jobs:
      - name: Release
        uses: softprops/action-gh-release@v1
        with:
-          files: './apps/electron/dist/ontime-macOS.dmg'
+          files: |
+            ./apps/electron/dist/ontime-macOS-x64.dmg
+            ./apps/electron/dist/ontime-macOS-arm64.dmg
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

 on:
  pull_request:
-    branches: [ v2 ]
+    branches: '*'
  workflow_dispatch:

 jobs:
@@ -1,32 +1,48 @@
 # GETTING STARTED

 Ontime consists of 3 distinct parts
- __client__: A React app for Ontime's UI and web clients 
+
+- __client__: A React app for Ontime's UI and web clients
 - __electron__: An electron app which facilitates the cross-platform distribution of Ontime
 - __server__: A node application which handles the domains services and integrations

-The steps below will assume you have locally installed the necessary dependencies. 
+The steps below will assume you have locally installed the necessary dependencies.
 Other dependencies will be installed as part of the setup
+
 - __node__ (>=16.16)
 - __pnpm__ (>=7)
 - __docker__ (only necessary to run and build docker images)

 ## LOCAL DEVELOPMENT

-The electron app is only necessary to distribute an installable version of the app and is not required for local development.
+The electron app is only necessary to distribute an installable version of the app and is not required for local
+development.
 Locally, we would need to run both the React client and the node.js server in development mode

 From the project root, run the following commands
+
 - __Install the project dependencies__ by running `pnpm i`
 - __Run dev mode__ by running `turbo dev`

+### Debugging backend
+
+To debug backend code in Node.js:
+
+- Open two separate terminals and navigate to the `apps/client` and `apps/server` directories.
+- In each terminal, run the command `pnpm dev` to start the development servers for both the client and server
+  applications.
+- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by
+  running `pnpm dev:inspect`.
+
 ## TESTING

-Generally we have 2 types of tests. 
+Generally we have 2 types of tests.
+
 - Unit tests for functions that contain business logic
 - End-to-end tests for core features

 ### Unit tests
+
 Unit tests are contained in mostly all the apps and packages (client, server and utils)

 You can run unit tests by running turbo `turbo test:pipeline` from the project root.
@@ -35,12 +51,20 @@ This will run all tests and close test runner.
 Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode

 ### E2E tests
-E2E tests are in a separate package. On running, [playwright](https://playwright.dev/) will spin up an instance of the webserver to test against
+
+E2E tests are in a separate package. On running, [playwright](https://playwright.dev/) will spin up an instance of the
+webserver to test against
 These tests also run against a separate version of the DB (test-db)

 You can run playwright tests from project root with `pnpm e2e`

-When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually start the webserver with `pnpm dev:server`
+When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually
+start the webserver with `pnpm dev:server`
+
+Some other useful commands
+
+- `pnpm e2e --ui` open playwright UI
+- `pnpm e2e --headed` run tests with a visible browser window

 ## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)

@@ -48,6 +72,7 @@ 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:local`
 - __Create the package__ by running `turbo dist-win`, `turbo dist-mac` or `turbo dist-linux`
@@ -60,10 +85,12 @@ Ontime provides a docker-compose file to aid with building and running docker im
 While it should allow for a generic setup, it might need to be modified to fit your infrastructure.

 From the project root, run the following commands
+
 - __Install the project dependencies__ by running `pnpm i`
 - __Build 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,25 +1,27 @@
-[![ontime_test_CI](https://github.com/cpvalente/ontime/actions/workflows/ontime_cy.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/ontime_cy.yml) [![Ontime build](https://github.com/cpvalente/ontime/actions/workflows/build.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/build.yml)
+[![Ontime build v2](https://github.com/cpvalente/ontime/actions/workflows/build_v2.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/build_v2.yml)
 [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0) [![Documentation in Gitbook](https://badges.aleen42.com/src/gitbook_2.svg)](https://ontime.gitbook.io)

 ## Download the latest releases here

 <div style="display: flex; justify-content: space-around">
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/mac-download.png"/></a>
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe"><img alt="Download Windows" src="https://github.com/cpvalente/ontime/blob/master/.github/win-download.png"/></a>
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage"><img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/linux-download.png"/></a>
-  <a href="https://hub.docker.com/r/getontime/ontime"><img alt="Get from Dockerhub" src="https://github.com/cpvalente/ontime/blob/master/.github/dockerhub.png"/></a>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/mac-download.png"/></a>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe"><img alt="Download Windows" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/win-download.png"/></a>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage"><img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/linux-download.png"/></a>
+  <a href="https://hub.docker.com/r/getontime/ontime"><img alt="Get from Dockerhub" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/dockerhub.png"/></a>
 </div>

 # Ontime

-Ontime is an application for managing event rundowns and running stage timers.
+Ontime is an application for creating and managing event running order and timers.

-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 views and allows integration into video and control workflows, including OBS and d3.
+The user inputs a list of events along with scheduling and event information. 
+This will then populate a series of screens which are available to be rendered by any device in the Network.

-![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.jpg)
+This makes for a simple and cheap way to distribute over a venue using a network infrastructure instead of video outputs.

-![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/02_screentypes.png)
+![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.png)
+
+![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/overview.png)

 ## Using Ontime

@@ -30,8 +32,8 @@ Any device with a browser in the same network can choose one of the supported vi
 This is done by reaching the ontime server at the _default port 4001_ eg: `localhost:4001`
 or `192.168.1.3:4001`
 <br />
-You can then use the Ontime logo in the top left corner to select the desired view.
-The logo will be initially hidden until there is mouse interaction.
+You can then use the menu in the top left corner to select the desired view.
+The menu will be initially hidden until there is mouse interaction.

 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
@@ -62,21 +64,23 @@ More documentation is available [in our docs](https://ontime.gitbook.io)
 - [x] Distribute data over network and render it in the browser
 - [x] Different screen types
    - Stage Timer
+    - Minimal Timer
+    - Clock
    - Backstage Info
    - Public Info
    - Studio Clock
    - Countdown
    - [Make your own?](#make-your-own-viewer)
 - [x] Configurable Lower Thirds
- [x] Cuesheets with user definable fields
+- [x] Collaborative editing with the cuesheet view
 - [x] Send live messages to different screen types
 - [x] Differentiate between backstage and public data
 - [x] Workflow for managing delays
- [x] Protocol integrations for Control and Feedback
+- [x] Rich protocol integrations for Control and Feedback
  - OSC (Open Sound Control)
  - HTTP
  - WebSockets
- [x] Roll mode: run independently using the system clock
+- [x] Roll mode: run standalone using the system clock
 - [x] [Headless run](#headless-run): run server in a separate machine, configure from a browser locally
 - [x] [Countdown to anything!](https://ontime.gitbook.io/v2/views/countdown): have
  a countdown to any scheduled event
@@ -85,14 +89,11 @@ More documentation is available [in our docs](https://ontime.gitbook.io)

 ## Unopinionated

-We are not interested in forcing workflows and have made Ontime, so it is flexible to whichever way
-you would like to work.
+We want Ontime to be unique by targeting freelancers instead of roles. 

- [x] If you want just the info screens, there is no need to use the timer!
- [x] Don't have or care for a schedule?
-    - [x] a single event with no data is enough to use one of the APIs and use a dynamic timer
-    - [x] use the order list to create a set of quick timers by setting the beginning and start
-      times to 00:00 and 00:10 (**BAM**! 10 minute timer). You can quickly recall this with OSC or any of the other available integrations
+We believe most freelancers work in different fields and we want to give you a tool that you can leverage across your many environments and workflows.
+
+We are not interested in forcing workflows and have made Ontime so, it is flexible to whichever way you would like to work.

 ## Rich APIs for workflow integrations

@@ -116,7 +117,7 @@ Writing a new view for the browser can be done with basic knowledge of HTML + CS
 <br />
 See [this repository](https://github.com/cpvalente/ontime-viewer-template-v2) with a small template on
 how to get you started and read the docs about
-the [Websocket API](https://ontime.gitbook.io/v2/control-and-feedback/websocket-api)
+the [Websocket API](https://ontime.gitbook.io/v2/control-and-feedback/ontime-apis#osc-and-websocket-api)

 ### Headless run️

@@ -139,6 +140,8 @@ and use the included docker compose to get started
 docker-compose up
 ```

+Related information available [in the docs](https://ontime.gitbook.io/v2/additional-notes/use-in-raspberry-pi)
+
 ## Roadmap

 ### Continued development
@@ -1,6 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard-scss",
-    "stylelint-config-prettier"
-  ]
-}
@@ -1,9 +1,9 @@
 {
  "name": "ontime-ui",
-  "version": "2.0.0-beta",
+  "version": "2.8.1-rc-table",
  "private": true,
  "dependencies": {
-    "@chakra-ui/react": "^2.5.5",
+    "@chakra-ui/react": "^2.7.0",
    "@dnd-kit/core": "^6.0.8",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
@@ -14,7 +14,8 @@
    "@sentry/tracing": "^7.46.0",
    "@tanstack/react-query": "^4.28.0",
    "@tanstack/react-query-devtools": "^4.29.0",
-    "autosize": "^5.0.2",
+    "@tanstack/react-table": "^8.9.2",
+    "autosize": "^6.0.1",
    "axios": "^1.2.0",
    "color": "^4.2.3",
    "csv-stringify": "^6.2.3",
@@ -27,7 +28,6 @@
    "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"
@@ -40,7 +40,6 @@
    "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"
@@ -65,7 +64,6 @@
    "@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",
@@ -84,11 +82,7 @@
    "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.3.1",
    "vite-plugin-compression2": "^0.9.0",
@@ -1,13 +1,15 @@
-import { Suspense, useEffect } from 'react';
+import { useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

+import { ContextMenu } from './common/components/context-menu/ContextMenu';
 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
 import { AppContextProvider } from './common/context/AppContext';
 import useElectronEvent from './common/hooks/useElectronEvent';
 import { ontimeQueryClient } from './common/queryClient';
+import { socketClientName } from './common/stores/connectionName';
 import { connectSocket } from './common/utils/socket';
 import theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
@@ -17,24 +19,25 @@ import AppRouter from './AppRouter';
 // @ts-expect-error no types from font import
 import('typeface-open-sans');

-connectSocket();
+const preferredClientName = socketClientName.getState().name;
+connectSocket(preferredClientName);

 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(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      // handle held key
+      if (event.repeat) return;
+      // check if the alt key is pressed
+      if (event.altKey) {
+        if (event.code === 'KeyT') {
+          // ask to see debug
+          sendToElectron('set-window', 'show-dev');
+        }
+      }
+    };
+
    if (isElectron) {
      document.addEventListener('keydown', handleKeyPress);
    }
@@ -43,7 +46,7 @@ function App() {
        document.removeEventListener('keydown', handleKeyPress);
      }
    };
-  }, []);
+  }, [isElectron, sendToElectron]);

  return (
    <ChakraProvider resetCSS theme={theme}>
@@ -52,11 +55,11 @@ function App() {
          <BrowserRouter>
            <div className='App'>
              <ErrorBoundary>
-                <Suspense fallback={null}>
-                  <TranslationProvider>
+                <TranslationProvider>
+                  <ContextMenu>
                    <AppRouter />
-                  </TranslationProvider>
-                </Suspense>
+                  </ContextMenu>
+                </TranslationProvider>
              </ErrorBoundary>
              <ReactQueryDevtools initialIsOpen={false} />
            </div>
@@ -1,11 +1,11 @@
-import { lazy, useEffect } from 'react';
-import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';

-import useAliases from './common/hooks-query/useAliases';
+import withAlias from './features/AliasWrapper';
 import withData from './features/viewers/ViewWrapper';

 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
-const Table = lazy(() => import('./features/table/ProtectedTable'));
+const Cuesheet = lazy(() => import('./features/cuesheet/ProtectedCuesheet'));

 const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
 const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
@@ -17,14 +17,14 @@ const Public = lazy(() => import('./features/viewers/public/Public'));
 const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerWrapper'));
 const StudioClock = lazy(() => import('./features/viewers/studio/StudioClock'));

-const STimer = withData(TimerView);
-const SMinimalTimer = withData(MinimalTimerView);
-const SClock = withData(ClockView);
-const SCountdown = withData(Countdown);
-const SBackstage = withData(Backstage);
-const SPublic = withData(Public);
-const SLowerThird = withData(Lower);
-const SStudio = withData(StudioClock);
+const STimer = withAlias(withData(TimerView));
+const SMinimalTimer = withAlias(withData(MinimalTimerView));
+const SClock = withAlias(withData(ClockView));
+const SCountdown = withAlias(withData(Countdown));
+const SBackstage = withAlias(withData(Backstage));
+const SPublic = withAlias(withData(Public));
+const SLowerThird = withAlias(withData(Lower));
+const SStudio = withAlias(withData(StudioClock));

 const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
 const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
@@ -33,87 +33,73 @@ const MessageControl = lazy(() => import('./features/control/message/MessageCont
 const Info = lazy(() => import('./features/info/InfoExport'));

 export default function AppRouter() {
-  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}`);
-        break;
-      }
-    }
-  }, [data, location, navigate]);
-
  return (
-    <Routes>
-      <Route path='/' element={<Navigate to='/timer' />} />
-      <Route path='/speaker' element={<STimer />} />
-      <Route path='/presenter' element={<STimer />} />
-      <Route path='/stage' element={<STimer />} />
-      <Route path='/timer' element={<STimer />} />
+    <Suspense fallback={null}>
+      <Routes>
+        <Route path='/' element={<Navigate to='/timer' />} />
+        <Route path='/speaker' element={<STimer />} />
+        <Route path='/presenter' element={<STimer />} />
+        <Route path='/stage' element={<STimer />} />
+        <Route path='/timer' element={<STimer />} />

-      <Route path='/minimal' element={<SMinimalTimer />} />
-      <Route path='/minimalTimer' element={<SMinimalTimer />} />
-      <Route path='/simpleTimer' element={<SMinimalTimer />} />
+        <Route path='/minimal' element={<SMinimalTimer />} />
+        <Route path='/minimalTimer' element={<SMinimalTimer />} />
+        <Route path='/simpleTimer' element={<SMinimalTimer />} />

-      <Route path='/clock' element={<SClock />} />
+        <Route path='/clock' element={<SClock />} />

-      <Route path='/countdown' element={<SCountdown />} />
+        <Route path='/countdown' element={<SCountdown />} />

-      <Route path='/sm' element={<SBackstage />} />
-      <Route path='/backstage' element={<SBackstage />} />
+        <Route path='/sm' element={<SBackstage />} />
+        <Route path='/backstage' element={<SBackstage />} />

-      <Route path='/public' element={<SPublic />} />
-      <Route path='/studio' element={<SStudio />} />
-      {/*/!* Lower cannot have fallback *!/*/}
-      <Route path='/lower' element={<SLowerThird />} />
+        <Route path='/public' element={<SPublic />} />
+        <Route path='/studio' element={<SStudio />} />
+        {/*/!* Lower cannot have fallback *!/*/}
+        <Route path='/lower' element={<SLowerThird />} />

-      {/*/!* Protected Routes *!/*/}
-      <Route path='/editor' element={<Editor />} />
-      <Route path='/cuesheet' element={<Table />} />
-      <Route path='/cuelist' element={<Table />} />
-      <Route path='/table' element={<Table />} />
+        {/*/!* Protected Routes *!/*/}
+        <Route path='/editor' element={<Editor />} />
+        <Route path='/cuesheet' element={<Cuesheet />} />
+        <Route path='/cuelist' element={<Cuesheet />} />
+        <Route path='/table' element={<Cuesheet />} />

-      {/*/!* Protected Routes - Elements *!/*/}
-      <Route
-        path='/rundown'
-        element={
-          <EditorFeatureWrapper>
-            <RundownPanel />
-          </EditorFeatureWrapper>
-        }
-      />
-      <Route
-        path='/timercontrol'
-        element={
-          <EditorFeatureWrapper>
-            <TimerControl />
-          </EditorFeatureWrapper>
-        }
-      />
-      <Route
-        path='/messagecontrol'
-        element={
-          <EditorFeatureWrapper>
-            <MessageControl />
-          </EditorFeatureWrapper>
-        }
-      />
-      <Route
-        path='/info'
-        element={
-          <EditorFeatureWrapper>
-            <Info />
-          </EditorFeatureWrapper>
-        }
-      />
-      {/*/!* Send to default if nothing found *!/*/}
-      <Route path='*' element={<STimer />} />
-    </Routes>
+        {/*/!* Protected Routes - Elements *!/*/}
+        <Route
+          path='/rundown'
+          element={
+            <EditorFeatureWrapper>
+              <RundownPanel />
+            </EditorFeatureWrapper>
+          }
+        />
+        <Route
+          path='/timercontrol'
+          element={
+            <EditorFeatureWrapper>
+              <TimerControl />
+            </EditorFeatureWrapper>
+          }
+        />
+        <Route
+          path='/messagecontrol'
+          element={
+            <EditorFeatureWrapper>
+              <MessageControl />
+            </EditorFeatureWrapper>
+          }
+        />
+        <Route
+          path='/info'
+          element={
+            <EditorFeatureWrapper>
+              <Info />
+            </EditorFeatureWrapper>
+          }
+        />
+        {/*/!* Send to default if nothing found *!/*/}
+        <Route path='*' element={<STimer />} />
+      </Routes>
+    </Suspense>
  );
 }
@@ -1,9 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-
-export const queryClientMock = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
@@ -1,22 +0,0 @@
-// Exported viewer link location
-const minimalLocation = 'minimal';
-const speakerLocation = 'speaker';
-const smLocation = 'sm';
-const publicLocation = 'public';
-const studioLocation = 'studio';
-const cuesheetLocation = 'cuesheet';
-const countdownLocation = 'countdown';
-const clockLocation = 'clock';
-const lowerLocation = 'lower';
-
-export const viewerLocations = [
-  { link: speakerLocation, label: 'Stage timer' },
-  { link: clockLocation, label: 'Clock' },
-  { link: minimalLocation, label: 'Minimal timer' },
-  { link: smLocation, label: 'Backstage screen' },
-  { link: publicLocation, label: 'Public screen' },
-  { link: lowerLocation, label: 'Lower thirds' },
-  { link: studioLocation, label: 'Studio clock' },
-  { link: countdownLocation, label: 'Countdown' },
-  { link: cuesheetLocation, label: 'Cuesheet' },
-];
@@ -1,7 +1,5 @@
-export const STATIC_PORT = 4001;
-
 // REST stuff
-export const EVENT_DATA = ['eventdata'];
+export const PROJECT_DATA = ['project'];
 export const ALIASES = ['aliases'];
 export const USERFIELDS = ['userFields'];
 export const RUNDOWN_TABLE_KEY = 'rundown';
@@ -12,11 +10,16 @@ export const APP_SETTINGS = ['appSettings'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const RUNTIME = ['runtimeStore'];

-export const serverPort = import.meta.env.DEV ? STATIC_PORT : window.location.port;
-export const serverURL = import.meta.env.DEV ? `http://localhost:${serverPort}` : window.location.origin;
-export const websocketUrl = `ws://${window.location.hostname}:${serverPort}/ws`;
+const location = window.location;
+const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
+export const isProduction = import.meta.env.MODE === 'production';

-export const eventURL = `${serverURL}/eventdata`;
+const STATIC_PORT = 4001;
+export const serverPort = isProduction ? location.port : STATIC_PORT;
+export const serverURL = `${location.protocol}//${location.hostname}:${serverPort}`;
+export const websocketUrl = `${socketProtocol}://${location.hostname}:${serverPort}/ws`;
+
+export const projectDataURL = `${serverURL}/project`;
 export const rundownURL = `${serverURL}/events`;
 export const ontimeURL = `${serverURL}/ontime`;

@@ -0,0 +1,25 @@
+import axios, { AxiosError } from 'axios';
+import { LogLevel } from 'ontime-types';
+import { generateId, millisToString } from 'ontime-utils';
+
+import { addLog } from '../stores/logger';
+import { nowInMillis } from '../utils/time';
+
+export function logAxiosError(prepend: string, error: unknown) {
+  let message;
+  if (axios.isAxiosError(error)) {
+    const statusText = (error as AxiosError).response?.statusText ?? '';
+    const data = (error as AxiosError).response?.data ?? '';
+    message = `${prepend} ${statusText}: ${data}`;
+  } else {
+    message = `${prepend}: ${error}`;
+  }
+
+  addLog({
+    id: generateId(),
+    origin: 'SERVER',
+    time: millisToString(nowInMillis()),
+    level: LogLevel.Error,
+    text: message,
+  });
+}
@@ -1,21 +0,0 @@
-import axios from 'axios';
-import { EventData } from 'ontime-types';
-
-import { eventURL } from './apiConstants';
-
-/**
- * @description HTTP request to fetch event data
- * @return {Promise}
- */
-export async function fetchEventData(): Promise<EventData> {
-  const res = await axios.get(eventURL);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate event data
- * @return {Promise}
- */
-export async function postEventData(data: EventData) {
-  return axios.post(eventURL, data);
-}
@@ -28,14 +28,6 @@ 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;
@@ -58,6 +50,19 @@ export async function requestApplyDelay(eventId: string) {
  return axios.patch(`${rundownURL}/applydelay/${eventId}`);
 }

+export type SwapEntry = {
+  from: string;
+  to: string;
+};
+
+/**
+ * @description HTTP request to swap two events
+ * @return {Promise}
+ */
+export async function requestEventSwap(data: SwapEntry) {
+  return axios.patch(`${rundownURL}/swap`, data);
+}
+
 /**
 * @description HTTP request to delete given event
 * @return {Promise}
@@ -1,5 +1,14 @@
-import axios from 'axios';
-import { Alias, EventData, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-types';
+import axios, { AxiosResponse } from 'axios';
+import {
+  Alias,
+  OntimeRundown,
+  OSCSettings,
+  OscSubscription,
+  ProjectData,
+  Settings,
+  UserFields,
+  ViewSettings,
+} from 'ontime-types';

 import { apiRepoLatest } from '../../externals';
 import { InfoType } from '../models/Info';
@@ -100,6 +109,14 @@ export async function postOSC(data: OSCSettings) {
  return axios.post(`${ontimeURL}/osc`, data);
 }

+/**
+ * @description HTTP request to mutate osc subscriptions
+ * @return {Promise}
+ */
+export async function postOscSubscriptions(data: OscSubscription) {
+  return axios.post(`${ontimeURL}/osc-subscriptions`, data);
+}
+
 /**
 * @description HTTP request to download db
 * @return {Promise}
@@ -136,7 +153,7 @@ export const downloadRundown = async () => {
 type UploadDataOptions = {
  onlyRundown?: boolean;
 };
-export const uploadData = async (file: string, setProgress: (value: number) => void, options?: UploadDataOptions) => {
+export const uploadData = async (file: File, setProgress: (value: number) => void, options?: UploadDataOptions) => {
  const formData = new FormData();
  formData.append('userFile', file);
  const onlyRundown = options?.onlyRundown || 'false';
@@ -153,6 +170,31 @@ export const uploadData = async (file: string, setProgress: (value: number) => v
    .then((response) => response.data.id);
 };

+type Backend = {
+  rundown: OntimeRundown;
+  project: ProjectData;
+  userFields: UserFields;
+};
+
+export async function postPreviewExcel(file: File, setProgress: (value: number) => void, options?: UploadDataOptions) {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  formData.append('options', JSON.stringify(options));
+  console.log('appending options', options);
+
+  const response: AxiosResponse<Backend> = await axios.post(`${ontimeURL}/previewExcel`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    onUploadProgress: (progressEvent) => {
+      const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
+      setProgress(complete);
+    },
+  });
+
+  return response;
+}
+
 export type HasUpdate = {
  url: string;
  version: string;
@@ -170,6 +212,6 @@ export async function getLatestVersion(): Promise<HasUpdate> {
  };
 }

-export async function postNew(initialData: Partial<EventData>) {
+export async function postNew(initialData: Partial<ProjectData>) {
  return axios.post(`${ontimeURL}/new`, initialData);
 }
@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { ProjectData } from 'ontime-types';
+
+import { projectDataURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch project data
+ * @return {Promise}
+ */
+export async function getProjectData(): Promise<ProjectData> {
+  const res = await axios.get(projectDataURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate project data
+ * @return {Promise}
+ */
+export async function postProjectData(data: ProjectData) {
+  return axios.post(projectDataURL, data);
+}
@@ -1,26 +0,0 @@
-import { Button } from '@chakra-ui/react';
-import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
-import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
-import PropTypes from 'prop-types';
-
-export default function EnableBtn(props) {
-  const { active, text, actionHandler, size = 'xs' } = props;
-  return (
-    <Button
-      size={size}
-      leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
-      colorScheme='blue'
-      variant={active ? 'solid' : 'outline'}
-      onClick={actionHandler}
-    >
-      {text}
-    </Button>
-  );
-}
-
-EnableBtn.propTypes = {
-  active: PropTypes.bool,
-  text: PropTypes.string,
-  actionHandler: PropTypes.func,
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-}
@@ -1,28 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { IoPause } from '@react-icons/all-files/io5/IoPause';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-interface PauseIconBtnProps {
-  clickhandler: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  active: boolean;
-  disabled: boolean;
-}
-
-export default function PauseIconBtn(props: PauseIconBtnProps) {
-  const { clickhandler, active, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Pause timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoPause size='24px' />}
-        colorScheme='orange'
-        variant={active ? 'solid' : 'outline'}
-        onClick={clickhandler}
-        width={120}
-        disabled={disabled}
-        aria-label='Pause playback'
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
@@ -1,25 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
-import PropTypes from 'prop-types';
-
-export default function PublicIconBtn(props) {
-  const { actionHandler, active, size = 'xs', ...rest } = props;
-  return (
-    <Tooltip label={active ? 'Make event private' : 'Make event public'}>
-      <IconButton
-        size={size}
-        icon={<FiUsers />}
-        colorScheme='blue'
-        variant={active ? 'solid' : 'outline'}
-        onClick={() => actionHandler('update', { field: 'isPublic', value: !active })}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-PublicIconBtn.propTypes = {
-  actionHandler: PropTypes.func,
-  active: PropTypes.bool,
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-};
@@ -1,28 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-export default function RollIconBtn(props) {
-  const { clickhandler, active, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Roll mode' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoTimeOutline size='24px' />}
-        colorScheme='blue'
-        variant={active ? 'solid' : 'outline'}
-        onClick={clickhandler}
-        width={120}
-        disabled={disabled}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-RollIconBtn.propTypes = {
-  clickhandler: PropTypes.func,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool,
-};
@@ -1,28 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-export default function StartIconBtn(props) {
-  const { clickhandler, active, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Start timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoPlay size='24px' />}
-        colorScheme='green'
-        variant={active ? 'solid' : 'outline'}
-        onClick={clickhandler}
-        width={120}
-        disabled={disabled}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-StartIconBtn.propTypes = {
-  clickhandler: PropTypes.func,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool
-}
@@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';

 interface TooltipActionBtnProps extends IconButtonProps {
-  clickHandler: (event?: MouseEvent) => void;
+  clickHandler: (event?: MouseEvent) => void | Promise<void>;
  tooltip: string;
  openDelay?: number;
 }
@@ -1,29 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-export default function TransportIconBtn(props) {
-  const { clickHandler, icon, tooltip, disabled, ...rest } = props;
-  return (
-    <Tooltip label={tooltip} openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={icon}
-        colorScheme='white'
-        variant='outline'
-        _hover={!disabled && { bg: '#ebedf0', color: '#333' }}
-        onClick={clickHandler}
-        width={90}
-        disabled={disabled}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-TransportIconBtn.propTypes = {
-  clickHandler: PropTypes.func,
-  icon: PropTypes.element,
-  tooltip: PropTypes.string,
-  disabled: PropTypes.bool,
-};
@@ -1,27 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { IoStop } from '@react-icons/all-files/io5/IoStop';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-export default function UnloadIconBtn(props) {
-  const { clickHandler, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Unload event' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoStop size='22px' />}
-        colorScheme='red'
-        variant='outline'
-        onClick={clickHandler}
-        width={90}
-        disabled={disabled}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}
-
-UnloadIconBtn.propTypes = {
-  clickHandler: PropTypes.func,
-  disabled: PropTypes.bool,
-};
@@ -0,0 +1,9 @@
+.contextMenuButton {
+  position: absolute;
+  cursor: pointer;
+}
+
+.contextMenuBackdrop {
+  position: fixed;
+  inset: 0;
+}
@@ -0,0 +1,84 @@
+// logic (with some modifications) culled from:
+// https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
+
+import { Fragment, ReactElement } from 'react';
+import { Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
+import { IconType } from '@react-icons/all-files';
+import { create } from 'zustand';
+
+import style from './ContextMenu.module.scss';
+
+type ContextMenuCoords = {
+  x: number;
+  y: number;
+};
+
+export type Option = {
+  label: string;
+  icon: IconType;
+  onClick: () => void;
+  withDivider?: boolean;
+  isDisabled?: boolean;
+};
+
+type ContextMenuStore = {
+  coords: ContextMenuCoords;
+  options: Option[];
+  isOpen: boolean;
+  setContextMenu: (coords: ContextMenuCoords, options: Option[]) => void;
+  setIsOpen: (newIsOpen: boolean) => void;
+};
+
+export const useContextMenuStore = create<ContextMenuStore>((set) => ({
+  coords: { x: 0, y: 0 },
+  options: [],
+  isOpen: false,
+  setContextMenu: (coords, options) => set(() => ({ coords, options, isOpen: true })),
+  setIsOpen: (newIsOpen) => set(() => ({ isOpen: newIsOpen })),
+}));
+
+interface ContextMenuProps {
+  // ReactElement type required due to early `return` (line 51) returning {children}
+  children: ReactElement;
+}
+
+export const ContextMenu = ({ children }: ContextMenuProps) => {
+  const { coords, options, isOpen, setIsOpen } = useContextMenuStore();
+
+  const onClose = () => {
+    return setIsOpen(false);
+  };
+
+  if (!isOpen) {
+    return children;
+  }
+
+  return (
+    <>
+      {children}
+      <div className={style.contextMenuBackdrop} />
+      <Menu isOpen gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
+        <MenuButton
+          className={style.contextMenuButton}
+          aria-hidden
+          w={1}
+          h={1}
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+        <MenuList>
+          {options.map(({ label, icon: Icon, onClick, withDivider, isDisabled }, i) => (
+            <Fragment key={label}>
+              {withDivider && <MenuDivider />}
+              <MenuItem key={i} icon={<Icon />} onClick={onClick} isDisabled={isDisabled}>
+                {label}
+              </MenuItem>
+            </Fragment>
+          ))}
+        </MenuList>
+      </Menu>
+    </>
+  );
+};
@@ -4,6 +4,7 @@ import { IoCopy } from '@react-icons/all-files/io5/IoCopy';

 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { Size } from '../../models/Util.type';
+import copyToClipboard from '../../utils/copyToClipboard';

 interface CopyTagProps {
  label: string;
@@ -14,10 +15,7 @@ interface CopyTagProps {
 export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
  const { label, className, size = 'xs', children } = props;

-  const handleClick = () => {
-    // we need to this as a promise because safari
-    setTimeout(async () => await navigator.clipboard.writeText(children as string));
-  };
+  const handleClick = () => copyToClipboard(children as string);

  return (
    <Tooltip label={label} openDelay={tooltipDelayFast}>
@@ -1,7 +1,11 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
+// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';

+import { runtime } from '@/common/stores/runtime';
+import { hasConnected, reconnectAttempts, shouldReconnect } from '@/common/utils/socket';
+
 import style from './ErrorBoundary.module.scss';

 class ErrorBoundary extends React.Component {
@@ -24,7 +28,9 @@ class ErrorBoundary extends React.Component {
    });

    Sentry.withScope((scope) => {
-      scope.setExtras(error);
+      scope.setExtras('error', error);
+      scope.setExtras('store', runtime.getState());
+      scope.setExtras('hasSocket', { hasConnected, shouldReconnect, reconnectAttempts });
      const eventId = Sentry.captureException(error);
      this.setState({ eventId, info });
    });
@@ -0,0 +1,22 @@
+@use "../../../theme/_ontimeColours" as *;
+
+@mixin pad-item {
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+.previewTable {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(6, auto);
+  font-size: calc(1rem - 2px);
+}
+
+.field {
+  font-weight: 200;
+  @include pad-item;
+}
+
+.value {
+  @include pad-item;
+}
@@ -0,0 +1,26 @@
+import { ProjectData } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewProjectDataProps {
+  project: ProjectData;
+}
+
+export default function PreviewProjectData({ project }: PreviewProjectDataProps) {
+  return (
+    <div className={style.previewTable}>
+      <span className={style.field}>Title</span>
+      <span className={style.value}>{project.title}</span>
+      <span className={style.field}>Description</span>
+      <span className={style.value}>{project.description}</span>
+      <span className={style.field}>Public URL</span>
+      <span className={style.value}>{project.publicUrl}</span>
+      <span className={style.field}>Public info</span>
+      <span className={style.value}>{project.publicInfo}</span>
+      <span className={style.field}>Backstage URL</span>
+      <span className={style.value}>{project.backstageUrl}</span>
+      <span className={style.field}>Backstage info</span>
+      <span className={style.value}>{project.backstageInfo}</span>
+    </div>
+  );
+}
@@ -0,0 +1,126 @@
+import { ReactNode } from 'react';
+import { isOntimeEvent, OntimeRundown, UserFields } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+
+import { getAccessibleColour } from '../../utils/styleUtils';
+
+import style from './PreviewTable.module.scss';
+
+interface PreviewRundownProps {
+  rundown: OntimeRundown;
+  userFields: UserFields;
+}
+
+function booleanToText(value?: boolean) {
+  return value ? 'Yes' : undefined;
+}
+
+export default function PreviewRundown({ rundown, userFields }: PreviewRundownProps) {
+  return (
+    <div className={style.container}>
+      <div className={style.scrollContainer}>
+        <table className={style.rundownPreview}>
+          <thead className={style.header}>
+            <tr>
+              <th>#</th>
+              <th>Type</th>
+              <th>Cue</th>
+              <th>Title</th>
+              <th>Subtitle</th>
+              <th>Presenter</th>
+              <th>Note</th>
+              <th>Time Start</th>
+              <th>Time End</th>
+              <th>Duration</th>
+              <th>Is Public</th>
+              <th>Skip</th>
+              <th>Colour</th>
+              <th>Timer Type</th>
+              <th>End Action</th>
+              <th>
+                user0 <Tag>{userFields.user0}</Tag>
+              </th>
+              <th>
+                user1 <Tag>{userFields.user1}</Tag>
+              </th>
+              <th>
+                user2 <Tag>{userFields.user2}</Tag>
+              </th>
+              <th>
+                user3 <Tag>{userFields.user3}</Tag>
+              </th>
+              <th>
+                user4 <Tag>{userFields.user4}</Tag>
+              </th>
+              <th>
+                user5 <Tag>{userFields.user5}</Tag>
+              </th>
+              <th>
+                user6 <Tag>{userFields.user6}</Tag>
+              </th>
+              <th>
+                user7 <Tag>{userFields.user7}</Tag>
+              </th>
+              <th>
+                user8 <Tag>{userFields.user8}</Tag>
+              </th>
+              <th>
+                user9 <Tag>{userFields.user9}</Tag>
+              </th>
+            </tr>
+          </thead>
+          <tbody className={style.body}>
+            {rundown.map((event, index) => {
+              const key = event.id;
+              if (isOntimeEvent(event)) {
+                const colour = event.colour ? getAccessibleColour(event.colour) : {};
+                const isPublic = booleanToText(event.isPublic);
+                const skip = booleanToText(event.skip);
+                return (
+                  <tr key={key}>
+                    <th>
+                      <Tag>{index + 1}</Tag>
+                    </th>
+                    <th>Event</th>
+                    <th>{event.cue}</th>
+                    <th>{event.title}</th>
+                    <th>{event.subtitle}</th>
+                    <th>{event.presenter}</th>
+                    <th>{event.note}</th>
+                    <th>{millisToString(event.timeStart)}</th>
+                    <th>{millisToString(event.timeEnd)}</th>
+                    <th>{millisToString(event.duration)}</th>
+                    <th>{isPublic && <Tag>{isPublic}</Tag>}</th>
+                    <th>{skip && <Tag>{skip}</Tag>}</th>
+                    <th style={{ ...colour }}>{event.colour}</th>
+                    <th>
+                      <Tag>{event.timerType}</Tag>
+                    </th>
+                    <th>
+                      <Tag>{event.endAction}</Tag>
+                    </th>
+                    <th>{event.user0}</th>
+                    <th>{event.user1}</th>
+                    <th>{event.user2}</th>
+                    <th>{event.user3}</th>
+                    <th>{event.user4}</th>
+                    <th>{event.user5}</th>
+                    <th>{event.user6}</th>
+                    <th>{event.user7}</th>
+                    <th>{event.user8}</th>
+                    <th>{event.user9}</th>
+                  </tr>
+                );
+              }
+              return null;
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function Tag({ children }: { children: ReactNode }) {
+  return <span className={style.tag}>{children}</span>;
+}
@@ -0,0 +1,55 @@
+@use "../../../theme/_ontimeColours" as *;
+
+.container {
+  max-width: 100%;
+  max-height: max(300px, 30vh);
+  overflow: scroll;
+}
+
+.scrollContainer {
+  overflow-x: scroll;
+}
+
+.rundownPreview {
+  font-size: calc(1rem - 2px);
+  border-collapse: separate;
+}
+
+.header,
+.body {
+  th {
+    font-weight: 400;
+    height: unset;
+    line-height: calc(1rem - 2px);
+    white-space: nowrap;
+    padding-left: 0.25rem;
+    padding-right: 1rem;
+  }
+}
+
+.header {
+  th {
+    font-weight: 200;
+    text-align: left;
+  }
+
+  tr {
+    word-wrap: unset;
+  }
+}
+
+.body {
+
+  tr:nth-child(odd) {
+    background-color: $gray-50;
+  }
+}
+
+.tag {
+  font-size: 10px;
+  background-color: $blue-500;
+  color: $pure-white;
+  border-radius: 2px;
+  padding: 0 0.25rem;
+  white-space: nowrap;
+}
@@ -0,0 +1,34 @@
+import { UserFields } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewUserFieldProps {
+  userFields: UserFields;
+}
+
+export default function PreviewUserField({ userFields }: PreviewUserFieldProps) {
+  return (
+    <div className={style.previewTable}>
+      <span className={style.field}>user0</span>
+      <span className={style.value}>{userFields.user0}</span>
+      <span className={style.field}>user1</span>
+      <span className={style.value}>{userFields.user1}</span>
+      <span className={style.field}>user2</span>
+      <span className={style.value}>{userFields.user2}</span>
+      <span className={style.field}>user3</span>
+      <span className={style.value}>{userFields.user3}</span>
+      <span className={style.field}>user4</span>
+      <span className={style.value}>{userFields.user4}</span>
+      <span className={style.field}>user5</span>
+      <span className={style.value}>{userFields.user5}</span>
+      <span className={style.field}>user6</span>
+      <span className={style.value}>{userFields.user6}</span>
+      <span className={style.field}>user7</span>
+      <span className={style.value}>{userFields.user7}</span>
+      <span className={style.field}>user8</span>
+      <span className={style.value}>{userFields.user8}</span>
+      <span className={style.field}>user9</span>
+      <span className={style.value}>{userFields.user9}</span>
+    </div>
+  );
+}
@@ -3,12 +3,7 @@ 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;
+export const AutoTextArea = (props: TextareaProps) => {
  const ref = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
@@ -26,8 +21,8 @@ export const AutoTextArea = (props: AutoTextAreaProps) => {
      resize='none'
      ref={ref}
      transition='height none'
-      variant={isDark ? 'ontime-filled' : 'ontime-filled-on-light'}
-      {...rest}
+      variant='ontime-transparent'
+      {...props}
    />
  );
 };
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';

-import { TitleActions } from '../../../../features/event-editor/composite/EventEditorTitles';
+import { TitleActions } from '../../../../features/event-editor/composite/EventEditorDataLeft';

 import Swatch from './Swatch';

@@ -11,6 +11,7 @@ import { TimeEntryField } from '../../../utils/timesManager';
 import style from './TimeInput.module.scss';

 interface TimeInputProps {
+  id?: TimeEntryField;
  name: TimeEntryField;
  submitHandler: (field: TimeEntryField, value: number) => void;
  time?: number;
@@ -36,7 +37,17 @@ function ButtonTooltip(name: TimeEntryField, warning?: string) {
 }

 export default function TimeInput(props: TimeInputProps) {
-  const { name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0, warning } = props;
+  const {
+    id,
+    name,
+    submitHandler,
+    time = 0,
+    delay = 0,
+    placeholder,
+    validationHandler,
+    previousEnd = 0,
+    warning,
+  } = props;
  const { emitError } = useEmitLog();
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [value, setValue] = useState<string>('');
@@ -189,7 +200,8 @@ export default function TimeInput(props: TimeInputProps) {
      </InputLeftElement>
      <Input
        ref={inputRef}
-        data-testid='time-input'
+        id={id}
+        data-testid={`time-input-${name}`}
        className={style.inputField}
        type='text'
        placeholder={placeholder}
@@ -3,7 +3,7 @@
 $progress-bar-size: 12px;
 $progress-bar-br: 3px;

-.progress-bar {
+.multiprogress-bar {
  position: relative;
  width: 100%;
  height: $progress-bar-size;
@@ -17,7 +17,7 @@ $progress-bar-br: 3px;
  }
 }

-.progress-bar__indicator {
+.multiprogress-bar__indicator {
  position: absolute;
  height: inherit;
  background-color: black;
@@ -27,7 +27,7 @@ $progress-bar-br: 3px;
  right: 0;
 }

-.progress-bar__bg-normal {
+.multiprogress-bar__bg-normal {
  position: absolute;
  height: inherit;
  right: 0;
@@ -35,14 +35,14 @@ $progress-bar-br: 3px;
  width: 100%;
 }

-.progress-bar__bg-warning {
+.multiprogress-bar__bg-warning {
  position: absolute;
  height: inherit;
  right: 0;
  border-radius: 0 $progress-bar-br $progress-bar-br 0;
 }

-.progress-bar__bg-danger {
+.multiprogress-bar__bg-danger {
  position: absolute;
  height: inherit;
  right: 0;
@@ -23,11 +23,11 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
  const warningWidth = clamp((warning / complete) * 100, 0, 100);

  return (
-    <div className={`progress-bar ${hidden ? 'progress-bar--hidden' : ''} ${className}`}>
-      <div className='progress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-      <div className='progress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
-      <div className='progress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
-      <div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
+      <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
+      <div className='multiprogress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
+      <div className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
+      <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
    </div>
  );
 }
@@ -1,6 +1,6 @@
-@use "../../../theme/v2Styles" as *;
-@use "../../../theme/mixins" as *;
-@use "../../../theme/ontimeColours" as *;
+@use '../../../theme/v2Styles' as *;
+@use '../../../theme/mixins' as *;
+@use '../../../theme/ontimeColours' as *;

 $menu-bg: $gray-1200;
 $menu-hover-bg: $gray-1350;
@@ -14,14 +14,27 @@ $button-size: 48px;
  transform: rotate(180deg);
 }

-.navButton {
-  z-index: 2;
-  position: absolute;
-  left: 0.5em;
-  top: 0.5em;
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  padding: 0.5em;
+
  transition-property: opacity;
  transition-duration: 0.3s;
+
  opacity: 1;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 2;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.button {
  font-size: 24px;
  color: $icon-color;
  background-color: $button-bg;
@@ -30,10 +43,11 @@ $button-size: 48px;
  display: grid;
  place-content: center;
  border-radius: 3px;
+}

-  &.hidden {
-    opacity: 0;
-  }
+.navButton {
+  @extend .button;
+  z-index: 3;
 }

 .menuContainer {
@@ -1,10 +1,12 @@
-import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { KeyboardEvent, memo, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useSearchParams } from 'react-router-dom';
+import { useDisclosure } from '@chakra-ui/react';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+import { IoPencilSharp } from '@react-icons/all-files/io5/IoPencilSharp';
 import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';

 import { navigatorConstants } from '../../../viewerConfig';
@@ -13,20 +15,25 @@ import useFullscreen from '../../hooks/useFullscreen';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { useViewOptionsStore } from '../../stores/viewOptions';

+import RenameClientModal from './rename-client-modal/RenameClientModal';
+
 import style from './NavigationMenu.module.scss';

-export default function NavigationMenu() {
+function NavigationMenu() {
  const location = useLocation();

  const { isFullScreen, toggleFullScreen } = useFullscreen();
  const { mirror, toggleMirror } = useViewOptionsStore();
  const [showButton, setShowButton] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
  const [showMenu, setShowMenu] = useState(false);
  const menuRef = useRef<HTMLDivElement | null>(null);
  useClickOutside(menuRef, () => setShowMenu(false));

+  const { isOpen, onOpen, onClose } = useDisclosure();
+
  const toggleMenu = () => setShowMenu((prev) => !prev);
-  useKeyDown(toggleMenu, ' ');
+  useKeyDown(toggleMenu, ' ', { isDisabled: searchParams.get('edit') === 'true' || isOpen });

  useEffect(() => {
    let fadeOut: NodeJS.Timeout | null = null;
@@ -50,62 +57,84 @@ export default function NavigationMenu() {
  const handleFullscreen = () => toggleFullScreen();
  const handleMirror = () => toggleMirror();

+  const showEditFormDrawer = () => {
+    searchParams.append('edit', 'true');
+    setSearchParams(searchParams);
+  };
+
  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 />}
+      <RenameClientModal isOpen={isOpen} onClose={onClose} />
+      <div className={`${style.buttonContainer} ${!showButton && !showMenu ? style.hidden : ''}`}>
+        <button onClick={toggleMenu} aria-label='toggle menu' className={style.navButton}>
+          <IoApps />
+        </button>
+        <button className={style.button} onClick={showEditFormDrawer}>
+          <IoPencilSharp />
+        </button>
+        {showMenu && (
+          <div className={style.menuContainer} data-testid='navigation-menu'>
+            <div className={style.buttonsContainer}>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={handleFullscreen}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && handleFullscreen();
+                }}
+              >
+                Toggle Fullscreen
+                {isFullScreen ? <IoContract /> : <IoExpand />}
+              </div>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={handleMirror}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && handleMirror();
+                }}
+              >
+                Flip Screen
+                <IoSwapVertical />
+              </div>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={onOpen}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && onOpen();
+                }}
+              >
+                Rename Client
+              </div>
            </div>
-            <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}
+            <hr className={style.separator} />
+            <Link to='/cuesheet' className={style.link} tabIndex={0}>
+              Cuesheet
              <IoArrowUp className={style.linkIcon} />
            </Link>
-          ))}
-        </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>
    </div>,
+
    document.body,
  );
 }
+
+export default memo(NavigationMenu);
@@ -0,0 +1,5 @@
+.modalBody {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+import { setClientName } from '../../../hooks/useSocket';
+import { useSocketClientName } from '../../../stores/connectionName';
+
+import style from './RenameClientModal.module.scss';
+
+interface RenameClientModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function RenameClientModal({ isOpen, onClose }: RenameClientModalProps) {
+  const { name: clientName, persistName } = useSocketClientName();
+  const [newName, setNewName] = useState(clientName);
+
+  useEffect(() => {
+    setNewName(clientName);
+  }, [isOpen, clientName]);
+
+  const handleRename = async () => {
+    if (newName) {
+      await setClientName(newName);
+      persistName(newName);
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size='sm'
+      closeOnOverlayClick={false}
+      motionPreset='slideInBottom'
+      scrollBehavior='inside'
+      preserveScrollBarGap
+      variant='ontime-small'
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Rename client</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody className={style.modalBody}>
+          <Input
+            placeholder='Connection must have a name'
+            defaultValue={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            variant='ontime-filled-on-light'
+          />
+          <Button
+            isDisabled={newName === clientName || !newName}
+            onClick={handleRename}
+            width='100%'
+            variant='ontime-filled'
+          >
+            Save
+          </Button>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
@@ -16,8 +16,8 @@ $progress-bar-br: 6px;

 .progress-bar__indicator {
  height: $progress-bar-size;
-  border-radius: $progress-bar-br;
  background-color: var(--timer-progress-override, $accent-color);
  transition: 1s linear;
+  border-radius: $progress-bar-br 0 0 $progress-bar-br;
  transition-property: width;
 }
@@ -6,11 +6,12 @@ import ScheduleItem from './ScheduleItem';
 import './Schedule.scss';

 interface ScheduleProps {
+  isProduction?: boolean;
  className?: string;
 }

-export default function Schedule({ className }: ScheduleProps) {
-  const { paginatedEvents, selectedEventId, isBackstage } = useSchedule();
+export default function Schedule({ isProduction, className }: ScheduleProps) {
+  const { paginatedEvents, selectedEventId, isBackstage, scheduleType } = useSchedule();

  if (paginatedEvents?.length < 1) {
    return <Empty text='No events to show' />;
@@ -21,17 +22,25 @@ export default function Schedule({ className }: ScheduleProps) {
  return (
    <ul className={`schedule ${className}`}>
      {paginatedEvents.map((event) => {
-        if (event.id === selectedEventId) {
-          selectedState = 'now';
-        } else if (selectedState === 'now') {
-          selectedState = 'future';
+        if (scheduleType === 'past' || scheduleType === 'future') {
+          selectedState = scheduleType;
+        } else {
+          if (event.id === selectedEventId) {
+            selectedState = 'now';
+          } else if (selectedState === 'now') {
+            selectedState = 'future';
+          }
        }
+
+        const timeStart = isProduction ? event.timeStart + (event?.delay ?? 0) : event.timeStart;
+        const timeEnd = isProduction ? event.timeEnd + (event?.delay ?? 0) : event.timeEnd;
+
        return (
          <ScheduleItem
            key={event.id}
            selected={selectedState}
-            timeStart={event.timeStart}
-            timeEnd={event.timeEnd}
+            timeStart={timeStart}
+            timeEnd={timeEnd}
            title={event.title}
            colour={isBackstage ? event.colour : ''}
            backstageEvent={!event.isPublic}
@@ -7,6 +7,7 @@ interface ScheduleContextState {
  events: OntimeEvent[];
  paginatedEvents: OntimeEvent[];
  selectedEventId: string | null;
+  scheduleType: 'past' | 'now' | 'future';
  numPages: number;
  visiblePage: number;
  isBackstage: boolean;
@@ -27,7 +28,7 @@ export const ScheduleProvider = ({
  events,
  selectedEventId,
  isBackstage = false,
-  eventsPerPage = 8,
+  eventsPerPage = 7,
  time = 10,
 }: PropsWithChildren<ScheduleProviderProps>) => {
  const [visiblePage, setVisiblePage] = useState(0);
@@ -36,6 +37,18 @@ export const ScheduleProvider = ({
  const eventStart = eventsPerPage * visiblePage;
  const eventEnd = eventsPerPage * (visiblePage + 1);
  const paginatedEvents = events.slice(eventStart, eventEnd);
+  const selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
+
+  const resolveScheduleType = () => {
+    if (selectedEventIndex >= eventStart && selectedEventIndex < eventEnd) {
+      return 'now';
+    }
+    if (selectedEventIndex > eventEnd) {
+      return 'past';
+    }
+    return 'future';
+  };
+  const scheduleType = resolveScheduleType();

  // every SCROLL_TIME go to the next array
  useInterval(() => {
@@ -51,6 +64,7 @@ export const ScheduleProvider = ({
        events,
        paginatedEvents,
        selectedEventId,
+        scheduleType,
        numPages,
        visiblePage,
        isBackstage,
@@ -7,7 +7,7 @@
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 600;
-  font-size: 3.75em;
+  font-size: 3.5rem;
  
  &--finished {
    color: $timer-finished-color;
@@ -1,6 +1,5 @@
 import { memo } from 'react';
-
-import { formatDisplay } from '../../utils/dateConfig';
+import { formatDisplay } from 'ontime-utils';

 import './TimerDisplay.scss';

@@ -1,45 +0,0 @@
-@use '../../../theme/v2Styles' as *;
-
-.modalBody {
-  min-height: 40vh;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-
-  .options {
-    margin-bottom: 1.5em;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .notes {
-    font-size: 0.9em;
-  }
-
-  .info {
-    background-color: $bg-container-onlight;
-    margin: 1em 0;
-    padding: 0.5em;
-    border-radius: 2px;
-    color: $text-black;
-    position: relative;
-  }
-
-  .corner {
-    position: absolute;
-    right: 4px;
-    top: 4px;
-  }
-
-  .infoList {
-    font-size: 0.9em;
-    padding-left: 8px;
-  }
-
-  .flexColumnLeft {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
@@ -1,137 +0,0 @@
-import { ChangeEvent, useCallback, useRef, useState } from 'react';
-import {
-  Button,
-  Checkbox,
-  FormControl,
-  FormErrorMessage,
-  FormHelperText,
-  FormLabel,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Progress,
-} from '@chakra-ui/react';
-import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
-import { useQueryClient } from '@tanstack/react-query';
-
-import { RUNDOWN_TABLE } from '../../api/apiConstants';
-import { uploadData } from '../../api/ontimeApi';
-import { useEmitLog } from '../../stores/logger';
-import TooltipActionBtn from '../buttons/TooltipActionBtn';
-
-import { validateFile } from './utils';
-
-import style from './UploadModal.module.scss';
-
-interface UploadModalProps {
-  onClose: () => void;
-  isOpen: boolean;
-}
-
-export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
-  const queryClient = useQueryClient();
-  const { emitError } = useEmitLog();
-  const [errors, setErrors] = useState<string[]>([]);
-  const [file, setFile] = useState<File | null>(null);
-  const [progress, setProgress] = useState(0);
-  const overrideOptionRef = useRef<HTMLInputElement>(null);
-
-  const handleFile = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    const fileUploaded = event?.target?.files?.[0];
-    if (!fileUploaded) return;
-
-    const validate = validateFile(fileUploaded);
-    setErrors(validate.errors);
-
-    if (validate.isValid) {
-      setFile(fileUploaded);
-    } else {
-      setFile(null);
-    }
-  }, []);
-
-  const handleUpload = useCallback(async () => {
-    if (file) {
-      try {
-        await uploadData(file, setProgress, { onlyEvents: overrideOptionRef?.current?.checked });
-      } catch (error) {
-        emitError(`Failed uploading file: ${error}`);
-      } finally {
-        await queryClient.invalidateQueries(RUNDOWN_TABLE);
-        setFile(null);
-      }
-    }
-  }, [emitError, file, queryClient]);
-
-  return (
-    <Modal
-      onClose={onClose}
-      isOpen={isOpen}
-      closeOnOverlayClick={false}
-      motionPreset='slideInBottom'
-      size='xl'
-      scrollBehavior='inside'
-    >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>File upload</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody className={style.modalBody}>
-          <FormControl isInvalid={errors.length > 0}>
-            <FormLabel>Select file to upload</FormLabel>
-            <Input type='file' onChange={handleFile} accept='.json, .xlsx' />
-            {errors.length === 0 ? (
-              <FormHelperText>.XLSX .JSON with max 1MB</FormHelperText>
-            ) : (
-              <FormErrorMessage className={style.flexColumnLeft}>
-                {errors.map((error) => (
-                  <span key={error}>{error}</span>
-                ))}
-              </FormErrorMessage>
-            )}
-          </FormControl>
-          <div className={style.options}>
-            <b>Options</b>
-            <Checkbox ref={overrideOptionRef}>Import only events</Checkbox>
-            <span className={style.notes}>This will prevent overriding user settings</span>
-          </div>
-          {file && (
-            <div className={style.info}>
-              <span>File ready to upload</span>
-              <TooltipActionBtn
-                clickHandler={() => setFile(null)}
-                tooltip='Cancel'
-                aria-label='Cancel'
-                className={style.corner}
-                size='sm'
-                variant='ghosted'
-                icon={<IoCloseSharp />}
-              />
-              <ul className={style.infoList}>
-                <li>{file.name}</li>
-                <li>{`${(file.size / 1024).toFixed(2)}kb`}</li>
-                <li>{file.type}</li>
-              </ul>
-            </div>
-          )}
-          <Progress value={progress} />
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            colorScheme='blue'
-            disabled={!file || errors.length > 0}
-            onClick={handleUpload}
-            isLoading={progress < 0 && progress >= 100}
-          >
-            Upload
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
@@ -1,25 +0,0 @@
-type ValidationStatus = {
-  errors: string[];
-  isValid: boolean;
-};
-
-export function validateFile(file: File): ValidationStatus {
-  const status:ValidationStatus = { errors: [], isValid: true };
-  if (!file) {
-    status.errors.push('No file to upload');
-    status.isValid = false;
-  }
-
-  // Limit file size to 1MB
-  if (file.size > 1000000) {
-    status.errors.push('File size limit (1MB) exceeded');
-    status.isValid = false;
-  }
-
-  // Check file extension
-  if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.json')) {
-    status.errors.push('Unhandled file type');
-    status.isValid = false;
-  }
-  return status;
-}
@@ -0,0 +1,47 @@
+import { useSearchParams } from 'react-router-dom';
+import { Input, Select, Switch } from '@chakra-ui/react';
+
+import { isStringBoolean } from '../../utils/viewUtils';
+
+import { ParamField } from './types';
+
+interface EditFormInputProps {
+  paramField: ParamField;
+}
+
+export default function ParamInput({ paramField }: EditFormInputProps) {
+  const [searchParams] = useSearchParams();
+  const { id, type } = paramField;
+
+  if (type === 'option') {
+    const optionFromParams = searchParams.get(id);
+    const defaultOptionValue = optionFromParams || undefined;
+
+    return (
+      <Select placeholder='Select an option' variant='ontime' name={id} defaultValue={defaultOptionValue}>
+        {Object.entries(paramField.values).map(([key, value]) => (
+          <option key={key} value={key}>
+            {value}
+          </option>
+        ))}
+      </Select>
+    );
+  }
+
+  if (type === 'boolean') {
+    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) ?? false;
+
+    // checked value should be 'true', so it can be captured by the form event
+    return <Switch variant='ontime' name={id} defaultChecked={defaultCheckedValue} value='true' />;
+  }
+
+  if (type === 'number') {
+    const defaultNumberValue = searchParams.get(id) ?? '';
+
+    return <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />;
+  }
+
+  const defaultStringValue = searchParams.get(id) ?? '';
+
+  return <Input variant='ontime-filled' name={id} defaultValue={defaultStringValue} />;
+}
@@ -0,0 +1,51 @@
+@use '../../../theme/v2Styles' as *;
+@use '../../../theme/ontimeColours' as *;
+
+.drawerContent {
+  background-color: $gray-1200;
+}
+
+.drawerHeader {
+  @extend .drawerContent;
+  color: $section-white;
+}
+
+.drawerFooter {
+  @extend .drawerContent;
+  display: flex;
+  justify-content: start;
+  gap: $element-spacing;
+
+  button[type='reset'] {
+    padding: 0 2em;
+    margin-right: auto;
+  }
+
+  button[type='submit'] {
+    padding: 0 2em;
+  }
+}
+
+.label {
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+}
+
+.columnSection {
+  display: flex;
+  padding: $element-spacing;
+  flex-direction: column;
+  gap: $element-inner-spacing;
+}
+
+.title {
+  font-size: $inner-section-text-size;
+  display: block;
+  width: 100%;
+}
+
+.description {
+  font-size: $inner-section-text-size;
+  display: block;
+  color: $modal-note-color;
+}
@@ -0,0 +1,101 @@
+import { FormEvent, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+
+import ParamInput from './ParamInput';
+import { ParamField } from './types';
+
+import style from './ViewParamsEditor.module.scss';
+
+interface EditFormDrawerProps {
+  paramFields: ParamField[];
+}
+
+export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  useEffect(() => {
+    const isEditing = searchParams.get('edit');
+
+    if (isEditing === 'true') {
+      return onOpen();
+    }
+  }, [searchParams, onOpen]);
+
+  const onEditDrawerClose = () => {
+    onClose();
+
+    searchParams.delete('edit');
+    setSearchParams(searchParams);
+  };
+
+  const clearParams = () => {
+    setSearchParams();
+    onClose();
+  };
+
+  const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
+    formEvent.preventDefault();
+
+    const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
+    const newSearchParams = Object.entries(newParamsObject).reduce((newSearchParams, [id, value]) => {
+      if (typeof value === 'string' && value.length) {
+        newSearchParams.set(id, value);
+
+        return newSearchParams;
+      }
+
+      return newSearchParams;
+    }, new URLSearchParams());
+    setSearchParams(newSearchParams);
+  };
+
+  return (
+    <Drawer isOpen={isOpen} placement='right' onClose={onEditDrawerClose} size='lg'>
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerHeader className={style.drawerHeader}>
+          <DrawerCloseButton _hover={{ bg: '#ebedf0', color: '#333' }} size='lg' />
+          Customise
+        </DrawerHeader>
+
+        <DrawerBody className={style.drawerContent}>
+          <form id='edit-params-form' onSubmit={onParamsFormSubmit}>
+            {paramFields.map((field) => (
+              <div key={field.title} className={style.columnSection}>
+                <label className={style.label}>
+                  <span className={style.title}>{field.title}</span>
+                  <span className={style.description}>{field.description}</span>
+                  <ParamInput key={field.title} paramField={field} />
+                </label>
+              </div>
+            ))}
+          </form>
+        </DrawerBody>
+
+        <DrawerFooter className={style.drawerFooter}>
+          <Button variant='ontime-ghosted' onClick={clearParams} type='reset'>
+            Clear
+          </Button>
+          <Button variant='ontime-subtle' onClick={onEditDrawerClose}>
+            Cancel
+          </Button>
+          <Button variant='ontime-filled' form='edit-params-form' type='submit'>
+            Save
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
@@ -0,0 +1,203 @@
+import { ParamField } from './types';
+
+export const TIME_FORMAT_OPTION: ParamField = {
+  id: 'format',
+  title: '12  / 24 hour timer',
+  description: 'Whether to show the time in 12 or 24 hour mode. Overrides the global setting from preferences',
+  type: 'option',
+  values: { '12': '12 hour AM/PM', '24': '24 hour' },
+};
+
+export const CLOCK_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
+  {
+    id: 'key',
+    title: 'Key Colour',
+    description: 'Background colour in hexadecimal',
+    type: 'string',
+  },
+  {
+    id: 'text',
+    title: 'Text Colour',
+    description: 'Text colour in hexadecimal',
+    type: 'string',
+  },
+  {
+    id: 'textbg',
+    title: 'Text Background',
+    description: 'Colour of text background in hexadecimal',
+    type: 'string',
+  },
+  {
+    id: 'font',
+    title: 'Font',
+    description: 'Font family, will use the fonts available in the system',
+    type: 'string',
+  },
+  {
+    id: 'size',
+    title: 'Text Size',
+    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
+    type: 'number',
+  },
+  {
+    id: 'alignx',
+    title: 'Align Horizontal',
+    description: 'Moves the horizontally in page to start = left | center | end = right',
+    type: 'option',
+    values: { start: 'Start', center: 'Center', end: 'End' },
+  },
+  {
+    id: 'offsetx',
+    title: 'Offset Horizontal',
+    description: 'Offsets the timer horizontal position by a given amount in pixels',
+    type: 'number',
+  },
+  {
+    id: 'aligny',
+    title: 'Align Vertical',
+    description: 'Moves the vertically in page to start = left | center | end = right',
+    type: 'option',
+    values: { start: 'Start', center: 'Center', end: 'End' },
+  },
+  {
+    id: 'offsety',
+    title: 'Offset Vertical',
+    description: 'Offsets the timer vertical position by a given amount in pixels',
+    type: 'number',
+  },
+];
+
+export const TIMER_OPTIONS: ParamField[] = [TIME_FORMAT_OPTION];
+
+export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
+  {
+    id: 'key',
+    title: 'Key Colour',
+    description: 'Background colour in hexadecimal',
+    type: 'string',
+  },
+  {
+    id: 'text',
+    title: 'Text Colour',
+    description: 'Text colour in hexadecimal',
+    type: 'string',
+  },
+  {
+    id: 'textbg',
+    title: 'Text Background',
+    description: 'Colour of text background in hexadecimal',
+    type: 'string',
+  },
+  {
+    id: 'font',
+    title: 'Font',
+    description: 'Font family, will use the fonts available in the system',
+    type: 'string',
+  },
+  {
+    id: 'size',
+    title: 'Text Size',
+    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
+    type: 'number',
+  },
+  {
+    id: 'alignx',
+    title: 'Align Horizontal',
+    description: 'Moves the horizontally in page to start = left | center | end = right',
+    type: 'option',
+    values: { start: 'Start', center: 'Center', end: 'End' },
+  },
+  {
+    id: 'offsetx',
+    title: 'Offset Horizontal',
+    description: 'Offsets the timer horizontal position by a given amount in pixels',
+    type: 'number',
+  },
+  {
+    id: 'aligny',
+    title: 'Align Vertical',
+    description: 'Moves the vertically in page to start = left | center | end = right',
+    type: 'option',
+    values: { start: 'Start', center: 'Center', end: 'End' },
+  },
+  {
+    id: 'offsety',
+    title: 'Offset Vertical',
+    description: 'Offsets the timer vertical position by a given amount in pixels',
+    type: 'number',
+  },
+  {
+    id: 'hideovertime',
+    title: 'Hide Overtime',
+    description: 'Whether to supress overtime styles (red borders and red text)',
+    type: 'boolean',
+  },
+  {
+    id: 'hidemessages',
+    title: 'Hide Message Overlay',
+    description: 'Whether to hide the overlay from showing timer screen messages',
+    type: 'boolean',
+  },
+  {
+    id: 'hideendmessage',
+    title: 'Hide End Message',
+    description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
+    type: 'boolean',
+  },
+];
+
+export const LOWER_THIRDS_OPTIONS: ParamField[] = [
+  {
+    id: 'preset',
+    title: 'Preset',
+    description: 'Selects a style preset (0-1)',
+    type: 'number',
+  },
+  {
+    id: 'size',
+    title: 'Size',
+    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
+    type: 'number',
+  },
+  {
+    id: 'transition',
+    title: 'Transition',
+    description: 'Transition in time in seconds (default 5)',
+    type: 'number',
+  },
+  {
+    id: 'text',
+    title: 'Text Colour',
+    description: 'Text colour in hexadecimal',
+    type: 'string',
+  },
+  {
+    id: 'bg',
+    title: 'Text Background',
+    description: 'Text background colour in hexadecimal',
+    type: 'string',
+  },
+  {
+    id: 'key',
+    title: 'Key Colour',
+    description: 'Screen background colour in hexadecimal',
+    type: 'string',
+  },
+  {
+    id: 'fadeout',
+    title: 'Fadeout',
+    description: 'Time (in seconds) the lower third displays before fading out',
+    type: 'number',
+  },
+];
+
+export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
+  {
+    id: 'seconds',
+    title: 'Show Seconds',
+    description: 'Shows seconds in clock',
+    type: 'boolean',
+  },
+];
@@ -0,0 +1,12 @@
+type BaseField = {
+  id: string;
+  title: string;
+  description: string;
+};
+
+type OptionsField = { type: 'option'; values: Record<string, string> };
+type StringField = { type: 'string' };
+type BooleanField = { type: 'boolean' };
+type NumberField = { type: 'number' };
+
+export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);
@@ -1,79 +0,0 @@
-import { createContext, useCallback, useState } from 'react';
-
-import { useLocalStorage } from '../hooks/useLocalStorage';
-
-export const TableSettingsContext = createContext({
-  theme: '',
-  showSettings: false,
-  followSelected: false,
-
-  toggleSettings: () => undefined,
-  toggleTheme: () => undefined,
-  toggleFollow: () => undefined,
-});
-
-export const TableSettingsProvider = ({ children }) => {
-  const [theme, setTheme] = useLocalStorage('table-color-theme', 'dark');
-  const [followSelected, setFollowSelected] = useLocalStorage('table-follow-selected', false);
-  const [showSettings, setShowSettings] = useState(false);
-
-  /**
-   * @description Toggles the current value of dark mode
-   * @param {string} val - 'light' or 'dark'
-   */
-  const toggleTheme = useCallback(
-    (val) => {
-      if (val === undefined) {
-        setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
-      } else {
-        setTheme(val);
-      }
-    },
-    [setTheme]
-  );
-
-  /**
-   * @description Toggles visibility state for settings
-   * @param {boolean} val - whether the settings window is visible
-   */
-  const toggleSettings = useCallback(
-    (val) => {
-      if (val === undefined) {
-        setShowSettings((prev) => !prev);
-      } else {
-        setShowSettings(val);
-      }
-    },
-    [setShowSettings]
-  );
-
-  /**
-   * @description Toggles follow option
-   * @param {boolean} val - whether the window follows selected event
-   */
-  const toggleFollow = useCallback(
-    (val) => {
-      if (val === undefined) {
-        setFollowSelected((prev) => !prev);
-      } else {
-        setFollowSelected(val);
-      }
-    },
-    [setFollowSelected]
-  );
-
-  return (
-    <TableSettingsContext.Provider
-      value={{
-        theme,
-        showSettings,
-        followSelected,
-        toggleSettings,
-        toggleTheme,
-        toggleFollow,
-      }}
-    >
-      {children}
-    </TableSettingsContext.Provider>
-  );
-};
@@ -5,7 +5,7 @@ import { ALIASES } from '../api/apiConstants';
 import { getAliases } from '../api/ontimeApi';

 export default function useAliases() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: ALIASES,
    queryFn: getAliases,
    placeholderData: [],
@@ -15,5 +15,5 @@ export default function useAliases() {
    networkMode: 'always',
  });

-  return { data, status, isError, refetch };
-}
+  return { data, status, isFetching, isError, refetch };
+}
@@ -1,20 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { EVENT_DATA } from '../api/apiConstants';
-import { fetchEventData } from '../api/eventDataApi';
-import { eventDataPlaceholder } from '../models/EventData';
-
-export default function useEventData() {
-  const { data, status, isError, refetch } = useQuery({
-    queryKey: EVENT_DATA,
-    queryFn: fetchEventData,
-    placeholderData: eventDataPlaceholder,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
-    refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
-  });
-
-  return { data, status, isError, refetch };
-}
@@ -3,12 +3,13 @@ import { OSCSettings } from 'ontime-types';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { OSC_SETTINGS } from '../api/apiConstants';
-import { getOSC, postOSC } from '../api/ontimeApi';
+import { logAxiosError } from '../api/apiUtils';
+import { getOSC, postOSC, postOscSubscriptions } from '../api/ontimeApi';
 import { oscPlaceholderSettings } from '../models/OscSettings';
 import { ontimeQueryClient } from '../queryClient';

 export default function useOscSettings() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: OSC_SETTINGS,
    queryFn: getOSC,
    placeholderData: oscPlaceholderSettings,
@@ -18,14 +19,25 @@ export default function useOscSettings() {
    networkMode: 'always',
  });

-  return { data: data! as unknown as OSCSettings, status, isError, refetch };
+  // we need to jump through some hoops because of the type op port
+  return { data: data! as unknown as OSCSettings, status, isFetching, isError, refetch };
 }

 export function useOscSettingsMutation() {
  const { isLoading, mutateAsync } = useMutation({
    mutationFn: postOSC,
+    onError: (error) => logAxiosError('Error saving OSC settings', error),
    onSuccess: (res) => ontimeQueryClient.setQueryData(OSC_SETTINGS, res.data),
    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
  });
  return { isLoading, mutateAsync };
 }
+
+export function usePostOscSubscriptions() {
+  const { isLoading, mutateAsync } = useMutation({
+    mutationFn: postOscSubscriptions,
+    onError: (error) => logAxiosError('Error saving OSC settings', error),
+    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
+  });
+  return { isLoading, mutateAsync };
+}
@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { PROJECT_DATA } from '../api/apiConstants';
+import { getProjectData } from '../api/projectDataApi';
+import { projectDataPlaceholder } from '../models/ProjectData';
+
+export default function useProjectData() {
+  const { data, status, isFetching, isError, refetch } = useQuery({
+    queryKey: PROJECT_DATA,
+    queryFn: getProjectData,
+    placeholderData: projectDataPlaceholder,
+    retry: 5,
+    retryDelay: (attempt) => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
+  });
+
+  return { data, status, isFetching, isError, refetch };
+}
@@ -6,7 +6,7 @@ import { getSettings } from '../api/ontimeApi';
 import { ontimePlaceholderSettings } from '../models/OntimeSettings';

 export default function useSettings() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: APP_SETTINGS,
    queryFn: getSettings,
    placeholderData: ontimePlaceholderSettings,
@@ -16,5 +16,5 @@ export default function useSettings() {
    networkMode: 'always',
  });

-  return { data, status, isError, refetch };
+  return { data, status, isFetching, isError, refetch };
 }
@@ -6,7 +6,7 @@ import { getUserFields } from '../api/ontimeApi';
 import { userFieldsPlaceholder } from '../models/UserFields';

 export default function useUserFields() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: USERFIELDS,
    queryFn: getUserFields,
    placeholderData: userFieldsPlaceholder,
@@ -16,5 +16,5 @@ export default function useUserFields() {
    networkMode: 'always',
  });

-  return { data, status, isError, refetch };
+  return { data, status, isFetching, isError, refetch };
 }
@@ -6,7 +6,7 @@ import { getView } from '../api/ontimeApi';
 import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';

 export default function useViewSettings() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: VIEW_SETTINGS,
    queryFn: getView,
    placeholderData: viewsSettingsPlaceholder,
@@ -16,5 +16,5 @@ export default function useViewSettings() {
    networkMode: 'always',
  });

-  return { data, status, isError, refetch };
+  return { data, status, isError, refetch, isFetching };
 }
@@ -0,0 +1,17 @@
+import { MouseEvent } from 'react';
+
+import { Option, useContextMenuStore } from '../components/context-menu/ContextMenu';
+
+export const useContextMenu = <T extends HTMLElement>(options: Option[]) => {
+  const { setContextMenu } = useContextMenuStore();
+
+  const localCreateContextMenu = (contextMenuEvent: MouseEvent<T, globalThis.MouseEvent>) => {
+    // prevent browser default context menu from showing up
+    contextMenuEvent.preventDefault();
+
+    const { pageX, pageY } = contextMenuEvent;
+    return setContextMenu({ x: pageX, y: pageY }, options);
+  };
+
+  return [localCreateContextMenu];
+};
@@ -1,28 +1,29 @@
 import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import axios, { AxiosError } from 'axios';
-import { OntimeRundown, OntimeRundownEntry, SupportedEvent } from 'ontime-types';
+import { isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
+import { getCueCandidate, swapOntimeEvents } from 'ontime-utils';

 import { RUNDOWN_TABLE, RUNDOWN_TABLE_KEY } from '../api/apiConstants';
+import { logAxiosError } from '../api/apiUtils';
 import {
  ReorderEntry,
  requestApplyDelay,
  requestDelete,
  requestDeleteAll,
+  requestEventSwap,
  requestPostEvent,
  requestPutEvent,
  requestReorderEvent,
+  SwapEntry,
 } from '../api/eventsApi';
-import { useLocalEvent } from '../stores/localEvent';
-import { useEmitLog } from '../stores/logger';
+import { useEditorSettings } from '../stores/editorSettings';

 /**
 * @description Set of utilities for events
 */
 export const useEventAction = () => {
  const queryClient = useQueryClient();
-  const { emitError } = useEmitLog();
-  const eventSettings = useLocalEvent((state) => state.eventSettings);
+  const eventSettings = useEditorSettings((state) => state.eventSettings);
  const defaultPublic = eventSettings.defaultPublic;
  const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;

@@ -30,9 +31,10 @@ export const useEventAction = () => {
   * Calls mutation to add new event
   * @private
   */
-  const _addEventMutation = useMutation(requestPostEvent, {
+  const _addEventMutation = useMutation({
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
+    mutationFn: requestPostEvent,
    onSettled: () => {
      queryClient.invalidateQueries(RUNDOWN_TABLE);
    },
@@ -57,7 +59,7 @@ export const useEventAction = () => {
      const newEvent: Partial<OntimeRundownEntry> = { ...event };

      // ************* CHECK OPTIONS specific to events
-      if (newEvent.type === SupportedEvent.Event) {
+      if (isOntimeEvent(newEvent)) {
        const applicationOptions = {
          defaultPublic: options?.defaultPublic ?? defaultPublic,
          startTimeIsLastEnd: options?.startTimeIsLastEnd ?? startTimeIsLastEnd,
@@ -65,16 +67,20 @@ export const useEventAction = () => {
          after: options?.after,
        };

+        if (newEvent?.cue === undefined) {
+          newEvent.cue = getCueCandidate(queryClient.getQueryData(RUNDOWN_TABLE) || [], options?.after);
+        }
+
        // hard coding duration value to be as expected for now
        // this until timeOptions gets implemented
-        if (typeof newEvent?.timeStart !== 'undefined' && typeof newEvent.timeEnd !== 'undefined') {
+        if (newEvent?.timeStart !== undefined && newEvent.timeEnd !== undefined) {
          newEvent.duration = Math.max(0, newEvent?.timeEnd - newEvent?.timeStart) || 0;
        }

        if (applicationOptions.startTimeIsLastEnd && applicationOptions?.lastEventId) {
          const rundown = queryClient.getQueryData(RUNDOWN_TABLE) as OntimeRundown;
          const previousEvent = rundown.find((event) => event.id === applicationOptions.lastEventId);
-          if (typeof previousEvent !== 'undefined' && previousEvent.type === 'event') {
+          if (previousEvent !== undefined && previousEvent.type === 'event') {
            newEvent.timeStart = previousEvent.timeEnd;
            newEvent.timeEnd = previousEvent.timeEnd;
          }
@@ -94,21 +100,18 @@ export const useEventAction = () => {
        // @ts-expect-error -- we know that the object is well formed now
        await _addEventMutation.mutateAsync(newEvent);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error fetching data: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error fetching data: ${error}`);
-        }
+        logAxiosError('Error fetching data', error);
      }
    },
-    [_addEventMutation, defaultPublic, emitError, queryClient, startTimeIsLastEnd],
+    [_addEventMutation, defaultPublic, queryClient, startTimeIsLastEnd],
  );

  /**
   * Calls mutation to update existing event
   * @private
   */
-  const _updateEventMutation = useMutation(requestPutEvent, {
+  const _updateEventMutation = useMutation({
+    mutationFn: requestPutEvent,
    // we optimistically update here
    onMutate: async (newEvent) => {
      // cancel ongoing queries
@@ -123,7 +126,6 @@ export const useEventAction = () => {
      // Return a context with the previous and new events
      return { previousEvent, newEvent };
    },
-
    // Mutation fails, rollback undoes optimist update
    onError: (_error, _newEvent, context) => {
      queryClient.setQueryData([RUNDOWN_TABLE_KEY, context?.newEvent.id], context?.previousEvent);
@@ -144,21 +146,18 @@ export const useEventAction = () => {
      try {
        await _updateEventMutation.mutateAsync(event);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error updating event: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error updating event: ${error}`);
-        }
+        logAxiosError('Error updating event', error);
      }
    },
-    [_updateEventMutation, emitError],
+    [_updateEventMutation],
  );

  /**
   * Calls mutation to delete an event
   * @private
   */
-  const _deleteEventMutation = useMutation(requestDelete, {
+  const _deleteEventMutation = useMutation({
+    mutationFn: requestDelete,
    // we optimistically update here
    onMutate: async (eventId) => {
      // cancel ongoing queries
@@ -196,21 +195,18 @@ export const useEventAction = () => {
      try {
        await _deleteEventMutation.mutateAsync(eventId);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error deleting event: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error deleting event: ${error}`);
-        }
+        logAxiosError('Error deleting event', error);
      }
    },
-    [_deleteEventMutation, emitError],
+    [_deleteEventMutation],
  );

  /**
   * Calls mutation to delete all events
   * @private
   */
-  const _deleteAllEventsMutation = useMutation(requestDeleteAll, {
+  const _deleteAllEventsMutation = useMutation({
+    mutationFn: requestDeleteAll,
    // we optimistically update here
    onMutate: async () => {
      // cancel ongoing queries
@@ -245,19 +241,16 @@ export const useEventAction = () => {
    try {
      await _deleteAllEventsMutation.mutateAsync();
    } catch (error) {
-      if (!axios.isAxiosError(error)) {
-        emitError(`Error deleting events: ${(error as AxiosError).message}`);
-      } else {
-        emitError(`Error deleting events: ${error}`);
-      }
+      logAxiosError('Error deleting events', error);
    }
-  }, [_deleteAllEventsMutation, emitError]);
+  }, [_deleteAllEventsMutation]);

  /**
   * Calls mutation to apply a delay
   * @private
   */
-  const _applyDelayMutation = useMutation(requestApplyDelay, {
+  const _applyDelayMutation = useMutation({
+    mutationFn: requestApplyDelay,
    // Mutation finished, failed or successful
    onSettled: () => {
      queryClient.invalidateQueries(RUNDOWN_TABLE);
@@ -273,21 +266,18 @@ export const useEventAction = () => {
      try {
        await _applyDelayMutation.mutateAsync(delayEventId);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error applying delay: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error applying delay: ${error}`);
-        }
+        logAxiosError('Error applying delay', error);
      }
    },
-    [_applyDelayMutation, emitError],
+    [_applyDelayMutation],
  );

  /**
   * Calls mutation to reorder an event
   * @private
   */
-  const _reorderEventMutation = useMutation(requestReorderEvent, {
+  const _reorderEventMutation = useMutation({
+    mutationFn: requestReorderEvent,
    // we optimistically update here
    onMutate: async (data) => {
      // cancel ongoing queries
@@ -332,15 +322,73 @@ export const useEventAction = () => {
        };
        await _reorderEventMutation.mutateAsync(reorderObject);
      } catch (error) {
-        if (!axios.isAxiosError(error)) {
-          emitError(`Error re-ordering event: ${(error as AxiosError).message}`);
-        } else {
-          emitError(`Error re-ordering event: ${error}`);
-        }
+        logAxiosError('Error re-ordering event', error);
      }
    },
-    [_reorderEventMutation, emitError],
+    [_reorderEventMutation],
  );

-  return { addEvent, updateEvent, deleteEvent, deleteAllEvents, applyDelay, reorderEvent };
+  /**
+   * Calls mutation to swap events
+   * @private
+   */
+  const _swapEvents = useMutation({
+    mutationFn: requestEventSwap,
+    // we optimistically update here
+    onMutate: async ({ from, to }) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
+
+      // Snapshot the previous value
+      const rundown = queryClient.getQueryData(RUNDOWN_TABLE) as OntimeRundown;
+
+      const fromEventIndex = rundown.findIndex((event) => event.id === from);
+      const toEventIndex = rundown.findIndex((event) => event.id === to);
+
+      const previousEvents = swapOntimeEvents(rundown, fromEventIndex, toEventIndex);
+
+      // optimistically update object
+      queryClient.setQueryData(RUNDOWN_TABLE, previousEvents);
+
+      // Return a context with the previous events
+      return { previousEvents };
+    },
+
+    // Mutation fails, rollback undoes optimist update
+    onError: (_error, _eventId, context) => {
+      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
+    },
+    networkMode: 'always',
+  });
+
+  /**
+   * Swaps the schedule of two events
+   */
+  const swapEvents = useCallback(
+    async ({ from, to }: SwapEntry) => {
+      // TODO: before calling `/swapEvents`,
+      // we should determine the events are of type `OntimeEvent`
+      try {
+        await _swapEvents.mutateAsync({ from, to });
+      } catch (error) {
+        logAxiosError('Error re-ordering event', error);
+      }
+    },
+    [_swapEvents],
+  );
+
+  return {
+    addEvent,
+    updateEvent,
+    deleteEvent,
+    deleteAllEvents,
+    applyDelay,
+    reorderEvent,
+    swapEvents,
+  };
 };
@@ -1,43 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-
-export default function useFullscreen() {
-  const [isFullScreen, setFullScreen] = useState(document.fullscreenElement);
-
-  useEffect(() => {
-    const handleChange = () => {
-      setFullScreen(document.fullscreenElement);
-    };
-    document.addEventListener('fullscreenchange', handleChange, { passive: true });
-    document.addEventListener('resize', handleChange, { passive: true });
-
-    return () => {
-      document.removeEventListener('fullscreenchange', handleChange, { passive: true });
-      document.removeEventListener('resize', handleChange, { passive: true });
-    };
-  }, []);
-
-  const toggleFullScreen = useCallback(() => {
-    if (!document.fullscreenElement && !document.webkitIsFullScreen) {
-      // Fullscreen mode is not active, so we can enter fullscreen mode
-      if (document.documentElement.requestFullscreen) {
-        // Standard fullscreen API is supported
-        document.documentElement.requestFullscreen();
-      } else if (document.documentElement.webkitRequestFullscreen) {
-        // iOS Safari fullscreen API is supported
-        document.documentElement.webkitRequestFullscreen();
-      }
-    } else {
-      // Fullscreen mode is active, so we can exit fullscreen mode
-      if (document.exitFullscreen) {
-        // Standard fullscreen API is supported
-        document.exitFullscreen();
-      } else if (document.webkitCancelFullscreen) {
-        // iOS Safari fullscreen API is supported
-        document.webkitCancelFullscreen();
-      }
-    }
-  }, []);
-
-  return { isFullScreen, toggleFullScreen };
-}
@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState } from 'react';
+
+interface WebkitDocument extends Document {
+  webkitFullscreenElement?: Element | null;
+  webkitIsFullScreen?: boolean;
+  webkitExitFullscreen?: () => Promise<void>;
+  webkitRequestFullscreen?: () => Promise<void>;
+}
+
+export default function useFullscreen() {
+  const [isFullScreen, setFullScreen] = useState(
+    document.fullscreenElement || (document as WebkitDocument).webkitFullscreenElement,
+  );
+
+  useEffect(() => {
+    const handleChange = () => {
+      if (typeof (document as WebkitDocument).webkitFullscreenElement !== 'undefined') {
+        setFullScreen((document as WebkitDocument).webkitFullscreenElement);
+      } else {
+        setFullScreen(document.fullscreenElement);
+      }
+    };
+    (document as WebkitDocument).addEventListener('webkitfullscreenchange', handleChange, { passive: true });
+    document.addEventListener('fullscreenchange', handleChange, { passive: true });
+    document.addEventListener('resize', handleChange, { passive: true });
+
+    return () => {
+      (document as WebkitDocument).removeEventListener('webkitfullscreenchange', handleChange);
+      document.removeEventListener('fullscreenchange', handleChange);
+      document.removeEventListener('resize', handleChange);
+    };
+  }, []);
+
+  const toggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement && !(document as WebkitDocument).webkitIsFullScreen) {
+      // Fullscreen mode is not active, so we can enter fullscreen mode
+      const element = document.documentElement;
+      if (element.requestFullscreen) {
+        // Standard fullscreen API is supported
+        element.requestFullscreen().catch(() => {
+          /* nothing to do */
+        });
+      } else if (element.webkitRequestFullscreen) {
+        // iOS Safari fullscreen API is supported
+        element.webkitRequestFullscreen().catch(() => {
+          /* nothing to do */
+        });
+      }
+    } else {
+      // Fullscreen mode is active, so we can exit fullscreen mode
+      if (document.exitFullscreen) {
+        // Standard fullscreen API is supported
+        document.exitFullscreen().catch((error) => {
+          console.error('Error while trying to exit fullscreen:', error);
+        });
+      } else if ((document as WebkitDocument).webkitExitFullscreen) {
+        // iOS Safari fullscreen API is supported
+        (document as WebkitDocument).webkitExitFullscreen().catch(() => {
+          /* nothing to do */
+        });
+      }
+    }
+  }, []);
+
+  return { isFullScreen, toggleFullScreen };
+}
@@ -1,18 +1,25 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';

-export const useKeyDown = (callback: () => void, targetKey: string) => {
-  const onKeyDown = (event: KeyboardEvent) => {
-    const targetKeyPressed = event.key === targetKey && !event.repeat;
-    if (targetKeyPressed) {
-      event.preventDefault();
-      callback();
-    }
-  };
+type UseKeyDown = (callback: () => void, targetKey: string, options?: { isDisabled?: boolean }) => void;
+
+export const useKeyDown: UseKeyDown = (callback, targetKey, options = {}) => {
+  const { isDisabled = false } = options;
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const targetKeyPressed = event.key === targetKey && !event.repeat;
+      if (targetKeyPressed && !isDisabled) {
+        event.preventDefault();
+        callback();
+      }
+    },
+    [callback, isDisabled, targetKey],
+  );

  useEffect(() => {
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('keydown', onKeyDown);
    };
-  }, []);
+  }, [onKeyDown]);
 };
@@ -32,6 +32,8 @@ export const setMessage = {
  lowerText: (payload: string) => socketSendJson('set-lower-message-text', payload),
  lowerVisible: (payload: boolean) => socketSendJson('set-lower-message-visible', payload),
  onAir: (payload: boolean) => socketSendJson('set-onAir', payload),
+  timerBlink: (payload: boolean) => socketSendJson('set-timer-blink', payload),
+  timerBlackout: (payload: boolean) => socketSendJson('set-timer-blackout', payload),
 };

 export const usePlaybackControl = () => {
@@ -103,3 +105,5 @@ export const useTimer = () => {

  return useRuntimeStore(featureSelector, deepCompare);
 };
+
+export const setClientName = (newName: string) => socketSendJson('set-client-name', newName);
@@ -1,7 +0,0 @@
-import { Alias } from 'ontime-types';
-
-export const aliasPlaceholder: Alias = {
-  enabled: false,
-  alias: '',
-  pathAndParams: '',
-};
@@ -1,9 +0,0 @@
-import { EventData } from 'ontime-types';
-
-export const eventDataPlaceholder: EventData = {
-  title: '',
-  publicUrl: '',
-  publicInfo: '',
-  backstageUrl: '',
-  backstageInfo: '',
-};
@@ -1,30 +0,0 @@
-export const ontimeVars = [
-  {
-    name: '$timer',
-    description: 'Current running timer',
-  },
-  {
-    name: '$title',
-    description: 'Current title',
-  },
-  {
-    name: '$presenter',
-    description: 'Current timer',
-  },
-  {
-    name: '$subtitle',
-    description: 'Current subtitle',
-  },
-  {
-    name: '$next-title',
-    description: 'Next title',
-  },
-  {
-    name: '$next-presenter',
-    description: 'Next timer',
-  },
-  {
-    name: '$next-subtitle',
-    description: 'Next subtitle',
-  },
-];
@@ -0,0 +1,10 @@
+import { ProjectData } from 'ontime-types';
+
+export const projectDataPlaceholder: ProjectData = {
+  title: '',
+  description: '',
+  publicUrl: '',
+  publicInfo: '',
+  backstageUrl: '',
+  backstageInfo: '',
+};
@@ -0,0 +1,26 @@
+import { useStore } from 'zustand';
+import { createStore } from 'zustand/vanilla';
+
+interface SocketClientNameState {
+  name?: string;
+  setName: (newValue: string) => void;
+  persistName: (newValue: string) => void;
+}
+
+const clientNameKey = 'ontime-client-name';
+
+function persistKeyToStorage(newValue: string) {
+  localStorage.setItem(clientNameKey, newValue);
+}
+
+export const socketClientName = createStore<SocketClientNameState>((set) => ({
+  name: localStorage.getItem(clientNameKey) ?? undefined,
+  setName: (newValue: string) => set(() => ({ name: newValue })),
+  persistName: (newValue: string) =>
+    set(() => {
+      persistKeyToStorage(newValue);
+      return { name: newValue };
+    }),
+}));
+
+export const useSocketClientName = () => useStore(socketClientName);
@@ -0,0 +1,67 @@
+import { create } from 'zustand';
+
+import { booleanFromLocalStorage } from '../utils/localStorage';
+
+type EditorSettings = {
+  showQuickEntry: boolean;
+  startTimeIsLastEnd: boolean;
+  defaultPublic: boolean;
+  showNif: boolean;
+};
+
+type EditorSettingsStore = {
+  eventSettings: EditorSettings;
+  setLocalEventSettings: (newState: EditorSettings) => void;
+  setShowQuickEntry: (showQuickEntry: boolean) => void;
+  setStartTimeIsLastEnd: (startTimeIsLastEnd: boolean) => void;
+  setDefaultPublic: (defaultPublic: boolean) => void;
+  setShowNif: (showNif: boolean) => void;
+};
+
+enum EditorSettingsKeys {
+  ShowQuickEntry = 'ontime-show-quick-entry',
+  StartTimeIsLastEnd = 'ontime-start-is-last-end',
+  DefaultPublic = 'ontime-default-public',
+  ShowNif = 'ontime-show-nif',
+}
+
+export const useEditorSettings = create<EditorSettingsStore>((set) => ({
+  eventSettings: {
+    showQuickEntry: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, false),
+    startTimeIsLastEnd: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
+    defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
+    showNif: booleanFromLocalStorage(EditorSettingsKeys.ShowNif, true),
+  },
+
+  setLocalEventSettings: (value) =>
+    set(() => {
+      localStorage.setItem(EditorSettingsKeys.ShowQuickEntry, String(value.showQuickEntry));
+      localStorage.setItem(EditorSettingsKeys.StartTimeIsLastEnd, String(value.startTimeIsLastEnd));
+      localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(value.defaultPublic));
+      return { eventSettings: value };
+    }),
+
+  setShowQuickEntry: (showQuickEntry) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.ShowQuickEntry, String(showQuickEntry));
+      return { eventSettings: { ...state.eventSettings, showQuickEntry } };
+    }),
+
+  setStartTimeIsLastEnd: (startTimeIsLastEnd) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.StartTimeIsLastEnd, String(startTimeIsLastEnd));
+      return { eventSettings: { ...state.eventSettings, startTimeIsLastEnd } };
+    }),
+
+  setDefaultPublic: (defaultPublic) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic));
+      return { eventSettings: { ...state.eventSettings, defaultPublic } };
+    }),
+
+  setShowNif: (showNif) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.ShowNif, String(showNif));
+      return { eventSettings: { ...state.eventSettings, showNif } };
+    }),
+}));
@@ -1,57 +0,0 @@
-import { create } from 'zustand';
-
-import { booleanFromLocalStorage } from '../utils/localStorage';
-
-type EventSettings = {
-  showQuickEntry: boolean;
-  startTimeIsLastEnd: boolean;
-  defaultPublic: boolean;
-};
-
-type LocalEventStore = {
-  eventSettings: EventSettings;
-  setLocalEventSettings: (newState: EventSettings) => void;
-  setShowQuickEntry: (showQuickEntry: boolean) => void;
-  setStartTimeIsLastEnd: (startTimeIsLastEnd: boolean) => void;
-  setDefaultPublic: (defaultPublic: boolean) => void;
-};
-
-enum LocalEventKeys {
-  ShowQuickEntry = 'ontime-show-quick-entry',
-  StartTimeIsLastEnd = 'ontime-start-is-last-end',
-  DefaultPublic = 'ontime-default-public',
-}
-
-export const useLocalEvent = create<LocalEventStore>((set) => ({
-  eventSettings: {
-    showQuickEntry: booleanFromLocalStorage(LocalEventKeys.ShowQuickEntry, false),
-    startTimeIsLastEnd: booleanFromLocalStorage(LocalEventKeys.ShowQuickEntry, true),
-    defaultPublic: booleanFromLocalStorage(LocalEventKeys.ShowQuickEntry, true),
-  },
-
-  setLocalEventSettings: (value) =>
-    set(() => {
-      localStorage.setItem(LocalEventKeys.ShowQuickEntry, String(value.showQuickEntry));
-      localStorage.setItem(LocalEventKeys.StartTimeIsLastEnd, String(value.startTimeIsLastEnd));
-      localStorage.setItem(LocalEventKeys.DefaultPublic, String(value.defaultPublic));
-      return { eventSettings: value };
-    }),
-
-  setShowQuickEntry: (showQuickEntry) =>
-    set((state) => {
-      localStorage.setItem(LocalEventKeys.ShowQuickEntry, String(showQuickEntry));
-      return { eventSettings: { ...state.eventSettings, showQuickEntry } };
-    }),
-
-  setStartTimeIsLastEnd: (startTimeIsLastEnd) =>
-    set((state) => {
-      localStorage.setItem(LocalEventKeys.StartTimeIsLastEnd, String(startTimeIsLastEnd));
-      return { eventSettings: { ...state.eventSettings, startTimeIsLastEnd } };
-    }),
-
-  setDefaultPublic: (defaultPublic) =>
-    set((state) => {
-      localStorage.setItem(LocalEventKeys.DefaultPublic, String(defaultPublic));
-      return { eventSettings: { ...state.eventSettings, defaultPublic } };
-    }),
-}));
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Log, LogLevel } from 'ontime-types';
+import { Log, LogLevel, LogOrigin } from 'ontime-types';
 import { generateId, millisToString } from 'ontime-utils';
 import { useStore } from 'zustand';
 import { createStore } from 'zustand/vanilla';
@@ -34,7 +34,7 @@ export function useEmitLog() {
  const _emit = useCallback((text: string, level: LogLevel) => {
    const log = {
      id: generateId(),
-      origin: 'CLIENT',
+      origin: LogOrigin.Client,
      time: millisToString(nowInMillis()),
      level,
      text,
@@ -22,6 +22,8 @@ export const runtimeStorePlaceholder = {
  timerMessage: {
    text: '',
    visible: false,
+    timerBlink: false,
+    timerBlackout: false,
  },
  publicMessage: {
    text: '',
@@ -1,4 +1,5 @@
-import { validateAlias } from '../aliases';
+import { resolvePath } from 'react-router-dom';
+import { validateAlias, generateURLFromAlias, getAliasRoute } from '../aliases';

 describe('An alias fails if incorrect', () => {
  const testsToFail = [
@@ -23,3 +24,79 @@ describe('An alias fails if incorrect', () => {
    }),
  );
 });
+describe('generateURLFromAlias and getAliasRoute function', () => {
+  test('generate the expected url from an alias', () => {
+    const testData = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+
+    const expected = [
+      {
+        url: '/timer?user=guest&alias=demopage',
+      },
+    ];
+
+    expect(generateURLFromAlias(testData[0])).toStrictEqual(expected[0].url);
+  });
+  test('generate the url to redirect to when the current URL is just the alias', () => {
+    const aliases = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+    // let current location be the alias
+    const location = resolvePath(aliases[0].alias);
+
+    const expected = [
+      {
+        url: '/timer?user=guest&alias=demopage',
+      },
+    ];
+
+    expect(getAliasRoute(location, aliases, null)).toStrictEqual(expected[0].url);
+  });
+  test('generate the url to redirect to when the current URL the same url but with a change of params', () => {
+    const aliases = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+    // let current location be the actual url with alias attached to it
+    const location = resolvePath(aliases[0].pathAndParams);
+    const urlSearchParams = new URLSearchParams(location.search);
+    urlSearchParams.append('alias', aliases[0].alias); //
+
+    // update current alias with extra param
+    aliases[0].pathAndParams += '&eventId=674';
+    const expected = [
+      {
+        url: '/timer?user=guest&eventId=674&alias=demopage',
+      },
+    ];
+
+    expect(getAliasRoute(location, aliases, urlSearchParams)).toStrictEqual(expected[0].url);
+  });
+  test('generate no url to redirect to when the current URL the same url', () => {
+    const aliases = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+    // let current location be the actual url with alias attached to it
+    const location = resolvePath(aliases[0].pathAndParams);
+    const urlSearchParams = new URLSearchParams(location.search);
+    urlSearchParams.append('alias', aliases[0].alias); //
+
+    expect(getAliasRoute(location, aliases, urlSearchParams)).toBeNull();
+  });
+});
@@ -1,98 +1,19 @@
 import {
  forgivingStringToMillis,
-  formatDisplay,
-  isTimeString,
  millisToDelayString,
  millisToMinutes,
  millisToSeconds,
+  secondsInMillis,
 } from '../dateConfig';

-describe('test string from formatDisplay function', () => {
-  it('test with null values', () => {
-    const t = { val: null, result: '00:00:00' };
-    expect(formatDisplay(t.val, false)).toBe(t.result);
+describe('test secondsInMillis function', () => {
+  it('return 0 if value is null', () => {
+    expect(secondsInMillis(null)).toBe(0);
  });
-
-  it('test with not numbers', () => {
-    const t = { val: 'test', result: '00:00:00' };
-    expect(formatDisplay(t.val, false)).toBe(t.result);
-  });
-
-  it('test with valid millis', () => {
-    const t = { val: 3600000, result: '01:00:00' };
-    expect(formatDisplay(t.val, false)).toBe(t.result);
-  });
-
-  it('test with negative millis', () => {
-    const t = { val: -3600000, result: '01:00:00' };
-    expect(formatDisplay(t.val, false)).toBe(t.result);
-  });
-
-  it('test with 0', () => {
-    const t = { val: 0, result: '00:00:00' };
-    expect(formatDisplay(t.val, false)).toBe(t.result);
-  });
-
-  it('test with -0', () => {
-    const t = { val: -0, result: '00:00:00' };
-    expect(formatDisplay(t.val, false)).toBe(t.result);
-  });
-
-  it('test with 86400 (24 hours)', () => {
-    const t = { val: 86400000, result: '00:00:00' };
-    expect(formatDisplay(t.val, false)).toBe(t.result);
-  });
-
-  it('test with 86401 (24 hours and 1 second)', () => {
-    const t = { val: 86401000, result: '00:00:01' };
-    expect(formatDisplay(t.val, false)).toBe(t.result);
-  });
-
-  it('test with -86401 (-24 hours and 1 second)', () => {
-    const t = { val: -86401000, result: '00:00:01' };
-    expect(formatDisplay(t.val, false)).toBe(t.result);
-  });
-});
-
-describe('test string from formatDisplay function with hidezero', () => {
-  it('test with null values', () => {
-    const t = { val: null, result: '00:00' };
-    expect(formatDisplay(t.val, true)).toBe(t.result);
-  });
-
-  it('test with valid millis', () => {
-    const t = { val: 3600000, result: '01:00:00' };
-    expect(formatDisplay(t.val, true)).toBe(t.result);
-  });
-
-  it('test with negative millis', () => {
-    const t = { val: -3600000, result: '01:00:00' };
-    expect(formatDisplay(t.val, true)).toBe(t.result);
-  });
-
-  it('test with 0', () => {
-    const t = { val: 0, result: '00:00' };
-    expect(formatDisplay(t.val, true)).toBe(t.result);
-  });
-
-  it('test with -0', () => {
-    const t = { val: -0, result: '00:00' };
-    expect(formatDisplay(t.val, true)).toBe(t.result);
-  });
-
-  it('test with 86400 (24 hours)', () => {
-    const t = { val: 86400000, result: '00:00' };
-    expect(formatDisplay(t.val, true)).toBe(t.result);
-  });
-
-  it('test with 86401 (24 hours and 1 second)', () => {
-    const t = { val: 86401000, result: '00:01' };
-    expect(formatDisplay(t.val, true)).toBe(t.result);
-  });
-
-  it('test with -86401 (-24 hours and 1 second)', () => {
-    const t = { val: -86401000, result: '00:01' };
-    expect(formatDisplay(t.val, true)).toBe(t.result);
+  it('returns the seconds value of a millis date', () => {
+    const date = 1686255053619; // Thu Jun 08 2023 20:10:53
+    const seconds = secondsInMillis(date);
+    expect(seconds).toBe(53);
  });
 });

@@ -170,31 +91,6 @@ describe('test millisToMinutes function', () => {
  });
 });

-describe('test isTimeString() function', () => {
-  it('it validates time strings', () => {
-    const ts = ['2', '2:10', '2:10:22'];
-    for (const s of ts) {
-      expect(isTimeString(s)).toBe(true);
-    }
-  });
-
-  it('it fails overloaded times', () => {
-    const ts = ['70', '89:10', '26:10:22'];
-    for (const s of ts) {
-      expect(isTimeString(s)).toBe(false);
-    }
-  });
-});
-
-describe('test isTimeString() function handle different separators', () => {
-  const ts = ['2:10', '2,10', '2.10'];
-  for (const s of ts) {
-    it(`it handles ${s}`, () => {
-      expect(isTimeString(s)).toBe(true);
-    });
-  }
-});
-
 describe('test forgivingStringToMillis()', () => {
  describe('function handles time with no separators', () => {
    const testData = [
@@ -1,536 +0,0 @@
-import { formatEventList, getEventsWithDelay, trimRundown } from '../eventsManager';
-
-describe('getEventsWithDelay function', () => {
-  test('with positive delays', () => {
-    const testData = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 28800000,
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        duration: 60000,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000,
-        timeEnd: 35520000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-      {
-        title: 'Use simpler times to create a timer',
-        timeStart: 120000,
-        timeEnd: 720000,
-        colour: '',
-        type: 'event',
-        id: '8222',
-      },
-      {
-        duration: 900000,
-        type: 'delay',
-        revision: 0,
-        id: 'a386',
-      },
-      {
-        title: 'Add delay blocks to affect all events',
-        timeStart: 37320000,
-        timeEnd: 38520000,
-        colour: '',
-        type: 'event',
-        id: '6dce',
-      },
-      {
-        title: 'Add and remove events with [+] and [-]',
-        timeStart: 38520000,
-        timeEnd: 45120000,
-        colour: '',
-        type: 'event',
-        id: '2651',
-      },
-      {
-        type: 'block',
-        id: 'e6a1',
-      },
-      {
-        title: 'And control whether they are public',
-        timeStart: 46800000,
-        timeEnd: 57600000,
-        colour: '',
-        type: 'event',
-        id: '1358',
-      },
-    ];
-
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 28800000,
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000 + 60000,
-        timeEnd: 35520000 + 60000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-      {
-        title: 'Use simpler times to create a timer',
-        timeStart: 120000 + 60000,
-        timeEnd: 720000 + 60000,
-        colour: '',
-        type: 'event',
-        id: '8222',
-      },
-      {
-        title: 'Add delay blocks to affect all events',
-        timeStart: 37320000 + 60000 + 900000,
-        timeEnd: 38520000 + 60000 + 900000,
-        colour: '',
-        type: 'event',
-        id: '6dce',
-      },
-      {
-        title: 'Add and remove events with [+] and [-]',
-        timeStart: 38520000 + 60000 + 900000,
-        timeEnd: 45120000 + 60000 + 900000,
-        colour: '',
-        type: 'event',
-        id: '2651',
-      },
-      {
-        title: 'And control whether they are public',
-        timeStart: 46800000,
-        timeEnd: 57600000,
-        colour: '',
-        type: 'event',
-        id: '1358',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-  test('with negative delays', () => {
-    const testData = [
-      {
-        duration: -20,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 100,
-        timeEnd: 200,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 80,
-        timeEnd: 180,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-});
-
-describe('getEventsWithDelay edge cases', () => {
-  it('ensures time start cannot be below 0', () => {
-    const testData = [
-      {
-        duration: -200,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 10,
-        timeEnd: 20,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 0,
-        timeEnd: 0,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-  it('does not modify original array', () => {
-    const testData = [
-      {
-        duration: 10,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 10,
-        timeEnd: 20,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 20,
-        timeEnd: 30,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    const expectedSafe = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 20,
-        timeEnd: 30,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-    expect(getEventsWithDelay(expectedSafe)).toStrictEqual(expected);
-  });
-
-  it('given an empty array', () => {
-    const emptyArray = {
-      test: [],
-      expect: [],
-    };
-
-    expect(getEventsWithDelay(emptyArray.test)).toStrictEqual(emptyArray.expect);
-  });
-
-  it('given an undefined object', () => {
-    const withUndefined = {
-      test: undefined,
-      expect: [],
-    };
-
-    expect(getEventsWithDelay(withUndefined.test)).toStrictEqual(withUndefined.expect);
-  });
-
-  it('given a corrupted event object', () => {
-    const testData = [
-      {
-        title: 'Welcome to Ontime',
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        duration: 60000,
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000,
-        timeEnd: 35520000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-    ];
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000 + 60000,
-        timeEnd: 35520000 + 60000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-
-  it('given a corrupted delay object', () => {
-    const testData = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 28800000,
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        type: 'delay',
-        id: '24240',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000,
-        timeEnd: 35520000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-    ];
-    const expected = [
-      {
-        title: 'Welcome to Ontime',
-        timeStart: 28800000,
-        timeEnd: 30600000,
-        colour: '',
-        type: 'event',
-        id: '5946',
-      },
-      {
-        title: 'Unless recalled by the OSC address',
-        timeStart: 34920000,
-        timeEnd: 35520000,
-        colour: '',
-        type: 'event',
-        id: '8ee5',
-      },
-    ];
-
-    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
-  });
-});
-
-describe('test trimEventlist function', () => {
-  const limit = 8;
-  const testData = [
-    { id: '1' },
-    { id: '2' },
-    { id: '3' },
-    { id: '4' },
-    { id: '5' },
-    { id: '6' },
-    { id: '7' },
-    { id: '8' },
-    { id: '9' },
-    { id: '10' },
-    { id: '11' },
-    { id: '12' },
-  ];
-
-  it('when we use the first item', () => {
-    const selectedId = '1';
-    const expected = [
-      { id: '1' },
-      { id: '2' },
-      { id: '3' },
-      { id: '4' },
-      { id: '5' },
-      { id: '6' },
-      { id: '7' },
-      { id: '8' },
-    ];
-
-    const l = trimRundown(testData, selectedId, limit);
-    expect(l.length).toBe(limit);
-    expect(l).toStrictEqual(expected);
-  });
-
-  it('when we use the third item', () => {
-    const selectedId = '3';
-    const expected = [
-      { id: '1' },
-      { id: '2' },
-      { id: '3' },
-      { id: '4' },
-      { id: '5' },
-      { id: '6' },
-      { id: '7' },
-      { id: '8' },
-    ];
-
-    const l = trimRundown(testData, selectedId, limit);
-    expect(l.length).toBe(limit);
-    expect(l).toStrictEqual(expected);
-  });
-
-  it('when we use the fourth item', () => {
-    const selectedId = '4';
-    const expected = [
-      { id: '2' },
-      { id: '3' },
-      { id: '4' },
-      { id: '5' },
-      { id: '6' },
-      { id: '7' },
-      { id: '8' },
-      { id: '9' },
-    ];
-
-    const l = trimRundown(testData, selectedId, limit);
-    expect(l.length).toBe(limit);
-    expect(l).toStrictEqual(expected);
-  });
-
-  it('if selected is not found', () => {
-    const selectedId = '15';
-    const expected = [
-      { id: '1' },
-      { id: '2' },
-      { id: '3' },
-      { id: '4' },
-      { id: '5' },
-      { id: '6' },
-      { id: '7' },
-      { id: '8' },
-    ];
-
-    const l = trimRundown(testData, selectedId, limit);
-    expect(l.length).toBe(limit);
-    expect(l).toStrictEqual(expected);
-  });
-});
-
-describe('test formatEvents function', () => {
-  const testEvent = [
-    {
-      title: 'Welcome to Ontime',
-      subtitle: 'Subtitles are useful',
-      presenter: 'cpvalente',
-      note: 'Maybe a running note for the operator?',
-      timeStart: 28800000,
-      timeEnd: 30600000,
-      isPublic: false,
-      colour: '',
-      type: 'event',
-      revision: 0,
-      id: '5946',
-    },
-    {
-      title: 'Unless recalled by the OSC address',
-      subtitle: '',
-      presenter: '',
-      note: 'In green, below',
-      timeStart: 34800000,
-      timeEnd: 35400000,
-      isPublic: false,
-      colour: '',
-      type: 'event',
-      revision: 0,
-      id: '8ee5',
-    },
-  ];
-
-  it('it parses correctly', () => {
-    const selectedId = 'otherEvent';
-    const nextId = 'notHere';
-    const expected = [
-      {
-        id: '5946',
-        time: '08:00 - 08:30',
-        title: 'Welcome to Ontime',
-        isNow: false,
-        isNext: false,
-        colour: '',
-      },
-      {
-        id: '8ee5',
-        time: '09:40 - 09:50',
-        title: 'Unless recalled by the OSC address',
-        isNow: false,
-        isNext: false,
-        colour: '',
-      },
-    ];
-
-    const parsed = formatEventList(testEvent, selectedId, nextId, { showEnd: true });
-    expect(parsed).toStrictEqual(expected);
-  });
-
-  it('it handles selected correctly', () => {
-    const selectedId = '5946';
-    const nextId = '8ee5';
-    const expected = [
-      {
-        id: '5946',
-        time: '08:00 - 08:30',
-        title: 'Welcome to Ontime',
-        isNow: true,
-        isNext: false,
-        colour: '',
-      },
-      {
-        id: '8ee5',
-        time: '09:40 - 09:50',
-        title: 'Unless recalled by the OSC address',
-        isNow: false,
-        isNext: true,
-        colour: '',
-      },
-    ];
-
-    const parsed = formatEventList(testEvent, selectedId, nextId, { showEnd: true });
-    expect(parsed).toStrictEqual(expected);
-  });
-
-  it('it handles next correctly', () => {
-    const selectedId = '8ee5';
-    const nextId = 'notHere';
-
-    const expected = [
-      {
-        id: '5946',
-        time: '08:00 - 08:30',
-        title: 'Welcome to Ontime',
-        isNow: false,
-        isNext: false,
-        colour: '',
-      },
-      {
-        id: '8ee5',
-        time: '09:40 - 09:50',
-        title: 'Unless recalled by the OSC address',
-        isNow: true,
-        isNext: false,
-        colour: '',
-      },
-    ];
-
-    const parsed = formatEventList(testEvent, selectedId, nextId, { showEnd: true });
-    expect(parsed).toStrictEqual(expected);
-  });
-});
@@ -0,0 +1,55 @@
+import { EndAction, OntimeEvent, SupportedEvent, TimerType } from 'ontime-types';
+
+import { cloneEvent } from '../eventsManager';
+
+describe('cloneEvent()', () => {
+  it('creates a stem from a given event', () => {
+    const original = {
+      id: 'unique',
+      type: SupportedEvent.Event,
+      title: 'title',
+      cue: 'cue',
+      subtitle: 'subtitle',
+      presenter: 'presenter',
+      note: 'note',
+      timeStart: 0,
+      duration: 10,
+      timeEnd: 10,
+      timerType: TimerType.CountDown,
+      endAction: EndAction.None,
+      isPublic: false,
+      skip: false,
+      colour: 'F00',
+      revision: 10,
+      user0: 'user0',
+      user1: 'user1',
+      user2: 'user2',
+      user3: 'user3',
+      user4: 'user4',
+      user5: 'user5',
+      user6: 'user6',
+      user7: 'user7',
+      user8: 'user8',
+      user9: 'user9',
+    } as OntimeEvent;
+
+    const cloned = cloneEvent(original);
+    expect(cloned).not.toBe(original);
+    // @ts-expect-error -- safeguarding this
+    expect(cloned?.id).toBe(undefined);
+    expect(cloned.title).toBe(original.title);
+    expect(cloned.subtitle).toBe(original.subtitle);
+    expect(cloned.presenter).toBe(original.presenter);
+    expect(cloned.note).toBe(original.note);
+    expect(cloned.endAction).toBe(original.endAction);
+    expect(cloned.timerType).toBe(original.timerType);
+    expect(cloned.timeStart).toBe(original.timeStart);
+    expect(cloned.timeEnd).toBe(original.timeEnd);
+    expect(cloned.duration).toBe(original.duration);
+    expect(cloned.isPublic).toBe(original.isPublic);
+    expect(cloned.skip).toBe(original.skip);
+    expect(cloned.colour).toBe(original.colour);
+    expect(cloned.type).toBe(SupportedEvent.Event);
+    expect(cloned.revision).toBe(0);
+  });
+});
@@ -1,56 +0,0 @@
-import getDelayTo from '../getDelayTo';
-
-describe('getDelayTo function', () => {
-  it('handles list with delays', () => {
-    const delayDuration = 100;
-    const events = [
-      { type: 'event' },
-      { type: 'delay', duration: delayDuration },
-      { type: 'event' },
-    ];
-
-    const notDelayed = getDelayTo(events, 0);
-    expect(notDelayed).toBe(0);
-    const delayedEvent = getDelayTo(events, 2);
-    expect(delayedEvent).toBe(delayDuration);
-  });
-  it('handles list without delays', () => {
-    const events = [{ type: 'event' }, { type: 'event' }];
-    const notDelayed = getDelayTo(events, 1);
-    expect(notDelayed).toBe(0);
-  });
-
-  it('handles list with multiple delays', () => {
-    const delayDuration = 100;
-    const events = [
-      { type: 'event' },
-      { type: 'delay', duration: delayDuration },
-      { type: 'event' },
-      { type: 'delay', duration: delayDuration },
-      { type: 'event' },
-    ];
-    const doubleDelay = getDelayTo(events, 4);
-    expect(doubleDelay).toBe(delayDuration * 2);
-  });
-  it('handles list with blocks', () => {
-    const events = [
-      { type: 'event' },
-      { type: 'delay', duration: 100 },
-      { type: 'event' },
-      { type: 'block' },
-      { type: 'event' },
-    ];
-    const notDelayed = getDelayTo(events, 4);
-    expect(notDelayed).toBe(0);
-  });
-  it('handles index greater than list', () => {
-    const events = [{ type: 'event' }, { type: 'delay', duration: 100 }, { type: 'event' }];
-    const notDelayed = getDelayTo(events, 3);
-    expect(notDelayed).toBe(0);
-  });
-  it('handles negative index (not found)', () => {
-    const events = [{ type: 'event' }, { type: 'delay', duration: 100 }, { type: 'event' }];
-    const notDelayed = getDelayTo(events, -1);
-    expect(notDelayed).toBe(0);
-  });
-});
@@ -1,27 +0,0 @@
-import { calculateDuration, DAY_TO_MS } from '../timesManager';
-
-describe('calculateDuration()', () => {
-  describe('Given start and end values', () => {
-    it('calculates duration correctly', () => {
-      const testStart = 1;
-      const testEnd = 2;
-      const val = calculateDuration(testStart, testEnd);
-      expect(val).toBe(testEnd - testStart);
-    });
-  });
-
-  describe('Handles edge cases', () => {
-    it('when start is after end', () => {
-      const testStart = 3;
-      const testEnd = 2;
-      const val = calculateDuration(testStart, testEnd);
-      expect(val).toBe(testEnd + DAY_TO_MS - testStart);
-    });
-    it('when both are equal', () => {
-      const testStart = 1;
-      const testEnd = 1;
-      const val = calculateDuration(testStart, testEnd);
-      expect(val).toBe(testEnd - testStart);
-    });
-  });
-});
@@ -1,10 +1,13 @@
+import isEqual from 'react-fast-compare';
+import { Location, resolvePath } from 'react-router-dom';
+import { Alias } from 'ontime-types';
+
 /**
 * Validates an alias against defined parameters
 * @param {string} alias
 * @returns {{message: string, status: boolean}}
 */
 export const validateAlias = (alias: string) => {
-
  const valid = { status: true, message: 'ok' };

  if (alias === '' || alias == null) {
@@ -26,4 +29,49 @@ export const validateAlias = (alias: string) => {
  }

  return valid;
-};
+};
+
+/**
+ * Gets the URL to send an alias to
+ * @param location
+ * @param data
+ * @param searchParams
+ */
+export const getAliasRoute = (location: Location, data: Alias[], searchParams: URLSearchParams) => {
+  const currentURL = location.pathname.substring(1);
+  // we need to check if the whole url here is an alias, so we can redirect
+  const foundAlias = data.filter((d) => d.alias === currentURL && d.enabled)[0];
+  if (foundAlias) {
+    return generateURLFromAlias(foundAlias);
+  }
+  const aliasOnPage = searchParams.get('alias');
+  for (const d of data) {
+    if (aliasOnPage) {
+      // if the alias fits the alias on this page, but the URL is diferent, we redirect user to the new URL
+      // if we have the same alias and its enabled and its not empty
+      if (d.alias !== '' && d.enabled && d.alias === aliasOnPage) {
+        const newAliasPath = resolvePath(d.pathAndParams);
+        const urlParams = new URLSearchParams(newAliasPath.search);
+        urlParams.set('alias', d.alias);
+        // we confirm either the url parameters does not match or the url path doesnt
+        if (!isEqual(urlParams, searchParams) || newAliasPath.pathname !== location.pathname) {
+          // we then redirect to the alias route, since the view listening to this alias has an outdated URL
+          return `${newAliasPath.pathname}?${urlParams}`;
+        }
+      }
+    }
+  }
+  return null;
+};
+
+/**
+ * Generate URL from an alias
+ * @param aliasData
+ */
+export const generateURLFromAlias = (aliasData: Alias) => {
+  const newAliasPath = resolvePath(aliasData.pathAndParams);
+  const urlParams = new URLSearchParams(newAliasPath.search);
+  urlParams.set('alias', aliasData.alias);
+
+  return `${newAliasPath.pathname}?${urlParams}`;
+};
@@ -0,0 +1,4 @@
+// we need to this as a promise because safari
+export default async function copyToClipboard(text: string) {
+  setTimeout(async () => await navigator.clipboard?.writeText(text));
+}
@@ -5,27 +5,11 @@ import { mth, mtm, mts } from './timeConstants';
 export const timeFormat = 'HH:mm';
 export const timeFormatSeconds = 'HH:mm:ss';

-/**
- * another go at simpler string formatting (counters)
- * @description Converts seconds to string representing time
- * @param {number | null} milliseconds - time in seconds
- * @param {boolean} [hideZero] - whether to show hours in case its 00
- * @returns {string} String representing absolute time 00:12:02
- */
-export function formatDisplay(milliseconds: number | null, hideZero = false): string {
-  if (typeof milliseconds !== 'number') {
-    return hideZero ? '00:00' : '00:00:00';
+export function secondsInMillis(millis: number | null) {
+  if (!millis) {
+    return 0;
  }
-
-  // add an extra 0 if necessary
-  const format = (val: number) => `0${Math.floor(val)}`.slice(-2);
-
-  const s = Math.abs(millisToSeconds(milliseconds));
-  const hours = Math.floor((s / 3600) % 24);
-  const minutes = Math.floor((s % 3600) / 60);
-
-  if (hideZero && hours < 1) return [minutes, s % 60].map(format).join(':');
-  return [hours, minutes, s % 60].map(format).join(':');
+  return Math.floor((millis % mtm) / mts);
 }

 /**
@@ -49,26 +33,6 @@ export const millisToMinutes = (millis: number): number => {
  return millis < 0 ? Math.ceil(millis / mtm) : Math.floor(millis / mtm);
 };

-/**
- * @description Validates a time string
- * @param {string} string - time string "23:00:12"
- * @returns {boolean} string represents time
- */
-export const isTimeString = (string: string): boolean => {
-  // ^                   # Start of string
-  // (?:                 # Try to match...
-  //  (?:                #  Try to match...
-  //   ([01]?\d|2[0-3]): #   HH:
-  //  )?                 #  (optionally).
-  //  ([0-5]?\d):        #  MM: (required)
-  // )?                  # (entire group optional, so either HH:MM:, MM: or nothing)
-  // ([0-5]?\d)          # SS (required)
-  // $                   # End of string
-
-  const regex = /^(?:(?:([01]?\d|2[0-3])[:,.])?([0-5]?\d)[:,.])?([0-5]?\d)$/;
-  return regex.test(string);
-};
-
 /**
 * @description safe parse string to int
 * @param {string} valueAsString
@@ -1,165 +1,32 @@
-import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from 'ontime-types';
-
-import { formatTime } from './time';
-
-/**
- * @description From a list of events, returns only events of type event with calculated delays
- * @param {Object[]} rundown - given rundown
- * @returns {Object[]} Filtered events with calculated delays
- */
-
-export const getEventsWithDelay = (rundown: OntimeRundownEntry[]): OntimeEvent[] => {
-  if (rundown == null) return [];
-
-  const delayedEvents: OntimeEvent[] = [];
-
-  // Add running delay
-  let delay = 0;
-  for (const event of rundown) {
-    if (event.type === SupportedEvent.Block) delay = 0;
-    else if (event.type === SupportedEvent.Delay) {
-      if (typeof event.duration === 'number') {
-        delay += event.duration;
-      }
-    } else if (event.type === SupportedEvent.Event) {
-      const delayedEvent = { ...event };
-      if (delay !== 0) {
-        delayedEvent.timeStart = Math.max(delayedEvent.timeStart + delay, 0);
-        delayedEvent.timeEnd = Math.max(delayedEvent.timeEnd + delay, 0);
-      }
-      delayedEvents.push(delayedEvent);
-    }
-  }
-
-  return delayedEvents;
-};
-
-/**
- * @description Returns trimmed event list array
- * @param {Object[]} rundown - given rundown
- * @param {string} selectedId - id of currently selected event
- * @param {number} limit - max number of events to return
- * @returns {Object[]} Event list with maximum <limit> objects
- */
-export const trimRundown = (rundown: OntimeRundownEntry[], selectedId: string, limit: number) => {
-  if (rundown == null) return [];
-
-  const BEFORE = 2;
-  const trimmedRundown = [...rundown];
-
-  // limit events length if necessary
-  if (limit != null) {
-    while (trimmedRundown.length > limit) {
-      const idx = trimmedRundown.findIndex((e) => e.id === selectedId);
-      if (idx <= BEFORE) {
-        trimmedRundown.pop();
-      } else {
-        trimmedRundown.shift();
-      }
-    }
-  }
-  return trimmedRundown;
-};
-
-type FormatEventListOptionsProp = {
-  showEnd?: boolean;
-};
-/**
- * @description Returns list of events formatted to be displayed
- * @param {Object[]} rundown - given rundown
- * @param {string} selectedId - id of currently selected event
- * @param {string} nextId - id of next event
- * @param {object} [options]
- * @param {boolean} [options.showEnd] - whether to show the end time
- * @returns {Object[]} Formatted list of events [{time: -, title: -, isNow, isNext}]
- */
-export const formatEventList = (
-  rundown: OntimeEvent[],
-  selectedId: string,
-  nextId: string,
-  options: FormatEventListOptionsProp,
-) => {
-  if (rundown == null) return [];
-  const { showEnd = false } = options;
-
-  const givenEvents = [...rundown];
-
-  // format list
-  const formattedEvents = [];
-  for (const event of givenEvents) {
-    const start = formatTime(event.timeStart);
-    const end = formatTime(event.timeEnd);
-
-    formattedEvents.push({
-      id: event.id,
-      time: showEnd ? `${start} - ${end}` : start,
-      title: event.title,
-      isNow: event.id === selectedId,
-      isNext: event.id === nextId,
-      colour: event.colour,
-    });
-  }
-
-  return formattedEvents;
-};
+import { OntimeEvent, SupportedEvent } from 'ontime-types';

 /**
 * @description Creates a safe duplicate of an event
- * @param {object} event
- * @return {object} clean event
+ * @param {OntimeEvent} event
+ * @param {string} [after]
+ * @return {OntimeEvent} clean event
 */
-type ClonedEvent = OntimeEvent | { after?: string };
+type ClonedEvent = Omit<
+  OntimeEvent,
+  'id' | 'user0' | 'user1' | 'user2' | 'user3' | 'user4' | 'user5' | 'user6' | 'user7' | 'user8' | 'user9'
+>;
 export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
  return {
    type: SupportedEvent.Event,
    title: event.title,
+    cue: event.cue,
    subtitle: event.subtitle,
    presenter: event.presenter,
    note: event.note,
    timeStart: event.timeStart,
+    duration: event.duration,
    timeEnd: event.timeEnd,
+    timerType: event.timerType,
+    endAction: event.endAction,
    isPublic: event.isPublic,
    skip: event.skip,
    colour: event.colour,
    after: after,
+    revision: 0,
  };
 };
-
-/**
- * Gets first event in rundown, if it exists
- * @param {OntimeRundownEntry[]} rundown
- * @return {OntimeEvent | null}
- */
-export function getFirstEvent(rundown: OntimeRundownEntry[]) {
-  return rundown.length ? rundown[0] : null;
-}
-
-/**
- * Gets next event in rundown, if it exists
- * @param {OntimeRundownEntry[]} rundown
- * @param {string} currentId
- * @return {OntimeEvent | null}
- */
-export function getNextEvent(rundown: OntimeRundownEntry[], currentId: string) {
-  const index = rundown.findIndex((event) => event.id === currentId);
-  if (index !== -1 && index + 1 < rundown.length) {
-    return rundown[index + 1];
-  } else {
-    return null;
-  }
-}
-
-/**
- * Gets previous event in rundown, if it exists
- * @param {OntimeRundownEntry[]} rundown
- * @param {string} currentId
- * @return {OntimeEvent | null}
- */
-export function getPreviousEvent(rundown: OntimeRundownEntry[], currentId: string) {
-  const index = rundown.findIndex((event) => event.id === currentId);
-  if (index !== -1 && index - 1 >= 0) {
-    return rundown[index - 1];
-  } else {
-    return null;
-  }
-}
@@ -1,25 +0,0 @@
-/**
- * @description calculates delay to a given event
- * @param {array} events
- * @param {number} eventIndex
- * @return {number} - delay value of given event
- */
-export default function getDelayTo(events, eventIndex) {
-  let delay = 0;
-  let index = 0;
-  if (eventIndex >= 0) {
-    for (const event of events) {
-      if (eventIndex === index) {
-        return delay;
-      }
-
-      if (event.type === 'delay') {
-        delay += event.duration;
-      } else if (event.type === 'block') {
-        delay = 0;
-      }
-      index++;
-    }
-  }
-  return 0;
-}
@@ -1,20 +1,28 @@
 import { Log, RuntimeStore } from 'ontime-types';

-import { RUNTIME, websocketUrl } from '../api/apiConstants';
+import { isProduction, RUNTIME, websocketUrl } from '../api/apiConstants';
 import { ontimeQueryClient } from '../queryClient';
+import { socketClientName } from '../stores/connectionName';
 import { addLog } from '../stores/logger';
 import { runtime } from '../stores/runtime';

 export let websocket: WebSocket | null = null;
 let reconnectTimeout: NodeJS.Timeout | null = null;
 const reconnectInterval = 1000;
-let shouldReconnect = true;
-
-export const connectSocket = () => {
+export let shouldReconnect = true;
+export let hasConnected = false;
+export let reconnectAttempts = 0;
+export const connectSocket = (preferredClientName?: string) => {
  websocket = new WebSocket(websocketUrl);

  websocket.onopen = () => {
    clearTimeout(reconnectTimeout as NodeJS.Timeout);
+    hasConnected = true;
+    reconnectAttempts = 0;
+
+    if (preferredClientName) {
+      socketSendJson('set-client-name', preferredClientName);
+    }
  };

  websocket.onclose = () => {
@@ -23,6 +31,7 @@ export const connectSocket = () => {
      reconnectTimeout = setTimeout(() => {
        console.warn('WebSocket: attempting reconnect');
        if (websocket && websocket.readyState === WebSocket.CLOSED) {
+          reconnectAttempts += 1;
          connectSocket();
        }
      }, reconnectInterval);
@@ -45,13 +54,17 @@ export const connectSocket = () => {

      // TODO: implement partial store updates
      switch (type) {
+        case 'client-name': {
+          socketClientName.getState().setName(payload);
+          break;
+        }
        case 'ontime-log': {
          addLog(payload as Log);
          break;
        }
        case 'ontime': {
          runtime.setState(payload as RuntimeStore);
-          if (import.meta.env.DEV) {
+          if (!isProduction) {
            ontimeQueryClient.setQueryData(RUNTIME, data.payload);
          }
          break;
@@ -10,15 +10,8 @@ export const mts = 1000;
 */
 export const mtm = 1000 * 60;

-
 /**
 * millis to hours
 * @type {number}
 */
 export const mth = 1000 * 60 * 60;
-
-/**
- * milliseconds in a day
- * @type {number}
- */
-export const DAY_TO_MS = 86400000;
@@ -1,16 +1,5 @@
 export type TimeEntryField = 'timeStart' | 'timeEnd' | 'durationOverride';

-/**
- * @description Milliseconds in a day
- */
-export const DAY_TO_MS = 86400000;
-
-/**
- * @description calculates duration from given values
- */
-export const calculateDuration = (start: number, end: number): number =>
-  start > end ? end + DAY_TO_MS - start : end - start;
-
 /**
 * @description Checks which field the value relates to
 */
@@ -0,0 +1,29 @@
+/* eslint-disable react/display-name */
+import { ComponentType, useEffect } from 'react';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+
+import useAliases from '../common/hooks-query/useAliases';
+import { getAliasRoute } from '../common/utils/aliases';
+
+const withAlias = <P extends object>(Component: ComponentType<P>) => {
+  return (props: Partial<P>) => {
+    const { data } = useAliases();
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    // navigate if is alias route
+    useEffect(() => {
+      if (!data) return;
+      const url = getAliasRoute(location, data, searchParams);
+      // navigate to this route if its not empty
+      if (url) {
+        navigate(url);
+      }
+    }, [data, searchParams, navigate, location]);
+
+    return <Component {...props} />;
+  };
+};
+
+export default withAlias;
--- a/Show More
+++ b/Show More