bump version to 3.4.0

bump version to 3.4.0-beta.3

.github/workflows/build.yml

@@ -14,12 +14,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.18.2
+          node-version: 20
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -56,12 +56,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.18.2
+          node-version: 20
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -89,12 +89,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.18.2
+          node-version: 20
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/build_cli.yml

@@ -0,0 +1,53 @@
+name: Ontime CLI build
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  build_cli:
+    permissions:
+      id-token: write
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - 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
+      
+      - 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

@@ -1,8 +1,8 @@
 name: Docker Image CI Ontime
 
 on:
-  push:
-    tags: [ "*" ]
+  release:
+    types: [published]
   workflow_dispatch:
 
 jobs:
@@ -14,8 +14,6 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
-    - name: Setup env
-      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
 
     - name: Docker Login
       uses: docker/login-action@v2.1.0
@@ -32,10 +30,10 @@ jobs:
       with:
         context: .
         file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+        platforms: linux/amd64,linux/arm64,linux/arm/v7
         # Push is a shorthand for --output=type=registry
         push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
+        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
@@ -43,8 +41,8 @@ jobs:
       with:
         context: .
         file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+        platforms: linux/amd64,linux/arm64,linux/arm/v7
         # Push is a shorthand for --output=type=registry
         push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly
 

.github/workflows/test.yml

@@ -17,12 +17,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.18.2
+          node-version: 20
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -73,12 +73,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.18.2
+          node-version: 20
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.nvmrc

@@ -1 +1 @@
-v18.18.2
+v20.15.1

DEVELOPMENT.md

@@ -9,8 +9,8 @@ Ontime consists of 3 distinct parts
 The steps below will assume you have locally installed the necessary dependencies.
 Other dependencies will be installed as part of the setup
 
-- __node__ (~18.18.2)
-- __pnpm__ (>=8)
+- __node__ (~20)
+- __pnpm__ (~9)
 - __docker__ (only necessary to run and build docker images)
 
 ## LOCAL DEVELOPMENT
@@ -81,6 +81,9 @@ From the project root, run the following commands
 
 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 `turbo dist-mac:local` command to build a MacOS distribution locally.
+
 ## DOCKER
 
 Ontime provides a docker-compose file to aid with building and running docker images.

Dockerfile

@@ -1,19 +1,19 @@
-FROM node:18.18-alpine AS builder
+FROM node:20-bullseye AS builder
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
+RUN npm install -g pnpm@9.5.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:18.18-alpine
+FROM node:20-alpine
 
 # Set environment variables
 # Environment Variable to signal that we are running production
 ENV NODE_ENV=docker
 # Ontime Data path
-ENV ONTIME_DATA=/external/
+ENV ONTIME_DATA=/data/
 
 WORKDIR /app/
 

README.md

