refactor: prevent ids from being overriden

* chore: cleanup typeings

* fix: total gap should only accumulate after the curent loaded

* fix: add the current day of the event to start day offset

.dockerignore

@@ -17,7 +17,6 @@
 # Ignore build folders
 node_modules
 **/node_modules
-**/dist
 
 # Ignore default volumes created by running docker compose up
 ontime-db

.eslintignore

@@ -1 +1,2 @@
- "ONTIME_VERSION.js"
+ "ONTIME_VERSION.js"
+dist/

.eslintrc

@@ -8,7 +8,7 @@
     "jest": true
   },
   "parser": "@typescript-eslint/parser",
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier", "eslint-config-prettier"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   "plugins": ["@typescript-eslint", "prettier"],
   "overrides": [
     {

.github/workflows/build_cli.yml

@@ -14,19 +14,24 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
+      # This step is only needed to setup the permissions to update npm as pnpm will setup the correct node version
+      - uses: actions/setup-node@v6
         with:
-          node-version: 22
-          registry-url: 'https://registry.npmjs.org'
+          node-version-file: '.nvmrc'
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
         with:
-          version: 10
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -38,16 +43,19 @@ jobs:
 
       - name: Copy server
         run: mkdir -p apps/cli/server && cp apps/server/dist/index.cjs apps/cli/server/index.cjs
-      
+
       - name: Copy client
         run: cp -R apps/client/build apps/cli/client
 
       - name: Copy external
         run: cp -R apps/server/src/external apps/cli/external
-      
+
+      # This will be included in v24 of NodeJS so when the project upgrades to that this can be removed
+      - name: Install newer version of npm
+        run: npm install -g npm@11
+
       - name: Publish to NPM
         run: pnpm publish --access public --no-git-checks
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_CONFIG_PROVENANCE: true
         working-directory: ./apps/cli

.github/workflows/build_docker.yml

@@ -6,43 +6,63 @@ on:
   workflow_dispatch:
 
 jobs:
-
   publish_docker:
     runs-on: ubuntu-latest
     env:
       CI: ''
 
     steps:
-    - uses: actions/checkout@v4
+      - uses: actions/checkout@v4
 
-    - name: Docker Login
-      uses: docker/login-action@v2.1.0
-      with:
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
 
-    - name: Docker Setup Buildx
-      uses: docker/setup-buildx-action@v2.5.0
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-    - name: Build and push stable release
-      if: github.event.release.prerelease == false
-      uses: docker/build-push-action@v4.0.0
-      with:
-        context: .
-        file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7
-        # Push is a shorthand for --output=type=registry
-        push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-    - name: Build and push pre-release
-      if: github.event.release.prerelease == true
-      uses: docker/build-push-action@v4.0.0
-      with:
-        context: .
-        file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7
-        # Push is a shorthand for --output=type=registry
-        push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build:docker
+
+      - name: Docker Login
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker Setup Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Build and push stable release
+        if: github.event.release.prerelease == false
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          # Push is a shorthand for --output=type=registry
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
+
+      - name: Build and push pre-release
+        if: github.event.release.prerelease == true
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          # Push is a shorthand for --output=type=registry
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly

.github/workflows/build_electron.yml

@@ -2,7 +2,7 @@ name: Ontime build
 
 on:
   push:
-    tags: [ "*" ]
+    tags: ['*']
   workflow_dispatch:
 
 jobs:
@@ -11,15 +11,20 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
         with:
-          version: 10
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -30,7 +35,7 @@ jobs:
         run: pnpm build
 
       - name: Electron - Build app
-        env: 
+        env:
           APPLE_ID: ${{ secrets.APPLEID }}
           APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLEIDPASS }}
           APPLE_TEAM_ID: ${{ secrets.TEAMID }}
@@ -53,15 +58,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
-        with:
-          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -86,15 +85,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
-        with:
-          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/build_resolver.yml

@@ -1,12 +1,10 @@
 name: Ontime Resolver build
 
 on:
-  release:
-    types: [published]
   workflow_dispatch:
 
 jobs:
-  build_cli:
+  build_resolver:
     permissions:
       id-token: write
     runs-on: ubuntu-latest
@@ -14,29 +12,37 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
+      # This step is only needed to setup the permissions to update npm as pnpm will setup the correct node version
+      - uses: actions/setup-node@v6
         with:
-          node-version: 22
-          registry-url: 'https://registry.npmjs.org'
+          node-version-file: '.nvmrc'
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
         with:
-          version: 10
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Build project packages
-        run: pnpm turbo @getontime/resolver#build
+        run: pnpm build:resolver
+
+      # This will be included in v24 of NodeJS so when the project upgrades to that this can be removed
+      - name: Install newer version of npm
+        run: npm install -g npm@11
 
       - name: Publish to NPM
         run: pnpm publish --access public --no-git-checks
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_CONFIG_PROVENANCE: true
         working-directory: ./apps/resolver

.github/workflows/test.yml

@@ -14,55 +14,35 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
         with:
-          version: 10
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      # Run code quality per package
-      - name: React - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./apps/client
-
-      - name: Server - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./apps/server
-
-      - name: Utils - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./packages/utils
-
-      - name: Types - Run linter
-        if: always()
+      # Run code quality
+      - name: Run linter
         run: pnpm lint
-        working-directory: ./packages/types
+
+      - name: Run TypeScript checks
+        run: pnpm typecheck
 
       # We choose to run tests separately
-      - name: React - Run unit tests
+      - name: Run unit tests
         if: always()
-        run: pnpm test:pipeline
-        working-directory: ./apps/client
-
-      - name: Server - Run unit tests
-        if: always()
-        run: pnpm test:pipeline
-        working-directory: ./apps/server
-
-      - name: Utils - Run unit tests
-        if: always()
-        run: pnpm test:pipeline
-        working-directory: ./packages/utils
+        run: pnpm test
 
   e2e-test:
     runs-on: ubuntu-latest
@@ -70,21 +50,36 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
         with:
-          version: 10
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build client
-        run: pnpm build:local
+      - name: Get installed Playwright version
+        run: echo "PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --parseable | cut -s -d '@' -f3 | cut -d '/' -f1)" >> $GITHUB_ENV
+      - name: Cache playwright binaries
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+      - run: npx playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
 
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps

.prettierignore

@@ -5,6 +5,10 @@ node_modules
 
 playwright-report
 
+
+pnpm-lock.yaml
 **/*.toml
-**/*.yml
-**/*.json
+**/*.json
+!tsconfig.common.json
+!turbo.json
+!package.json

DEVELOPMENT.md

@@ -21,7 +21,8 @@ Locally, we would need to run both the React client and the node.js server in de
 
 From the project root, run the following commands
 - __Install the project dependencies__ by running `pnpm i`
-- __Run dev mode__ by running `pnpm turbo dev`
+- __Create a local build__ by running `pnpm build`, this will populate local dependencies
+- __Run dev mode__ by running `pnpm dev` or `pnpm dev:electron` to get the electron window
 
 
 ### Debugging backend
@@ -30,10 +31,10 @@ The previous command will start the development servers for both the client, ser
 Typically in dev mode we prefer to start these in separate terminals to help with error tracking and debugging.
 
 We do that by creating two terminals an running
-- __Run the React UI__ by running `pnpm turbo dev --filter=ontime-ui`
-- __Run the nodejs server__ by running `pnpm turbo dev --filter=ontime-server`
+- __Run the React UI__ by running `pnpm dev --filter=ontime-ui`
+- __Run the nodejs server__ by running `pnpm dev --filter=ontime-server`
 
-- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by running `pnpm turbo dev:inspect --filter=ontime-server`.
+- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by running `pnpm dev:inspect --filter=ontime-server`.
 
 ## TESTING
 
@@ -46,7 +47,7 @@ Generally we have 2 types of tests.
 
 Unit tests are contained in mostly all the apps and packages (client, server and utils)
 
-You can run unit tests by running `pnpm turbo test:pipeline` from the project root.
+You can run unit tests by running `pnpm test:pipeline` from the project root.
 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
@@ -66,7 +67,7 @@ start the webserver with `pnpm dev:server`
 
 Some other useful commands
 
-- `pnpm e2e --ui` open playwright UI
+- `pnpm e2e:ui` open playwright UI
 - `pnpm e2e --headed` run tests with a visible browser window
 
 ## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)
@@ -77,14 +78,11 @@ 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 `pnpm turbo run build:electron`
-- __Create the package__ by running `pnpm turbo run dist-win`, `pnpm turbo run dist-mac` or `pnpm turbo run dist-linux`
+- __Build the UI and server__ by running `pnpm build`
+- __Create the package__ by running `pnpm dist-win`, `pnpm dist-mac` or `pnpm dist-linux`
 
 The build distribution assets will be at `.apps/electron/dist`
 
-Note: The MacOS build will only work in CI, locally it will fail due to notarisation issues.
-Use the `pnpm turbo run dist-mac:local` command to build a MacOS distribution locally and skip the notary process.
-
 ## DOCKER
 
 Ontime provides a docker-compose file to aid with building and running docker images.

Dockerfile

@@ -1,37 +1,30 @@
-FROM node:22-bullseye AS builder
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install -g pnpm@10.11.0
-COPY . /app
-WORKDIR /app
-RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils install --config.dedupe-peer-dependents=false --frozen-lockfile
-RUN pnpm --filter=ontime-ui --filter=ontime-server run build:docker
-
-FROM node:22-alpine
-
-# Set environment variables
-# Environment Variable to signal that we are running production
-ENV NODE_ENV=docker
-# Ontime Data path
-ENV ONTIME_DATA=/data/
-
-WORKDIR /app/
-
-# Prepare UI
-COPY --from=builder /app/apps/client/build ./client/
-
-# Prepare Backend
-COPY --from=builder /app/apps/server/dist/ ./server/
-COPY --from=builder /app/apps/server/src/external/ ./external/
-COPY --from=builder /app/apps/server/src/user/ ./user/
-COPY --from=builder /app/apps/server/src/html/ ./html/
-
-# Export default ports
-EXPOSE 4001/tcp 8888/udp 9999/udp
-
-CMD ["node", "server/docker.cjs"]
-
-# Build and run commands
-# !!! Note that this command needs pre-build versions of the UI and server apps
-# docker buildx build . -t getontime/ontime
-# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime
+ARG NODE_VERSION=22.15.1
+FROM node:${NODE_VERSION}-alpine
+
+# Set environment variables
+# Environment Variable to signal that we are running production
+ENV NODE_ENV=docker
+# Ontime Data path
+ENV ONTIME_DATA=/data/
+
+RUN mkdir /app
+WORKDIR /app/
+
+# Prepare UI
+COPY apps/client/build/ ./client/
+
+# Prepare Backend
+COPY apps/server/dist/ ./server/
+COPY apps/server/src/external/ ./external/
+COPY apps/server/src/user/ ./user/
+COPY apps/server/src/html/ ./html/
+
+# Export default ports
+EXPOSE 4001/tcp 8888/udp 9999/udp
+
+CMD ["node", "server/docker.cjs"]
+
+# Build and run commands
+# pnpm build:docker
+# docker buildx build . -t getontime/ontime
+# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime

README.md

@@ -26,8 +26,6 @@ We do our best to have most topics covered by the documentation. However, if you
 Let us know!
 Ontime improves from the collaboration with its users. We would like to understand how you use Ontime and appreciate your feedback.
 
-We would also like to include a testimonials section in our ✨new website✨. It would be great to showcase the diversity of users running Ontime.
-
 # Ontime
 
 Ontime is a browser-based application that manages event rundowns, scheduling, and cueing.

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@getontime/cli",
-    "version": "4.0.0-beta.3",
+    "version": "4.1.0",
     "author": "Carlos Valente",
     "description": "Time keeping for live events",
     "repository": "https://github.com/cpvalente/ontime",

apps/client/index.html

@@ -13,12 +13,6 @@
     <link rel="manifest" href="/manifest.json" />
     <meta name="robots" content="noindex" />
     <title>ontime</title>
-    <style>
-      body,
-      html {
-        background-color: #101010 !important;
-      }
-    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

apps/client/package.json

@@ -1,10 +1,10 @@
 {
   "name": "ontime-ui",
-  "version": "4.0.0-beta.3",
+  "version": "4.1.0",
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.3",
+    "@base-ui-components/react": "1.0.0-beta.4",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -16,7 +16,7 @@
     "@tanstack/react-query-devtools": "^5.85.9",
     "@tanstack/react-table": "^8.21.3",
     "autosize": "^6.0.1",
-    "axios": "^1.11.0",
+    "axios": "^1.12.2",
     "babel-plugin-react-compiler": "19.1.0-rc.3",
     "csv-stringify": "^6.6.0",
     "prismjs": "^1.30.0",
@@ -37,15 +37,12 @@
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
     "postinstall": "pnpm addversion",
     "dev": "cross-env BROWSER=none vite",
-    "build": "vite build",
-    "build:local": "cross-env NODE_ENV=local vite build",
-    "build:electron": "cross-env NODE_ENV=local vite build",
-    "build:docker": "cross-env VITE_IS_DOCKER=true vite build",
-    "build:localdocker": "cross-env NODE_ENV=local vite build",
+    "dev:electron": "pnpm dev",
     "lint": "eslint . --quiet",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
     "test": "vitest",
     "test:pipeline": "vitest run",
-    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build",
     "analyse": "npx vite-bundle-visualizer"
   },
   "browserslist": {

apps/client/src/App.tsx

@@ -8,6 +8,7 @@ import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverla
 import { AppContextProvider } from './common/context/AppContext';
 import { ontimeQueryClient } from './common/queryClient';
 import { connectSocket } from './common/utils/socket';
+import KeepAwake from './features/keep-awake/KeepAwake';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
 import { baseURI } from './externals';
@@ -24,6 +25,7 @@ function App() {
               <ErrorBoundary>
                 <TranslationProvider>
                   <IdentifyOverlay />
+                  <KeepAwake />
                   <AppRouter />
                 </TranslationProvider>
               </ErrorBoundary>

apps/client/src/AppRouter.tsx

@@ -102,6 +102,7 @@ export default function AppRouter() {
           path='op'
           element={
             <ViewLoader>
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
               <Operator />
             </ViewLoader>
           }
@@ -207,13 +208,13 @@ function PresetView() {
   /**
    * Locked presets do not allow configuration changes
    * Whether the user can navigate is determined by the locked param
+   *
+   * We inject the preset to the context value for the view to consume
    */
   const Component = PresetViewMap[preset.target as OntimeViewPresettable];
   return (
     <PresetContext value={preset}>
-      {preset.target !== OntimeView.Cuesheet && (
-        <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
-      )}
+      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
       {Component ? <Component /> : <NotFound />}
     </PresetContext>
   );

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

@@ -1,9 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
 import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';
 
-import { makeTable } from '../../views/cuesheet/cuesheet.utils';
-import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../utils/csv';
-
 import { apiEntryUrl } from './constants';
 import { createBlob, downloadBlob } from './utils';
 
@@ -33,27 +30,6 @@ export async function downloadProject(fileName: string) {
   }
 }
 
-/**
- * Request download of the current rundown as a CSV file
- * @param fileName
- */
-export async function downloadCSV(fileName: string = 'rundown') {
-  try {
-    const { data, name } = await fileDownload(fileName);
-    const { project, rundowns, customFields } = data;
-
-    const flatRundowns = aggregateRundowns(rundowns);
-    const sheetData = makeTable(project, flatRundowns, customFields);
-
-    const fileContent = makeCSVFromArrayOfArrays(sheetData);
-
-    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
-    downloadBlob(blob, `${name}.csv`);
-  } catch (error) {
-    console.error(error);
-  }
-}
-
 /**
  * HTTP request to upload project file
  */

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

@@ -1,8 +1,9 @@
 import axios, { AxiosResponse } from 'axios';
-import { CustomFields, Rundown } from 'ontime-types';
+import { CustomFields, Rundown, RundownSummary } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
+import { downloadBlob } from './utils';
 
 const excelPath = `${apiEntryUrl}/excel`;
 
@@ -10,28 +11,21 @@ const excelPath = `${apiEntryUrl}/excel`;
  * upload Excel file to server
  * @return string - file ID op the uploaded file
  */
-export async function upload(file: File) {
+export async function upload(file: File): Promise<string[]> {
   const formData = new FormData();
   formData.append('excel', file);
-  await axios.post(`${excelPath}/upload`, formData, {
+  const response = await axios.post(`${excelPath}/upload`, formData, {
     headers: {
       'Content-Type': 'multipart/form-data',
     },
   });
-}
-
-/**
- * Get Worksheet names
- * @return string[] - array of available worksheets
- */
-export async function getWorksheetNames(): Promise<string[]> {
-  const response: AxiosResponse<string[]> = await axios.get(`${excelPath}/worksheets`);
   return response.data;
 }
 
 type PreviewSpreadsheetResponse = {
   rundown: Rundown;
   customFields: CustomFields;
+  summary: RundownSummary;
 };
 export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
   const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
@@ -39,3 +33,18 @@ export async function importRundownPreview(options: ImportMap): Promise<PreviewS
   });
   return response.data;
 }
+
+/**
+ * Downloads a xlsx representation of the rundown from the server
+ */
+export async function downloadAsExcel(rundownId: string, fileName?: string) {
+  try {
+    const response = await axios.get(`${excelPath}/${rundownId}/export`, {
+      responseType: 'blob',
+    });
+
+    downloadBlob(response.data, `${fileName ?? 'Ontime_rundown'}.xlsx`);
+  } catch (error) {
+    console.error('Error downloading file:', error);
+  }
+}

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

@@ -3,6 +3,7 @@ import { EntryId, OntimeEntry, OntimeEvent, ProjectRundownsList, Rundown, Transi
 
 import { apiEntryUrl } from './constants';
 
+type RundownId = string;
 const rundownPath = `${apiEntryUrl}/rundowns`;
 
 // #region operations on project rundowns =========================
@@ -26,8 +27,8 @@ export async function fetchCurrentRundown(): Promise<Rundown> {
 /**
  * HTTP request to switch the currently loaded rundown
  */
-export async function loadRundown(id: string): Promise<AxiosResponse<ProjectRundownsList>> {
-  return axios.post(`${rundownPath}/${id}/load`);
+export async function loadRundown(rundownId: RundownId): Promise<AxiosResponse<ProjectRundownsList>> {
+  return axios.post(`${rundownPath}/${rundownId}/load`);
 }
 
 /**
@@ -37,11 +38,25 @@ export async function createRundown(title: string): Promise<AxiosResponse<Projec
   return axios.post(rundownPath, { title });
 }
 
+/**
+ * HTTP request to duplicate an existing rundown
+ */
+export async function duplicateRundown(rundownId: RundownId): Promise<AxiosResponse<ProjectRundownsList>> {
+  return axios.post(`${rundownPath}/${rundownId}/duplicate`);
+}
+
+/**
+ * HTTP request to rename an existing rundown
+ */
+export async function renameRundown(rundownId: RundownId, title: string): Promise<AxiosResponse<ProjectRundownsList>> {
+  return axios.patch(`${rundownPath}/${rundownId}`, { title });
+}
+
 /**
  * HTTP request to delete a rundown
  */
-export async function deleteRundown(id: string): Promise<AxiosResponse<ProjectRundownsList>> {
-  return axios.delete(`${rundownPath}/${id}`);
+export async function deleteRundown(rundownId: RundownId): Promise<AxiosResponse<ProjectRundownsList>> {
+  return axios.delete(`${rundownPath}/${rundownId}`);
 }
 
 // #endregion operations on project rundowns ======================
@@ -51,7 +66,7 @@ export async function deleteRundown(id: string): Promise<AxiosResponse<ProjectRu
  * HTTP request to post new entry
  */
 export async function postAddEntry(
-  rundownId: string,
+  rundownId: RundownId,
   data: TransientEventPayload,
 ): Promise<AxiosResponse<OntimeEntry>> {
   return axios.post(`${rundownPath}/${rundownId}/entry`, data);
@@ -60,7 +75,7 @@ export async function postAddEntry(
 /**
  * HTTP request to edit an entry
  */
-export async function putEditEntry(rundownId: string, data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
+export async function putEditEntry(rundownId: RundownId, data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
   return axios.put(`${rundownPath}/${rundownId}/entry`, data);
 }
 
@@ -72,7 +87,7 @@ export type BatchEditEntry = {
 /**
  * HTTP request to edit multiple events
  */
-export async function putBatchEditEvents(rundownId: string, data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
+export async function putBatchEditEvents(rundownId: RundownId, data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
   return axios.put(`${rundownPath}/${rundownId}/batch`, data);
 }
 
@@ -85,56 +100,56 @@ export type ReorderEntry = {
 /**
  * HTTP request to reorder an entry
  */
-export async function patchReorderEntry(rundownId: string, data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
+export async function patchReorderEntry(rundownId: RundownId, data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
   return axios.patch(`${rundownPath}/${rundownId}/reorder`, data);
 }
 
 /**
  * HTTP request to swap two events
  */
-export async function requestEventSwap(rundownId: string, from: EntryId, to: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function requestEventSwap(rundownId: RundownId, from: EntryId, to: EntryId): Promise<AxiosResponse<Rundown>> {
   return axios.patch(`${rundownPath}/${rundownId}/swap`, { from, to });
 }
 
 /**
  * HTTP request to request application of delay
  */
-export async function requestApplyDelay(rundownId: string, delayId: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function requestApplyDelay(rundownId: RundownId, delayId: EntryId): Promise<AxiosResponse<Rundown>> {
   return axios.patch(`${rundownPath}/${rundownId}/applydelay/${delayId}`);
 }
 
 /**
  * HTTP request for cloning an entry
  */
-export async function postCloneEntry(rundownId: string, entryId: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function postCloneEntry(rundownId: RundownId, entryId: EntryId): Promise<AxiosResponse<Rundown>> {
   return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`);
 }
 
 /**
  * HTTP request for grouping a list of entries into a group
  */
-export async function requestGroupEntries(rundownId: string, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
+export async function requestGroupEntries(rundownId: RundownId, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
   return axios.post(`${rundownPath}/${rundownId}/group`, { ids: entryIds });
 }
 
 /**
  * HTTP request for dissolving of a group
  */
-export async function requestUngroup(rundownId: string, groupId: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function requestUngroup(rundownId: RundownId, groupId: EntryId): Promise<AxiosResponse<Rundown>> {
   return axios.post(`${rundownPath}/${rundownId}/ungroup/${groupId}`);
 }
 
 /**
  * HTTP request to delete entries of a given rundown
  */
-export async function deleteEntries(rundownId: string, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
+export async function deleteEntries(rundownId: RundownId, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
   return axios.delete(`${rundownPath}/${rundownId}/entries`, { data: { ids: entryIds } });
 }
 
 /**
  * HTTP request to delete all entries of a given rundown
  */
-export async function requestDeleteAll(rundownId: string): Promise<AxiosResponse<Rundown>> {
+export async function requestDeleteAll(rundownId: RundownId): Promise<AxiosResponse<Rundown>> {
   return axios.delete(`${rundownPath}/${rundownId}/all`);
 }
 

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

@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from 'axios';
-import { AuthenticationStatus, CustomFields, Rundown } from 'ontime-types';
+import { AuthenticationStatus, CustomFields, Rundown, RundownSummary } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
@@ -56,6 +56,7 @@ export const previewRundown = async (
 ): Promise<{
   rundown: Rundown;
   customFields: CustomFields;
+  summary: RundownSummary;
 }> => {
   const response = await axios.post(`${sheetsPath}/${sheetId}/read`, { options });
   return response.data;

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

@@ -1,6 +1,5 @@
 import { PropsWithChildren, useRef, useState } from 'react';
-import { IoCheckmark } from 'react-icons/io5';
-import { IoCopy } from 'react-icons/io5';
+import { IoCheckmark, IoCopy } from 'react-icons/io5';
 
 import copyToClipboard from '../../utils/copyToClipboard';
 import { cx } from '../../utils/styleUtils';

apps/client/src/common/components/dropdown-menu/DropdownMenu.module.scss

@@ -27,7 +27,6 @@
   }
 }
 
-
 .item {
   outline: 0;
   cursor: default;
@@ -61,6 +60,13 @@
     border-radius: 3px;
     background-color: $gray-1000;
   }
+
+  &[data-type='destructive'] {
+    color: $red-500;
+    svg {
+      color: $red-500;
+    }
+  }
 }
 
 .separator {

apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx

@@ -6,7 +6,7 @@ import style from './DropdownMenu.module.scss';
 
 type DropdownMenuItemDivider = { type: 'divider' };
 type DropdownMenuItem = {
-  type: 'item';
+  type: 'item' | 'destructive';
   label: string;
   icon?: IconType;
   disabled?: boolean;
@@ -31,7 +31,7 @@ export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChil
                 return <BaseMenu.Separator key={index} className={style.separator} />;
               }
               return (
-                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
+                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled} data-type={item.type}>
                   {item.icon && <item.icon />}
                   {item.label}
                 </BaseMenu.Item>

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

@@ -49,15 +49,14 @@ class ErrorBoundary extends React.Component {
       return (
         <div className={style.errorContainer} data-testid='error-container'>
           <div>
-            <p className={style.error}>:/</p>
-            <p>Something went wrong</p>
-            <div
-              role='button'
+            <p className={style.error}>: /</p>
+            <p>Something went wrong.</p>
+            <a
               className={style.report}
-              onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
+              href={`mailto:mail@getontime.no?subject=Error%20Report&body=${encodeURIComponent(this.reportContent)}`}
             >
               Report error
-            </div>
+            </a>
             <div
               role='button'
               className={style.report}

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

@@ -3,24 +3,21 @@
   height: 100%;
   display: grid;
   place-content: center;
-  background-color: #121212;
-  color: white;
+  background-color: $ui-black;
+  color: $ui-white;
+}
 
-  .error {
-    color: $error-red;
-    font-weight: 600;
-  }
+.error {
+  color: $error-red;
+}
 
-  .report {
-    text-decoration: underline  $error-red;
-    cursor: pointer;
-  }
+.report {
+  color: $blue-500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
 
-  .report:hover {
-    color: $error-red;
-  }
-
-  .report:active {
-    color: white;
+  &:hover {
+    color: $ontime-color;
   }
 }

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

@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react';
 import { IoBan } from 'react-icons/io5';
 
 import { cx } from '../../../utils/styleUtils';
@@ -10,12 +11,13 @@ interface SwatchProps {
   isSelected?: boolean;
 }
 
-export default function Swatch(props: SwatchProps) {
-  const { color, isSelected, onClick } = props;
-
-  const handleClick = () => {
+export default function Swatch({ color, isSelected, onClick }: SwatchProps) {
+  const handleClick = (event: MouseEvent) => {
     onClick?.(color);
+    event.preventDefault();
+    event.stopPropagation();
   };
+
   const classes = cx([style.swatch, isSelected && style.selected, onClick && style.selectable]);
 
   if (!color) {

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

@@ -20,7 +20,7 @@ export default function DelayInput(props: DelayInputProps) {
   const [value, setValue] = useState<string>('');
   const inputRef = useRef<HTMLInputElement | null>(null);
   // avoid wrong submit on cancel
-  let ignoreChange = false;
+  const ignoreChangeRef = useRef(false);
 
   // set internal value on duration change
   useEffect(() => {
@@ -35,8 +35,8 @@ export default function DelayInput(props: DelayInputProps) {
    * @param {string} newValue string to be parsed
    */
   const validateAndSubmit = (newValue: string) => {
-    if (ignoreChange) {
-      ignoreChange = false;
+    if (ignoreChangeRef.current) {
+      ignoreChangeRef.current = false;
       return;
     }
 
@@ -78,7 +78,7 @@ export default function DelayInput(props: DelayInputProps) {
     } else if (event.key === 'Tab') {
       validateAndSubmit((event.target as HTMLInputElement).value);
     } else if (event.key === 'Escape') {
-      ignoreChange = true;
+      ignoreChangeRef.current = true;
       setValue(millisToString(duration));
       inputRef.current?.blur();
     }

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

@@ -11,8 +11,7 @@ interface AppLinkProps {
  * Component used to navigate to an editor link inside the same window
  * Handles the path to respect Ontime Clouds base URL
  */
-export default function AppLink(props: PropsWithChildren<AppLinkProps>) {
-  const { search, children } = props;
+export default function AppLink({ search, children }: PropsWithChildren<AppLinkProps>) {
   const navigate = useNavigate();
 
   const handleClick = () => navigate({ search });

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

@@ -12,9 +12,7 @@ interface ExternalLinkProps {
   inline?: boolean;
 }
 
-export default function ExternalLink(props: ExternalLinkProps) {
-  const { href, inline, children } = props;
-
+export default function ExternalLink({ href, inline, children }: ExternalLinkProps) {
   const handleClick = (event: MouseEvent) => {
     event.preventDefault();
     openLink(href);

apps/client/src/common/components/modal/Modal.module.scss

@@ -5,9 +5,9 @@
   transform: translateX(-50%);
   
   padding-inline: 1rem;
-  min-width: min(680px, 90vw);
+  min-width: min(880px, 90vw);
   min-height: min(200px, 10vh);
-  max-width: min(900px, 90vw);
+  max-width: min(1200px, 90vw);
 
   background-color: $gray-1250;
   color: $ui-white;

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

@@ -1,10 +1,12 @@
 import { memo } from 'react';
 import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
+import { LuCoffee } from 'react-icons/lu';
 import { useLocation } from 'react-router';
 import { Dialog } from '@base-ui-components/react/dialog';
 import { useDisclosure, useFullscreen } from '@mantine/hooks';
 
 import { isLocalhost } from '../../../externals';
+import { useKeepAwakeOptions } from '../../../features/keep-awake/KeepAwake';
 import { navigatorConstants } from '../../../viewerConfig';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
@@ -31,6 +33,7 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
   const [isRenameOpen, handlers] = useDisclosure(false);
   const { fullscreen, toggle } = useFullscreen();
   const { mirror, toggleMirror } = useViewOptionsStore();
+  const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
   const location = useLocation();
 
   return (
@@ -62,6 +65,13 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
               <IoSwapVertical />
               {mirror && <span className={style.note}>Active</span>}
             </NavigationMenuItem>
+            {window.isSecureContext && (
+              <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
+                Keep Awake
+                <LuCoffee />
+                {keepAwake && <span className={style.note}>Active</span>}
+              </NavigationMenuItem>
+            )}
             <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>
 
             <hr className={style.separator} />

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

@@ -1,5 +1,4 @@
-import { IoApps } from 'react-icons/io5';
-import { IoSettingsOutline } from 'react-icons/io5';
+import { IoApps, IoSettingsOutline } from 'react-icons/io5';
 
 import { useFadeOutOnInactivity } from '../../../hooks/useFadeOutOnInactivity';
 import { cx } from '../../../utils/styleUtils';

apps/client/src/common/components/select/Select.module.scss

@@ -62,8 +62,6 @@
   padding: 2px;
   border-radius: $component-border-radius-md;
   color: $ui-white;
-  overflow-y: auto;
-  max-height: 20rem;
   border: 1px solid $gray-1000;
 
   &[data-side='start'] {
@@ -73,6 +71,16 @@
   }
 }
 
+.list {
+  box-sizing: border-box;
+  position: relative;
+  padding-block: 0.25rem;
+  overflow-y: auto;
+  max-height: 20rem;
+  max-height: var(--available-height);
+  scroll-padding-block: 1.5rem;
+}
+
 .item {
   box-sizing: border-box;
   outline: 0;

apps/client/src/common/components/select/Select.tsx

@@ -31,14 +31,17 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
         <BaseSelect.Positioner side='bottom' align='start'>
           <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
           <BaseSelect.Popup className={styles.popup}>
-            {options.map(({ disabled, label, value }) => (
-              <BaseSelect.Item key={String(value)} className={styles.item} value={value} disabled={disabled}>
-                <BaseSelect.ItemIndicator className={styles.itemIndicator}>
-                  <IoCheckmark className={styles.itemIndicatorIcon} />
-                </BaseSelect.ItemIndicator>
-                <BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
-              </BaseSelect.Item>
-            ))}
+            <BaseSelect.Arrow />
+            <BaseSelect.List className={styles.list}>
+              {options.map(({ disabled, label, value }) => (
+                <BaseSelect.Item key={String(value)} className={styles.item} value={value} disabled={disabled}>
+                  <BaseSelect.ItemIndicator className={styles.itemIndicator}>
+                    <IoCheckmark className={styles.itemIndicatorIcon} />
+                  </BaseSelect.ItemIndicator>
+                  <BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
+                </BaseSelect.Item>
+              ))}
+            </BaseSelect.List>
           </BaseSelect.Popup>
           <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
         </BaseSelect.Positioner>

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

@@ -30,6 +30,7 @@
   width: 40rem;
   max-width: 100vw;
   height: 100vh;
+  height: 100dvh;
 
   display: flex;
   flex-direction: column;

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

@@ -3,7 +3,7 @@ import { ProjectRundownsList } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_RUNDOWNS } from '../api/constants';
-import { createRundown, deleteRundown, fetchProjectRundownList, loadRundown } from '../api/rundown';
+import { createRundown, deleteRundown, duplicateRundown, fetchProjectRundownList, loadRundown, renameRundown } from '../api/rundown';
 
 /**
  * Project rundowns
@@ -30,6 +30,26 @@ export function useMutateProjectRundowns() {
       ontimeQueryClient.setQueryData(PROJECT_RUNDOWNS, response.data);
     },
   });
+  
+  const { mutateAsync: duplicate } = useMutation({
+    mutationFn: duplicateRundown,
+    onMutate: () => {
+      ontimeQueryClient.cancelQueries({ queryKey: PROJECT_RUNDOWNS });
+    },
+    onSuccess: (response) => {
+      ontimeQueryClient.setQueryData(PROJECT_RUNDOWNS, response.data);
+    },
+  });
+  
+  const { mutateAsync: rename } = useMutation({
+    mutationFn: ([rundownId, title]: Parameters<typeof renameRundown>) => renameRundown(rundownId, title),
+    onMutate: () => {
+      ontimeQueryClient.cancelQueries({ queryKey: PROJECT_RUNDOWNS });
+    },
+    onSuccess: (response) => {
+      ontimeQueryClient.setQueryData(PROJECT_RUNDOWNS, response.data);
+    },
+  });
 
   const { mutateAsync: remove } = useMutation({
     mutationFn: deleteRundown,
@@ -51,5 +71,5 @@ export function useMutateProjectRundowns() {
     },
   });
 
-  return { create, remove, load };
+  return { create, duplicate, remove, load, rename };
 }

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

@@ -6,7 +6,7 @@ import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { RUNDOWN } from '../api/constants';
 import { fetchCurrentRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
-import { getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
 
 import useProjectData from './useProjectData';
 
@@ -54,7 +54,7 @@ export function useFlatRundown() {
 
   // update data whenever the revision changes
   useEffect(() => {
-    if (data.revision !== -1 && data.revision !== prevRevision) {
+    if (data.revision !== -1 || data.revision !== prevRevision) {
       const flatRundown = data.flatOrder.map((id) => data.entries[id]);
       setFlatRundown(flatRundown);
       setPrevRevision(data.revision);
@@ -85,8 +85,8 @@ export function useFlatRundownWithMetadata() {
 /**
  * Provides access to a partial rundown based on a filter callback
  */
-export function usePartialRundown(cb: (event: OntimeEntry) => boolean) {
-  const { data, status } = useFlatRundown();
+export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
+  const { data, status } = useFlatRundownWithMetadata();
   const filteredData = useMemo(() => {
     return data.filter(cb);
   }, [data, cb]);

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

@@ -164,11 +164,6 @@ export const useProgressData = createSelector((state: RuntimeStore) => ({
   timeDanger: state.eventNow?.timeDanger ?? null,
 }));
 
-export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
-  offset: state.offset.absolute,
-}));
-
 export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
   offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
   mode: state.offset.mode,
@@ -178,14 +173,6 @@ export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
   clock: state.clock,
 }));
 
-export const useCurrentDay = createSelector((state: RuntimeStore) => ({
-  currentDay: state.eventNow?.dayOffset ?? 0,
-}));
-
-export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({
-  offset: state.offset.absolute,
-}));
-
 export const usePing = createSelector((state: RuntimeStore) => ({
   ping: state.ping,
 }));
@@ -211,7 +198,7 @@ export const usePlayback = () => {
 
 /* ======================= Overview data subscriptions ======================= */
 
-export const useRundownOverview = createSelector((state: RuntimeStore) => ({
+export const useStartTimesOverview = createSelector((state: RuntimeStore) => ({
   plannedStart: state.rundown.plannedStart,
   actualStart: state.rundown.actualStart,
   plannedEnd: state.rundown.plannedEnd,
@@ -289,11 +276,7 @@ export const useStudioTimersSocket = createSelector((state: RuntimeStore) => ({
   eventNow: state.eventNow,
   message: state.message,
   time: state.timer,
-  offset: state.offset,
+  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
   rundown: state.rundown,
-}));
-
-export const useTimelineSocket = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
-  offset: state.offset.absolute,
+  expectedRundownEnd: state.offset.expectedRundownEnd,
 }));

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

@@ -1 +0,0 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg';

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

@@ -1,89 +0,0 @@
-import { create } from 'zustand';
-
-type Target = 'cuesheet' | 'timer' | 'clock' | 'countdown' | 'backstage' | 'studio';
-
-interface SelectionState {
-  [key: string]: boolean;
-}
-
-interface ColumnPermissions {
-  read: string[];
-  write: string[];
-}
-
-interface CuesheetLinksState {
-  target: Target | null;
-  readSelected: SelectionState;
-  writeSelected: SelectionState;
-  setTarget: (target: Target | null) => void;
-  setField: (field: 'read' | 'write', key: string, value: boolean) => void;
-  toggleField: (field: 'read' | 'write', key: string) => void;
-  selectAll: (field: 'read' | 'write', keys: string[]) => void;
-  clearAll: (field: 'read' | 'write', keys: string[]) => void;
-  // Returns arrays of column keys that have read/write permissions if target is 'cuesheet'
-  getSelections: () => ColumnPermissions | null;
-}
-
-export const useCuesheetLinksStore = create<CuesheetLinksState>((set, get) => ({
-  target: null,
-  readSelected: {},
-  writeSelected: {},
-  setTarget: (target) => set({ target }),
-  setField: (field, key, value) =>
-    set((state) => ({
-      ...(field === 'read'
-        ? { readSelected: { ...state.readSelected, [key]: value } }
-        : { writeSelected: { ...state.writeSelected, [key]: value } }),
-    })),
-  toggleField: (field, key) =>
-    set((state) => ({
-      ...(field === 'read'
-        ? { readSelected: { ...state.readSelected, [key]: !state.readSelected[key] } }
-        : { writeSelected: { ...state.writeSelected, [key]: !state.writeSelected[key] } }),
-    })),
-  selectAll: (field, keys) =>
-    set((_state) => ({
-      ...(field === 'read'
-        ? {
-            readSelected: keys.reduce((acc, key) => {
-              acc[key] = true;
-              return acc;
-            }, {} as SelectionState),
-          }
-        : {
-            writeSelected: keys.reduce((acc, key) => {
-              acc[key] = true;
-              return acc;
-            }, {} as SelectionState),
-          }),
-    })),
-  clearAll: (field, keys) =>
-    set((_state) => ({
-      ...(field === 'read'
-        ? {
-            readSelected: keys.reduce((acc, key) => {
-              acc[key] = false;
-              return acc;
-            }, {} as SelectionState),
-          }
-        : {
-            writeSelected: keys.reduce((acc, key) => {
-              acc[key] = false;
-              return acc;
-            }, {} as SelectionState),
-          }),
-    })),
-  getSelections: () => {
-    const state = get();
-    if (state.target !== 'cuesheet') return null;
-
-    return {
-      read: Object.entries(state.readSelected)
-        .filter(([_, selected]) => selected)
-        .map(([key]) => key),
-      write: Object.entries(state.writeSelected)
-        .filter(([_, selected]) => selected)
-        .map(([key]) => key),
-    };
-  },
-}));

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

@@ -1,6 +1,4 @@
-import { OntimeEntry, ProjectRundowns, Rundown } from 'ontime-types';
-
-import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../csv';
+import { makeCSVFromArrayOfArrays } from '../csv';
 
 describe('makeCSVFromArrayOfArrays()', () => {
   it('joins an array of arrays with commas and newlines', () => {
@@ -13,34 +11,3 @@ after newline,after comma
 `);
   });
 });
-
-describe('aggregateRundowns()', () => {
-  it('flattens an object of rundowns into a single array', () => {
-    const rundowns = {
-      first: {
-        id: '',
-        title: '',
-        revision: 0,
-        order: ['1', '2'],
-        flatOrder: ['1', '2'],
-        entries: {
-          '1': { id: '1' } as OntimeEntry,
-          '2': { id: '2' } as OntimeEntry,
-        },
-      },
-      second: {
-        id: '',
-        title: '',
-        revision: 0,
-        order: ['3', '4'],
-        flatOrder: ['3', '4'],
-        entries: {
-          '3': { id: '3' } as OntimeEntry,
-          '4': { id: '4' } as OntimeEntry,
-        },
-      } as Rundown,
-    } as ProjectRundowns;
-
-    expect(aggregateRundowns(rundowns)).toStrictEqual([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]);
-  });
-});

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

@@ -140,7 +140,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 2,
       isPast: true,
       isNextDay: false,
-      totalGap: 10,
+      totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
       groupId: 'group',
@@ -156,7 +156,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 2,
       isPast: true,
       isNextDay: false,
-      totalGap: 10,
+      totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
       groupId: 'group',
@@ -172,7 +172,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 3,
       isPast: false,
       isNextDay: false,
-      totalGap: 10,
+      totalGap: 0,
       isLinkedToLoaded: true,
       isLoaded: true,
       groupId: 'group',
@@ -188,7 +188,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 4,
       isPast: false,
       isNextDay: false,
-      totalGap: 10,
+      totalGap: 0,
       isLinkedToLoaded: true,
       isLoaded: false,
       groupId: 'group',
@@ -204,7 +204,7 @@ describe('initRundownMetadata()', () => {
       eventIndex: 5,
       isPast: false,
       isNextDay: false,
-      totalGap: 17,
+      totalGap: 7,
       isLinkedToLoaded: false,
       isLoaded: false,
       groupId: null,

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

@@ -175,7 +175,7 @@ describe('generateUrlPresetOptions', () => {
     expect(() => generateUrlPresetOptions('test', 'invalid-url')).toThrow();
   });
 
-  it('throws on on invalid route', () => {
+  it('throws on invalid route', () => {
     expect(() => generateUrlPresetOptions('test', 'www.getontime.no/somethingelse/')).toThrow();
   });
 });

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

@@ -1,5 +1,4 @@
 import { stringify } from 'csv-stringify/browser/esm/sync';
-import { OntimeEntry, ProjectRundowns } from 'ontime-types';
 
 /**
  * Converts an array of arrays to a CSV file
@@ -7,25 +6,3 @@ import { OntimeEntry, ProjectRundowns } from 'ontime-types';
 export function makeCSVFromArrayOfArrays(arrayOfArrays: string[][]): string {
   return stringify(arrayOfArrays);
 }
-
-/**
- * Receives an object of rundowns, and flattens them into a single, linear rundown
- * Used for CSV export
- */
-export function aggregateRundowns(rundowns: ProjectRundowns): OntimeEntry[] {
-  const rundownKeys = Object.keys(rundowns);
-  if (rundownKeys.length === 0) return [];
-  const flatRundown: OntimeEntry[] = [];
-
-  for (const key of rundownKeys) {
-    const { order, entries } = rundowns[key];
-
-    for (let i = 0; i < order.length; i++) {
-      const entryId = order[i];
-      const entry = entries[entryId];
-
-      flatRundown.push(entry);
-    }
-  }
-  return flatRundown;
-}

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

@@ -151,14 +151,14 @@ function processEntry(
 
       if (isPlayableEvent(entry)) {
         processedData.isNextDay = checkIsNextDay(entry, processedData.previousEvent);
-        processedData.totalGap += entry.gap;
-
+        
         if (!processedData.isPast && !processedData.isLoaded) {
           /**
            * isLinkToLoaded is a chain value that we maintain until we
            * a) find an unlinked event
            * b) find a countToEnd event
-           */
+          */
+          processedData.totalGap += entry.gap;
           processedData.isLinkedToLoaded =
             entry.linkStart && !processedData.previousEvent?.countToEnd && processedData.isLinkedToLoaded;
         }

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

@@ -1,8 +0,0 @@
-import { MaybeString } from 'ontime-types';
-
-export default function safeParseNumber(value: MaybeString, defaultValue: number = 0): number {
-  if (!value) return defaultValue;
-  const number = Number(value);
-  if (isNaN(number)) return defaultValue;
-  return number;
-}

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

@@ -12,6 +12,8 @@ import { APP_SETTINGS } from '../api/constants';
 import { useExpectedStartData } from '../hooks/useSocket';
 import { ontimeQueryClient } from '../queryClient';
 
+import { ExtendedEntry } from './rundownMetadata';
+
 /**
  * Returns current time in milliseconds from midnight
  * @returns {number}
@@ -154,3 +156,33 @@ export function useTimeUntilExpectedStart(
   );
   return expectedStart - clock;
 }
+
+export function getExpectedTimesFromExtendedEvent(
+  event: Pick<
+    ExtendedEntry<OntimeEvent>,
+    'timeStart' | 'dayOffset' | 'delay' | 'totalGap' | 'isLinkedToLoaded' | 'countToEnd' | 'duration'
+  > | null,
+  state: ReturnType<typeof useExpectedStartData>,
+) {
+  if (event === null) return { expectedStart: 0, timeToStart: 0, expectedEnd: 0, plannedEnd: 0 };
+
+  const expectedStart = getExpectedStart(
+    { timeStart: event.timeStart, delay: event.delay, dayOffset: event.dayOffset },
+    {
+      totalGap: event.totalGap,
+      isLinkedToLoaded: event.isLinkedToLoaded,
+      ...state,
+    },
+  );
+
+  const plannedEnd = event.timeStart + event.duration + event.delay;
+
+  return {
+    expectedStart,
+    timeToStart: expectedStart - state.clock,
+    expectedEnd: event.countToEnd
+      ? Math.max(expectedStart + event.duration, plannedEnd)
+      : expectedStart + event.duration,
+    plannedEnd,
+  };
+}

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

@@ -33,8 +33,8 @@ export function validateProjectFile(file: File) {
   }
 
   // Limit file size of a project file to around 1MB
-  if (file.size > 1_000_000) {
-    throw new Error('File size limit (1MB) exceeded');
+  if (file.size > 2_000_000) {
+    throw new Error('File size limit (2MB) exceeded');
   }
 }
 
@@ -56,8 +56,8 @@ export function validateLogo(file: File) {
     throw new Error('File is empty');
   }
 
-  // Limit file size of a project file to around 1MB
-  if (file.size > 1_000_000) {
-    throw new Error('File size limit (1MB) exceeded');
+  // Limit file size of a project file to around 1.5MB
+  if (file.size > 1_500_000) {
+    throw new Error('File size limit (1.5MB) exceeded');
   }
 }

apps/client/src/externals.ts

@@ -17,11 +17,11 @@ export const buyMeACoffeeUrl = 'https://buymeacoffee.com/cpvalente';
 
 // resolve environment
 export const appVersion = version;
-export const isProduction = import.meta.env.MODE === 'production';
-export const isDev = !isProduction;
+export const isDocker = import.meta.env.IS_DOCKER; // this env is made available by the vite.config.js define function
+export const isProduction = import.meta.env.PROD;
+export const isDev = import.meta.env.DEV;
 export const currentHostName = window.location.hostname;
 export const isLocalhost = currentHostName === 'localhost' || currentHostName === '127.0.0.1';
-export const isDockerImage = Boolean(import.meta.env.VITE_IS_DOCKER);
 export const isOntimeCloud = currentHostName.includes('cloud.getontime.no');
 
 // resolve entrypoint URLs

apps/client/src/features/PresetWrapper.tsx

@@ -1,29 +0,0 @@
-/* eslint-disable react/display-name */
-import { ComponentType, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router';
-
-import useUrlPresets from '../common/hooks-query/useUrlPresets';
-import { getRouteFromPreset } from '../common/utils/urlPresets';
-
-const withPreset = <P extends object>(Component: ComponentType<P>) => {
-  return (props: Partial<P>) => {
-    const { data } = useUrlPresets();
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    // navigate if is alias route
-    useEffect(() => {
-      if (!data) return;
-      const destination = getRouteFromPreset(location, data);
-
-      // navigate to this destination if its not null
-      if (destination) {
-        navigate(destination);
-      }
-    }, [data, navigate, location]);
-
-    return <Component {...(props as P)} />;
-  };
-};
-
-export default withPreset;

apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx

@@ -107,16 +107,16 @@ export default function AutomationsList(props: AutomationsListProps) {
                     </IconButton>
                   </Panel.InlineElements>
                 </tr>
-                {deleteError && (
-                  <tr>
-                    <td colSpan={5}>
-                      <Panel.Error>{deleteError}</Panel.Error>
-                    </td>
-                  </tr>
-                )}
               </Fragment>
             );
           })}
+          {deleteError && (
+            <tr>
+              <td colSpan={5}>
+                <Panel.Error>{deleteError}</Panel.Error>
+              </td>
+            </tr>
+          )}
         </tbody>
       </Panel.Table>
     </Panel.Card>

apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx

@@ -77,7 +77,7 @@ export default function OntimeActionForm({
           New time
           <Input
             {...register(`outputs.${index}.time`, {
-              required: { value: true, message: 'Required field' }, //TODO:(automation set aux) not sure what way around to have the string and where to have the ms value
+              required: { value: true, message: 'Required field' },
             })}
             fluid
             placeholder='eg: 10m5s'

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

@@ -13,5 +13,5 @@
 }
 
 .current {
-  background-color: $blue-1100;
+  background-color: $blue-1100 !important; // fighting zebra styles
 }

apps/client/src/features/app-settings/panel/manage-panel/ManageRundowns.tsx

@@ -1,26 +1,39 @@
 import { useState } from 'react';
-import { IoAdd } from 'react-icons/io5';
+import {
+  IoAdd,
+  IoDocumentOutline,
+  IoDownloadOutline,
+  IoDuplicateOutline,
+  IoEllipsisHorizontal,
+  IoPencilOutline,
+  IoTrash,
+} from 'react-icons/io5';
 import { useDisclosure } from '@mantine/hooks';
 
+import { downloadAsExcel } from '../../../../common/api/excel';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
+import IconButton from '../../../../common/components/buttons/IconButton';
 import Dialog from '../../../../common/components/dialog/Dialog';
+import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Tag from '../../../../common/components/tag/Tag';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
 import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 
+import RundownRenameForm from './composite/RundownRenameForm';
 import { ManageRundownForm } from './ManageRundownForm';
 
 import style from './ManagePanel.module.scss';
 
 export default function ManageRundowns() {
   const { data } = useProjectRundowns();
-  const { remove, load } = useMutateProjectRundowns();
+  const { duplicate, remove, load, rename } = useMutateProjectRundowns();
   const [isOpenDelete, deleteHandlers] = useDisclosure();
   const [isOpenLoad, loadHandlers] = useDisclosure();
   const [isNewLoad, newHandlers] = useDisclosure();
   const [targetRundown, setTargetRundown] = useState('');
+  const [renamingRundown, setRenamingRundown] = useState<string | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
 
   const openLoad = (id: string) => {
@@ -35,6 +48,11 @@ export default function ManageRundowns() {
     deleteHandlers.open();
   };
 
+  const openRename = (id: string) => {
+    setActionError(null);
+    setRenamingRundown(id);
+  };
+
   const submitRundownLoad = async () => {
     try {
       await load(targetRundown);
@@ -45,6 +63,27 @@ export default function ManageRundowns() {
     }
   };
 
+  const submitRundownDuplicate = async (id: string) => {
+    setActionError(null);
+    setRenamingRundown(null);
+    setTargetRundown('');
+
+    try {
+      await duplicate(id);
+    } catch (error) {
+      setActionError(`Failed to duplicate rundown. ${maybeAxiosError(error)}`);
+    }
+  };
+
+  const submitRundownRename = async (id: string, newTitle: string) => {
+    try {
+      await rename([id, newTitle]);
+      setRenamingRundown(null);
+    } catch (error) {
+      setActionError(`Failed to rename rundown. ${maybeAxiosError(error)}`);
+    }
+  };
+
   const submitRundownDelete = async () => {
     try {
       await remove(targetRundown);
@@ -55,6 +94,10 @@ export default function ManageRundowns() {
     }
   };
 
+  const handleDownloadXlsx = async (rundownId: string, title: string) => {
+    await downloadAsExcel(rundownId, title);
+  };
+
   return (
     <>
       <Panel.Section>
@@ -87,25 +130,70 @@ export default function ManageRundowns() {
               <tbody>
                 {data?.rundowns?.map(({ id, numEntries, title }) => {
                   const isLoaded = data.loaded === id;
+                  const isRenaming = renamingRundown === id;
+
+                  if (isRenaming) {
+                    return (
+                      <tr key={id}>
+                        <td colSpan={3}>
+                          <RundownRenameForm
+                            onCancel={() => setRenamingRundown(null)}
+                            onSubmit={(newTitle: string) => submitRundownRename(id, newTitle)}
+                            initialTitle={title}
+                          />
+                        </td>
+                      </tr>
+                    );
+                  }
+
                   return (
                     <tr key={id} className={cx([isLoaded && style.current])}>
                       <td>{numEntries}</td>
                       <td>
                         {title} {isLoaded && <Tag>Loaded</Tag>}
                       </td>
-                      <Panel.InlineElements as='td'>
-                        <Button size='small' onClick={() => openLoad(id)} disabled={isLoaded}>
-                          Load
-                        </Button>
-                        <Button
-                          size='small'
-                          variant='subtle-destructive'
-                          onClick={() => openDelete(id)}
-                          disabled={isLoaded}
+                      <td>
+                        <DropdownMenu
+                          render={<IconButton variant='ghosted-white' />}
+                          items={[
+                            {
+                              type: 'item',
+                              icon: IoPencilOutline,
+                              label: 'Rename',
+                              onClick: () => openRename(id),
+                            },
+                            {
+                              type: 'item',
+                              icon: IoDownloadOutline,
+                              label: 'Load',
+                              onClick: () => openLoad(id),
+                              disabled: isLoaded,
+                            },
+                            {
+                              type: 'item',
+                              icon: IoDocumentOutline,
+                              label: 'Download .xlsx',
+                              onClick: () => handleDownloadXlsx(id, title),
+                            },
+                            {
+                              type: 'item',
+                              icon: IoDuplicateOutline,
+                              label: 'Duplicate',
+                              onClick: () => submitRundownDuplicate(id),
+                            },
+                            { type: 'divider' },
+                            {
+                              type: 'destructive',
+                              icon: IoTrash,
+                              label: 'Delete',
+                              onClick: () => openDelete(id),
+                              disabled: isLoaded,
+                            },
+                          ]}
                         >
-                          Delete
-                        </Button>
-                      </Panel.InlineElements>
+                          <IoEllipsisHorizontal />
+                        </DropdownMenu>
+                      </td>
                     </tr>
                   );
                 })}
@@ -117,7 +205,7 @@ export default function ManageRundowns() {
       <Dialog
         isOpen={isOpenDelete}
         onClose={deleteHandlers.close}
-        title='Load rundown'
+        title='Delete rundown'
         showBackdrop
         showCloseButton
         bodyElements={

apps/client/src/features/app-settings/panel/manage-panel/composite/RundownRenameForm.tsx

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { checkRegex } from 'ontime-utils';
+
+import { maybeAxiosError } from '../../../../../common/api/utils';
+import Button from '../../../../../common/components/buttons/Button';
+import Input from '../../../../../common/components/input/input/Input';
+import { preventEscape } from '../../../../../common/utils/keyEvent';
+import * as Panel from '../../../panel-utils/PanelUtils';
+
+interface RundownRenameFormProps {
+  onSubmit: (newTitle: string) => Promise<void>;
+  onCancel: () => void;
+  initialTitle: string;
+}
+
+interface FormData {
+  title: string;
+}
+
+export default function RundownRenameForm({ onSubmit, onCancel, initialTitle }: RundownRenameFormProps) {
+  const {
+    handleSubmit,
+    register,
+    setFocus,
+    setError,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<FormData>({
+    defaultValues: { title: initialTitle },
+    mode: 'onChange',
+  });
+
+  const setupSubmit = async (values: FormData) => {
+    try {
+      await onSubmit(values.title);
+    } catch (error) {
+      setError('root', { type: 'custom', message: maybeAxiosError(error) });
+    }
+  };
+
+  // Give initial focus to the title input
+  useEffect(() => {
+    setFocus('title');
+  }, [setFocus]);
+
+  const canSubmit = isDirty && isValid;
+
+  return (
+    <Panel.Indent as='form' onSubmit={handleSubmit(setupSubmit)} onKeyDown={(event) => preventEscape(event, onCancel)}>
+      <label>
+        <Panel.Description>Rundown title</Panel.Description>
+        <Input
+          {...register('title', {
+            required: { value: true, message: 'Title is required' },
+            validate: (value) => {
+              if (value.trim().length === 0) return 'Title cannot be empty';
+              if (checkRegex.isAlphanumericWithSpace(value) === false)
+                return 'Title can only contain alphanumeric characters, spaces and underscores';
+              return true;
+            },
+          })}
+          fluid
+        />
+        {errors.title && <Panel.Error>{errors.title.message}</Panel.Error>}
+      </label>
+      {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+      <Panel.InlineElements relation='inner' align='end'>
+        <Button variant='ghosted' onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type='submit' variant='primary' disabled={!canSubmit} loading={isSubmitting}>
+          Save
+        </Button>
+      </Panel.InlineElements>
+    </Panel.Indent>
+  );
+}

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/ImportReview.tsx

@@ -1,7 +1,10 @@
 import { useState } from 'react';
-import { CustomFields, Rundown } from 'ontime-types';
+import { CustomFields, Rundown, RundownSummary } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
 
 import Button from '../../../../../common/components/buttons/Button';
+import useRundown from '../../../../../common/hooks-query/useRundown';
+import { formatDuration } from '../../../../../common/utils/time';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import PreviewSpreadsheet from './preview/PreviewRundown';
@@ -11,13 +14,21 @@ import { useSheetStore } from './useSheetStore';
 interface ImportReviewProps {
   rundown: Rundown;
   customFields: CustomFields;
+  summary: RundownSummary;
   onFinished: () => void;
   onCancel: () => void;
+  onBack: () => void;
 }
 
-export default function ImportReview(props: ImportReviewProps) {
-  const { rundown, customFields, onFinished, onCancel } = props;
-
+export default function ImportReview({
+  rundown,
+  customFields,
+  summary,
+  onFinished,
+  onCancel,
+  onBack,
+}: ImportReviewProps) {
+  const { data: currentRundown } = useRundown();
   const [loading, setLoading] = useState(false);
   const { importRundown } = useGoogleSheet();
   const resetPreview = useSheetStore((state) => state.resetPreview);
@@ -29,9 +40,12 @@ export default function ImportReview(props: ImportReviewProps) {
 
   const applyImport = async () => {
     setLoading(true);
+
+    // we need to import on-top of the currently loaded rundown
+    // so the id needs to match
     await importRundown(
       {
-        [rundown.id]: rundown,
+        [currentRundown.id]: { ...rundown, id: currentRundown.id, title: currentRundown.title },
       },
       customFields,
     );
@@ -47,11 +61,31 @@ export default function ImportReview(props: ImportReviewProps) {
           <Button onClick={handleCancel} variant='ghosted' disabled={loading}>
             Cancel
           </Button>
+          <Button onClick={onBack} variant='subtle' disabled={loading}>
+            Back
+          </Button>
           <Button onClick={applyImport} variant='primary' loading={loading}>
             Apply
           </Button>
         </Panel.InlineElements>
       </Panel.Title>
+      <Panel.ListGroup>
+        <Panel.ListItem>
+          <b>Title</b> {rundown.title}
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <b>Number of entries</b> {rundown.flatOrder.length}
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <b>Start time</b> {millisToString(summary.start)}
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <b>End time</b> {millisToString(summary.end)}
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <b>Total duration</b> {formatDuration(summary.duration)}
+        </Panel.ListItem>
+      </Panel.ListGroup>
       <PreviewSpreadsheet rundown={rundown} customFields={customFields} />
     </Panel.Section>
   );

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/SourcesPanel.tsx

@@ -3,7 +3,6 @@ import { IoCloudOutline, IoDownloadOutline } from 'react-icons/io5';
 import { getErrorMessage, ImportMap } from 'ontime-utils';
 
 import {
-  getWorksheetNames as getWorksheetNamesExcel,
   importRundownPreview as importRundownPreviewExcel,
   upload as uploadExcel,
 } from '../../../../../common/api/excel';
@@ -37,8 +36,11 @@ export default function SourcesPanel() {
   const setRundown = useSheetStore((state) => state.setRundown);
   const customFields = useSheetStore((state) => state.customFields);
   const setCustomFields = useSheetStore((state) => state.setCustomFields);
+  const summary = useSheetStore((state) => state.summary);
+  const setSummary = useSheetStore((state) => state.setSummary);
   const setSheetId = useSheetStore((state) => state.setSheetId);
   const sheetId = useSheetStore((state) => state.sheetId);
+  const resetPreview = useSheetStore((state) => state.resetPreview);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -53,8 +55,7 @@ export default function SourcesPanel() {
     try {
       setHasFile('loading');
       validateExcelImport(fileToUpload);
-      await uploadExcel(fileToUpload);
-      const names = await getWorksheetNamesExcel();
+      const names = await uploadExcel(fileToUpload);
       setWorksheets(names);
       setImportFlow('excel');
       setHasFile('done');
@@ -77,6 +78,7 @@ export default function SourcesPanel() {
     setHasFile('none');
     setWorksheets(null);
     setCustomFields(null);
+    setSummary(null);
     setError('');
     setSheetId(null);
   };
@@ -110,6 +112,7 @@ export default function SourcesPanel() {
         const previewData = await importRundownPreviewExcel(importMap);
         setRundown(previewData.rundown);
         setCustomFields(previewData.customFields);
+        setSummary(previewData.summary);
       } catch (error) {
         setError(maybeAxiosError(error));
       }
@@ -152,7 +155,7 @@ export default function SourcesPanel() {
   const showCompleted = importFlow === 'finished';
   const showAuth = isGSheetFlow && !isAuthenticated;
   const showImportMap = (isGSheetFlow && isAuthenticated) || (isExcelFlow && hasFile === 'done');
-  const showReview = rundown !== null && customFields !== null;
+  const showReview = rundown !== null && customFields !== null && summary !== null;
 
   return (
     <Panel.Section>
@@ -219,8 +222,10 @@ export default function SourcesPanel() {
           <ImportReview
             rundown={rundown}
             customFields={customFields}
+            summary={summary}
             onFinished={handleFinished}
             onCancel={cancelImportMap}
+            onBack={resetPreview}
           />
         )}
       </Panel.Card>

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx

@@ -5,6 +5,7 @@ import { checkRegex, ImportMap } from 'ontime-utils';
 
 import Button from '../../../../../../common/components/buttons/Button';
 import IconButton from '../../../../../../common/components/buttons/IconButton';
+import Info from '../../../../../../common/components/info/Info';
 import Input from '../../../../../../common/components/input/input/Input';
 import Select from '../../../../../../common/components/select/Select';
 import Tooltip from '../../../../../../common/components/tooltip/Tooltip';
@@ -136,6 +137,10 @@ export default function ImportMapForm({
           </Button>
         </Panel.InlineElements>
       </Panel.Title>
+      <Info>
+        Match your spreadsheet columns to Ontime fields. <br />
+        You can also add Custom Fields by providing a name for Ontime and the spreadsheet column name.
+      </Info>
       <Panel.Table>
         <thead>
           <tr>

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/importMapUtils.ts

@@ -59,7 +59,7 @@ export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
     timeWarning: namedImportMap['Time warning'],
     timeDanger: namedImportMap['Time danger'],
     custom,
-    entryId: namedImportMap.ID,
+    id: namedImportMap.ID,
   };
 }
 

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/preview/PreviewRundown.tsx

@@ -18,9 +18,7 @@ function booleanToText(value?: boolean) {
   return value ? 'Yes' : undefined;
 }
 
-export default function PreviewRundown(props: PreviewRundownProps) {
-  const { rundown, customFields } = props;
-
+export default function PreviewRundown({ rundown, customFields }: PreviewRundownProps) {
   // we only count Ontime Events which are 1 based in client
   let eventIndex = 0;
 
@@ -59,9 +57,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
             const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
             return (
               <tr key={entry.id}>
-                <td className={style.center}>
-                  <Tag>-</Tag>
-                </td>
+                <td /> {/** Index */}
                 <td className={style.center}>
                   <Tag>{entry.type}</Tag>
                 </td>

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/useGoogleSheet.ts

@@ -21,6 +21,7 @@ export default function useGoogleSheet() {
   const patchStepData = useSheetStore((state) => state.patchStepData);
   const setRundown = useSheetStore((state) => state.setRundown);
   const setCustomFields = useSheetStore((state) => state.setCustomFields);
+  const setSummary = useSheetStore((state) => state.setSummary);
 
   /** whether the current session has been authenticated */
   const verifyAuth = async (): Promise<{ authenticated: AuthenticationStatus; sheetId: string } | void> => {
@@ -58,6 +59,7 @@ export default function useGoogleSheet() {
       const data = await previewRundown(sheetId, fileOptions);
       setRundown(data.rundown);
       setCustomFields(data.customFields);
+      setSummary(data.summary);
     } catch (error) {
       patchStepData({ pullPush: { available: true, error: maybeAxiosError(error) } });
     }

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/useSheetStore.ts

@@ -1,4 +1,4 @@
-import { AuthenticationStatus, CustomFields, Rundown } from 'ontime-types';
+import { AuthenticationStatus, CustomFields, Rundown, RundownSummary } from 'ontime-types';
 import { defaultImportMap, ImportMap } from 'ontime-utils';
 import { create } from 'zustand';
 
@@ -17,10 +17,10 @@ type SheetStore = {
   // we get this from a preview response
   rundown: Rundown | null;
   setRundown: (rundown: Rundown | null) => void;
-
-  // we get this from a preview response
   customFields: CustomFields | null;
   setCustomFields: (customFields: CustomFields | null) => void;
+  summary: RundownSummary | null;
+  setSummary: (metadata: RundownSummary | null) => void;
 
   spreadsheetImportMap: ImportMap;
   patchSpreadsheetImportMap: <T extends keyof ImportMap>(field: T, value: ImportMap[T]) => void;
@@ -43,6 +43,7 @@ const initialState = {
   authenticationStatus: 'not_authenticated' as AuthenticationStatus,
   rundown: null,
   customFields: null,
+  summary: null,
   spreadsheetImportMap: defaultImportMap,
 };
 
@@ -64,6 +65,8 @@ export const useSheetStore = create<SheetStore>((set, get) => ({
 
   setCustomFields: (customFields: CustomFields | null) => set({ customFields }),
 
+  setSummary: (summary: RundownSummary | null) => set({ summary }),
+
   patchSpreadsheetImportMap: <T extends keyof ImportMap>(field: T, value: ImportMap[T]) => {
     const currentImportMap = get().spreadsheetImportMap;
     if (currentImportMap[field] !== value) {
@@ -72,5 +75,5 @@ export const useSheetStore = create<SheetStore>((set, get) => ({
   },
 
   reset: () => set(initialState),
-  resetPreview: () => set({ rundown: null, customFields: null }),
+  resetPreview: () => set({ rundown: null, customFields: null, summary: null }),
 }));

apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx

@@ -4,7 +4,7 @@ import { MessageTag } from 'ontime-types';
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import { usePing } from '../../../../common/hooks/useSocket';
 import { sendSocket } from '../../../../common/utils/socket';
-import { isDockerImage } from '../../../../externals';
+import { isDocker } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -18,7 +18,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
   return (
     <>
       <Panel.Header>Network</Panel.Header>
-      {isDockerImage && (
+      {isDocker && (
         <Panel.Section>
           <OntimeCloudStats />
         </Panel.Section>

apps/client/src/features/app-settings/panel/project-panel/ProjectListItem.tsx

@@ -10,7 +10,6 @@ import {
 
 import {
   deleteProject,
-  downloadCSV,
   downloadProject,
   duplicateProject,
   loadProject,
@@ -187,10 +186,6 @@ function ActionMenu(props: ActionMenuProps) {
     await downloadProject(filename);
   };
 
-  const handleExportCSV = async () => {
-    await downloadCSV(filename);
-  };
-
   return (
     <DropdownMenu
       render={<IconButton variant='ghosted-white' />}
@@ -213,7 +208,6 @@ function ActionMenu(props: ActionMenuProps) {
         { type: 'item', icon: IoPencilOutline, label: 'Rename', onClick: handleRename },
         { type: 'item', icon: IoCopyOutline, label: 'Duplicate', onClick: handleDuplicate },
         { type: 'item', icon: IoDocumentOutline, label: 'Download', onClick: handleDownload },
-        { type: 'item', icon: IoDocumentOutline, label: 'Export CSV Rundown', onClick: handleExportCSV },
         { type: 'divider' },
         { type: 'item', icon: IoTrash, label: 'Delete', onClick: () => onDelete(filename), disabled: current },
       ]}

apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx

@@ -27,6 +27,7 @@ export default function ProjectData() {
     reset,
     formState: { isSubmitting, isValid, isDirty, errors },
     setError,
+    clearErrors,
     watch,
     control,
     setValue,
@@ -53,6 +54,7 @@ export default function ProjectData() {
 
   const handleUploadProjectLogo = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
+    clearErrors('logo');
 
     if (!file) {
       return;
@@ -93,6 +95,7 @@ export default function ProjectData() {
 
   const onSubmit = async (formData: ProjectData) => {
     try {
+      clearErrors();
       await updateProjectData(formData);
     } catch (error) {
       const message = maybeAxiosError(error);

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

@@ -31,7 +31,7 @@ const staticOptions = [
   },
   {
     id: 'manage',
-    label: 'Project data',
+    label: 'Project settings',
     secondary: [
       { id: 'manage__defaults', label: 'Rundown defaults' },
       { id: 'manage__custom', label: 'Custom fields' },

apps/client/src/features/control/message/MessageControlExport.tsx

@@ -6,6 +6,7 @@ import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewN
 import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx } from '../../../common/utils/styleUtils';
+import { getIsNavigationLocked } from '../../../externals';
 
 import MessageControl from './MessageControl';
 
@@ -20,7 +21,7 @@ function MessageControlExport() {
     <ProtectRoute permission='editor'>
       <div className={style.messages} data-testid='panel-messages-control'>
         {!isExtracted && <Corner onClick={(event) => handleLinks('messagecontrol', event)} />}
-        {isExtracted && <ViewNavigationMenu suppressSettings />}
+        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
 
         <div className={classes}>
           <ErrorBoundary>

apps/client/src/features/control/playback/TimerControlExport.tsx

@@ -5,6 +5,7 @@ import ErrorBoundary from '../../../common/components/error-boundary/ErrorBounda
 import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { getIsNavigationLocked } from '../../../externals';
 
 import PlaybackControl from './PlaybackControl';
 
@@ -18,7 +19,7 @@ function TimerControlExport() {
     <ProtectRoute permission='editor'>
       <div className={style.playback} data-testid='panel-timer-control'>
         {!isExtracted && <Corner onClick={(event) => handleLinks('timercontrol', event)} />}
-        {isExtracted && <ViewNavigationMenu suppressSettings />}
+        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
 
         <div className={style.content}>
           <ErrorBoundary>

apps/client/src/features/keep-awake/KeepAwake.tsx

@@ -0,0 +1,84 @@
+import { use, useCallback, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router';
+
+import { PresetContext } from '../../common/context/PresetContext';
+
+/** @url https://developer.mozilla.org/en-US/docs/Web/API/WakeLock */
+export default function KeepAwake() {
+  const { keepAwake } = useKeepAwakeOptions();
+  const [wakeLockSentinel, setWakeLockSentinel] = useState<WakeLockSentinel | null>(null);
+
+  const removeLock = () => {
+    if (wakeLockSentinel) wakeLockSentinel.release().finally(() => setWakeLockSentinel(null));
+  };
+
+  const acquireLock = () => {
+    if (!wakeLockSentinel || wakeLockSentinel.released) {
+      setWakeLockSentinel(null);
+      navigator.wakeLock
+        .request('screen')
+        .then((sentinel) => {
+          setWakeLockSentinel(sentinel);
+        })
+        .catch(console.error);
+    }
+  };
+
+  useEffect(() => {
+    const controller = new AbortController();
+    if (keepAwake) {
+      acquireLock();
+      document.addEventListener(
+        'visibilitychange',
+        () => {
+          if (wakeLockSentinel !== null && document.visibilityState === 'visible') {
+            acquireLock();
+          }
+        },
+        { signal: controller.signal },
+      );
+    } else {
+      removeLock();
+    }
+
+    return () => {
+      controller.abort();
+      removeLock();
+    };
+  }, [keepAwake]);
+
+  return <></>;
+}
+
+const keepAwakeKey = 'keep-awake';
+
+function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URLSearchParams) {
+  // Helper to get value from either source, prioritizing defaultValues
+  return defaultValues?.has(keepAwakeKey) || searchParams.has(keepAwakeKey);
+}
+
+/**
+ * Hook exposes the keep awake options
+ */
+export function useKeepAwakeOptions() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  const keepAwake = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
+  const toggleKeepAwake = useCallback(() => {
+    setSearchParams((searchParams) => {
+      if (keepAwake) {
+        searchParams.delete(keepAwakeKey);
+      } else {
+        searchParams.set(keepAwakeKey, '1');
+      }
+      return searchParams;
+    });
+  }, [keepAwake]);
+
+  return { keepAwake, toggleKeepAwake };
+}

apps/client/src/features/operator/Operator.tsx

@@ -6,13 +6,10 @@ import ViewParamsEditor from '../../common/components/view-params-editor/ViewPar
 import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useSelectedEventId } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
-import useCustomFields from '../../common/hooks-query/useCustomFields';
-import useProjectData from '../../common/hooks-query/useProjectData';
-import useRundown from '../../common/hooks-query/useRundown';
-import useSettings from '../../common/hooks-query/useSettings';
 import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
 import { getDefaultFormat } from '../../common/utils/time';
+import Loader from '../../views/common/loader/Loader';
 
 import EditModal from './edit-modal/EditModal';
 import FollowButton from './follow-button/FollowButton';
@@ -21,22 +18,32 @@ import OperatorGroup from './operator-group/OperatorGroup';
 import StatusBar from './status-bar/StatusBar';
 import { getOperatorOptions, useOperatorOptions } from './operator.options';
 import type { EditEvent } from './operator.types';
-import { getEventData, makeOperatorMetadata } from './operator.utils';
+import { getEventData } from './operator.utils';
+import { OperatorData, useOperatorData } from './useOperatorData';
 
 import style from './Operator.module.scss';
 
 const selectedOffset = 50;
 
-export default function Operator() {
-  const { data, status } = useRundown();
-  const { data: customFields, status: customFieldStatus } = useCustomFields();
-  const { data: projectData, status: projectDataStatus } = useProjectData();
+export default function OperatorLoader() {
+  const { data, status } = useOperatorData();
 
-  const timeoutId = useRef<NodeJS.Timeout | null>(null);
+  useWindowTitle('Operator');
 
+  if (status === 'pending') {
+    return <Loader />;
+  }
+
+  if (status === 'error') {
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
+  }
+
+  return <Operator {...data} />;
+}
+
+function Operator({ rundown, rundownMetadata, customFields, settings }: OperatorData) {
   const { selectedEventId } = useSelectedEventId();
   const { subscribe, mainSource, secondarySource, shouldEdit, hidePast, showStart } = useOperatorOptions();
-  const { data: settings } = useSettings();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
   const [editEvent, setEditEvent] = useState<EditEvent | null>(null);
@@ -52,7 +59,7 @@ export default function Operator() {
     followTrigger: selectedEventId,
   });
 
-  useWindowTitle('Operator');
+  const timeoutId = useRef<NodeJS.Timeout | null>(null);
 
   // reset scroll if nothing is selected
   useEffect(() => {
@@ -101,19 +108,11 @@ export default function Operator() {
     setEditEvent({ ...event });
   }, []);
 
-  const missingData = !data || !customFields || !projectData;
-  const isLoading = status === 'pending' || customFieldStatus === 'pending' || projectDataStatus === 'pending';
-
   // gather option data
   const defaultFormat = getDefaultFormat(settings?.timeFormat);
   const operatorOptions = useMemo(() => getOperatorOptions(customFields, defaultFormat), [customFields, defaultFormat]);
 
-  if (missingData || isLoading) {
-    return <EmptyPage text='Loading...' />;
-  }
-
   const canEdit = shouldEdit && subscribe.length;
-  const { process } = makeOperatorMetadata(selectedEventId);
 
   return (
     <div className={style.operatorContainer} data-testid='operator-view'>
@@ -127,11 +126,10 @@ export default function Operator() {
       )}
 
       <div className={style.operatorEvents} onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-        {data.order.map((entryId) => {
-          const entry = data.entries[entryId];
+        {rundown.order.map((entryId) => {
+          const entry = rundown.entries[entryId];
           if (isOntimeEvent(entry)) {
-            const { isPast, isSelected, isLinkedToLoaded, totalGap } = process(entry);
-
+            const { isPast, isLinkedToLoaded, isLoaded, totalGap } = rundownMetadata[entryId];
             // hide past events (if setting) and skipped events
             if ((hidePast && isPast) || entry.skip) {
               return null;
@@ -158,9 +156,9 @@ export default function Operator() {
                 delay={entry.delay}
                 dayOffset={entry.dayOffset}
                 isLinkedToLoaded={isLinkedToLoaded}
-                isSelected={isSelected}
+                isSelected={isLoaded}
                 isPast={isPast}
-                selectedRef={isSelected ? selectedRef : undefined}
+                selectedRef={isLoaded ? selectedRef : undefined}
                 showStart={showStart}
                 subscribed={subscribedData}
                 totalGap={totalGap}
@@ -174,12 +172,12 @@ export default function Operator() {
               <Fragment key={entry.id}>
                 <OperatorGroup key={entry.id} title={entry.title} />
                 {entry.entries.map((nestedEntryId) => {
-                  const nestedEntry = data.entries[nestedEntryId];
+                  const nestedEntry = rundown.entries[nestedEntryId];
                   if (!isOntimeEvent(nestedEntry)) {
                     return null;
                   }
 
-                  const { isPast, isSelected, isLinkedToLoaded, totalGap } = process(nestedEntry);
+                  const { isPast, isLoaded, isLinkedToLoaded, totalGap } = rundownMetadata[nestedEntryId];
 
                   // hide past events (if setting) and skipped events
                   if ((hidePast && isPast) || nestedEntry.skip) {
@@ -207,9 +205,9 @@ export default function Operator() {
                       delay={nestedEntry.delay}
                       dayOffset={nestedEntry.dayOffset}
                       isLinkedToLoaded={isLinkedToLoaded}
-                      isSelected={isSelected}
+                      isSelected={isLoaded}
                       isPast={isPast}
-                      selectedRef={isSelected ? selectedRef : undefined}
+                      selectedRef={isLoaded ? selectedRef : undefined}
                       showStart={showStart}
                       subscribed={subscribedData}
                       totalGap={totalGap}

apps/client/src/features/operator/OperatorExport.tsx

@@ -1,13 +1,10 @@
-import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
-import { getIsNavigationLocked } from '../../externals';
 
 import Operator from './Operator';
 
 export default function OperatorExport() {
   return (
     <ProtectRoute permission='operator'>
-      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
       <Operator />
     </ProtectRoute>
   );

apps/client/src/features/operator/__tests__/operator.utils.test.ts

@@ -1,83 +0,0 @@
-import { OntimeEvent } from 'ontime-types';
-
-import { makeOperatorMetadata } from '../operator.utils';
-
-describe('makeOperatorMetadata()', () => {
-  it('should track past, selected states, gaps and linking', () => {
-    const event1 = { id: 'event1', gap: 5, linkStart: false } as OntimeEvent;
-    const event2 = { id: 'event2', gap: 10, linkStart: true } as OntimeEvent;
-    const event3 = { id: 'event3', gap: 15, linkStart: true } as OntimeEvent;
-    const { process } = makeOperatorMetadata('event2');
-
-    expect(process(event1)).toEqual({
-      isPast: true,
-      isSelected: false,
-      totalGap: 5,
-      isLinkedToLoaded: false,
-    });
-    expect(process(event2)).toEqual({
-      isPast: false,
-      isSelected: true,
-      totalGap: 15,
-      isLinkedToLoaded: false,
-    });
-    expect(process(event3)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 30,
-      isLinkedToLoaded: true,
-    });
-  });
-
-  it('should handle null selectedId', () => {
-    const event1 = { id: 'event1', gap: 5, linkStart: true } as OntimeEvent;
-    const event2 = { id: 'event2', gap: 10, linkStart: false } as OntimeEvent;
-    const event3 = { id: 'event3', gap: 15, linkStart: true } as OntimeEvent;
-    const { process } = makeOperatorMetadata(null);
-
-    expect(process(event1)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 5,
-      isLinkedToLoaded: true,
-    });
-    expect(process(event2)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 15,
-      isLinkedToLoaded: false,
-    });
-    expect(process(event3)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 30,
-      isLinkedToLoaded: true,
-    });
-  });
-
-  it('should break linking chain on countToEnd events', () => {
-    const event1 = { id: 'event1', gap: 5, linkStart: true, countToEnd: false } as OntimeEvent;
-    const event2 = { id: 'event2', gap: 10, linkStart: true, countToEnd: true } as OntimeEvent;
-    const event3 = { id: 'event3', gap: 15, linkStart: true, countToEnd: false } as OntimeEvent;
-    const { process } = makeOperatorMetadata(null);
-
-    expect(process(event1)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 5,
-      isLinkedToLoaded: true,
-    });
-    expect(process(event2)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 15,
-      isLinkedToLoaded: true,
-    });
-    expect(process(event3)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 30,
-      isLinkedToLoaded: false,
-    });
-  });
-});

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -71,7 +71,7 @@ function OperatorEvent({
   ]);
 
   return (
-    <div className={operatorClasses} ref={selectedRef} onContextMenu={handleLongPress} {...mouseHandlers}>
+    <div className={operatorClasses} data-testid={cue} ref={selectedRef} onContextMenu={handleLongPress} {...mouseHandlers}>
       <div className={style.binder} style={{ ...cueColours }}>
         <span className={style.cue}>{cue}</span>
       </div>
@@ -167,5 +167,5 @@ function TimeUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
   const isDue = timeUntil < MILLIS_PER_SECOND;
   const timeUntilString = isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`;
 
-  return <span className={style.timeUntil}>{timeUntilString}</span>;
+  return <span className={style.timeUntil} data-testid='time-until'>{timeUntilString}</span>;
 }

apps/client/src/features/operator/operator.options.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
+import { use, useMemo } from 'react';
 import { useSearchParams } from 'react-router';
-import { CustomFields, OntimeEvent } from 'ontime-types';
+import { CustomFields, EntryId, OntimeEvent } from 'ontime-types';
 
 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
 import { OptionTitle } from '../../common/components/view-params-editor/constants';
@@ -9,6 +9,7 @@ import {
   makeCustomFieldSelectOptions,
   makeOptionsFromCustomFields,
 } from '../../common/components/view-params-editor/viewParams.utils';
+import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean } from '../viewers/common/viewUtils';
 
 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
@@ -93,15 +94,26 @@ type OperatorOptions = {
  * Utility extract the view options from URL Params
  * the names and fallback are manually matched with timerOptions
  */
-function getOptionsFromParams(searchParams: URLSearchParams): OperatorOptions {
+function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URLSearchParams): OperatorOptions {
+  // Helper to get value from either source, prioritizing defaultValues
+  const getValue = (key: string) => defaultValues?.get(key) ?? searchParams.get(key);
+
+  // Helper to get array values from either source
+  const getArrayValues = (key: string): EntryId[] => {
+    if (defaultValues?.has(key)) {
+      return defaultValues.getAll(key) as EntryId[];
+    }
+    return searchParams.getAll(key) as EntryId[];
+  };
+
   // we manually make an object that matches the key above
   return {
-    mainSource: searchParams.get('main') as keyof OntimeEvent | null,
-    secondarySource: searchParams.get('secondary-src') as keyof OntimeEvent | null,
-    subscribe: searchParams.getAll('subscribe'),
-    shouldEdit: isStringBoolean(searchParams.get('shouldEdit')),
-    hidePast: isStringBoolean(searchParams.get('hidePast')),
-    showStart: isStringBoolean(searchParams.get('showStart')),
+    mainSource: getValue('main') as keyof OntimeEvent | null,
+    secondarySource: getValue('secondary-src') as keyof OntimeEvent | null,
+    subscribe: getArrayValues('subscribe'),
+    shouldEdit: isStringBoolean(getValue('shouldEdit')),
+    hidePast: isStringBoolean(getValue('hidePast')),
+    showStart: isStringBoolean(getValue('showStart')),
   };
 }
 
@@ -110,6 +122,12 @@ function getOptionsFromParams(searchParams: URLSearchParams): OperatorOptions {
  */
 export function useOperatorOptions(): OperatorOptions {
   const [searchParams] = useSearchParams();
-  const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
+  const maybePreset = use(PresetContext);
+
+  const options = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
   return options;
 }

apps/client/src/features/operator/operator.utils.ts

@@ -1,74 +1,33 @@
-import { CustomFields, EntryId, MaybeString, OntimeEvent } from 'ontime-types';
-
-import { getPropertyValue } from '../viewers/common/viewUtils';
-
-import type { Subscribed } from './operator.types';
-
-type OperatorMetadata = {
-  isLinkedToLoaded: boolean;
-  isPast: boolean;
-  isSelected: boolean;
-  totalGap: number;
-};
-
-export function makeOperatorMetadata(selectedId: EntryId | null) {
-  const hasSelection = Boolean(selectedId);
-  let hasSeenSelected = false;
-  let totalGap = 0;
-  /** if the event can link all the way back to the currently playing event */
-  let isLinkedToLoaded = false;
-  let previousEvent: OntimeEvent | null = null;
-
-  function process(event: OntimeEvent): Readonly<OperatorMetadata> {
-    const isSelected = event.id === selectedId;
-    if (isSelected) {
-      hasSeenSelected = true;
-    }
-
-    // is past if we havent yet seen the selected event
-    const isPast = hasSelection && !hasSeenSelected;
-    totalGap += event.gap;
-
-    if (!isPast && !isSelected) {
-      /**
-       * isLinkToLoaded is a chain value that we maintain until we
-       * a) find an unlinked event
-       * b) find a countToEnd event
-       */
-      isLinkedToLoaded = event.linkStart && !previousEvent?.countToEnd;
-    }
-
-    previousEvent = event;
-    return { isPast, isSelected, totalGap, isLinkedToLoaded };
-  }
-
-  return { process };
-}
-
-export function getEventData(
-  event: OntimeEvent,
-  main: MaybeString,
-  secondary: MaybeString,
-  subscriptions: string[],
-  customFields: CustomFields,
-) {
-  const mainField = main ? getPropertyValue(event, main) ?? '' : event.title;
-  const secondaryField = getPropertyValue(event, secondary) ?? '';
-
-  // remove subscriptions that are not in customFields
-  const sanitisedSubscriptions = subscriptions.filter((field) => Object.hasOwn(customFields, field));
-  const subscribedData = sanitisedSubscriptions.reduce<Subscribed>((acc, id) => {
-    const field = customFields[id];
-    if (field) {
-      acc.push({
-        id,
-        label: field.label,
-        colour: field.colour,
-        value: event.custom[id],
-      });
-    }
-    return acc;
-  }, []);
-
-  return { mainField, secondaryField, subscribedData };
-}
+import { CustomFields, MaybeString, OntimeEvent } from 'ontime-types';
+
+import { getPropertyValue } from '../viewers/common/viewUtils';
+
+import type { Subscribed } from './operator.types';
+
+export function getEventData(
+  event: OntimeEvent,
+  main: MaybeString,
+  secondary: MaybeString,
+  subscriptions: string[],
+  customFields: CustomFields,
+) {
+  const mainField = main ? getPropertyValue(event, main) ?? '' : event.title;
+  const secondaryField = getPropertyValue(event, secondary) ?? '';
+
+  // remove subscriptions that are not in customFields
+  const sanitisedSubscriptions = subscriptions.filter((field) => Object.hasOwn(customFields, field));
+  const subscribedData = sanitisedSubscriptions.reduce<Subscribed>((acc, id) => {
+    const field = customFields[id];
+    if (field) {
+      acc.push({
+        id,
+        label: field.label,
+        colour: field.colour,
+        value: event.custom[id],
+      });
+    }
+    return acc;
+  }, []);
+
+  return { mainField, secondaryField, subscribedData };
+}

apps/client/src/features/operator/useOperatorData.ts

@@ -0,0 +1,30 @@
+import { CustomFields, Rundown, Settings } from 'ontime-types';
+
+import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
+import useSettings from '../../common/hooks-query/useSettings';
+import { RundownMetadataObject } from '../../common/utils/rundownMetadata';
+import { aggregateQueryStatus, ViewData } from '../../views/utils/viewLoader.utils';
+
+export interface OperatorData {
+  rundown: Rundown;
+  rundownMetadata: RundownMetadataObject;
+  customFields: CustomFields;
+  settings: Settings;
+}
+
+export function useOperatorData(): ViewData<OperatorData> {
+  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
+  const { data: customFields, status: customFieldStatus } = useCustomFields();
+  const { data: settings, status: settingsStatus } = useSettings();
+
+  return {
+    data: {
+      rundown,
+      rundownMetadata,
+      customFields,
+      settings,
+    },
+    status: aggregateQueryStatus([rundownStatus, customFieldStatus, settingsStatus]),
+  };
+}

apps/client/src/features/overview/composite/TimeElements.tsx

@@ -20,7 +20,7 @@ import {
   useNextFlag,
   useOffsetOverview,
   useProgressOverview,
-  useRundownOverview,
+  useStartTimesOverview,
   useTimer,
 } from '../../../common/hooks/useSocket';
 import { useEntry } from '../../../common/hooks-query/useRundown';
@@ -34,7 +34,7 @@ import { OverUnder, TimeColumn } from './TimeLayout';
 import style from './TimeElements.module.scss';
 
 export function StartTimes() {
-  const { plannedEnd, plannedStart, actualStart, expectedEnd } = useRundownOverview();
+  const { plannedEnd, plannedStart, actualStart, expectedEnd } = useStartTimesOverview();
 
   const plannedStartText = plannedStart === null ? timerPlaceholder : formatTime(plannedStart);
 
@@ -50,7 +50,7 @@ export function StartTimes() {
           <Tooltip text='Planned start time' render={<TbCalendarPin className={style.icon} />} />
           <span className={cx([style.time, plannedStart === null && style.muted])}>{plannedStartText}</span>
         </div>
-        <div className={style.labelledElement}>
+        <div className={style.labelledElement} data-testid='actual-start-time'>
           <Tooltip text='Actual start time' render={<TbCalendarClock className={style.icon} />} />
           <span className={cx([style.time, actualStart === null && style.muted])}>{formattedTime(actualStart)}</span>
         </div>

apps/client/src/features/rundown/RundownExport.tsx

@@ -8,6 +8,7 @@ import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
+import { getIsNavigationLocked } from '../../externals';
 import { AppMode, sessionKeys } from '../../ontimeConfig';
 
 import RundownEntryEditor from './entry-editor/RundownEntryEditor';
@@ -55,7 +56,7 @@ function RundownExport() {
     <ProtectRoute permission='editor'>
       <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
         <FinderPlacement />
-        {isExtracted && <ViewNavigationMenu suppressSettings />}
+        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
         <div className={style.rundown}>
           <div className={style.list}>
             <ErrorBoundary>

apps/client/src/features/rundown/entry-editor/quick-add-cursor/QuickAddInline.module.scss

@@ -2,16 +2,21 @@
   display: flex;
   align-items: center;
   gap: 1rem;
+  height: 0;
   position: relative;
-
-  height: 1px;
-  background: $blue-500;
   z-index: $zindex-floating;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: $blue-500;
+  }
 }
 
 .addButton {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translateY(-50%);
+  position: relative;
 }

apps/client/src/features/rundown/rundown-delay/RundownDelay.tsx

@@ -37,7 +37,6 @@ export default function RundownDelay({ data, hasCursor }: RundownDelayProps) {
 
   const dragStyle = {
     zIndex: isDragging ? 2 : 'inherit',
-    cursor: isDragging ? 'grabbing' : 'grab',
     transform: CSS.Translate.toString(transform),
     transition,
   };

apps/client/src/features/rundown/rundown-event/RundownEvent.tsx

@@ -205,7 +205,6 @@ export default function RundownEvent({
 
   const dragStyle = {
     zIndex: isDragging ? 2 : 'inherit',
-    cursor: isDragging ? 'grabbing' : 'grab',
     transform: CSS.Translate.toString(transform),
     transition,
   };

apps/client/src/features/rundown/rundown-group/RundownGroup.tsx

@@ -114,7 +114,7 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
     zIndex: isDragging ? 2 : 'inherit',
     transform: CSS.Translate.toString(transform),
     transition,
-    cursor: isOver ? (isValidDrop ? 'grabbing' : 'no-drop') : 'grab',
+    cursor: isOver ? (isValidDrop ? 'grabbing' : 'no-drop') : 'inherit',
   };
 
   return (

apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx

@@ -70,7 +70,6 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
 
   const dragStyle = {
     zIndex: isDragging ? 2 : 'inherit',
-    cursor: isDragging ? 'grabbing' : 'grab',
     transform: CSS.Translate.toString(transform),
     transition,
   };

apps/client/src/features/sharing/GenerateLinkForm.tsx

@@ -15,7 +15,6 @@ import Switch from '../../common/components/switch/Switch';
 import { useUpdateUrlPreset } from '../../common/hooks-query/useUrlPresets';
 import copyToClipboard from '../../common/utils/copyToClipboard';
 import { preventEscape } from '../../common/utils/keyEvent';
-import { linkToOtherHost } from '../../common/utils/linkUtils';
 import { isUrlSafe } from '../../common/utils/regex';
 import { isOntimeCloud, serverURL } from '../../externals';
 import * as Panel from '../app-settings/panel-utils/PanelUtils';
@@ -136,7 +135,7 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
         }
 
         const url = await generateUrl({
-          baseUrl: linkToOtherHost(options.baseUrl),
+          baseUrl: options.baseUrl,
           path,
           authenticate: options.authenticate,
           lockConfig: options.lockConfig,
@@ -225,6 +224,7 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
               <Switch
                 size='large'
                 name='lockNav'
+                data-testid='lockNav'
                 checked={watch('lockNav')}
                 onCheckedChange={(checked) => setValue('lockNav', checked, { shouldDirty: true })}
                 disabled={watch('lockConfig')}
@@ -239,6 +239,7 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
                 <Switch
                   size='large'
                   name='lockConfig'
+                  data-testid='lockConfig'
                   checked={watch('lockConfig')}
                   onCheckedChange={(checked) => {
                     if (checked) {
@@ -254,6 +255,7 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
               <Switch
                 size='large'
                 name='authenticate'
+                data-testid='authenticate'
                 checked={watch('authenticate')}
                 onCheckedChange={(checked) => setValue('authenticate', checked, { shouldDirty: true })}
               />

apps/client/src/features/sharing/GenerateLinkFormExport.tsx

@@ -14,12 +14,18 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
   const { data: infoData } = useInfo();
   const { data: urlPresetData } = useUrlPresets({ skip: lockedPath === undefined });
 
+  /**
+   * hostOptions are only used for local networks
+   * the NIF address is a local IP address: 192.168.x.x or 10.x.x.x
+   * We need to inject the port and protocol to create a valid URL
+   * eg: http://192.168.x.x:port
+   */
   const hostOptions = useMemo(() => {
     return infoData.networkInterfaces.map((nif) => ({
-      value: nif.address,
+      value: `http://${nif.address}:${infoData.serverPort}`,
       label: `${nif.name} - ${nif.address}`,
     }));
-  }, [infoData.networkInterfaces]);
+  }, [infoData.networkInterfaces, infoData.serverPort]);
 
   const pathOptions = useMemo(() => {
     if (lockedPath) {

apps/client/src/index.scss

@@ -63,7 +63,6 @@ body,
 html {
   font-size: 15px;
   font-family: $ontime-font-family;
-  background-color: var(--background-color-override, $ui-black);
   -webkit-font-smoothing: antialiased;
   line-height: 1.5;
 }

apps/client/src/sentry.config.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from 'react-router';
-import { Routes } from 'react-router';
+import { createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType } from 'react-router';
 import * as Sentry from '@sentry/react';
 
 import { ONTIME_VERSION } from './ONTIME_VERSION';

apps/client/src/theme/_viewerDefs.scss

@@ -42,4 +42,4 @@ $timer-bold-font-family: 'Arial Black', sans-serif; // --font-family-bold-overri
 $external-color: rgba(white, 85%); // --external-color-override
 
 // properties related to the studio clock
-$studio-breakpoint: 1200px;
+$studio-breakpoint: 1300px;

apps/client/src/views/backstage/backstage.options.ts

@@ -17,7 +17,7 @@ export const getBackstageOptions = (
   customFields: CustomFields,
   projectData: ProjectData,
 ): ViewOption[] => {
-  const customFieldOptions = makeOptionsFromCustomFields(customFields, []);
+  const customFieldOptions = makeOptionsFromCustomFields(customFields, [{ value: 'none', label: 'None' }]);
   const secondaryOptions = makeOptionsFromCustomFields(customFields, [
     { value: 'none', label: 'None' },
     { value: 'note', label: 'Note' },

apps/client/src/views/common/not-found/NotFound.module.scss

@@ -2,10 +2,16 @@
 
 .notFound {
   display: grid;
-  place-items: center;
+  height: 100vh;
+  padding-top: 20vh;
   background-color: var(--background-color-override, $viewer-background-color);
-  margin-top: 10vh;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+
   color: $ui-white;
-  justify-content: center;
+  align-items: center;
   text-align: center;
 }

apps/client/src/views/common/not-found/NotFound.tsx

@@ -5,15 +5,17 @@ import style from './NotFound.module.scss';
 export default function NotFound() {
   return (
     <div className={style.notFound}>
-      <EmptyImage />
-      <h1>Not found</h1>
-      <div>
-        The page you are after was not found.
-        <br />
-        It may have moved or your URL may be incorrect.
-        <br />
-        Double check the URL and try again.
-      </div>
+      <section className={style.content}>
+        <EmptyImage />
+        <h1>Not found</h1>
+        <div>
+          The page you are after was not found.
+          <br />
+          It may have moved or your URL may be incorrect.
+          <br />
+          Double check the URL and try again.
+        </div>
+      </section>
     </div>
   );
 }

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

@@ -1,6 +1,5 @@
 import { cx } from '../../../common/utils/styleUtils';
 
-import { getScheduledTimes } from './schedule.utils';
 import { useSchedule } from './ScheduleContext';
 import ScheduleItem from './ScheduleItem';
 
@@ -20,17 +19,21 @@ export default function Schedule({ className }: ScheduleProps) {
   return (
     <ul className={cx(['schedule', className])} ref={containerRef}>
       {events.map((event) => {
-        const { timeStart, timeEnd, delay } = getScheduledTimes(event);
-
         return (
           <ScheduleItem
             key={event.id}
-            timeStart={timeStart}
-            timeEnd={timeEnd}
-            title={event.title}
+            timeStart={event.timeStart}
+            dayOffset={event.dayOffset}
+            delay={event.delay}
+            totalGap={event.totalGap}
+            isLinkedToLoaded={event.isLinkedToLoaded}
+            countToEnd={event.countToEnd}
+            duration={event.duration}
             colour={event.colour}
             skip={event.skip}
-            delay={delay}
+            title={event.title}
+            timeEnd={event.timeEnd}
+            cue={event.cue}
           />
         );
       })}

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

@@ -2,11 +2,12 @@ import { createContext, PropsWithChildren, RefObject, use, useEffect, useLayoutE
 import { EntryId, isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';
 
 import { usePartialRundown } from '../../../common/hooks-query/useRundown';
+import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 
 import { useScheduleOptions } from './schedule.options';
 
 interface ScheduleContextState {
-  events: OntimeEvent[];
+  events: ExtendedEntry<OntimeEvent>[];
   selectedEventId: string | null;
   numPages: number;
   visiblePage: number;
@@ -21,7 +22,7 @@ interface ScheduleProviderProps {
 
 export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildren<ScheduleProviderProps>) => {
   const { cycleInterval, stopCycle, filter } = useScheduleOptions();
-  const { data: events } = usePartialRundown((entry: OntimeEntry) => {
+  const { data: events } = usePartialRundown((entry: ExtendedEntry<OntimeEntry>) => {
     if (filter) {
       // custom keys are prepended with custom-
       const customKey = filter.startsWith('custom-') ? filter.slice('custom-'.length) : filter;
@@ -133,7 +134,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
   return (
     <ScheduleContext
       value={{
-        events: viewEvents as OntimeEvent[],
+        events: viewEvents as ExtendedEntry<OntimeEvent>[],
         selectedEventId,
         numPages,
         visiblePage,