@@ -1,6 +1,7 @@
 [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0)
 ![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/cpvalente/ontime/total)
 ![Docker Pulls](https://img.shields.io/docker/pulls/getontime/ontime)
+![NPM Downloads](https://img.shields.io/npm/dy/%40getontime%2Fcli)
 [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
 [![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)
 

apps/cli/.eslintrc

@@ -0,0 +1,16 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "plugins": [],
+  "rules": {
+    "@typescript-eslint/no-var-requires": "off"
+  }
+}

apps/cli/.gitignore

@@ -0,0 +1,3 @@
+server
+external
+client

apps/cli/.prettierrc

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

apps/cli/README.md

@@ -0,0 +1,44 @@
+# Ontime CLI
+
+![Ontime](https://github.com/cpvalente/ontime/blob/9e63261b350e5b7b61c7ffb17c9e75a6c5a8c711/.github/aux-images/editor.png)
+> Ontime is an application for managing rundown and event timers.
+
+Congratulations! You got this far into Ontime's rabbit hole and want to manage your installation.
+
+The CLI tool is a fast and lightweight way of installing Ontime and is perfect for self-hosting and headless installs.
+
+## Getting started
+
+### Prerequisites
+You will need to have installed the correct version of node.js
+Please check [the app engines declaration](https://github.com/cpvalente/ontime/blob/master/package.json) for the correct version.
+
+### Running Ontime
+To get Ontime running, all you need to do is install it in your system using your package manager of choice:
+
+Install globally in your system 
+```bash
+npm install -g @getontime/cli
+```
+
+... and run using the installed script
+```bash
+ontime
+```
+
+Or install and run ontime (the installation here is temporary for the duration of the session)
+```bash
+npx install @getontime/cli
+```
+
+## Links
+- [Ontime's repository](https://github.com/cpvalente/ontime)
+- [Ontime's documentation](https://docs.getontime.no/)
+- [Ontime's website](https://getontime.no/)
+
+## Sponsoring
+You can help the development of this project or say thank you with a one time donation. \
+See the [terms of donations](https://github.com/cpvalente/ontime/blob/master/SPONSOR.md)
+
+[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
+[![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)

apps/cli/main.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+// NOTE: for now the following needs to be in place: ./server/index.cjs, ./client, ./external
+
+const ontimeServer = require('./server/index.cjs');
+const { initAssets, startServer, startIntegrations, shutdown } = ontimeServer;
+
+async function startOntime() {
+  await initAssets();
+
+  await startServer();
+
+  await startIntegrations();
+}
+
+startOntime();
+
+process.on(['SIGHUP', 'SIGINT', 'SIGTERM'], () => {
+  shutdown();
+});

apps/cli/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@getontime/cli",
+    "version": "3.4.0",
+    "author": "Carlos Valente",
+    "description": "Time keeping for live events",
+    "repository": "https://github.com/cpvalente/ontime",
+    "keywords": [
+        "lighdev",
+        "ontime",
+        "timer"
+    ],
+    "license": "AGPL-3.0-only",
+    "main": "main.js",
+    "bin": {
+        "ontime": "main.js"
+    },
+    "files": [
+        "client",
+        "external",
+        "server"
+    ],
+    "devDependencies": {
+        "eslint": "^8.53.0",
+        "eslint-config-prettier": "^9.0.0",
+        "prettier": "^3.0.3"
+    }
+}

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "3.1.1",
+  "version": "3.4.0",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -70,13 +70,13 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^v7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -84,9 +84,9 @@
     "jsdom": "^21.1.0",
     "ontime-types": "workspace:*",
     "ontime-utils": "workspace:*",
-    "prettier": "^3.0.3",
+    "prettier": "^3.3.1",
     "sass": "^1.57.1",
-    "typescript": "^5.4.3",
+    "typescript": "^5.5.3",
     "vite": "^5.2.11",
     "vite-plugin-compression2": "^0.12.0",
     "vite-plugin-svgr": "^4.2.0",

apps/client/src/App.tsx

@@ -4,16 +4,15 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
+import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverlay';
 import { AppContextProvider } from './common/context/AppContext';
 import { ontimeQueryClient } from './common/queryClient';
-import { socketClientName } from './common/stores/connectionName';
 import { connectSocket } from './common/utils/socket';
 import theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
 
-const preferredClientName = socketClientName.getState().name;
-connectSocket(preferredClientName);
+connectSocket();
 
 function App() {
   return (
@@ -24,11 +23,15 @@ function App() {
             <div className='App'>
               <ErrorBoundary>
                 <TranslationProvider>
+                  <IdentifyOverlay />
                   <AppRouter />
                 </TranslationProvider>
               </ErrorBoundary>
               <ReactQueryDevtools initialIsOpen={false} />
             </div>
+            <ErrorBoundary>
+              <div id='identify-portal' />
+            </ErrorBoundary>
           </BrowserRouter>
         </AppContextProvider>
       </QueryClientProvider>

apps/client/src/AppRouter.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { useClientPath } from './common/hooks/useClientPath';
 import Log from './features/log/Log';
 import withPreset from './features/PresetWrapper';
 import withData from './features/viewers/ViewWrapper';
@@ -34,6 +35,9 @@ const TimerControl = lazy(() => import('./features/control/playback/TimerControl
 const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
 
 export default function AppRouter() {
+  // handle client path changes
+  useClientPath();
+
   return (
     <Suspense fallback={null}>
       <Routes>

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

@@ -11,6 +11,7 @@ export const RUNTIME = ['runtimeStore'];
 export const SHEET_STATE = ['sheetState'];
 export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
+export const CLIENT_LIST = ['clientList'];
 
 // resolve location
 const location = window.location;

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

@@ -11,8 +11,8 @@ const dbPath = `${apiEntryUrl}/db`;
 /**
  * HTTP request to the current DB
  */
-async function getDb(fileName?: string): Promise<AxiosResponse<DatabaseModel>> {
-  return axios.post(`${dbPath}/download/`, { fileName });
+async function getDb(filename: string): Promise<AxiosResponse<DatabaseModel>> {
+  return axios.post(`${dbPath}/download/`, { filename });
 }
 
 /**

apps/client/src/common/components/client-modal/ClientModal.module.scss

@@ -0,0 +1,6 @@
+.buttonSection {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $element-spacing;
+  margin-top: -$element-spacing;
+}

apps/client/src/common/components/client-modal/RedirectClientModal.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import {
+  Button,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+import { setClientRemote } from '../../hooks/useSocket';
+
+import style from './ClientModal.module.scss';
+
+interface RedirectClientModalProps {
+  id: string;
+  name?: string;
+  path?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function RedirectClientModal(props: RedirectClientModalProps) {
+  const { id, isOpen, name = '', path: currentPath = '', onClose } = props;
+  const [path, setPath] = useState(currentPath);
+
+  const { setRedirect } = setClientRemote;
+
+  const handleRedirect = () => {
+    if (path !== currentPath && path !== '') {
+      setRedirect({ target: id, redirect: path });
+    }
+    onClose();
+  };
+
+  const host = `${window.location.origin}/`;
+  const canSubmit = path !== currentPath && path !== '';
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Redirect: {name}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <InputGroup variant='ontime-filled' size='md'>
+            <InputLeftAddon>{host}</InputLeftAddon>
+            <Input placeholder='minimal?key=0000ffff' value={path} onChange={(event) => setPath(event.target.value)} />
+          </InputGroup>
+        </ModalBody>
+        <ModalFooter>
+          <div className={style.buttonSection}>
+            <Button size='md' variant='ontime-subtle' onClick={onClose}>
+              Cancel
+            </Button>
+            <Button size='md' variant='ontime-filled' onClick={handleRedirect} isDisabled={!canSubmit}>
+              Submit
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

apps/client/src/common/components/client-modal/RenameClientModal.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+import { setClientRemote } from '../../hooks/useSocket';
+
+import style from './ClientModal.module.scss';
+
+interface RenameClientModalProps {
+  id: string;
+  name?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function RenameClientModal(props: RenameClientModalProps) {
+  const { id, name: currentName = '', isOpen, onClose } = props;
+  const [name, setName] = useState(currentName);
+
+  const { setClientName } = setClientRemote;
+
+  const handleRename = () => {
+    if (name !== currentName && name !== '') {
+      setClientName({ target: id, rename: name });
+    }
+    onClose();
+  };
+
+  const canSubmit = name !== currentName && name !== '';
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Rename: {currentName}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Input
+            variant='ontime-filled'
+            size='md'
+            placeholder='new name'
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <div className={style.buttonSection}>
+            <Button size='md' variant='ontime-subtle' onClick={onClose}>
+              Cancel
+            </Button>
+            <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
+              Submit
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss

@@ -0,0 +1,34 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
+  box-sizing: border-box;
+
+  border: 10px solid $ui-white;
+  background-color: $ui-black;
+
+  color: $ui-white;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  z-index: 100;
+  cursor: pointer;
+}
+
+.name {
+  font-weight: 600;
+  margin-top: -10vh;
+  line-height: 1em;
+  font-size: 12vw;
+  text-transform: uppercase;
+}
+
+.message {
+  color: $label-gray;
+  line-height: 2em;
+  font-size: 3vw;
+}

apps/client/src/common/components/identify-overlay/IdentifyOverlay.tsx

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
+
+import { setClientRemote } from '../../hooks/useSocket';
+import { useClientStore } from '../../stores/clientStore';
+
+import style from './IdentifyOverlay.module.scss';
+
+export default function IdentifyOverlay() {
+  const clients = useClientStore((store) => store.clients);
+  const id = useClientStore((store) => store.id);
+  const showOverlay = clients[id]?.identify;
+
+  if (!showOverlay) {
+    return null;
+  }
+
+  const portalRoot = document.getElementById('identify-portal');
+
+  if (!portalRoot) {
+    return null;
+  }
+  return createPortal(<Overlay />, portalRoot);
+}
+
+function Overlay() {
+  const clients = useClientStore((store) => store.clients);
+  const id = useClientStore((store) => store.id);
+  const name = useClientStore((store) => store.name);
+
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const { setIdentify } = setClientRemote;
+  const showOverlay = clients[id]?.identify;
+
+  const handleClose = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    setIdentify({ target: id, identify: false });
+  }, [id, setIdentify]);
+
+  // start a timer that will close the overlay after some time
+  useEffect(() => {
+    if (showOverlay) {
+      timerRef.current = setTimeout(handleClose, MILLIS_PER_MINUTE);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [showOverlay, id, setIdentify, handleClose]);
+
+    console.log('here2');
+  return (
+    <div className={style.overlay} data-testid='identify-overlay' onClick={handleClose}>
+      <div className={style.name}>{name}</div>
+      <div className={style.message}>Click to close</div>
+    </div>
+  );
+}

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

@@ -7,10 +7,6 @@ $progress-bar-br: 3px;
   position: relative;
   width: 100%;
   height: $progress-bar-size;
-  border-radius: $progress-bar-br;
-  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
-  display: flex;
-  overflow: hidden;
 
   &--hidden {
     display: none;
@@ -18,31 +14,42 @@ $progress-bar-br: 3px;
   }
 }
 
+.multiprogress-bar__bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: var(--progress-bar-br, $progress-bar-br);
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
 .multiprogress-bar__indicator {
   position: absolute;
-  height: inherit;
-  background-color: black;
+  inset: 0;
+  margin: -1px;
+  margin-left: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.multiprogress-bar__indicator-bar {
+  background-color: var(--background-color-override, $ui-black);
   opacity: 0.8;
   transition: 1s linear;
   transition-property: width;
-  right: 0;
+
+  .multiprogress-bar--ignore-css-override & {
+    background-color: $ui-black;
+  }
 }
 
 .multiprogress-bar__bg-normal {
-  position: absolute;
-  height: inherit;
-  right: 0;
-  width: 100%;
-}
-
-.multiprogress-bar__bg-warning {
-  position: absolute;
-  height: inherit;
-  right: 0;
+  flex: 1;
 }
 
 .multiprogress-bar__bg-danger {
-  position: absolute;
-  height: inherit;
-  right: 0;
-}
+  flex-shrink: 0;
+}

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

@@ -13,31 +13,51 @@ interface MultiPartProgressBar {
   danger?: MaybeNumber;
   dangerColor: string;
   hidden?: boolean;
+  ignoreCssOverride?: boolean;
   className?: string;
 }
 
 export default function MultiPartProgressBar(props: MultiPartProgressBar) {
-  const { now, complete, normalColor, warning, warningColor, danger, dangerColor, hidden, className = '' } = props;
+  const {
+    now,
+    complete,
+    normalColor,
+    warning,
+    warningColor,
+    danger,
+    dangerColor,
+    hidden,
+    ignoreCssOverride,
+    className = '',
+  } = props;
 
   const percentRemaining = complete === 0 ? 0 : 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
 
   const dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
-  const warningWidth = warning ? clamp((warning / complete) * 100, 0, 100) : 0;
+  const warningWidth = warning ? clamp((warning / complete) * 100 - dangerWidth, 0, 100) : 0;
 
   return (
-    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
+    <div
+      className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${
+        ignoreCssOverride ? 'multiprogress-bar--ignore-css-override' : ''
+      } ${className}`}
+    >
       {now !== null && (
         <>
-          <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-          <div
-            className='multiprogress-bar__bg-warning'
-            style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
-          />
-          <div
-            className='multiprogress-bar__bg-danger'
-            style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
-          />
-          <div className='multiprogress-bar__indicator' style={{ width: `${percentRemaining}%` }} />
+          <div className='multiprogress-bar__bg'>
+            <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
+            <div
+              className='multiprogress-bar__bg-warning'
+              style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
+            />
+            <div
+              className='multiprogress-bar__bg-danger'
+              style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+            />
+          </div>
+          <div className='multiprogress-bar__indicator'>
+            <div className='multiprogress-bar__indicator-bar' style={{ width: `${percentRemaining}%` }} />
+          </div>
         </>
       )}
     </div>

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

@@ -19,10 +19,10 @@ import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
 import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
+import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import { isKeyEnter } from '../../utils/keyEvent';
-
-import RenameClientModal from './rename-client-modal/RenameClientModal';
+import { RenameClientModal } from '../client-modal/RenameClientModal';
 
 import style from './NavigationMenu.module.scss';
 
@@ -34,8 +34,10 @@ interface NavigationMenuProps {
 function NavigationMenu(props: NavigationMenuProps) {
   const { isOpen, onClose } = props;
 
-  const { isOpen: isRenameOpen, onOpen: onRenameOpen, onClose: onRenameClose } = useDisclosure();
+  const id = useClientStore((store) => store.id);
+  const name = useClientStore((store) => store.name);
 
+  const { isOpen: isOpenRename, onOpen: onRenameOpen, onClose: onCloseRename } = useDisclosure();
   const { fullscreen, toggle } = useFullscreen();
   const { toggleMirror } = useViewOptionsStore();
 
@@ -45,7 +47,7 @@ function NavigationMenu(props: NavigationMenuProps) {
 
   return createPortal(
     <div id='navigation-menu-portal' ref={menuRef}>
-      <RenameClientModal isOpen={isRenameOpen} onClose={onRenameClose} />
+      <RenameClientModal id={id} name={name} isOpen={isOpenRename} onClose={onCloseRename} />
       <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
         <DrawerOverlay />
         <DrawerContent>

apps/client/src/common/components/navigation-menu/rename-client-modal/RenameClientModal.tsx

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

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

@@ -1,25 +1,37 @@
 @use '../../../theme/viewerDefs' as *;
 
 .title-card {
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
-.inline {
-  display: flex;
+.title-card__title,
+.title-card__secondary {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .title-card__title {
   font-weight: 600;
-  font-size: clamp(32px, 3.5vw, 50px);
+  font-size: clamp(1.5rem, 3vw, 3rem);
   color: var(--color-override, $viewer-color);
-  line-height: 1.1em;
+  line-height: 1.2em;
+}
+
+.title-card__secondary {
+  font-size: clamp(1rem, 2vw, 2.25rem);
+  color: var(--secondary-color-override, $viewer-secondary-color);
+  line-height: 1.2em;
 }
 
 .title-card__label {
+  position: absolute;
+  right: 1rem;
+  top: 0.5rem;
   font-size: clamp(1rem, 1.5vw, 1.5rem);
-  font-weight: 400;
   color: var(--secondary-color-override, $viewer-secondary-color);
   margin-left: auto;
   text-transform: uppercase;
@@ -28,13 +40,3 @@
     color: var(--accent-color-override, $accent-color);
   }
 }
-
-.title-card__secondary {
-  font-size: clamp(1.5rem, 2vw, 2.25rem);
-  color: var(--secondary-color-override, $viewer-secondary-color);
-  line-height: 1.1em;
-
-  &::after {
-    content: '\200b';
-  }
-}

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

@@ -1,28 +1,32 @@
+import { ForwardedRef, forwardRef } from 'react';
+
 import { useTranslation } from '../../../translation/TranslationProvider';
 
 import './TitleCard.scss';
 
 interface TitleCardProps {
-  label: 'now' | 'next';
   title: string;
+  label?: 'now' | 'next';
   secondary?: string;
+  className?: string;
 }
 
-export default function TitleCard(props: TitleCardProps) {
-  const { label, title, secondary } = props;
+const TitleCard = forwardRef((props: TitleCardProps, ref: ForwardedRef<HTMLDivElement>) => {
+  const { label, title, secondary, className = '' } = props;
   const { getLocalizedString } = useTranslation();
 
   const accent = label === 'now';
 
   return (
-    <div className='title-card'>
-      <div className='inline'>
-        <span className='title-card__title'>{title}</span>
-        <span className={accent ? 'title-card__label title-card__label--accent' : 'title-card__label'}>
-          {getLocalizedString(`common.${label}`)}
-        </span>
-      </div>
+    <div className={`title-card ${className}`} ref={ref}>
+      <span className='title-card__title'>{title}</span>
+      <span className={accent ? 'title-card__label title-card__label--accent' : 'title-card__label'}>
+        {label && getLocalizedString(`common.${label}`)}
+      </span>
       <div className='title-card__secondary'>{secondary}</div>
     </div>
   );
-}
+});
+
+TitleCard.displayName = 'TitleCard';
+export default TitleCard;

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

@@ -1,5 +1,18 @@
+import { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { Input, InputGroup, InputLeftElement, Select, Switch } from '@chakra-ui/react';
+import {
+  Button,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItemOption,
+  MenuList,
+  MenuOptionGroup,
+  Select,
+  Switch,
+} from '@chakra-ui/react';
 
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 
@@ -14,6 +27,10 @@ export default function ParamInput(props: EditFormInputProps) {
   const { paramField } = props;
   const { id, type, defaultValue } = paramField;
 
+  if (type === 'persist') {
+    return null;
+  }
+
   if (type === 'option') {
     const optionFromParams = searchParams.get(id);
     const defaultOptionValue = optionFromParams || defaultValue;
@@ -34,6 +51,10 @@ export default function ParamInput(props: EditFormInputProps) {
     );
   }
 
+  if (type === 'multi-option') {
+    return <MultiOption paramField={paramField} />;
+  }
+
   if (type === 'boolean') {
     const defaultCheckedValue = isStringBoolean(searchParams.get(id)) || defaultValue;
 
@@ -70,3 +91,47 @@ export default function ParamInput(props: EditFormInputProps) {
     </InputGroup>
   );
 }
+
+interface EditFormMultiOptionProps {
+  paramField: ParamField & { type: 'multi-option' };
+}
+
+function MultiOption(props: EditFormMultiOptionProps) {
+  const [searchParams] = useSearchParams();
+  const { paramField } = props;
+  const { id, defaultValue } = paramField;
+
+  const optionFromParams = (searchParams.get(id) ?? '').toLocaleLowerCase();
+  const defaultOptionValue = optionFromParams || defaultValue?.toLocaleLowerCase() || '';
+
+  const [paramState, setParamState] = useState<string>(defaultOptionValue);
+
+  return (
+    <>
+      <input name={id} hidden readOnly value={paramState} />
+      <Menu isLazy closeOnSelect={false} variant='ontime-on-dark'>
+        <MenuButton as={Button} variant='ontime-subtle-white' position='relative' width='fit-content' fontWeight={400}>
+          {paramField.title}
+        </MenuButton>
+        <MenuList>
+          <MenuOptionGroup
+            type='checkbox'
+            value={paramState.split('_')}
+            onChange={(value) => {
+              setParamState(typeof value === 'object' ? value.filter((v) => v !== '').join('_') : value);
+            }}
+          >
+            {Object.values(paramField.values).map((option) => {
+              const { value, label } = option;
+              return (
+                <MenuItemOption value={value} key={value}>
+                  {label}
+                </MenuItemOption>
+              );
+            })}
+          </MenuOptionGroup>
+        </MenuList>
+      </Menu>
+    </>
+  );
+}

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

@@ -13,14 +13,24 @@
   color: $label-gray;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem
+  gap: 0.25rem;
 }
 
-.columnSection {
+.section {
+  color: $ui-white;
+  font-size: 1rem;
+
+  &:not(:first-child) {
+    margin-top: 2rem;
+  }
+}
+
+.fieldSet {
   display: flex;
   padding: $section-spacing 0;
   flex-direction: column;
   gap: $element-spacing;
+  margin-left: 0.5rem;
 }
 
 .title {

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

@@ -13,7 +13,7 @@ import {
 } from '@chakra-ui/react';
 
 import ParamInput from './ParamInput';
-import { ParamField } from './types';
+import { isSection, ViewOption } from './types';
 
 import style from './ViewParamsEditor.module.scss';
 
@@ -22,25 +22,36 @@ type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
 /**
  * Makes a new URLSearchParams object from the given params object
  */
-const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
-  const defaultValues = paramFields.reduce<Record<string, string>>((acc, { id, defaultValue }) => {
-    acc[id] = String(defaultValue);
-    return acc;
-  }, {});
+const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOption[]) => {
+  const newSearchParams = new URLSearchParams();
 
-  return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
+  // Convert paramFields to an object that contains default values
+  const defaultValues: Record<string, string> = {};
+  paramFields.forEach((option) => {
+    if (!isSection(option)) {
+      defaultValues[option.id] = String(option.defaultValue);
+    }
+
+    // extract persisted values
+    if ('type' in option && option.type === 'persist') {
+      newSearchParams.set(option.id, option.value);
+    }
+  });
+
+  // compare which values are different from the default values
+  Object.entries(paramsObj).forEach(([id, value]) => {
     if (typeof value === 'string' && value.length && defaultValues[id] !== value) {
       newSearchParams.set(id, value);
     }
-    return newSearchParams;
-  }, new URLSearchParams());
+  });
+  return newSearchParams;
 };
 
 interface EditFormDrawerProps {
-  paramFields: ParamField[];
+  viewOptions: ViewOption[];
 }
 
-export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
+export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen, onClose, onOpen } = useDisclosure();
 
@@ -68,7 +79,7 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
     formEvent.preventDefault();
 
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
-    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
+    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
     setSearchParams(newSearchParams);
 
     onClose();
@@ -85,15 +96,29 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
 
         <DrawerBody>
           <form id='edit-params-form' onSubmit={onParamsFormSubmit}>
-            {paramFields.map((field) => (
-              <div key={field.title} className={style.columnSection}>
-                <label className={style.label}>
-                  <span className={style.title}>{field.title}</span>
-                  <span className={style.description}>{field.description}</span>
-                  <ParamInput key={field.title} paramField={field} />
-                </label>
-              </div>
-            ))}
+            {viewOptions.map((option) => {
+              if (isSection(option)) {
+                return (
+                  <div key={option.section} className={style.section}>
+                    {option.section}
+                  </div>
+                );
+              }
+
+              if (option.type === 'persist') {
+                return null;
+              }
+
+              return (
+                <div key={option.title} className={style.fieldSet}>
+                  <label className={style.label}>
+                    <span className={style.title}>{option.title}</span>
+                    <span className={style.description}>{option.description}</span>
+                    <ParamInput key={option.title} paramField={option} />
+                  </label>
+                </div>
+              );
+            })}
           </form>
         </DrawerBody>
 

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

@@ -1,17 +1,18 @@
 import { CustomFields } from 'ontime-types';
 
-import { capitaliseFirstLetter } from '../../../features/viewers/common/viewUtils';
+import type { ParamField } from './types';
 
-import { ParamField } from './types';
-
-const makeOptionsFromCustomFields = (customFields: CustomFields, additionalOptions?: Record<string, string>) => {
-  const customFieldOptions = Object.keys(customFields).reduce((acc, key) => {
-    return { ...acc, [`custom-${key}`]: `Custom: ${capitaliseFirstLetter(key)}` };
-  }, additionalOptions ?? {});
-  return customFieldOptions;
+export const makeOptionsFromCustomFields = (
+  customFields: CustomFields,
+  additionalOptions: Record<string, string> = {},
+) => {
+  return Object.entries(customFields).reduce((options, [key, value]) => {
+    options[`custom-${key}`] = `Custom: ${value.label}`;
+    return options;
+  }, additionalOptions);
 };
 
-const getTimeOption = (timeFormat: string): ParamField => {
+export const getTimeOption = (timeFormat: string): ParamField => {
   const placeholder = `${timeFormat} (default)`;
   return {
     id: 'timeformat',
@@ -22,7 +23,7 @@ const getTimeOption = (timeFormat: string): ParamField => {
   };
 };
 
-const hideTimerSeconds: ParamField = {
+export const hideTimerSeconds: ParamField = {
   id: 'hideTimerSeconds',
   title: 'Hide seconds in timer',
   description: 'Whether to hide seconds in the running timer',
@@ -30,476 +31,10 @@ const hideTimerSeconds: ParamField = {
   defaultValue: false,
 };
 
-const showLeadingZeros: ParamField = {
+export const showLeadingZeros: ParamField = {
   id: 'showLeadingZeros',
   title: 'Show leading zeros in timer',
   description: 'Whether to show leading zeros in the running timer',
   type: 'boolean',
   defaultValue: false,
 };
-
-export const getClockOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  {
-    id: 'key',
-    title: 'Key Colour',
-    description: 'Background colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'text',
-    title: 'Text Colour',
-    description: 'Text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'fffff (default)',
-  },
-  {
-    id: 'textbg',
-    title: 'Text Background',
-    description: 'Colour of text background in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'font',
-    title: 'Font',
-    description: 'Font family, will use the fonts available in the system',
-    type: 'string',
-    placeholder: 'Arial Black (default)',
-  },
-  {
-    id: 'size',
-    title: 'Text Size',
-    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
-    type: 'number',
-    placeholder: '1 (default)',
-  },
-  {
-    id: 'alignx',
-    title: 'Align Horizontal',
-    description: 'Moves the horizontally in page to start = left | center | end = right',
-    type: 'option',
-    values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
-  },
-  {
-    id: 'offsetx',
-    title: 'Offset Horizontal',
-    description: 'Offsets the timer horizontal position by a given amount in pixels',
-    type: 'number',
-    placeholder: '0 (default)',
-  },
-  {
-    id: 'aligny',
-    title: 'Align Vertical',
-    description: 'Moves the vertically in page to start = left | center | end = right',
-    type: 'option',
-    values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
-  },
-  {
-    id: 'offsety',
-    title: 'Offset Vertical',
-    description: 'Offsets the timer vertical position by a given amount in pixels',
-    type: 'number',
-    placeholder: '0 (default)',
-  },
-];
-
-export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
-  return [
-    getTimeOption(timeFormat),
-    hideTimerSeconds,
-    showLeadingZeros,
-    {
-      id: 'hideClock',
-      title: 'Hide Time Now',
-      description: 'Hides the Time Now field',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'secondary-src',
-      title: 'Secondary text',
-      description: 'Select the data source for the secondary text',
-      type: 'option',
-      values: secondaryOptions,
-      defaultValue: '',
-    },
-    {
-      id: 'hideCards',
-      title: 'Hide Cards',
-      description: 'Hides the Now and Next cards',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'hideProgress',
-      title: 'Hide progress bar',
-      description: 'Hides the progress bar',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'hideMessage',
-      title: 'Hide Presenter Message',
-      description: 'Prevents the screen from displaying messages from the presenter',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'hideExternal',
-      title: 'Hide External',
-      description: 'Prevents the screen from displaying the external field',
-      type: 'boolean',
-      defaultValue: false,
-    },
-  ];
-};
-
-export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
-  hideTimerSeconds,
-  {
-    id: 'key',
-    title: 'Key Colour',
-    description: 'Background colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'text',
-    title: 'Text Colour',
-    description: 'Text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'fffff (default)',
-  },
-  {
-    id: 'textbg',
-    title: 'Text Background',
-    description: 'Colour of text background in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'font',
-    title: 'Font',
-    description: 'Font family, will use the fonts available in the system',
-    type: 'string',
-    placeholder: 'Arial Black (default)',
-  },
-  {
-    id: 'size',
-    title: 'Text Size',
-    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
-    type: 'number',
-    placeholder: '1 (default)',
-  },
-  {
-    id: 'alignx',
-    title: 'Align Horizontal',
-    description: 'Moves the horizontally in page to start = left | center | end = right',
-    type: 'option',
-    values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
-  },
-  {
-    id: 'offsetx',
-    title: 'Offset Horizontal',
-    description: 'Offsets the timer horizontal position by a given amount in pixels',
-    type: 'number',
-    placeholder: '0 (default)',
-  },
-  {
-    id: 'aligny',
-    title: 'Align Vertical',
-    description: 'Moves the vertically in page to start = left | center | end = right',
-    type: 'option',
-    values: { start: 'Start', center: 'Center', end: 'End' },
-    defaultValue: 'center',
-  },
-  {
-    id: 'offsety',
-    title: 'Offset Vertical',
-    description: 'Offsets the timer vertical position by a given amount in pixels',
-    type: 'number',
-    placeholder: '0 (default)',
-  },
-  {
-    id: 'hideovertime',
-    title: 'Hide Overtime',
-    description: 'Whether to suppress overtime styles (red borders and red text)',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideendmessage',
-    title: 'Hide End Message',
-    description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
-    type: 'boolean',
-    defaultValue: false,
-  },
-];
-
-export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] => {
-  const topSourceOptions = makeOptionsFromCustomFields(customFields, {
-    title: 'Title',
-  });
-
-  const bottomSourceOptions = makeOptionsFromCustomFields(customFields, {
-    title: 'Title',
-    none: 'None',
-  });
-
-  return [
-    {
-      id: 'trigger',
-      title: 'Animation Trigger',
-      description: '',
-      type: 'option',
-      values: {
-        event: 'Event Load',
-        manual: 'Manual',
-      },
-      defaultValue: 'manual',
-    },
-    {
-      id: 'top-src',
-      title: 'Top Text',
-      description: '',
-      type: 'option',
-      values: topSourceOptions,
-      defaultValue: 'title',
-    },
-    {
-      id: 'bottom-src',
-      title: 'Bottom Text',
-      description: 'Select the data source for the bottom element',
-      type: 'option',
-      values: bottomSourceOptions,
-      defaultValue: 'none',
-    },
-    {
-      id: 'top-colour',
-      title: 'Top Text Colour',
-      description: 'Top text colour in hexadecimal',
-      prefix: '#',
-      type: 'string',
-      placeholder: '0000ff (default)',
-    },
-    {
-      id: 'bottom-colour',
-      title: 'Bottom Text Colour',
-      description: 'Bottom text colour in hexadecimal',
-      prefix: '#',
-      type: 'string',
-      placeholder: '0000ff (default)',
-    },
-    {
-      id: 'top-bg',
-      title: 'Top Background Colour',
-      description: 'Top text background colour in hexadecimal',
-      prefix: '#',
-      type: 'string',
-      placeholder: '00000000 (default)',
-    },
-    {
-      id: 'bottom-bg',
-      title: 'Bottom Background Colour',
-      description: 'Bottom text background colour in hexadecimal',
-      prefix: '#',
-      type: 'string',
-      placeholder: '00000000 (default)',
-    },
-    {
-      id: 'top-size',
-      title: 'Top Text Size',
-      description: 'Font size of the top text',
-      type: 'string',
-      placeholder: '65px',
-    },
-    {
-      id: 'bottom-size',
-      title: 'Bottom Text Size',
-      description: 'Font size of the bottom text',
-      type: 'string',
-      placeholder: '64px',
-    },
-    {
-      id: 'width',
-      title: 'Minimum Width',
-      description: 'Minimum Width of the element',
-      type: 'number',
-      prefix: '%',
-      placeholder: '45 (default)',
-    },
-    {
-      id: 'transition',
-      title: 'Transition',
-      description: 'Transition in time in seconds (default 3)',
-      type: 'number',
-      placeholder: '3 (default)',
-    },
-    {
-      id: 'delay',
-      title: 'Delay',
-      description: 'Delay between transition in and out in seconds (default 3)',
-      type: 'number',
-      placeholder: '3 (default)',
-    },
-    {
-      id: 'key',
-      title: 'Key Colour',
-      description: 'Colour of the background',
-      prefix: '#',
-      type: 'string',
-      placeholder: 'ffffffff (default)',
-    },
-    {
-      id: 'line-colour',
-      title: 'Line Colour',
-      description: 'Colour of the line',
-      prefix: '#',
-      type: 'string',
-      placeholder: 'ff0000ff (default)',
-    },
-  ];
-};
-
-export const getBackstageOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
-
-  return [
-    getTimeOption(timeFormat),
-    {
-      id: 'hidePast',
-      title: 'Hide past events',
-      description: 'Scheduler will only show upcoming events',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'stopCycle',
-      title: 'Stop cycling through event pages',
-      description: 'Schedule will not auto-cycle through events',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'eventsPerPage',
-      title: 'Events per page',
-      description: 'Sets the number of events on the page, can cause overflow',
-      type: 'number',
-      placeholder: '8 (default)',
-    },
-    {
-      id: 'secondary-src',
-      title: 'Event secondary text',
-      description: 'Select the data source for auxiliary text shown in now and next cards',
-      type: 'option',
-      values: secondaryOptions,
-      defaultValue: '',
-    },
-  ];
-};
-
-export const getPublicOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields);
-
-  return [
-    getTimeOption(timeFormat),
-    {
-      id: 'hidePast',
-      title: 'Hide past events',
-      description: 'Scheduler will only show upcoming events',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'stopCycle',
-      title: 'Stop cycling through event pages',
-      description: 'Schedule will not auto-cycle through events',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'eventsPerPage',
-      title: 'Events per page',
-      description: 'Sets the number of events on the page, can cause overflow',
-      type: 'number',
-      placeholder: '8 (default)',
-    },
-    {
-      id: 'secondary-src',
-      title: 'Event secondary text',
-      description: 'Select the data source for auxiliary text shown in now and next cards',
-      type: 'option',
-      values: secondaryOptions,
-      defaultValue: '',
-    },
-  ];
-};
-
-export const getStudioClockOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  hideTimerSeconds,
-];
-
-export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ParamField[] => {
-  const fieldOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });
-
-  const customFieldSelect = Object.keys(customFields).reduce((acc, key) => {
-    return { ...acc, [key]: `Custom: ${capitaliseFirstLetter(key)}` };
-  }, {});
-
-  return [
-    getTimeOption(timeFormat),
-    {
-      id: 'hidepast',
-      title: 'Hide Past Events',
-      description: 'Whether to events that have passed',
-      type: 'boolean',
-      defaultValue: false,
-    },
-    {
-      id: 'main',
-      title: 'Main data field',
-      description: 'Field to be shown in the first line of text',
-      type: 'option',
-      values: fieldOptions,
-      defaultValue: 'title',
-    },
-    {
-      id: 'secondary',
-      title: 'Secondary data field',
-      description: 'Field to be shown in the second line of text',
-      type: 'option',
-      values: fieldOptions,
-      defaultValue: '',
-    },
-    {
-      id: 'subscribe',
-      title: 'Highlight Field',
-      description: 'Choose a custom field to highlight',
-      type: 'option',
-      values: customFieldSelect,
-      defaultValue: '',
-    },
-    {
-      id: 'shouldEdit',
-      title: 'Edit custom field',
-      description: 'Allows editing an events selected custom field by long pressing.',
-      type: 'boolean',
-      defaultValue: false,
-    },
-  ];
-};
-
-export const getCountdownOptions = (timeFormat: string): ParamField[] => [getTimeOption(timeFormat), hideTimerSeconds];

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

@@ -1,3 +1,7 @@
+type ParamSection = {
+  section: string;
+};
+
 type BaseField = {
   id: string;
   title: string;
@@ -9,8 +13,25 @@ type OptionsField = {
   values: Record<string, string>;
   defaultValue?: string;
 };
+
+type MultiOptionsField = {
+  type: 'multi-option';
+  values: Record<string, { value: string; label: string; colour: string }>;
+  defaultValue?: string;
+};
+
 type StringField = { type: 'string'; defaultValue?: string; prefix?: string; placeholder?: string };
 type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
 type BooleanField = { type: 'boolean'; defaultValue: boolean };
+type PersistedField = { type: 'persist'; defaultValue?: string; value: string };
 
-export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);
+export type ParamField = BaseField &
+  (StringField | BooleanField | NumberField | OptionsField | MultiOptionsField | PersistedField);
+export type ViewOption = ParamSection | ParamField;
+
+/**
+ * Type assertion utility checks whether an entry is a section separator
+ */
+export function isSection(entry: ViewOption): entry is ParamSection {
+  return 'section' in entry;
+}

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

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { useClientStore } from '../stores/clientStore';
+import { socketSendJson } from '../utils/socket';
+
+export const useClientPath = () => {
+  const navigate = useNavigate();
+  const { pathname, search } = useLocation();
+  const redirect = useClientStore((store) => store.redirect);
+  const setRedirect = useClientStore((store) => store.setRedirect);
+
+  // notify of client path changes
+  useEffect(() => {
+    //remove leading '/' from path
+    const fullPath = (pathname.startsWith('/') ? pathname.slice(1) : pathname) + search;
+    socketSendJson('set-client-path', fullPath);
+  }, [pathname, search]);
+
+  // navigate to new path when received from server
+  useEffect(() => {
+    if (redirect === '') {
+      return;
+    }
+
+    // clear redirect
+    setRedirect('');
+
+    // navigate if there is a path change
+    if (redirect !== pathname + search) {
+      navigate(redirect);
+    }
+  }, [navigate, pathname, redirect, search, setRedirect]);
+};

apps/client/src/common/hooks/useLongPress.tsx

@@ -19,7 +19,7 @@ export default function useLongPress(callback: () => void, options: LongPressOpt
   const { threshold = 400, onStart, onFinish, onCancel } = options;
   const isLongPressActive = useRef(false);
   const isPressed = useRef(false);
-  const timerId = useRef<NodeJS.Timer>();
+  const timerId = useRef<NodeJS.Timeout>();
 
   return useMemo(() => {
     const start = (event: SyntheticEvent) => {

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

@@ -3,6 +3,12 @@ import { RuntimeStore, SimpleDirection, SimplePlayback } from 'ontime-types';
 import { useRuntimeStore } from '../stores/runtime';
 import { socketSendJson } from '../utils/socket';
 
+export const setClientRemote = {
+  setIdentify: (payload: { target: string; identify: boolean }) => socketSendJson('client', payload),
+  setRedirect: (payload: { target: string; redirect: string }) => socketSendJson('client', payload),
+  setClientName: (payload: { target: string; rename: string }) => socketSendJson('client', payload),
+};
+
 export const useRundownEditor = () => {
   const featureSelector = (state: RuntimeStore) => ({
     playback: state.timer.playback,

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

@@ -0,0 +1,82 @@
+import { ClientList } from 'ontime-types';
+import { create } from 'zustand';
+
+interface ClientStore {
+  name?: string;
+  setName: (newValue: string) => void;
+
+  id: string;
+  setId: (newValue: string) => void;
+
+  redirect: string;
+  setRedirect: (newValue: string) => void;
+
+  clients: ClientList;
+  setClients: (clients: ClientList) => void;
+}
+
+const clientNameKey = 'ontime-client-name';
+
+function persistNameInStorage(newValue: string) {
+  localStorage.setItem(clientNameKey, newValue);
+}
+
+export const useClientStore = create<ClientStore>((set) => ({
+  name: localStorage.getItem(clientNameKey) ?? undefined,
+  setName: (name: string) =>
+    set(() => {
+      persistNameInStorage(name);
+      return { name };
+    }),
+
+  id: '',
+  setId: (id) => set({ id }),
+
+  redirect: '',
+  setRedirect: (redirect: string) => set({ redirect }),
+
+  clients: {},
+  setClients: (clients: ClientList) => set({ clients }),
+}));
+
+/**
+ * Allows getting client name (outside react)
+ */
+export function getClientName(): string | undefined {
+  return useClientStore.getState().name;
+}
+
+/**
+ * Allows updating current client name (outside react)
+ */
+export function setClientName(name: string): void {
+  useClientStore.getState().setName(name);
+}
+
+/**
+ * Allows updating current client name (outside react)
+ */
+export function setClientId(id: string): void {
+  useClientStore.getState().setId(id);
+}
+
+/**
+ * Allows getting client name (outside react)
+ */
+export function getClientId(): string | undefined {
+  return useClientStore.getState().id;
+}
+
+/**
+ * Allows updating redirect (outside react)
+ */
+export function setClientRedirect(path: string): void {
+  useClientStore.getState().setRedirect(path);
+}
+
+/**
+ * Allows setting clients (outside react)
+ */
+export function setClients(clients: ClientList): void {
+  return useClientStore.getState().setClients(clients);
+}

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

@@ -1,26 +0,0 @@
-import { useStore } from 'zustand';
-import { createStore } from 'zustand/vanilla';
-
-interface SocketClientNameState {
-  name?: string;
-  setName: (newValue: string) => void;
-  persistName: (newValue: string) => void;
-}
-
-const clientNameKey = 'ontime-client-name';
-
-function persistKeyToStorage(newValue: string) {
-  localStorage.setItem(clientNameKey, newValue);
-}
-
-export const socketClientName = createStore<SocketClientNameState>((set) => ({
-  name: localStorage.getItem(clientNameKey) ?? undefined,
-  setName: (newValue: string) => set(() => ({ name: newValue })),
-  persistName: (newValue: string) =>
-    set(() => {
-      persistKeyToStorage(newValue);
-      return { name: newValue };
-    }),
-}));
-
-export const useSocketClientName = () => useStore(socketClientName);

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

@@ -1,21 +1,31 @@
 import { Log, RuntimeStore } from 'ontime-types';
 
-import { isProduction, RUNTIME, websocketUrl } from '../api/constants';
+import { CLIENT_LIST, isProduction, RUNTIME, websocketUrl } from '../api/constants';
 import { ontimeQueryClient } from '../queryClient';
-import { socketClientName } from '../stores/connectionName';
+import {
+  getClientId,
+  getClientName,
+  setClientId,
+  setClientName,
+  setClientRedirect,
+  setClients,
+} from '../stores/clientStore';
 import { addLog } from '../stores/logger';
 import { patchRuntime, runtimeStore } from '../stores/runtime';
 
 export let websocket: WebSocket | null = null;
 let reconnectTimeout: NodeJS.Timeout | null = null;
 const reconnectInterval = 1000;
+
 export let shouldReconnect = true;
 export let hasConnected = false;
 export let reconnectAttempts = 0;
 
-export const connectSocket = (preferredClientName?: string) => {
+export const connectSocket = () => {
   websocket = new WebSocket(websocketUrl);
 
+  const preferredClientName = getClientName();
+
   websocket.onopen = () => {
     clearTimeout(reconnectTimeout as NodeJS.Timeout);
     hasConnected = true;
@@ -24,6 +34,9 @@ export const connectSocket = (preferredClientName?: string) => {
     if (preferredClientName) {
       socketSendJson('set-client-name', preferredClientName);
     }
+
+    socketSendJson('set-client-type', 'ontime');
+    socketSendJson('set-client-path', location.pathname);
   };
 
   websocket.onclose = () => {
@@ -54,10 +67,48 @@ export const connectSocket = (preferredClientName?: string) => {
       }
 
       switch (type) {
-        case 'client-name': {
-          socketClientName.getState().setName(payload);
+        case 'client-id': {
+          if (typeof payload === 'string') {
+            setClientId(payload);
+          }
           break;
         }
+
+        case 'client-name': {
+          if (typeof payload === 'string') {
+            setClientName(payload);
+          }
+          break;
+        }
+
+        case 'client-rename': {
+          if (typeof payload === 'object') {
+            const id = getClientId();
+            if (payload.target && payload.target === id) {
+              setClientName(payload.name);
+            }
+          }
+          break;
+        }
+
+        case 'client-redirect': {
+          if (typeof payload === 'object') {
+            const id = getClientId();
+            if (payload.target && payload.target === id) {
+              setClientRedirect(payload.path);
+            }
+          }
+          break;
+        }
+
+        case 'client-list': {
+          setClients(payload);
+          if (!isProduction) {
+            ontimeQueryClient.setQueryData(CLIENT_LIST, payload);
+          }
+          break;
+        }
+
         case 'ontime-log': {
           addLog(payload as Log);
           break;

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

@@ -3,10 +3,11 @@ import { ErrorBoundary } from '@sentry/react';
 import { useKeyDown } from '../../common/hooks/useKeyDown';
 
 import AboutPanel from './panel/about-panel/AboutPanel';
+import ClientControlPanel from './panel/client-control-panel/ClientControlPanel';
 import FeatureSettingsPanel from './panel/feature-settings-panel/FeatureSettingsPanel';
 import GeneralPanel from './panel/general-panel/GeneralPanel';
 import IntegrationsPanel from './panel/integrations-panel/IntegrationsPanel';
-import LogPanel from './panel/log-panel/LogPanel';
+import NetworkLogPanel from './panel/network-panel/NetworkLogPanel';
 import ProjectPanel from './panel/project-panel/ProjectPanel';
 import ShutdownPanel from './panel/shutdown-panel/ShutdownPanel';
 import SourcesPanel from './panel/sources-panel/SourcesPanel';
@@ -30,8 +31,9 @@ export default function AppSettings() {
           {panel === 'feature_settings' && <FeatureSettingsPanel location={location} />}
           {panel === 'sources' && <SourcesPanel />}
           {panel === 'integrations' && <IntegrationsPanel location={location} />}
+          {panel === 'client_control' && <ClientControlPanel />}
           {panel === 'about' && <AboutPanel />}
-          {panel === 'log' && <LogPanel />}
+          {panel === 'network' && <NetworkLogPanel location={location} />}
           {panel === 'shutdown' && <ShutdownPanel />}
         </PanelContent>
       </ErrorBoundary>

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

@@ -73,12 +73,12 @@ $inner-padding: 1rem;
     top: 0;
     z-index: 3;
     box-shadow: 0 1px $white-10;
+    background-color: $gray-1350;
   }
 
   th {
     font-weight: 400;
     color: $gray-400;
-    background-color: $gray-1350;
     white-space: nowrap;
     text-transform: capitalize;
   }

apps/client/src/features/app-settings/panel/client-control-panel/ClientControlPanel.module.scss

@@ -0,0 +1,24 @@
+.fullWidth {
+  width: 100%;
+}
+
+.actionButtons {
+  display: flex;
+  gap: $element-spacing;
+}
+
+.halfWidth {
+  width: 50%;
+  white-space: nowrap;
+}
+
+.pathList {
+  width: 100%;
+}
+
+.badgeList {
+  width: 100%;
+  * {
+    margin-right: $element-spacing;
+  }
+}

apps/client/src/features/app-settings/panel/client-control-panel/ClientControlPanel.tsx

@@ -0,0 +1,15 @@
+import * as Panel from '../PanelUtils';
+
+import ClientList from './ClientList';
+
+export default function ClientControlPanel() {
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>Manage clients</Panel.SubHeader>
+        <Panel.Divider />
+        <ClientList />
+      </Panel.Card>
+    </Panel.Section>
+  );
+}

apps/client/src/features/app-settings/panel/client-control-panel/ClientList.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { Badge, Button, useDisclosure } from '@chakra-ui/react';
+
+import { RedirectClientModal } from '../../../../common/components/client-modal/RedirectClientModal';
+import { RenameClientModal } from '../../../../common/components/client-modal/RenameClientModal';
+import { setClientRemote } from '../../../../common/hooks/useSocket';
+import { useClientStore } from '../../../../common/stores/clientStore';
+import * as Panel from '../PanelUtils';
+
+import style from './ClientControlPanel.module.scss';
+
+export default function ClientList() {
+  const id = useClientStore((store) => store.id);
+  const clients = useClientStore((store) => store.clients);
+  const { isOpen: isOpenRedirect, onOpen: onOpenRedirect, onClose: onCloseRedirect } = useDisclosure();
+  const { isOpen: isOpenRename, onOpen: onOpenRename, onClose: onCloseRename } = useDisclosure();
+  const { setIdentify } = setClientRemote;
+
+  const [targetId, setTargetId] = useState('');
+
+  const openRename = (targetId: string) => {
+    setTargetId(targetId);
+    onOpenRename();
+  };
+
+  const openRedirect = (targetId: string) => {
+    setTargetId(targetId);
+    onOpenRedirect();
+  };
+
+  const ontimeClients = Object.entries(clients).filter(([_, { type }]) => type === 'ontime');
+  const otherClients = Object.entries(clients).filter(([_, { type }]) => type !== 'ontime');
+
+  const targetClient = clients[targetId];
+
+  return (
+    <>
+      {isOpenRedirect && (
+        <RedirectClientModal
+          id={targetId}
+          name={targetClient?.name}
+          path={targetClient?.path}
+          isOpen={isOpenRedirect}
+          onClose={onCloseRedirect}
+        />
+      )}
+      {isOpenRename && (
+        <RenameClientModal id={targetId} name={targetClient?.name} isOpen={isOpenRename} onClose={onCloseRename} />
+      )}
+      <Panel.Section>
+        <Panel.Title>Ontime Clients ({ontimeClients.length})</Panel.Title>
+        <Panel.Table>
+          <thead>
+            <tr>
+              <td className={style.fullWidth}>Client Name (Connection ID)</td>
+              <td className={style.fullWidth}>Path</td>
+              <td />
+            </tr>
+          </thead>
+          <tbody>
+            {ontimeClients.map(([key, client]) => {
+              const { identify, name, path } = client;
+              const isCurrent = id === key;
+              return (
+                <tr key={key}>
+                  <td className={style.badgeList}>
+                    <Badge variant='outline' size='xs'>
+                      {key}
+                    </Badge>
+                    {isCurrent && (
+                      <Badge variant='outline' colorScheme='yellow' size='xs'>
+                        self
+                      </Badge>
+                    )}
+                    {name}
+                  </td>
+                  {isCurrent ? <td /> : <td className={style.pathList}>{path}</td>}
+                  <td className={style.actionButtons}>
+                    <Button
+                      size='xs'
+                      className={`${identify ? style.blink : ''}`}
+                      isDisabled={isCurrent}
+                      variant={identify ? 'ontime-filled' : 'ontime-subtle'}
+                      data-testid={isCurrent ? '' : 'not-self-identify'}
+                      onClick={() => {
+                        setIdentify({ target: key, identify: !identify });
+                      }}
+                    >
+                      Identify
+                    </Button>
+                    <Button
+                      size='xs'
+                      variant='ontime-subtle'
+                      data-testid={isCurrent ? '' : 'not-self-rename'}
+                      onClick={() => openRename(key)}
+                    >
+                      Rename
+                    </Button>
+
+                    <Button
+                      size='xs'
+                      variant='ontime-subtle'
+                      isDisabled={isCurrent}
+                      data-testid={isCurrent ? '' : 'not-self-redirect'}
+                      onClick={() => openRedirect(key)}
+                    >
+                      Redirect
+                    </Button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Panel.Table>
+      </Panel.Section>
+      <Panel.Divider />
+      <Panel.Section>
+        <Panel.Title>Other Clients ({otherClients.length})</Panel.Title>
+        <Panel.Table>
+          <thead>
+            <tr>
+              <td className={style.halfWidth}>Client Name (Connection ID)</td>
+              <td className={style.halfWidth}>Client type</td>
+            </tr>
+          </thead>
+          <tbody>
+            {otherClients.map(([key, client]) => {
+              const { name, type } = client;
+
+              return (
+                <tr key={key}>
+                  <td className={style.badgeList}>
+                    <Badge variant='outline' size='sx'>
+                      {key}
+                    </Badge>
+                    {name}
+                  </td>
+                  <td>{type}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Panel.Table>
+      </Panel.Section>
+    </>
+  );
+}

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx

@@ -67,7 +67,7 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
   return (
     <form onSubmit={handleSubmit(setupSubmit)} className={style.fieldForm}>
       <div className={style.column}>
-        <Panel.Description>Label</Panel.Description>
+        <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>
         {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
         <Input
           {...register('label', {

apps/client/src/features/app-settings/panel/general-panel/GeneralPanelForm.tsx

@@ -153,6 +153,7 @@ export default function GeneralPanelForm() {
                 <option value='pt'>Portuguese</option>
                 <option value='es'>Spanish</option>
                 <option value='sv'>Swedish</option>
+		<option value='pl'>Polish</option>
               </Select>
             </Panel.ListItem>
           </Panel.ListGroup>

apps/client/src/features/app-settings/panel/integrations-panel/integrationUtils.ts

@@ -14,4 +14,6 @@ export const cycles: CycleLabel[] = [
   { id: 5, label: 'Every second', value: 'onClock' },
   { id: 5, label: 'On Timer Update', value: 'onUpdate' },
   { id: 6, label: 'On Finish', value: 'onFinish' },
+  { id: 7, label: 'On Warning', value: 'onWarning' },
+  { id: 8, label: 'On Danger', value: 'onDanger' },
 ];

apps/client/src/features/app-settings/panel/log-panel/LogPanel.tsx

@@ -1,17 +0,0 @@
-import * as Panel from '../PanelUtils';
-
-import LogExport from './LogExport';
-import InfoNif from './NetworkInterfaces';
-
-export default function LogPanel() {
-  return (
-    <>
-      <Panel.Header>Log</Panel.Header>
-      <Panel.Section>
-        <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
-      </Panel.Section>
-      <InfoNif />
-      <LogExport />
-    </>
-  );
-}

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

@@ -6,7 +6,7 @@ import { handleLinks } from '../../../../common/utils/linkUtils';
 import Log from '../../../log/Log';
 import * as Panel from '../PanelUtils';
 
-import style from './LogExport.module.scss';
+import style from './NetworkLogExport.module.scss';
 
 export default function LogExport() {
   const extract = (event: MouseEvent) => {
@@ -17,7 +17,7 @@ export default function LogExport() {
     <Panel.Section>
       <Panel.Card>
         <Panel.SubHeader>
-          Network log
+          Event log
           <Button
             variant='ontime-subtle'
             size='sm'

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

@@ -0,0 +1,28 @@
+import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
+import { PanelBaseProps } from '../../settingsStore';
+import ClientControlPanel from '../client-control-panel/ClientControlPanel';
+import * as Panel from '../PanelUtils';
+
+import InfoNif from './NetworkInterfaces';
+import LogExport from './NetworkLogExport';
+
+export default function NetworkLogPanel({ location }: PanelBaseProps) {
+  const clientsRef = useScrollIntoView<HTMLDivElement>('clients', location);
+  const logRef = useScrollIntoView<HTMLDivElement>('log', location);
+
+  return (
+    <>
+      <Panel.Header>Network</Panel.Header>
+      <Panel.Section>
+        <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
+      </Panel.Section>
+      <InfoNif />
+      <div ref={logRef}>
+        <LogExport />
+      </div>
+      <div ref={clientsRef}>
+        <ClientControlPanel />
+      </div>
+    </>
+  );
+}

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

@@ -50,7 +50,8 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
   const handleSubmitCreate = async (values: ProjectCreateFormValues) => {
     try {
       setError(null);
-      const filename = values.title?.trim();
+
+      const filename = values.title ?? 'untitled';
 
       await createProject({
         ...values,

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

@@ -2,8 +2,6 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Input } from '@chakra-ui/react';
 
-import * as Panel from '../PanelUtils';
-
 import style from './ProjectPanel.module.scss';
 
 export type ProjectFormValues = {
@@ -15,10 +13,9 @@ interface ProjectFormProps {
   filename: string;
   onCancel: () => void;
   onSubmit: (values: ProjectFormValues) => Promise<void>;
-  submitError: string | null;
 }
 
-export default function ProjectForm({ action, filename, onSubmit, onCancel, submitError }: ProjectFormProps) {
+export default function ProjectForm({ action, filename, onSubmit, onCancel }: ProjectFormProps) {
   const {
     handleSubmit,
     register,
@@ -37,34 +34,31 @@ export default function ProjectForm({ action, filename, onSubmit, onCancel, subm
   }, [setFocus]);
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)} className={style.form}>
-        <Input
-          className={style.formInput}
-          id='filename'
+    <form onSubmit={handleSubmit(onSubmit)} className={style.form}>
+      <Input
+        className={style.formInput}
+        id='filename'
+        size='sm'
+        type='text'
+        variant='ontime-filled'
+        placeholder='Enter new name'
+        autoComplete='off'
+        {...register('filename', { required: true })}
+      />
+      <div className={style.actionButtons}>
+        <Button onClick={onCancel} size='sm' variant='ontime-ghosted' disabled={isSubmitting}>
+          Cancel
+        </Button>
+        <Button
           size='sm'
-          type='text'
           variant='ontime-filled'
-          placeholder='Enter new name'
-          autoComplete='off'
-          {...register('filename')}
-        />
-        <div className={style.actionButtons}>
-          <Button onClick={onCancel} size='sm' variant='ontime-ghosted' disabled={isSubmitting}>
-            Cancel
-          </Button>
-          <Button
-            size='sm'
-            variant='ontime-filled'
-            isDisabled={!isDirty || !isValid || isSubmitting}
-            type='submit'
-            className={style.saveButton}
-          >
-            {action}
-          </Button>
-        </div>
-      </form>
-      {submitError && <Panel.Error>{submitError}</Panel.Error>}
-    </>
+          isDisabled={!isDirty || !isValid || isSubmitting}
+          type='submit'
+          className={style.saveButton}
+        >
+          {action}
+        </Button>
+      </div>
+    </form>
   );
 }

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

@@ -11,6 +11,7 @@ import {
   renameProject,
 } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
+import * as Panel from '../PanelUtils';
 
 import ProjectForm, { ProjectFormValues } from './ProjectForm';
 
@@ -40,36 +41,53 @@ export default function ProjectListItem({
   onToggleEditMode,
 }: ProjectListItemProps) {
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
 
-  const handleSubmitRename = async (values: ProjectFormValues) => {
-    try {
+  const handleSubmitAction = (actionType: 'rename' | 'duplicate') => {
+    return async (values: ProjectFormValues) => {
+      setLoading(true);
       setSubmitError(null);
-
-      if (!values.filename) {
-        setSubmitError('Filename cannot be blank');
-        return;
+      try {
+        if (!values.filename) {
+          setSubmitError('Filename cannot be blank');
+          return;
+        }
+        const action = actionType === 'rename' ? renameProject : duplicateProject;
+        await action(filename, values.filename);
+        await onRefetch();
+        onSubmit();
+      } catch (error) {
+        setSubmitError(maybeAxiosError(error));
+      } finally {
+        setLoading(false);
       }
-      await renameProject(filename, values.filename);
+    };
+  };
+
+  const handleLoad = async (filename: string) => {
+    setLoading(true);
+    setSubmitError(null);
+    try {
+      await loadProject(filename);
       await onRefetch();
-      onSubmit();
+      await invalidateAllCaches();
     } catch (error) {
       setSubmitError(maybeAxiosError(error));
+    } finally {
+      setLoading(false);
     }
   };
 
-  const handleSubmitDuplicate = async (values: ProjectFormValues) => {
+  const handleDelete = async (filename: string) => {
+    setLoading(true);
+    setSubmitError(null);
     try {
-      setSubmitError(null);
-
-      if (!values.filename) {
-        setSubmitError('Filename cannot be blank');
-        return;
-      }
-      await duplicateProject(filename, values.filename);
+      await deleteProject(filename);
       await onRefetch();
-      onSubmit();
     } catch (error) {
       setSubmitError(maybeAxiosError(error));
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -86,50 +104,55 @@ export default function ProjectListItem({
   const classes = current && !isCurrentlyBeingEdited ? style.current : undefined;
 
   return (
-    <tr key={filename} className={classes}>
-      {isCurrentlyBeingEdited ? (
-        <td colSpan={99}>
-          <ProjectForm
-            action={editingMode}
-            filename={filename}
-            onSubmit={editingMode === 'duplicate' ? handleSubmitDuplicate : handleSubmitRename}
-            onCancel={handleCancel}
-            submitError={submitError}
-          />
-        </td>
-      ) : (
-        <>
-          <td className={style.containCell}>{filename}</td>
-          <td>{new Date(updatedAt).toLocaleString()}</td>
-          <td className={style.actionButton}>
-            <ActionMenu
-              current={current}
+    <>
+      {submitError && (
+        <tr key='filename-error'>
+          <td colSpan={99}>
+            <Panel.Error>{submitError}</Panel.Error>
+          </td>
+        </tr>
+      )}
+      <tr key={filename} className={classes}>
+        {isCurrentlyBeingEdited ? (
+          <td colSpan={99}>
+            <ProjectForm
+              action={editingMode}
               filename={filename}
-              onChangeEditMode={handleToggleEditMode}
-              onRefetch={onRefetch}
+              onSubmit={editingMode === 'duplicate' ? handleSubmitAction('duplicate') : handleSubmitAction('rename')}
+              onCancel={handleCancel}
             />
           </td>
-        </>
-      )}
-    </tr>
+        ) : (
+          <>
+            <td className={style.containCell}>{filename}</td>
+            <td>{new Date(updatedAt).toLocaleString()}</td>
+            <td className={style.actionButton}>
+              <ActionMenu
+                current={current}
+                filename={filename}
+                onChangeEditMode={handleToggleEditMode}
+                onDelete={handleDelete}
+                onLoad={handleLoad}
+                isDisabled={loading}
+              />
+            </td>
+          </>
+        )}
+      </tr>
+    </>
   );
 }
 
-function ActionMenu({
-  current,
-  filename,
-  onChangeEditMode,
-  onRefetch,
-}: {
+interface ActionMenuProps {
   current?: boolean;
   filename: string;
+  isDisabled: boolean;
   onChangeEditMode: (editMode: EditMode, filename: string) => void;
-  onRefetch: () => Promise<void>;
-}) {
-  const handleLoad = async () => {
-    await loadProject(filename);
-    await invalidateAllCaches();
-  };
+  onDelete: (filename: string) => void;
+  onLoad: (filename: string) => void;
+}
+function ActionMenu(props: ActionMenuProps) {
+  const { current, filename, isDisabled, onChangeEditMode, onDelete, onLoad } = props;
 
   const handleRename = () => {
     onChangeEditMode('rename', filename);
@@ -139,11 +162,6 @@ function ActionMenu({
     onChangeEditMode('duplicate', filename);
   };
 
-  const handleDelete = async () => {
-    await deleteProject(filename);
-    await onRefetch();
-  };
-
   const handleDownload = async () => {
     await downloadProject(filename);
   };
@@ -161,16 +179,17 @@ function ActionMenu({
         color='#e2e2e2' // $gray-200
         variant='ontime-ghosted'
         size='sm'
+        isDisabled={isDisabled}
       />
       <MenuList>
-        <MenuItem onClick={handleLoad} isDisabled={current}>
+        <MenuItem onClick={() => onLoad(filename)} isDisabled={current}>
           Load
         </MenuItem>
         <MenuItem onClick={handleRename}>Rename</MenuItem>
         <MenuItem onClick={handleDuplicate}>Duplicate</MenuItem>
         <MenuItem onClick={handleDownload}>Download</MenuItem>
         <MenuItem onClick={handleExportCSV}>Export CSV Rundown</MenuItem>
-        <MenuItem isDisabled={current} onClick={handleDelete}>
+        <MenuItem isDisabled={current} onClick={() => onDelete(filename)}>
           Delete
         </MenuItem>
       </MenuList>

apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss

@@ -1,5 +1,5 @@
 .uploadSection,
-.successSection {
+.finishSection {
   margin-top: 1rem;
   display: flex;
   padding: 3rem 1rem;
@@ -15,12 +15,18 @@
   gap: 2rem;
 }
 
-.successSection {
-  color: $green-500;
+.finishSection {
   font-size: 1.5rem;
   text-align: center;
   flex-direction: column;
   gap: 1rem;
+
+  .error {
+    color: $red-500;
+  }
+  .success {
+    color: $green-500;
+  }
 }
 
 .buttonRow {

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

@@ -134,11 +134,20 @@ export default function SourcesPanel() {
     await exportRundown(sheetId, importMap);
   };
 
+  const resetFlow = () => {
+    setImportFlow('none');
+    setRundown(null);
+    setHasFile('none');
+    setWorksheets(null);
+    setCustomFields(null);
+    setError('');
+  };
+
   const isExcelFlow = importFlow === 'excel';
   const isGSheetFlow = importFlow === 'gsheet';
   const isAuthenticated = authenticationStatus === 'authenticated';
   const showInput = importFlow === 'none';
-  const showSuccess = importFlow === 'finished';
+  const showCompleted = importFlow === 'finished';
   const showAuth = isGSheetFlow && !isAuthenticated;
   const showImportMap = (isGSheetFlow && isAuthenticated) || (isExcelFlow && hasFile === 'done');
   const showReview = rundown !== null && customFields !== null;
@@ -189,10 +198,18 @@ export default function SourcesPanel() {
               </div>
             </>
           )}
-          {showSuccess && (
-            <div className={style.successSection}>
-              <span>Import successful</span>
-              <Button variant='ontime-filled' size='sm' onClick={() => setImportFlow('none')}>
+          {showCompleted && (
+            <div className={style.finishSection}>
+              {error ? (
+                <span key='finish__error' className={style.error}>
+                  Import failed
+                </span>
+              ) : (
+                <span key='finish__success' className={style.success}>
+                  Import successful
+                </span>
+              )}
+              <Button variant='ontime-filled' size='sm' onClick={resetFlow}>
                 Return
               </Button>
             </div>
@@ -200,6 +217,7 @@ export default function SourcesPanel() {
           {showAuth && <GSheetSetup onCancel={cancelGSheetFlow} />}
           {showImportMap && !showReview && (
             <ImportMapForm
+              hasErrors={Boolean(error)}
               isSpreadsheet={isExcelFlow}
               onCancel={cancelImportMap}
               onSubmitExport={handleSubmitExport}

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

@@ -15,14 +15,15 @@ import { convertToImportMap, getPersistedOptions, NamedImportMap, persistImportM
 import style from '../SourcesPanel.module.scss';
 
 interface ImportMapFormProps {
-  isSpreadsheet?: boolean;
+  hasErrors: boolean;
+  isSpreadsheet: boolean;
   onCancel: () => void;
   onSubmitExport: (importMap: ImportMap) => Promise<void>;
   onSubmitImport: (importMap: ImportMap) => Promise<void>;
 }
 
 export default function ImportMapForm(props: ImportMapFormProps) {
-  const { isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
+  const { hasErrors, isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
   const namedImportMap = getPersistedOptions();
   const { revoke } = useGoogleSheet();
   const {
@@ -78,7 +79,7 @@ export default function ImportMapForm(props: ImportMapFormProps) {
   const isLoading = Boolean(loading);
   const canSubmitSpreadsheet = isSpreadsheet && !isLoading;
   const canSubmitGSheet = !isLoading;
-  const canSubmit = isValid && (canSubmitSpreadsheet || canSubmitGSheet);
+  const canSubmit = !hasErrors && isValid && (canSubmitSpreadsheet || canSubmitGSheet);
 
   return (
     <Panel.Section as='form' id='import-map'>

apps/client/src/features/app-settings/settingsStore.ts

@@ -50,7 +50,21 @@ export const settingPanels: Readonly<SettingsOption[]> = [
       { id: 'integrations__http', label: 'HTTP settings' },
     ],
   },
-  { id: 'log', label: 'Log', split: true },
+  {
+    id: 'network',
+    label: 'Network',
+    split: true,
+    secondary: [
+      {
+        id: 'network__log',
+        label: 'Event log',
+      },
+      {
+        id: 'network__clients',
+        label: 'Manage clients',
+      },
+    ],
+  },
   {
     id: 'about',
     label: 'About',

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -43,7 +43,7 @@ export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProp
   const finish = millisToString(expectedFinish);
 
   const isRolling = playback === Playback.Roll;
-  const isWaiting = timer.secondaryTimer !== null && timer.secondaryTimer > 0 && timer.current === null;
+  const isWaiting = timer.phase === TimerPhase.Pending;
   const isOvertime = timer.phase === TimerPhase.Overtime;
   const hasAddedTime = Boolean(timer.addedTime);
 

apps/client/src/features/cuesheet/Cuesheet.module.scss

@@ -47,11 +47,13 @@ $table-header-font-size: calc(1rem - 3px);
   position: sticky;
   top: 0;
   z-index: 10;
-  background-color: $gray-1300;
 
   font-size: $table-header-font-size;
   color: $gray-700;
-  font-weight: 400;
+
+  th {
+      background-color: $gray-1300;
+  }
 }
 
 .eventRow {

apps/client/src/features/cuesheet/Cuesheet.tsx

@@ -1,5 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useLocalStorage } from '@mantine/hooks';
+import { useCallback, useRef } from 'react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import Color from 'color';
 import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
@@ -13,7 +12,7 @@ import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
 import { useCuesheetSettings } from './store/CuesheetSettings';
-import { initialColumnOrder } from './cuesheetCols';
+import useColumnManager from './useColumnManager';
 
 import style from './Cuesheet.module.scss';
 
@@ -27,23 +26,20 @@ interface CuesheetProps {
 export default function Cuesheet({ data, columns, handleUpdate, selectedId }: CuesheetProps) {
   const { followSelected, showSettings, showDelayBlock, showPrevious, showIndexColumn } = useCuesheetSettings();
 
-  const [columnVisibility, setColumnVisibility] = useLocalStorage({ key: 'table-hidden', defaultValue: {} });
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
-    key: 'table-order',
-    defaultValue: initialColumnOrder,
-  });
-  const [columnSizing, setColumnSizing] = useLocalStorage({ key: 'table-sizes', defaultValue: {} });
+  const {
+    columnVisibility,
+    columnOrder,
+    columnSizing,
+    resetColumnOrder,
+    setColumnVisibility,
+    saveColumnOrder,
+    setColumnSizing,
+  } = useColumnManager(columns);
 
   const selectedRef = useRef<HTMLTableRowElement | null>(null);
   const tableContainerRef = useRef<HTMLDivElement | null>(null);
   useFollowComponent({ followRef: selectedRef, scrollRef: tableContainerRef, doFollow: followSelected });
 
-  // keep column order in sync with columns
-  useEffect(() => {
-    const order = columns.map((col) => col.id as string);
-    saveColumnOrder(order);
-  }, [columns, saveColumnOrder]);
-
   const table = useReactTable({
     data,
     columns,
@@ -61,10 +57,6 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
     getCoreRowModel: getCoreRowModel(),
   });
 
-  const resetColumnOrder = () => {
-    saveColumnOrder(initialColumnOrder);
-  };
-
   const setAllVisible = () => {
     table.toggleAllColumnsVisible(true);
   };

apps/client/src/features/cuesheet/cuesheet-progress/CuesheetProgress.tsx

@@ -19,6 +19,7 @@ export default function CuesheetProgress() {
       danger={timeDanger}
       dangerColor={data!.dangerColor}
       className={styles.progressOverride}
+      ignoreCssOverride
     />
   );
 }

apps/client/src/features/cuesheet/cuesheetCols.tsx

@@ -117,5 +117,3 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
     ...dynamicCustomFields,
   ];
 }
-
-export const initialColumnOrder: string[] = makeCuesheetColumns({}).map((column) => column.id as string);

apps/client/src/features/cuesheet/useColumnManager.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useEffect } from 'react';
+import { useLocalStorage } from '@mantine/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import { OntimeRundownEntry } from 'ontime-types';
+
+export default function useColumnManager(columns: ColumnDef<OntimeRundownEntry>[]) {
+  const [columnVisibility, setColumnVisibility] = useLocalStorage({ key: 'table-hidden', defaultValue: {} });
+  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
+    key: 'table-order',
+    defaultValue: columns.map((col) => col.id as string),
+  });
+  const [columnSizing, setColumnSizing] = useLocalStorage({ key: 'table-sizes', defaultValue: {} });
+
+  // if the columns change, we update the dataset
+  useEffect(() => {
+    let shouldReplace = false;
+    const newColumns: string[] = [];
+
+    // iterate through columns to see if there are new ids
+    columns.forEach((column) => {
+      const columnnId = column.id as string;
+      if (!shouldReplace && !columnOrder.includes(columnnId)) {
+        shouldReplace = true;
+      }
+      newColumns.push(columnnId);
+    });
+
+    if (shouldReplace) {
+      saveColumnOrder(newColumns);
+    }
+  }, [columnOrder, columns, saveColumnOrder]);
+
+  const resetColumnOrder = useCallback(() => {
+    saveColumnOrder(columns.map((col) => col.id as string));
+  }, [columns, saveColumnOrder]);
+
+  return {
+    columnVisibility,
+    columnOrder,
+    columnSizing,
+    resetColumnOrder,
+    setColumnVisibility,
+    saveColumnOrder,
+    setColumnSizing,
+  };
+}

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

@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { CustomField, CustomFields, isOntimeEvent, OntimeEvent, SupportedEvent } from 'ontime-types';
+import { isOntimeEvent, OntimeEvent, SupportedEvent } from 'ontime-types';
 import { getFirstEventNormal, getLastEventNormal } from 'ontime-utils';
 
 import Empty from '../../common/components/state/Empty';
-import { getOperatorOptions } from '../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useOperator } from '../../common/hooks/useSocket';
@@ -22,16 +21,15 @@ import FollowButton from './follow-button/FollowButton';
 import OperatorBlock from './operator-block/OperatorBlock';
 import OperatorEvent from './operator-event/OperatorEvent';
 import StatusBar from './status-bar/StatusBar';
+import { getOperatorOptions } from './operator.options';
 
 import style from './Operator.module.scss';
 
 const selectedOffset = 50;
 
+export type Subscribed = { id: string; label: string; colour: string; value: string }[];
 type TitleFields = Pick<OntimeEvent, 'title'>;
-export type EditEvent = Pick<OntimeEvent, 'id' | 'cue'> & { fieldLabel?: string; fieldValue: string };
-export type PartialEdit = EditEvent & {
-  field: keyof CustomFields;
-};
+export type EditEvent = Pick<OntimeEvent, 'id' | 'cue'> & { subscriptions: Subscribed };
 
 export default function Operator() {
   const { data, status } = useRundown();
@@ -45,7 +43,7 @@ export default function Operator() {
   const { data: settings } = useSettings();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
-  const [editEvent, setEditEvent] = useState<PartialEdit | null>(null);
+  const [editEvent, setEditEvent] = useState<EditEvent | null>(null);
 
   const [lockAutoScroll, setLockAutoScroll] = useState(false);
   const selectedRef = useRef<HTMLDivElement | null>(null);
@@ -102,16 +100,9 @@ export default function Operator() {
     debouncedHandleScroll();
   };
 
-  const handleEdit = useCallback(
-    (event: EditEvent) => {
-      const field = searchParams.get('subscribe') as keyof CustomField | null;
-
-      if (field) {
-        setEditEvent({ ...event, field });
-      }
-    },
-    [searchParams],
-  );
+  const handleEdit = useCallback((event: EditEvent) => {
+    setEditEvent({ ...event });
+  }, []);
 
   const missingData = !data || !customFields || !projectData;
   const isLoading = status === 'pending' || customFieldStatus === 'pending' || projectDataStatus === 'pending';
@@ -122,8 +113,13 @@ export default function Operator() {
 
   // get fields which the user subscribed to
   const shouldEdit = searchParams.get('shouldEdit');
-  const subscribe = searchParams.get('subscribe') as keyof CustomFields;
-  const canEdit = shouldEdit && subscribe;
+
+  const subscriptions = (searchParams.get('subscribe') ?? '')
+    .toLocaleLowerCase()
+    .split('_')
+    .filter((value) => Object.hasOwn(customFields, value));
+
+  const canEdit = shouldEdit && subscriptions;
 
   const main = searchParams.get('main') as keyof TitleFields | null;
   const secondary = searchParams.get('secondary');
@@ -138,7 +134,7 @@ export default function Operator() {
 
   return (
     <div className={style.operatorContainer}>
-      <ViewParamsEditor paramFields={operatorOptions} />
+      <ViewParamsEditor viewOptions={operatorOptions} />
       {editEvent && <EditModal event={editEvent} onClose={() => setEditEvent(null)} />}
 
       <StatusBar
@@ -171,9 +167,14 @@ export default function Operator() {
               return null;
             }
 
-            const mainField = main ? entry?.[main] || entry.title : entry.title;
+            const mainField = main ? getPropertyValue(entry, main) ?? '' : entry.title;
             const secondaryField = getPropertyValue(entry, secondary) ?? '';
-            const subscribedData = entry.custom[subscribe];
+            const subscribedData = subscriptions
+              ? subscriptions.map((id) => {
+                  const { label, colour } = customFields[id];
+                  return { id, label, colour, value: entry.custom[id] };
+                })
+              : null;
 
             return (
               <OperatorEvent
@@ -189,7 +190,6 @@ export default function Operator() {
                 delay={entry.delay}
                 isSelected={isSelected}
                 subscribed={subscribedData}
-                subscribeLabel={subscribe}
                 isPast={isPast}
                 selectedRef={isSelected ? selectedRef : undefined}
                 onLongPress={canEdit ? handleEdit : () => undefined}

apps/client/src/features/operator/edit-modal/EditModal.tsx

@@ -1,48 +1,69 @@
 import { useRef, useState } from 'react';
 import { Button, Textarea } from '@chakra-ui/react';
+import { OntimeEvent } from 'ontime-types';
 
 import { useEventAction } from '../../../common/hooks/useEventAction';
-import type { PartialEdit } from '../Operator';
+import type { EditEvent } from '../Operator';
 
 import style from './EditModal.module.scss';
 
 interface EditModalProps {
-  event: PartialEdit;
+  event: EditEvent;
   onClose: () => void;
 }
 
 export default function EditModal(props: EditModalProps) {
   const { event, onClose } = props;
 
-  const { updateCustomField } = useEventAction();
+  const { updateEvent } = useEventAction();
   const [loading, setLoading] = useState(false);
-  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement[]>(new Array<HTMLTextAreaElement>());
 
   const handleSave = async () => {
+    if (!inputRef.current) return;
     setLoading(true);
-    const newValue = inputRef.current?.value;
-    if (newValue === undefined) {
-      return;
+
+    const patchObject: Partial<OntimeEvent> = { id: event.id };
+
+    inputRef.current.forEach((element) => {
+      if (element.dataset.field && element.defaultValue != element.value) {
+        if (patchObject.custom) {
+          patchObject.custom[element.dataset.field] = element.value;
+        } else {
+          Object.assign(patchObject, { custom: { [element.dataset.field]: element.value } });
+        }
+      }
+    });
+
+    if (patchObject.custom) {
+      await updateEvent(patchObject);
     }
 
-    await updateCustomField(event.id, event.field, newValue);
     setLoading(false);
     onClose();
   };
 
-  const fieldLabel = event?.fieldLabel ?? event.field;
-
   return (
     <div className={style.editModal}>
-      <div>{`Editing field ${fieldLabel} in cue ${event.cue}`}</div>
-      <Textarea
-        ref={inputRef}
-        variant='ontime-filled'
-        placeholder={`Add value for ${fieldLabel} field`}
-        defaultValue={event.fieldValue}
-        isDisabled={loading}
-        resize='none'
-      />
+      <div>{`Editing fields in cue ${event.cue}`}</div>
+      {event.subscriptions.map((field) => {
+        return (
+          <div key={field.label}>
+            <label>{field.label}</label>
+            <Textarea
+              ref={(element) => {
+                if (element) inputRef.current.push(element);
+              }}
+              variant='ontime-filled'
+              placeholder={`Add value for ${field.label} field`}
+              defaultValue={field.value}
+              data-field={field.id}
+              isDisabled={loading}
+              resize='none'
+            />
+          </div>
+        );
+      })}
       <div className={style.buttonRow}>
         <Button variant='ontime-subtle' onClick={onClose} isDisabled={loading}>
           Cancel

apps/client/src/features/operator/operator-event/OperatorEvent.module.scss

@@ -20,9 +20,9 @@
   grid-template-rows: auto auto auto;
   column-gap: 0.5rem;
   grid-template-areas:
-  "binder main      schedule"
-  "binder secondary running"
-  "binder fields    fields";
+    'binder main      schedule'
+    'binder secondary running'
+    'binder fields    fields';
 
   &.subscribed {
     background-color: $gray-1250;
@@ -65,12 +65,15 @@
   font-size: 1.5rem;
   letter-spacing: 0.5px;
   color: $ui-white;
+
+  @include ellipsis-text;
 }
 
 .secondaryField {
   grid-area: secondary;
   font-size: 1.25rem;
   letter-spacing: 0.5px;
+  @include ellipsis-text;
 }
 
 .schedule {
@@ -93,16 +96,27 @@
   font-weight: 400;
   color: $ui-black;
   margin: 0.25rem 0;
+  display: flex;
+  flex-wrap: wrap;
+
 
   .field {
     font-weight: 600;
-    padding: 0 0.25rem;
-    background-color: var(--operator-highlight-override, $orange-600);
-    margin-right: 0.5rem;
+    padding-inline: 0.25rem;
+  }
+
+  .noColour {
+    outline: 0.15rem solid var(--operator-highlight-override, $ui-white);
+    outline-offset: -0.15rem;
+    padding-right: 0.3rem;
+    color: $ui-white;
   }
 
   .value {
-    color: $orange-500;
+    padding-inline: 0.25rem;
+    background-color: $gray-1250;
+    color: var(--operator-highlight-override, $ui-white);
+    margin-right: 1rem;
   }
 }
 

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

@@ -6,7 +6,7 @@ import { useTimer } from '../../../common/hooks/useSocket';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import ClockTime from '../../viewers/common/clock-time/ClockTime';
 import RunningTime from '../../viewers/common/running-time/RunningTime';
-import type { EditEvent } from '../Operator';
+import type { EditEvent, Subscribed } from '../Operator';
 
 import style from './OperatorEvent.module.scss';
 
@@ -21,8 +21,7 @@ interface OperatorEventProps {
   duration: number;
   delay?: number;
   isSelected: boolean;
-  subscribed?: string;
-  subscribeLabel: string;
+  subscribed: Subscribed | null;
   isPast: boolean;
   selectedRef?: RefObject<HTMLDivElement>;
   onLongPress: (event: EditEvent) => void;
@@ -47,7 +46,6 @@ function OperatorEvent(props: OperatorEventProps) {
     delay,
     isSelected,
     subscribed,
-    subscribeLabel: subscribedAlias,
     isPast,
     selectedRef,
     onLongPress,
@@ -56,7 +54,9 @@ function OperatorEvent(props: OperatorEventProps) {
   const handleLongPress = (event?: SyntheticEvent) => {
     // we dont have an event out of useLongPress
     event?.preventDefault();
-    onLongPress({ id, cue, fieldLabel: subscribedAlias, fieldValue: subscribed ?? '' });
+    if (subscribed) {
+      onLongPress({ id, cue, subscriptions: subscribed });
+    }
   };
 
   const mouseHandlers = useLongPress(handleLongPress, { threshold: 800 });
@@ -89,12 +89,22 @@ function OperatorEvent(props: OperatorEventProps) {
       </span>
 
       <div className={style.fields}>
-        {subscribed && (
-          <>
-            <span className={style.field}>{subscribedAlias}</span>
-            <span className={style.value}>{subscribed}</span>
-          </>
-        )}
+        {subscribed &&
+          subscribed
+            .filter((field) => field.value)
+            .map((field) => {
+              const fieldClasses = cx([style.field, !field.colour ? style.noColour : null]);
+              return (
+                <div key={field.id}>
+                  <span className={fieldClasses} style={{ backgroundColor: field.colour }}>
+                    {field.label}
+                  </span>
+                  <span className={style.value} style={{ color: field.colour }}>
+                    {field.value}
+                  </span>
+                </div>
+              );
+            })}
       </div>
     </div>
   );

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

@@ -0,0 +1,60 @@
+import { CustomFields } from 'ontime-types';
+
+import { getTimeOption, makeOptionsFromCustomFields } from '../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../common/components/view-params-editor/types';
+
+export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
+  const fieldOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });
+
+  const customFieldSelect = Object.entries(customFields).reduce<
+    Record<string, { value: string; label: string; colour: string }>
+  >((acc, [key, field]) => {
+    acc[key] = { value: key, label: field.label, colour: field.colour };
+    return acc;
+  }, {});
+
+  return [
+    { section: 'Clock Options' },
+    getTimeOption(timeFormat),
+    { section: 'Data sources' },
+
+    {
+      id: 'main',
+      title: 'Main data field',
+      description: 'Field to be shown in the first line of text',
+      type: 'option',
+      values: fieldOptions,
+      defaultValue: 'title',
+    },
+    {
+      id: 'secondary',
+      title: 'Secondary data field',
+      description: 'Field to be shown in the second line of text',
+      type: 'option',
+      values: fieldOptions,
+      defaultValue: '',
+    },
+    {
+      id: 'subscribe',
+      title: 'Highlight Field',
+      description: 'Choose a custom field to highlight',
+      type: 'multi-option',
+      values: customFieldSelect,
+    },
+    { section: 'Element visibility' },
+    {
+      id: 'hidepast',
+      title: 'Hide Past Events',
+      description: 'Whether to events that have passed',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'shouldEdit',
+      title: 'Edit custom field',
+      description: 'Allows editing an events selected custom field by long pressing.',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ];
+};

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -105,5 +105,5 @@
 }
 
 .progressOverride {
-  border-radius: 0;
+  --progress-bar-br: 0;
 }

apps/client/src/features/operator/status-bar/StatusBarProgress.tsx

@@ -24,6 +24,7 @@ export default function StatusBarProgress(props: StatusBarProgressProps) {
       danger={timeDanger}
       dangerColor={viewSettings.dangerColor}
       className={styles.progressOverride}
+      ignoreCssOverride
     />
   );
 }

apps/client/src/features/rundown/event-editor/composite/EventTextInput.tsx

@@ -6,14 +6,14 @@ import { EditorUpdateFields } from '../EventEditor';
 
 import style from '../EventEditor.module.scss';
 
-interface CountedTextInputProps extends InputProps {
+interface EventTextInputProps extends InputProps {
   field: EditorUpdateFields;
   label: string;
   initialValue: string;
   submitHandler: (field: EditorUpdateFields, value: string) => void;
 }
 
-export default function EventTextInput(props: CountedTextInputProps) {
+export default function EventTextInput(props: EventTextInputProps) {
   const { field, label, initialValue, submitHandler, maxLength } = props;
   const ref = useRef<HTMLInputElement | null>(null);
   const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
@@ -34,7 +34,7 @@ export default function EventTextInput(props: CountedTextInputProps) {
         variant='ontime-filled'
         data-testid='input-textfield'
         value={value}
-        maxLength={maxLength || 50}
+        maxLength={maxLength || 100}
         onChange={onChange}
         onBlur={onBlur}
         onKeyDown={onKeyDown}

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -5,6 +5,7 @@ import {
   Message,
   OntimeEvent,
   ProjectData,
+  Runtime,
   Settings,
   SupportedEvent,
   TimerMessage,
@@ -36,6 +37,7 @@ type WithDataProps = {
   publicEventNext: OntimeEvent | null;
   publicEventNow: OntimeEvent | null;
   publicSelectedId: string | null;
+  runtime: Runtime;
   selectedId: string | null;
   settings: Settings | undefined;
   time: ViewExtendedTimer;
@@ -66,7 +68,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
     }, [rundownData]);
 
     // websocket data
-    const { clock, timer, message, onAir, eventNext, publicEventNext, publicEventNow, eventNow } =
+    const { clock, timer, message, onAir, eventNext, publicEventNext, publicEventNow, eventNow, runtime } =
       useStore(runtimeStore);
     const publicSelectedId = publicEventNow?.id ?? null;
     const selectedId = eventNow?.id ?? null;
@@ -108,6 +110,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
           publicEventNext={publicEventNext}
           publicEventNow={publicEventNow}
           publicSelectedId={publicSelectedId}
+          runtime={runtime}
           selectedId={selectedId}
           settings={settings}
           time={TimeManagerType}

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -11,7 +11,6 @@ import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-import { getBackstageOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
@@ -23,8 +22,12 @@ import { titleVariants } from '../common/animation';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getPropertyValue } from '../common/viewUtils';
 
+import { getBackstageOptions } from './backstage.options';
+
 import './Backstage.scss';
 
+export const MotionTitleCard = motion(TitleCard);
+
 interface BackstageProps {
   customFields: CustomFields;
   isMirrored: boolean;
@@ -97,7 +100,7 @@ export default function Backstage(props: BackstageProps) {
 
   return (
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
-      <ViewParamsEditor paramFields={backstageOptions} />
+      <ViewParamsEditor viewOptions={backstageOptions} />
       <div className='project-header'>
         {general.title}
         <div className='clock-container'>
@@ -124,7 +127,7 @@ export default function Backstage(props: BackstageProps) {
               animate='visible'
               exit='exit'
             >
-              <TitleCard label='now' title={eventNow.title} secondary={secondaryTextNow} />
+              <TitleCard title={eventNow.title} secondary={secondaryTextNow} />
               <div className='timer-group'>
                 <div className='aux-timers'>
                   <div className='aux-timers__label'>{getLocalizedString('common.started_at')}</div>
@@ -151,16 +154,17 @@ export default function Backstage(props: BackstageProps) {
 
         <AnimatePresence>
           {eventNext && (
-            <motion.div
+            <MotionTitleCard
               className='event next'
               key='next'
               variants={titleVariants}
               initial='hidden'
               animate='visible'
               exit='exit'
-            >
-              <TitleCard label='next' title={eventNext.title} secondary={secondaryTextNext} />
-            </motion.div>
+              label='next'
+              title={eventNext.title}
+              secondary={secondaryTextNext}
+            />
           )}
         </AnimatePresence>
       </div>

apps/client/src/features/viewers/backstage/backstage.options.ts

@@ -0,0 +1,44 @@
+import { CustomFields } from 'ontime-types';
+
+import { getTimeOption, makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const getBackstageOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
+
+  return [
+    { section: 'Clock Options' },
+    getTimeOption(timeFormat),
+    { section: 'Data sources' },
+    {
+      id: 'secondary-src',
+      title: 'Event secondary text',
+      description: 'Select the data source for auxiliary text shown in now and next cards',
+      type: 'option',
+      values: secondaryOptions,
+      defaultValue: '',
+    },
+    { section: 'Schedule options' },
+    {
+      id: 'eventsPerPage',
+      title: 'Events per page',
+      description: 'Sets the number of events on the page, can cause overflow',
+      type: 'number',
+      placeholder: '8 (default)',
+    },
+    {
+      id: 'hidePast',
+      title: 'Hide past events',
+      description: 'Scheduler will only show upcoming events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'stopCycle',
+      title: 'Stop cycling through event pages',
+      description: 'Schedule will not auto-cycle through events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ];
+};

apps/client/src/features/viewers/clock/Clock.tsx

@@ -2,7 +2,6 @@ import { useSearchParams } from 'react-router-dom';
 import { Settings, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/constants';
-import { getClockOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
@@ -11,6 +10,8 @@ import { OverridableOptions } from '../../../common/models/View.types';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 
+import { getClockOptions } from './clock.options';
+
 import './Clock.scss';
 
 interface ClockProps {
@@ -130,7 +131,7 @@ export default function Clock(props: ClockProps) {
       }}
       data-testid='clock-view'
     >
-      <ViewParamsEditor paramFields={clockOptions} />
+      <ViewParamsEditor viewOptions={clockOptions} />
       <SuperscriptTime
         time={clock}
         className='clock'

apps/client/src/features/viewers/clock/clock.options.ts

@@ -0,0 +1,76 @@
+import { getTimeOption } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const getClockOptions = (timeFormat: string): ViewOption[] => [
+  { section: 'Clock Options' },
+  getTimeOption(timeFormat),
+  { section: 'View style override' },
+  {
+    id: 'key',
+    title: 'Key Colour',
+    description: 'Background colour in hexadecimal',
+    prefix: '#',
+    type: 'string',
+    placeholder: '00000000 (default)',
+  },
+  {
+    id: 'text',
+    title: 'Text Colour',
+    description: 'Text colour in hexadecimal',
+    prefix: '#',
+    type: 'string',
+    placeholder: 'fffff (default)',
+  },
+  {
+    id: 'textbg',
+    title: 'Text Background',
+    description: 'Colour of text background in hexadecimal',
+    prefix: '#',
+    type: 'string',
+    placeholder: '00000000 (default)',
+  },
+  {
+    id: 'font',
+    title: 'Font',
+    description: 'Font family, will use the fonts available in the system',
+    type: 'string',
+    placeholder: 'Arial Black (default)',
+  },
+  {
+    id: 'size',
+    title: 'Text Size',
+    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
+    type: 'number',
+    placeholder: '1 (default)',
+  },
+  {
+    id: 'alignx',
+    title: 'Align Horizontal',
+    description: 'Moves the horizontally in page to start = left | center | end = right',
+    type: 'option',
+    values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
+  },
+  {
+    id: 'offsetx',
+    title: 'Offset Horizontal',
+    description: 'Offsets the timer horizontal position by a given amount in pixels',
+    type: 'number',
+    placeholder: '0 (default)',
+  },
+  {
+    id: 'aligny',
+    title: 'Align Vertical',
+    description: 'Moves the vertically in page to start = left | center | end = right',
+    type: 'option',
+    values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
+  },
+  {
+    id: 'offsety',
+    title: 'Offset Vertical',
+    description: 'Offsets the timer vertical position by a given amount in pixels',
+    type: 'number',
+    placeholder: '0 (default)',
+  },
+];

apps/client/src/features/viewers/common/viewUtils.ts

@@ -3,6 +3,7 @@ import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND, millisToString, removeLeadingZero
 
 import type { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { timerPlaceholder, timerPlaceholderMin } from '../../../common/utils/styleUtils';
+import { formatTime } from '../../../common/utils/time';
 
 type TimerTypeParams = Pick<ViewExtendedTimer, 'timerType' | 'current' | 'elapsed' | 'clock'>;
 
@@ -53,10 +54,6 @@ export function getPropertyValue(event: OntimeEvent | null, property: MaybeStrin
   return event[property as keyof OntimeEvent] as string;
 }
 
-export function capitaliseFirstLetter(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 type FormattingOptions = {
   removeSeconds: boolean;
   removeLeadingZero: boolean;
@@ -72,11 +69,13 @@ export function getFormattedTimer(
     return options.removeSeconds ? timerPlaceholderMin : timerPlaceholder;
   }
 
-  let timeToParse = timer;
+  if (timerType === TimerType.Clock) {
+    return formatTime(timer);
+  }
 
+  let timeToParse = timer;
   if (options.removeSeconds) {
-    const timerIsTimeOfDay = timerType === TimerType.Clock;
-    const isNegative = timeToParse < -MILLIS_PER_SECOND && !timerIsTimeOfDay && timerType !== TimerType.CountUp;
+    const isNegative = timeToParse < -MILLIS_PER_SECOND && timerType !== TimerType.CountUp;
     if (isNegative) {
       // in negative numbers, we need to round down
       timeToParse -= MILLIS_PER_MINUTE;

apps/client/src/features/viewers/countdown/Countdown.scss

@@ -21,11 +21,11 @@
     flex-direction: column;
 
     &__title {
-      font-size: clamp(24px, 2vw, 32px);
+      font-size: clamp(1.5rem, 2vw, 2rem);
     }
 
     &__events {
-      font-size: clamp(16px, 1.5vw, 24px);
+      font-size: clamp(1rem, 1.5vw, 1.5rem);
       margin-top: 1em;
       overflow-y: auto;
       height: 70vh;
@@ -38,18 +38,18 @@
   .countdown-container {
     height: 100%;
     width: 100%;
-    gap: min(2vh, 16px);
-    padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
+    gap: min(2vh, 1rem);
+    padding: min(2vh, 1rem) clamp(1rem, 10vw, 4rem);
 
     display: grid;
     grid-template-rows: auto auto auto auto 1fr;
     grid-template-columns: 100%;
     grid-template-areas:
-    'header'
-    'status'
-    'clock'
-    'title'
-    'timers';
+      'header'
+      'status'
+      'clock'
+      'title'
+      'timers';
 
     /* =================== HEADER + EXTRAS ===================*/
 
@@ -59,13 +59,13 @@
       font-weight: 600;
 
       .label {
-        font-size: clamp(16px, 1.5vw, 24px);
+        font-size: $timer-label-size;
         color: var(--label-color-override, $viewer-label-color);
         text-transform: uppercase;
       }
 
       .time {
-        font-size: clamp(32px, 3.5vw, 50px);
+        font-size: $timer-value-size;
         color: var(--secondary-color-override, $viewer-secondary-color);
         letter-spacing: 0.05em;
         line-height: 0.95em;
@@ -75,7 +75,7 @@
     .status {
       grid-area: status;
       color: var(--label-color-override, $viewer-label-color);
-      font-size: clamp(32px, 3.5vw, 50px);
+        font-size: clamp(2rem, 3.5vw, 3.5rem);
       font-weight: 600;
     }
 
@@ -105,7 +105,7 @@
     .title {
       grid-area: title;
       background-color: var(--card-background-color-override, $viewer-card-bg-color);
-      padding: 16px 24px;
+      padding: 1rem 1.5rem;
       border-radius: 8px;
 
       font-weight: 600;
@@ -119,28 +119,49 @@
 
     .timer-group {
       grid-area: timers;
-      display: flex;
-      justify-content: space-evenly;
-      align-items: flex-end;
+      display: grid;
+      grid-template-areas:
+        'projected-start projected-end'
+        'scheduled-start scheduled-end';
+      grid-template-columns: 1fr 1fr;
+      justify-items: center;
+      text-align: center;
+      row-gap: clamp(1rem, 5vh, 4rem);
+      
+      align-self: flex-end;
+      height: fit-content;
 
-      .aux-timers {
-        text-align: center;
-        font-size: clamp(24px, 1.75vw, 32px);
+      &__projected-start {
+        grid-area: projected-start;
+      }
 
-        &__label {
-          color: var(--label-color-override, $viewer-label-color);
-          text-transform: uppercase;
-        }
+      &__projected-end {
+        grid-area: projected-end;
+      }
 
-        &__value {
-          font-size: clamp(32px, 3.5vw, 50px);
-          color: var(--secondary-color-override, $viewer-secondary-color);
-          letter-spacing: 0.05em;
-          line-height: 0.95em;
+      &__scheduled-start {
+        grid-area: scheduled-start;
+      }
 
-          &--delayed {
-            color: $delay-color;
-          }
+      &__scheduled-end {
+        grid-area: scheduled-end;
+      }
+
+      &__label {
+        font-size: $timer-label-size;
+        color: var(--label-color-override, $viewer-label-color);
+        text-transform: uppercase;
+      }
+
+      &__value {
+        margin-top: 0.5rem;
+        font-size: $timer-value-size;
+        color: var(--secondary-color-override, $viewer-secondary-color);
+        letter-spacing: 0.05em;
+        line-height: 0.95em;
+
+        &--delayed {
+          color: $delay-color;
         }
       }
     }

apps/client/src/features/viewers/countdown/Countdown.tsx

@@ -1,10 +1,17 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { OntimeEvent, OntimeRundownEntry, Playback, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
-import { millisToString, removeLeadingZero } from 'ontime-utils';
+import {
+  OntimeEvent,
+  OntimeRundownEntry,
+  Playback,
+  Runtime,
+  Settings,
+  SupportedEvent,
+  TimerPhase,
+  ViewSettings,
+} from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/constants';
-import { getCountdownOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
@@ -12,8 +19,10 @@ import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
+import { getFormattedTimer, isStringBoolean } from '../common/viewUtils';
 
-import { fetchTimerData, TimerMessage } from './countdown.helpers';
+import { fetchTimerData, getTimerItems, TimerMessage } from './countdown.helpers';
+import { getCountdownOptions } from './countdown.options';
 import CountdownSelect from './CountdownSelect';
 
 import './Countdown.scss';
@@ -21,27 +30,26 @@ import './Countdown.scss';
 interface CountdownProps {
   isMirrored: boolean;
   backstageEvents: OntimeEvent[];
-  time: ViewExtendedTimer;
+  runtime: Runtime;
   selectedId: string | null;
-  viewSettings: ViewSettings;
   settings: Settings | undefined;
+  time: ViewExtendedTimer;
+  viewSettings: ViewSettings;
 }
 
 export default function Countdown(props: CountdownProps) {
-  const { isMirrored, backstageEvents, time, selectedId, viewSettings, settings } = props;
+  const { isMirrored, backstageEvents, runtime, selectedId, settings, time, viewSettings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
   const { getLocalizedString } = useTranslation();
 
   const [follow, setFollow] = useState<OntimeEvent | null>(null);
-  const [runningTimer, setRunningTimer] = useState(0);
-  const [runningMessage, setRunningMessage] = useState<TimerMessage>(TimerMessage.unhandled);
   const [delay, setDelay] = useState(0);
 
   useWindowTitle('Countdown');
 
   // eg. http://localhost:4001/countdown?eventId=ei0us
-  // Check for user options
+  // update data to the event we are following
   useEffect(() => {
     if (!backstageEvents) {
       return;
@@ -50,6 +58,12 @@ export default function Countdown(props: CountdownProps) {
     const eventId = searchParams.get('eventid');
     const eventIndex = searchParams.get('event');
 
+    // if there is no event selected, we reset the data
+    if (!eventId && !eventIndex) {
+      setFollow(null);
+      return;
+    }
+
     let followThis: OntimeEvent | null = null;
     const events: OntimeEvent[] = [...backstageEvents].filter((event) => event.type === SupportedEvent.Event);
 
@@ -66,49 +80,50 @@ export default function Countdown(props: CountdownProps) {
     }
   }, [backstageEvents, searchParams]);
 
-  useEffect(() => {
-    if (!follow) {
-      return;
-    }
-
-    const { message, timer } = fetchTimerData(time, follow, selectedId);
-    setRunningMessage(message);
-    setRunningTimer(timer);
-  }, [follow, selectedId, time]);
-
   // defer rendering until we load stylesheets
   if (!shouldRender) {
     return null;
   }
 
+  const { message: runningMessage, timer: runningTimer } = fetchTimerData(time, follow, selectedId, runtime.offset);
+
   const standby = time.playback !== Playback.Play && time.playback !== Playback.Roll && selectedId === follow?.id;
-  const finished = time.playback === Playback.Play && (time.current ?? 0) < 0 && time.startedAt;
+  const finished = time.phase === TimerPhase.Overtime;
   const isRunningFinished = finished && runningMessage === TimerMessage.running;
-  const isSelected = runningMessage === TimerMessage.running;
   const delayedTimerStyles = delay > 0 ? 'aux-timers__value--delayed' : '';
 
   const clock = formatTime(time.clock);
-  const startTime = follow === null ? '...' : formatTime(follow.timeStart + delay);
-  const endTime = follow === null ? '...' : formatTime(follow.timeEnd + delay);
+  const { scheduledStart, scheduledEnd, projectedStart, projectedEnd } = getTimerItems(
+    follow?.timeStart,
+    follow?.timeEnd,
+    delay,
+    runtime.offset,
+  );
 
-  const formatTimer = (): string => {
-    if (runningMessage === TimerMessage.ended) {
-      return formatTime(runningTimer, { format12: 'hh:mm a', format24: 'HH:mm' });
+  const hideSeconds = searchParams.get('hideTimerSeconds');
+  const formattedTimer = getFormattedTimer(runningTimer, time.timerType, getLocalizedString('common.minutes'), {
+    removeSeconds: isStringBoolean(hideSeconds),
+    removeLeadingZero: false,
+  });
+
+  const persistParam = () => {
+    const eventId = searchParams.get('eventid');
+    if (eventId !== null) {
+      return { id: 'eventid', value: eventId };
     }
-    let formattedTime = millisToString(isSelected ? runningTimer : runningTimer + delay);
-    if (isSelected || runningMessage === TimerMessage.waiting) {
-      formattedTime = removeLeadingZero(formattedTime);
+    const eventIndex = searchParams.get('event');
+    if (eventIndex !== null) {
+      return { id: 'eventindex', value: eventIndex };
     }
-    return formattedTime;
+    return undefined;
   };
-  const formattedTimer = formatTimer();
 
   const defaultFormat = getDefaultFormat(settings?.timeFormat);
-  const timeOption = getCountdownOptions(defaultFormat);
+  const viewOptions = getCountdownOptions(defaultFormat, persistParam());
 
   return (
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
-      <ViewParamsEditor paramFields={timeOption} />
+      <ViewParamsEditor viewOptions={viewOptions} />
       {follow === null ? (
         <CountdownSelect events={backstageEvents} />
       ) : (
@@ -129,13 +144,25 @@ export default function Countdown(props: CountdownProps) {
           {follow?.title && <div className='title'>{follow.title}</div>}
 
           <div className='timer-group'>
-            <div className='aux-timers'>
-              <div className='aux-timers__label'>{getLocalizedString('common.start_time')}</div>
-              <SuperscriptTime time={startTime} className={`aux-timers__value ${delayedTimerStyles}`} />
+            {projectedStart && projectedEnd && (
+              <div className='timer-group__projected-start'>
+                <div className='timer-group__label'>{getLocalizedString('common.projected_start')}</div>
+                <SuperscriptTime time={projectedStart} className={`timer-group__value ${delayedTimerStyles}`} />
+              </div>
+            )}
+            {projectedStart && projectedEnd && (
+              <div className='timer-group__projected-end'>
+                <div className='timer-group__label'>{getLocalizedString('common.projected_end')}</div>
+                <SuperscriptTime time={projectedEnd} className={`timer-group__value ${delayedTimerStyles}`} />
+              </div>
+            )}
+            <div className='timer-group__scheduled-start'>
+              <div className='timer-group__label'>{getLocalizedString('common.scheduled_start')}</div>
+              <SuperscriptTime time={scheduledStart} className={`timer-group__value ${delayedTimerStyles}`} />
             </div>
-            <div className='aux-timers'>
-              <div className='aux-timers__label'>{getLocalizedString('common.end_time')}</div>
-              <SuperscriptTime time={endTime} className={`aux-timers__value ${delayedTimerStyles}`} />
+            <div className='timer-group__scheduled-end'>
+              <div className='timer-group__label'>{getLocalizedString('common.scheduled_end')}</div>
+              <SuperscriptTime time={scheduledEnd} className={`timer-group__value ${delayedTimerStyles}`} />
             </div>
           </div>
         </div>

apps/client/src/features/viewers/countdown/countdown.helpers.ts

@@ -1,6 +1,8 @@
 import { OntimeEvent, Playback } from 'ontime-types';
 
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
+import { formatTime } from '../../../common/utils/time';
+import { isStringBoolean } from '../common/viewUtils';
 
 export enum TimerMessage {
   toStart = 'to_start',
@@ -20,48 +22,85 @@ export const sanitiseTitle = (title: string | null) => (title ? title : '{no tit
  */
 export const fetchTimerData = (
   time: ViewExtendedTimer,
-  follow: OntimeEvent,
+  follow: OntimeEvent | null,
   selectedId: string | null,
+  offset: number,
 ): { message: TimerMessage; timer: number } => {
-  let message;
-  let timer;
+  if (follow === null) {
+    return { message: TimerMessage.unhandled, timer: 0 };
+  }
 
   if (selectedId === follow.id) {
-    // check that is not running
-    message = time.playback === Playback.Pause ? TimerMessage.waiting : TimerMessage.running;
-    timer = time.current ?? 0;
-  } else if (time.clock < follow.timeStart) {
-    // if it hasnt started, we count to start
-    message = TimerMessage.toStart;
-    timer = follow.timeStart - time.clock;
-  } else if (follow.timeStart <= time.clock && time.clock <= follow.timeEnd) {
-    // if it has started, we show running timer
-    message = TimerMessage.waiting;
-    timer = time.current ?? 0;
-  } else {
-    // running timer timer is not the one we are following
-
-    if (follow.timeStart > follow.timeEnd) {
-      // ends day after
-
-      if (follow.timeStart > time.clock) {
-        // if it hasnt started, we count to start
-        message = TimerMessage.toStart;
-        timer = follow.timeStart - time.clock;
-      } else if (follow.timeStart <= time.clock) {
-        // if it has started, we show running timer
-        message = TimerMessage.waiting;
-        timer = time.current ?? 0;
-      } else {
-        // if it has ended, we show how long ago
-        message = TimerMessage.ended;
-        timer = follow.timeEnd;
-      }
-    } else {
-      // if it has ended, we show how long ago
-      message = TimerMessage.ended;
-      timer = follow.timeEnd;
-    }
+    // if it is selected, it may not be running
+    return {
+      message: time.playback === Playback.Pause ? TimerMessage.waiting : TimerMessage.running,
+      timer: time.current ?? 0,
+    };
   }
-  return { message, timer };
+
+  const showProjected = getShouldShowProjected();
+  const addedTime = showProjected ? offset : 0;
+  if (time.clock < follow.timeStart) {
+    // if it hasnt started, we count to start
+    return { message: TimerMessage.toStart, timer: follow.timeStart - time.clock - addedTime };
+  }
+
+  if (follow.timeStart <= time.clock && time.clock <= follow.timeEnd) {
+    // if it has started, we show running timer
+    return { message: TimerMessage.waiting, timer: time.current ?? 0 };
+  }
+
+  // running timer timer is not the one we are following
+
+  // ends day after
+  if (follow.timeStart > follow.timeEnd) {
+    if (follow.timeStart > time.clock) {
+      // if it hasnt started, we count to start
+      return { message: TimerMessage.toStart, timer: follow.timeStart - time.clock - addedTime };
+    }
+    if (follow.timeStart <= time.clock) {
+      // if it has started, we show running timer
+      return { message: TimerMessage.waiting, timer: time.current ?? 0 };
+    }
+    // if it has ended, we show how long ago
+    return { message: TimerMessage.ended, timer: follow.timeEnd };
+  }
+
+  // if it has ended, we show how long ago
+  return { message: TimerMessage.ended, timer: follow.timeEnd };
 };
+
+/**
+ * Gets values for the timer items
+ */
+export function getTimerItems(start: number | undefined, end: number | undefined, delay: number, offset: number) {
+  if (start == null || end == null) {
+    return {
+      scheduledStart: '',
+      scheduledEnd: '',
+      projectedStart: '',
+      projectedEnd: '',
+    };
+  }
+
+  const showProjected = getShouldShowProjected();
+  const scheduledStart = formatTime(start + delay);
+  const scheduledEnd = formatTime(end + delay);
+  const projectedStart = showProjected ? formatTime(start + delay - offset) : '';
+  const projectedEnd = showProjected ? formatTime(end + delay - offset) : '';
+
+  return {
+    scheduledStart,
+    scheduledEnd,
+    projectedStart,
+    projectedEnd,
+  };
+}
+
+/**
+ * Gets from the URL whether the showProjected option is active
+ */
+function getShouldShowProjected() {
+  const params = new URL(document.location.href).searchParams;
+  return isStringBoolean(params.get('showProjected'));
+}

apps/client/src/features/viewers/countdown/countdown.options.ts

@@ -0,0 +1,29 @@
+import { getTimeOption, hideTimerSeconds } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+const makePersistedField = (id: string, value: string): ViewOption => {
+  return {
+    id,
+    title: 'Used to keep the selection on submit',
+    description: 'Used to keep the selection on submit',
+    type: 'persist',
+    value,
+  };
+};
+
+type Persisted = { id: string; value: string };
+export const getCountdownOptions = (timeFormat: string, persisted?: Persisted): ViewOption[] => [
+  { section: 'Clock Options' },
+  getTimeOption(timeFormat),
+  { section: 'Timer Options' },
+  hideTimerSeconds,
+  { section: 'View behaviour' },
+  {
+    id: 'showProjected',
+    title: 'Show projected time',
+    description: 'Show projected times for the event, as well as apply the runtime offset to the timer.',
+    type: 'boolean',
+    defaultValue: false,
+  },
+  ...(persisted ? [makePersistedField(persisted.id, persisted.value)] : []),
+];

apps/client/src/features/viewers/lower-thirds/LowerThird.scss

@@ -72,6 +72,8 @@
       font-family: var(--lowerThird-font-family-override), Lato, Arial, sans-serif;
       text-align: var(--lowerThird-text-align-override, left);
       white-space: nowrap;
+      @include ellipsis-text();
+      
       &::after {
         content: '\200b';
       }

apps/client/src/features/viewers/lower-thirds/LowerThird.tsx

@@ -3,12 +3,13 @@ import { useSearchParams } from 'react-router-dom';
 import { CustomFields, OntimeEvent, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/constants';
-import { getLowerThirdOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { getPropertyValue } from '../common/viewUtils';
 
+import { getLowerThirdOptions } from './lowerThird.options';
+
 import './LowerThird.scss';
 
 type LowerOptions = {
@@ -182,7 +183,7 @@ export default function LowerThird(props: LowerProps) {
 
   return (
     <div className='lower-third' style={{ backgroundColor: `#${options.key}` }}>
-      <ViewParamsEditor paramFields={getLowerThirdOptions(customFields)} />
+      <ViewParamsEditor viewOptions={getLowerThirdOptions(customFields)} />
       <div
         className={`container container--${playState}`}
         style={{ minWidth: `${options.width}vw`, animationDuration: transition }}

apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts

@@ -0,0 +1,132 @@
+import { CustomFields } from 'ontime-types';
+
+import { makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] => {
+  const topSourceOptions = makeOptionsFromCustomFields(customFields, {
+    title: 'Title',
+  });
+
+  const bottomSourceOptions = makeOptionsFromCustomFields(customFields, {
+    title: 'Title',
+    none: 'None',
+  });
+
+  return [
+    { section: 'View behaviour' },
+    {
+      id: 'trigger',
+      title: 'Animation Trigger',
+      description: '',
+      type: 'option',
+      values: {
+        event: 'Event Load',
+        manual: 'Manual',
+      },
+      defaultValue: 'manual',
+    },
+    { section: 'Data sources' },
+    {
+      id: 'top-src',
+      title: 'Top Text',
+      description: '',
+      type: 'option',
+      values: topSourceOptions,
+      defaultValue: 'title',
+    },
+    {
+      id: 'bottom-src',
+      title: 'Bottom Text',
+      description: 'Select the data source for the bottom element',
+      type: 'option',
+      values: bottomSourceOptions,
+      defaultValue: 'none',
+    },
+    { section: 'View style override' },
+    {
+      id: 'top-colour',
+      title: 'Top Text Colour',
+      description: 'Top text colour in hexadecimal',
+      prefix: '#',
+      type: 'string',
+      placeholder: '0000ff (default)',
+    },
+    {
+      id: 'bottom-colour',
+      title: 'Bottom Text Colour',
+      description: 'Bottom text colour in hexadecimal',
+      prefix: '#',
+      type: 'string',
+      placeholder: '0000ff (default)',
+    },
+    {
+      id: 'top-bg',
+      title: 'Top Background Colour',
+      description: 'Top text background colour in hexadecimal',
+      prefix: '#',
+      type: 'string',
+      placeholder: '00000000 (default)',
+    },
+    {
+      id: 'bottom-bg',
+      title: 'Bottom Background Colour',
+      description: 'Bottom text background colour in hexadecimal',
+      prefix: '#',
+      type: 'string',
+      placeholder: '00000000 (default)',
+    },
+    {
+      id: 'top-size',
+      title: 'Top Text Size',
+      description: 'Font size of the top text',
+      type: 'string',
+      placeholder: '65px',
+    },
+    {
+      id: 'bottom-size',
+      title: 'Bottom Text Size',
+      description: 'Font size of the bottom text',
+      type: 'string',
+      placeholder: '64px',
+    },
+    {
+      id: 'width',
+      title: 'Minimum Width',
+      description: 'Minimum Width of the element',
+      type: 'number',
+      prefix: '%',
+      placeholder: '45 (default)',
+    },
+    {
+      id: 'transition',
+      title: 'Transition',
+      description: 'Transition in time in seconds (default 3)',
+      type: 'number',
+      placeholder: '3 (default)',
+    },
+    {
+      id: 'delay',
+      title: 'Delay',
+      description: 'Delay between transition in and out in seconds (default 3)',
+      type: 'number',
+      placeholder: '3 (default)',
+    },
+    {
+      id: 'key',
+      title: 'Key Colour',
+      description: 'Colour of the background',
+      prefix: '#',
+      type: 'string',
+      placeholder: 'ffffffff (default)',
+    },
+    {
+      id: 'line-colour',
+      title: 'Line Colour',
+      description: 'Colour of the line',
+      prefix: '#',
+      type: 'string',
+      placeholder: 'ff0000ff (default)',
+    },
+  ];
+};

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -2,7 +2,6 @@ import { useSearchParams } from 'react-router-dom';
 import { Playback, TimerPhase, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/constants';
-import { MINIMAL_TIMER_OPTIONS } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
@@ -11,6 +10,8 @@ import { OverridableOptions } from '../../../common/models/View.types';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import { getFormattedTimer, getTimerByType, isStringBoolean } from '../common/viewUtils';
 
+import { MINIMAL_TIMER_OPTIONS } from './minimalTimer.options';
+
 import './MinimalTimer.scss';
 
 interface MinimalTimerProps {
@@ -161,7 +162,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
       }}
       data-testid='minimal-timer'
     >
-      <ViewParamsEditor paramFields={MINIMAL_TIMER_OPTIONS} />
+      <ViewParamsEditor viewOptions={MINIMAL_TIMER_OPTIONS} />
       {showEndMessage ? (
         <div className='end-message'>{viewSettings.endMessage}</div>
       ) : (

apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts

@@ -0,0 +1,91 @@
+import { hideTimerSeconds } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const MINIMAL_TIMER_OPTIONS: ViewOption[] = [
+  { section: 'Timer Options' },
+  hideTimerSeconds,
+  { section: 'Element visibility' },
+  {
+    id: 'hideovertime',
+    title: 'Hide Overtime',
+    description: 'Whether to suppress overtime styles (red borders and red text)',
+    type: 'boolean',
+    defaultValue: false,
+  },
+  {
+    id: 'hideendmessage',
+    title: 'Hide End Message',
+    description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
+    type: 'boolean',
+    defaultValue: false,
+  },
+  { section: 'View style override' },
+  {
+    id: 'key',
+    title: 'Key Colour',
+    description: 'Background colour in hexadecimal',
+    prefix: '#',
+    type: 'string',
+    placeholder: '00000000 (default)',
+  },
+  {
+    id: 'text',
+    title: 'Text Colour',
+    description: 'Text colour in hexadecimal',
+    prefix: '#',
+    type: 'string',
+    placeholder: 'fffff (default)',
+  },
+  {
+    id: 'textbg',
+    title: 'Text Background',
+    description: 'Colour of text background in hexadecimal',
+    prefix: '#',
+    type: 'string',
+    placeholder: '00000000 (default)',
+  },
+  {
+    id: 'font',
+    title: 'Font',
+    description: 'Font family, will use the fonts available in the system',
+    type: 'string',
+    placeholder: 'Arial Black (default)',
+  },
+  {
+    id: 'size',
+    title: 'Text Size',
+    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
+    type: 'number',
+    placeholder: '1 (default)',
+  },
+  {
+    id: 'alignx',
+    title: 'Align Horizontal',
+    description: 'Moves the horizontally in page to start = left | center | end = right',
+    type: 'option',
+    values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
+  },
+  {
+    id: 'offsetx',
+    title: 'Offset Horizontal',
+    description: 'Offsets the timer horizontal position by a given amount in pixels',
+    type: 'number',
+    placeholder: '0 (default)',
+  },
+  {
+    id: 'aligny',
+    title: 'Align Vertical',
+    description: 'Moves the vertically in page to start = left | center | end = right',
+    type: 'option',
+    values: { start: 'Start', center: 'Center', end: 'End' },
+    defaultValue: 'center',
+  },
+  {
+    id: 'offsety',
+    title: 'Offset Vertical',
+    description: 'Offsets the timer vertical position by a given amount in pixels',
+    type: 'number',
+    placeholder: '0 (default)',
+  },
+];

apps/client/src/features/viewers/public/Public.scss

@@ -43,7 +43,7 @@
 
     .time {
       font-size: clamp(32px, 3.5vw, 50px);
-      font-weight: 600;
+      color: var(--secondary-color-override, $viewer-secondary-color);
       letter-spacing: 0.05em;
       line-height: 0.95em;
     }

apps/client/src/features/viewers/public/Public.tsx

@@ -8,7 +8,6 @@ import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-import { getPublicOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
@@ -19,8 +18,12 @@ import { titleVariants } from '../common/animation';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getPropertyValue } from '../common/viewUtils';
 
+import { getPublicOptions } from './public.options';
+
 import './Public.scss';
 
+export const MotionTitleCard = motion(TitleCard);
+
 interface BackstageProps {
   customFields: CustomFields;
   isMirrored: boolean;
@@ -71,7 +74,7 @@ export default function Public(props: BackstageProps) {
 
   return (
     <div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
-      <ViewParamsEditor paramFields={publicOptions} />
+      <ViewParamsEditor viewOptions={publicOptions} />
       <div className='project-header'>
         {general.title}
         <div className='clock-container'>
@@ -83,31 +86,33 @@ export default function Public(props: BackstageProps) {
       <div className='now-container'>
         <AnimatePresence>
           {publicEventNow && (
-            <motion.div
+            <MotionTitleCard
               className='event now'
               key='now'
               variants={titleVariants}
               initial='hidden'
               animate='visible'
               exit='exit'
-            >
-              <TitleCard label='now' title={publicEventNow.title} secondary={secondaryTextNow} />
-            </motion.div>
+              label='now'
+              title={publicEventNow.title}
+              secondary={secondaryTextNow}
+            />
           )}
         </AnimatePresence>
 
         <AnimatePresence>
           {publicEventNext && (
-            <motion.div
+            <MotionTitleCard
               className='event next'
               key='next'
               variants={titleVariants}
               initial='hidden'
               animate='visible'
               exit='exit'
-            >
-              <TitleCard label='next' title={publicEventNext.title} secondary={secondaryTextNext} />
-            </motion.div>
+              label='next'
+              title={publicEventNext.title}
+              secondary={secondaryTextNext}
+            />
           )}
         </AnimatePresence>
       </div>

apps/client/src/features/viewers/public/public.options.ts

@@ -0,0 +1,44 @@
+import { CustomFields } from 'ontime-types';
+
+import { getTimeOption, makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const getPublicOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
+  const secondaryOptions = makeOptionsFromCustomFields(customFields);
+
+  return [
+    { section: 'Clock Options' },
+    getTimeOption(timeFormat),
+    { section: 'Data sources' },
+    {
+      id: 'secondary-src',
+      title: 'Event secondary text',
+      description: 'Select the data source for auxiliary text shown in now and next cards',
+      type: 'option',
+      values: secondaryOptions,
+      defaultValue: '',
+    },
+    { section: 'Schedule options' },
+    {
+      id: 'eventsPerPage',
+      title: 'Events per page',
+      description: 'Sets the number of events on the page, can cause overflow',
+      type: 'number',
+      placeholder: '8 (default)',
+    },
+    {
+      id: 'hidePast',
+      title: 'Hide past events',
+      description: 'Scheduler will only show upcoming events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'stopCycle',
+      title: 'Stop cycling through event pages',
+      description: 'Schedule will not auto-cycle through events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ];
+};

apps/client/src/features/viewers/studio/StudioClock.scss

@@ -168,7 +168,6 @@ $orange-active: #f60;
     display: flex;
     align-items: start;
     gap: 0.5em;
-    white-space: nowrap;
 
     &--now {
       color: var(--studio-active-label, $red-active);

apps/client/src/features/viewers/studio/StudioClock.tsx

@@ -4,7 +4,6 @@ import { isOntimeEvent, Playback } from 'ontime-types';
 import { millisToString, removeSeconds } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/constants';
-import { getStudioClockOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import useFitText from '../../../common/hooks/useFitText';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
@@ -14,6 +13,7 @@ import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { isStringBoolean } from '../common/viewUtils';
 
+import { getStudioClockOptions } from './studioClock.options';
 import { secondsInMillis, trimRundown } from './studioClock.utils';
 
 import './StudioClock.scss';
@@ -36,7 +36,7 @@ export default function StudioClock(props: StudioClockProps) {
   // TODO: can we prevent the Flash of Unstyled Content on the 7segment fonts?
   // deferring rendering seems to affect styling (font and useFitText)
   useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
-  const { fontSize: titleFontSize, ref: titleRef } = useFitText({ maxFontSize: 500 });
+  const { fontSize: titleFontSize, ref: titleRef } = useFitText({ minFontSize: 150, maxFontSize: 500 });
 
   const activeIndicators = [...Array(12).keys()];
   const secondsIndicators = [...Array(60).keys()];
@@ -75,7 +75,7 @@ export default function StudioClock(props: StudioClockProps) {
 
   return (
     <div className={`studio-clock ${isMirrored ? 'mirror' : ''}`} data-testid='studio-view'>
-      <ViewParamsEditor paramFields={studioClockOptions} />
+      <ViewParamsEditor viewOptions={studioClockOptions} />
       <div className='clock-container'>
         {hasAmPm && <div className='clock__ampm'>{hasAmPm}</div>}
         <div className={`studio-timer ${!hideSeconds ? 'studio-timer--with-seconds' : ''}`}>{clock}</div>

apps/client/src/features/viewers/studio/studioClock.options.ts

@@ -0,0 +1,9 @@
+import { getTimeOption, hideTimerSeconds } from '../../../common/components/view-params-editor/constants';
+import type { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const getStudioClockOptions = (timeFormat: string): ViewOption[] => [
+  { section: 'Clock Options' },
+  getTimeOption(timeFormat),
+  { section: 'Timer Options' },
+  hideTimerSeconds,
+];

apps/client/src/features/viewers/timer/Timer.scss

@@ -15,7 +15,7 @@
   padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
 
   display: grid;
-  grid-template-columns: auto;
+  grid-template-columns: 100%;
   grid-template-rows: auto 1fr auto auto auto;
   grid-template-areas:
     'clock'

apps/client/src/features/viewers/timer/Timer.tsx

@@ -15,7 +15,6 @@ import {
 import { overrideStylesURL } from '../../../common/api/constants';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
 import TitleCard from '../../../common/components/title-card/TitleCard';
-import { getTimerOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
@@ -25,6 +24,8 @@ import { useTranslation } from '../../../translation/TranslationProvider';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import { getFormattedTimer, getPropertyValue, getTimerByType, isStringBoolean } from '../common/viewUtils';
 
+import { getTimerOptions } from './timer.options';
+
 import './Timer.scss';
 
 // motion
@@ -43,6 +44,8 @@ const titleVariants = {
   },
 };
 
+export const MotionTitleCard = motion(TitleCard);
+
 interface TimerProps {
   customFields: CustomFields;
   eventNext: OntimeEvent | null;
@@ -106,6 +109,10 @@ export default function Timer(props: TimerProps) {
   const secondaryTextNow = getPropertyValue(eventNow, secondarySource);
   const secondaryTextNext = getPropertyValue(eventNext, secondarySource);
 
+  const main = searchParams.get('main');
+  const mainFieldNow = (main ? getPropertyValue(eventNow, main) : eventNow?.title) ?? '';
+  const mainFieldNext = (main ? getPropertyValue(eventNext, main) : eventNext?.title) ?? '';
+
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playback !== Playback.Pause;
 
@@ -152,7 +159,7 @@ export default function Timer(props: TimerProps) {
 
   return (
     <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
-      <ViewParamsEditor paramFields={timerOptions} />
+      <ViewParamsEditor viewOptions={timerOptions} />
       <div className={showBlackout ? 'blackout blackout--active' : 'blackout'} />
       {!userOptions.hideMessage && (
         <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
@@ -207,31 +214,33 @@ export default function Timer(props: TimerProps) {
         <>
           <AnimatePresence>
             {eventNow?.title && (
-              <motion.div
+              <MotionTitleCard
                 className='event now'
                 key='now'
                 variants={titleVariants}
                 initial='hidden'
                 animate='visible'
                 exit='exit'
-              >
-                <TitleCard label='now' title={eventNow.title} secondary={secondaryTextNow} />
-              </motion.div>
+                label='now'
+                title={mainFieldNow}
+                secondary={secondaryTextNow}
+              />
             )}
           </AnimatePresence>
 
           <AnimatePresence>
             {eventNext?.title && (
-              <motion.div
-                className='event next'
+              <MotionTitleCard
                 key='next'
                 variants={titleVariants}
                 initial='hidden'
                 animate='visible'
                 exit='exit'
-              >
-                <TitleCard label='next' title={eventNext.title} secondary={secondaryTextNext} />
-              </motion.div>
+                label='next'
+                title={mainFieldNext}
+                secondary={secondaryTextNext}
+                className='event next'
+              />
             )}
           </AnimatePresence>
         </>

apps/client/src/features/viewers/timer/timer.options.ts

@@ -0,0 +1,74 @@
+import { CustomFields } from 'ontime-types';
+
+import {
+  getTimeOption,
+  hideTimerSeconds,
+  makeOptionsFromCustomFields,
+  showLeadingZeros,
+} from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+
+export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
+  const mainOptions = makeOptionsFromCustomFields(customFields, { title: 'Title' });
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
+  return [
+    { section: 'Clock Options' },
+    getTimeOption(timeFormat),
+    { section: 'Timer Options' },
+    hideTimerSeconds,
+    showLeadingZeros,
+    { section: 'Data sources' },
+    {
+      id: 'main',
+      title: 'Main text',
+      description: 'Select the data source for the main text',
+      type: 'option',
+      values: mainOptions,
+      defaultValue: 'Title',
+    },
+    {
+      id: 'secondary-src',
+      title: 'Secondary text',
+      description: 'Select the data source for the secondary text',
+      type: 'option',
+      values: secondaryOptions,
+      defaultValue: '',
+    },
+    { section: 'Element visibility' },
+    {
+      id: 'hideClock',
+      title: 'Hide Time Now',
+      description: 'Hides the Time Now field',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'hideCards',
+      title: 'Hide Cards',
+      description: 'Hides the Now and Next cards',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'hideProgress',
+      title: 'Hide progress bar',
+      description: 'Hides the progress bar',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'hideMessage',
+      title: 'Hide Presenter Message',
+      description: 'Prevents the screen from displaying messages from the presenter',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'hideExternal',
+      title: 'Hide External',
+      description: 'Prevents the screen from displaying the external field',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ];
+};