bump version to alpha release

feat: progress view
2026-08-04 06:58:02 +00:00 · 2024-06-24 21:58:50 +02:00 · 2024-06-22 20:16:09 +02:00
148 changed files with 8115 additions and 10057 deletions
@@ -14,12 +14,12 @@ jobs:
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: 18.18.2

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 9
+          version: 8

      - 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: 20
+          node-version: 18.18.2

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 9
+          version: 8

      - 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: 20
+          node-version: 18.18.2

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 9
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -1,8 +1,8 @@
 name: Ontime CLI build

 on:
-  release:
-    types: [published]
+  push:
+    tags: [ "*" ]
  workflow_dispatch:

 jobs:
@@ -20,13 +20,13 @@ jobs:
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: 18.18.2
          registry-url: 'https://registry.npmjs.org'

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 9
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -1,8 +1,8 @@
 name: Docker Image CI Ontime

 on:
-  release:
-    types: [published]
+  push:
+    tags: [ "*" ]
  workflow_dispatch:

 jobs:
@@ -14,6 +14,8 @@ 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
@@ -30,10 +32,10 @@ jobs:
      with:
        context: .
        file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7
+        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
        # Push is a shorthand for --output=type=registry
        push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest

    - name: Build and push pre-release
      if: github.event.release.prerelease == true
@@ -41,8 +43,8 @@ jobs:
      with:
        context: .
        file: ./Dockerfile
-        platforms: linux/amd64,linux/arm64,linux/arm/v7
+        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
        # Push is a shorthand for --output=type=registry
        push: true
-        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly

@@ -17,12 +17,12 @@ jobs:
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: 18.18.2

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 9
+          version: 8

      - 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: 20
+          node-version: 18.18.2

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 9
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -1 +1 @@
-v20.15.1
+v18.18.2
@@ -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__ (~20)
- __pnpm__ (~9)
+- __node__ (~18.18.2)
+- __pnpm__ (>=8)
 - __docker__ (only necessary to run and build docker images)

 ## LOCAL DEVELOPMENT
@@ -1,19 +1,19 @@
-FROM node:20-bullseye AS builder
+FROM node:18.18-alpine AS builder
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install -g pnpm@9.5.0
+RUN corepack enable
 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:20-alpine
+FROM node:18.18-alpine

 # Set environment variables
 # Environment Variable to signal that we are running production
 ENV NODE_ENV=docker
 # Ontime Data path
-ENV ONTIME_DATA=/data/
+ENV ONTIME_DATA=/external/

 WORKDIR /app/

@@ -1,7 +1,6 @@
 [![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)

@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "3.4.0",
+    "version": "3.4.0-alpha-timeline.2",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "3.4.0",
+  "version": "3.4.0-alpha-timeline.2",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -70,8 +70,8 @@
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^v7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
+    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
@@ -86,7 +86,7 @@
    "ontime-utils": "workspace:*",
    "prettier": "^3.3.1",
    "sass": "^1.57.1",
-    "typescript": "^5.5.3",
+    "typescript": "^5.4.3",
    "vite": "^5.2.11",
    "vite-plugin-compression2": "^0.12.0",
    "vite-plugin-svgr": "^4.2.0",
@@ -17,6 +17,7 @@ const Countdown = lazy(() => import('./features/viewers/countdown/Countdown'));

 const Backstage = lazy(() => import('./features/viewers/backstage/Backstage'));
 const Public = lazy(() => import('./features/viewers/public/Public'));
+const Timeline = lazy(() => import('./features/timeline/TimelinePage'));
 const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
 const StudioClock = lazy(() => import('./features/viewers/studio/StudioClock'));

@@ -26,6 +27,7 @@ const SClock = withPreset(withData(ClockView));
 const SCountdown = withPreset(withData(Countdown));
 const SBackstage = withPreset(withData(Backstage));
 const SPublic = withPreset(withData(Public));
+const STimeline = withPreset(withData(Timeline));
 const SLowerThird = withPreset(withData(Lower));
 const SStudio = withPreset(withData(StudioClock));

@@ -60,6 +62,8 @@ export default function AppRouter() {

        <Route path='/op' element={<Operator />} />

+        <Route path='/timeline' element={<STimeline />} />
+
        {/*/!* Protected Routes *!/*/}
        <Route path='/editor' element={<Editor />} />
        <Route path='/cuesheet' element={<Cuesheet />} />
@@ -123,7 +123,7 @@ export async function renameProject(filename: string, newFilename: string): Prom
  const url = `${dbPath}/${filename}/rename`;
  const decodedUrl = decodeURIComponent(url);
  const res = await axios.put(decodedUrl, {
-    newFilename,
+    filename: newFilename,
  });
  return res.data;
 }
@@ -1,37 +1,25 @@
@use '../../../theme/viewerDefs' as *;

 .title-card {
-  position: relative;
  display: flex;
  flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.5rem;
 }

-.title-card__title,
-.title-card__secondary {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.inline {
+  display: flex;
 }

 .title-card__title {
  font-weight: 600;
-  font-size: clamp(1.5rem, 3vw, 3rem);
+  font-size: clamp(32px, 3.5vw, 50px);
  color: var(--color-override, $viewer-color);
-  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;
+  line-height: 1.1em;
 }

 .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;
@@ -40,3 +28,13 @@
    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';
+  }
+}
@@ -1,32 +1,28 @@
-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;
 }

-const TitleCard = forwardRef((props: TitleCardProps, ref: ForwardedRef<HTMLDivElement>) => {
-  const { label, title, secondary, className = '' } = props;
+export default function TitleCard(props: TitleCardProps) {
+  const { label, title, secondary } = props;
  const { getLocalizedString } = useTranslation();

  const accent = label === 'now';

  return (
-    <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'>
+      <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__secondary'>{secondary}</div>
    </div>
  );
-});
-
-TitleCard.displayName = 'TitleCard';
-export default TitleCard;
+}
@@ -27,10 +27,6 @@ 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;
@@ -13,24 +13,14 @@
  color: $label-gray;
  display: flex;
  flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.25rem
 }

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

 .title {
@@ -13,7 +13,7 @@ import {
 } from '@chakra-ui/react';

 import ParamInput from './ParamInput';
-import { isSection, ViewOption } from './types';
+import { ParamField } from './types';

 import style from './ViewParamsEditor.module.scss';

@@ -22,36 +22,26 @@ type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
 /**
 * Makes a new URLSearchParams object from the given params object
 */
-const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOption[]) => {
-  const newSearchParams = new URLSearchParams();
+const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
+  const defaultValues = paramFields.reduce<Record<string, string>>((acc, { id, defaultValue }) => {
+    acc[id] = String(defaultValue);
+    return acc;
+  }, {});

-  // 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]) => {
+  return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
    if (typeof value === 'string' && value.length && defaultValues[id] !== value) {
      newSearchParams.set(id, value);
    }
-  });
-  return newSearchParams;
+    return newSearchParams;
+  }, new URLSearchParams());
 };

 interface EditFormDrawerProps {
-  viewOptions: ViewOption[];
+  paramFields: ParamField[];
 }

-export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
+// TODO: this is a good candidate for memoisation, but needs the paramFields to be stable
+export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
  const [searchParams, setSearchParams] = useSearchParams();
  const { isOpen, onClose, onOpen } = useDisclosure();

@@ -79,7 +69,7 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
    formEvent.preventDefault();

    const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
-    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
+    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
    setSearchParams(newSearchParams);

    onClose();
@@ -96,29 +86,15 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {

        <DrawerBody>
          <form id='edit-params-form' onSubmit={onParamsFormSubmit}>
-            {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>
-              );
-            })}
+            {paramFields.map((field) => (
+              <div key={field.title} className={style.columnSection}>
+                <label className={style.label}>
+                  <span className={style.title}>{field.title}</span>
+                  <span className={style.description}>{field.description}</span>
+                  <ParamInput key={field.title} paramField={field} />
+                </label>
+              </div>
+            ))}
          </form>
        </DrawerBody>

@@ -1,18 +1,15 @@
 import { CustomFields } from 'ontime-types';

-import type { ParamField } from './types';
+import { type ParamField } from './types';

-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 makeOptionsFromCustomFields = (customFields: CustomFields, additionalOptions?: Record<string, string>) => {
+  const customFieldOptions = Object.entries(customFields).reduce((acc, [key, value]) => {
+    return { ...acc, [`custom-${key}`]: `Custom: ${value.label}` };
+  }, additionalOptions ?? {});
+  return customFieldOptions;
 };

-export const getTimeOption = (timeFormat: string): ParamField => {
+const getTimeOption = (timeFormat: string): ParamField => {
  const placeholder = `${timeFormat} (default)`;
  return {
    id: 'timeformat',
@@ -23,7 +20,7 @@ export const getTimeOption = (timeFormat: string): ParamField => {
  };
 };

-export const hideTimerSeconds: ParamField = {
+const hideTimerSeconds: ParamField = {
  id: 'hideTimerSeconds',
  title: 'Hide seconds in timer',
  description: 'Whether to hide seconds in the running timer',
@@ -31,10 +28,497 @@ export const hideTimerSeconds: ParamField = {
  defaultValue: false,
 };

-export const showLeadingZeros: ParamField = {
+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 mainOptions = makeOptionsFromCustomFields(customFields, { title: 'Title' });
+  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: '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: '',
+    },
+    {
+      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.entries(customFields).reduce((acc, [key, field]) => {
+    return { ...acc, [key]: { value: key, label: field.label, colour: field.colour } };
+  }, {});
+
+  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: 'multi-option',
+      values: customFieldSelect,
+    },
+    {
+      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];
+
+export const getProgressOptions = (timeFormat: string): ParamField[] => {
+  return [
+    getTimeOption(timeFormat),
+    {
+      id: 'fullHeight',
+      title: 'Full height columns',
+      description: 'Whether the columns in the timeline should be the full height ',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ];
+};
@@ -1,7 +1,3 @@
-type ParamSection = {
-  section: string;
-};
-
 type BaseField = {
  id: string;
  title: string;
@@ -23,15 +19,5 @@ type MultiOptionsField = {
 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 | 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;
-}
+export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField | MultiOptionsField);
@@ -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.Timeout>();
+  const timerId = useRef<NodeJS.Timer>();

  return useMemo(() => {
    const start = (event: SyntheticEvent) => {
@@ -24,6 +24,19 @@ export const getAccessibleColour = (bgColour?: string): ColourCombination => {
  return { backgroundColor: '#1a1a1a', color: '#fffffa' };
 };

+/**
+ * Adds opacity to a given colour, returns undefined if invalid
+ */
+export function alpha(colour: string, amount: number): string | undefined {
+  try {
+    const withAlpha = Color(colour).alpha(amount).hexa();
+    return withAlpha;
+  } catch (_error) {
+    /* we do not handle errors here */
+  }
+  return;
+}
+
 /**
 * @description Creates a list of classnames from array of css module conditions
 * @param classNames - css modules objects
@@ -95,3 +95,25 @@ export const formatTime = (
  const isNegative = milliseconds < 0;
  return `${isNegative ? '-' : ''}${display}`;
 };
+
+/**
+ * Handles case for formatting a duration time
+ * @param duration
+ * @returns
+ */
+export function formatDuration(duration: number): string {
+  if (duration === 0) {
+    return '0h 0m';
+  }
+
+  const hours = Math.floor(duration / 3600000);
+  const minutes = Math.floor((duration % 3600000) / 60000);
+  let result = '';
+  if (hours > 0) {
+    result += `${hours}h `;
+  }
+  if (minutes > 0) {
+    result += `${minutes}m`;
+  }
+  return result;
+}
@@ -17,7 +17,7 @@ export default function LogExport() {
    <Panel.Section>
      <Panel.Card>
        <Panel.SubHeader>
-          Event log
+          Network log
          <Button
            variant='ontime-subtle'
            size='sm'
@@ -2,6 +2,8 @@ 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 = {
@@ -13,9 +15,10 @@ interface ProjectFormProps {
  filename: string;
  onCancel: () => void;
  onSubmit: (values: ProjectFormValues) => Promise<void>;
+  submitError: string | null;
 }

-export default function ProjectForm({ action, filename, onSubmit, onCancel }: ProjectFormProps) {
+export default function ProjectForm({ action, filename, onSubmit, onCancel, submitError }: ProjectFormProps) {
  const {
    handleSubmit,
    register,
@@ -34,31 +37,34 @@ export default function ProjectForm({ action, filename, onSubmit, onCancel }: Pr
  }, [setFocus]);

  return (
-    <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
+    <>
+      <form onSubmit={handleSubmit(onSubmit)} className={style.form}>
+        <Input
+          className={style.formInput}
+          id='filename'
          size='sm'
+          type='text'
          variant='ontime-filled'
-          isDisabled={!isDirty || !isValid || isSubmitting}
-          type='submit'
-          className={style.saveButton}
-        >
-          {action}
-        </Button>
-      </div>
-    </form>
+          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>}
+    </>
  );
 }
@@ -11,7 +11,6 @@ import {
  renameProject,
 } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
-import * as Panel from '../PanelUtils';

 import ProjectForm, { ProjectFormValues } from './ProjectForm';

@@ -41,53 +40,36 @@ export default function ProjectListItem({
  onToggleEditMode,
 }: ProjectListItemProps) {
  const [submitError, setSubmitError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);

-  const handleSubmitAction = (actionType: 'rename' | 'duplicate') => {
-    return async (values: ProjectFormValues) => {
-      setLoading(true);
-      setSubmitError(null);
-      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);
-      }
-    };
-  };
-
-  const handleLoad = async (filename: string) => {
-    setLoading(true);
-    setSubmitError(null);
+  const handleSubmitRename = async (values: ProjectFormValues) => {
    try {
-      await loadProject(filename);
+      setSubmitError(null);
+
+      if (!values.filename) {
+        setSubmitError('Filename cannot be blank');
+        return;
+      }
+      await renameProject(filename, values.filename);
      await onRefetch();
-      await invalidateAllCaches();
+      onSubmit();
    } catch (error) {
      setSubmitError(maybeAxiosError(error));
-    } finally {
-      setLoading(false);
    }
  };

-  const handleDelete = async (filename: string) => {
-    setLoading(true);
-    setSubmitError(null);
+  const handleSubmitDuplicate = async (values: ProjectFormValues) => {
    try {
-      await deleteProject(filename);
+      setSubmitError(null);
+
+      if (!values.filename) {
+        setSubmitError('Filename cannot be blank');
+        return;
+      }
+      await duplicateProject(filename, values.filename);
      await onRefetch();
+      onSubmit();
    } catch (error) {
      setSubmitError(maybeAxiosError(error));
-    } finally {
-      setLoading(false);
    }
  };

@@ -104,55 +86,50 @@ export default function ProjectListItem({
  const classes = current && !isCurrentlyBeingEdited ? style.current : undefined;

  return (
-    <>
-      {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}
+    <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}
              filename={filename}
-              onSubmit={editingMode === 'duplicate' ? handleSubmitAction('duplicate') : handleSubmitAction('rename')}
-              onCancel={handleCancel}
+              onChangeEditMode={handleToggleEditMode}
+              onRefetch={onRefetch}
            />
          </td>
-        ) : (
-          <>
-            <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>
-    </>
+        </>
+      )}
+    </tr>
  );
 }

-interface ActionMenuProps {
+function ActionMenu({
+  current,
+  filename,
+  onChangeEditMode,
+  onRefetch,
+}: {
  current?: boolean;
  filename: string;
-  isDisabled: boolean;
  onChangeEditMode: (editMode: EditMode, filename: string) => void;
-  onDelete: (filename: string) => void;
-  onLoad: (filename: string) => void;
-}
-function ActionMenu(props: ActionMenuProps) {
-  const { current, filename, isDisabled, onChangeEditMode, onDelete, onLoad } = props;
+  onRefetch: () => Promise<void>;
+}) {
+  const handleLoad = async () => {
+    await loadProject(filename);
+    await invalidateAllCaches();
+  };

  const handleRename = () => {
    onChangeEditMode('rename', filename);
@@ -162,6 +139,11 @@ function ActionMenu(props: ActionMenuProps) {
    onChangeEditMode('duplicate', filename);
  };

+  const handleDelete = async () => {
+    await deleteProject(filename);
+    await onRefetch();
+  };
+
  const handleDownload = async () => {
    await downloadProject(filename);
  };
@@ -179,17 +161,16 @@ function ActionMenu(props: ActionMenuProps) {
        color='#e2e2e2' // $gray-200
        variant='ontime-ghosted'
        size='sm'
-        isDisabled={isDisabled}
      />
      <MenuList>
-        <MenuItem onClick={() => onLoad(filename)} isDisabled={current}>
+        <MenuItem onClick={handleLoad} 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={() => onDelete(filename)}>
+        <MenuItem isDisabled={current} onClick={handleDelete}>
          Delete
        </MenuItem>
      </MenuList>
@@ -57,7 +57,7 @@ export const settingPanels: Readonly<SettingsOption[]> = [
    secondary: [
      {
        id: 'network__log',
-        label: 'Event log',
+        label: 'Application log',
      },
      {
        id: 'network__clients',
@@ -4,6 +4,7 @@ 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';
@@ -21,7 +22,6 @@ 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';

@@ -134,7 +134,7 @@ export default function Operator() {

  return (
    <div className={style.operatorContainer}>
-      <ViewParamsEditor viewOptions={operatorOptions} />
+      <ViewParamsEditor paramFields={operatorOptions} />
      {editEvent && <EditModal event={editEvent} onClose={() => setEditEvent(null)} />}

      <StatusBar
@@ -30,7 +30,7 @@

  &.running {
    border-top: 1px solid $gray-1300;
-    background-color: var(--operator-running-bg-override, $red-700);
+    background-color: var(--operator-running-bg-override, $active-red);
  }

  &.past {
@@ -65,15 +65,12 @@
  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 {
@@ -99,10 +96,10 @@
  display: flex;
  flex-wrap: wrap;

-
  .field {
    font-weight: 600;
-    padding-inline: 0.25rem;
+    padding: 0 0.25rem;
+    margin-right: 0.25rem;
  }

  .noColour {
@@ -113,8 +110,6 @@
  }

  .value {
-    padding-inline: 0.25rem;
-    background-color: $gray-1250;
    color: var(--operator-highlight-override, $ui-white);
    margin-right: 1rem;
  }
@@ -1,60 +0,0 @@
-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,
-    },
-  ];
-};
@@ -6,14 +6,14 @@ import { EditorUpdateFields } from '../EventEditor';

 import style from '../EventEditor.module.scss';

-interface EventTextInputProps extends InputProps {
+interface CountedTextInputProps extends InputProps {
  field: EditorUpdateFields;
  label: string;
  initialValue: string;
  submitHandler: (field: EditorUpdateFields, value: string) => void;
 }

-export default function EventTextInput(props: EventTextInputProps) {
+export default function EventTextInput(props: CountedTextInputProps) {
  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: EventTextInputProps) {
        variant='ontime-filled'
        data-testid='input-textfield'
        value={value}
-        maxLength={maxLength || 100}
+        maxLength={maxLength || 50}
        onChange={onChange}
        onBlur={onBlur}
        onKeyDown={onKeyDown}
@@ -0,0 +1,75 @@
+$timeline-entry-height: 20px;
+
+.timeline {
+  flex: 1;
+}
+
+.timelineEvents {
+  position: relative;
+  height: 100%;
+}
+
+.entryColumn {
+  position: absolute;
+  background-color: var(--lighter, $gray-500);
+  border-bottom: 0.25rem solid var(--color, $ui-white);
+  border-right: 1px solid $ui-black;
+  min-height: 80px;
+
+  &.fullHeight {
+    height: calc(100% - 4rem);
+  }
+}
+
+.entryContent {
+  padding-top: var(--top, 0);
+
+  &.lastElement {
+    text-align: right;
+    transform: translateX(-100%);
+  }
+}
+
+.entryText {
+  position: relative;
+  z-index: 2;
+  color: $ui-white;
+  padding-inline: 0.5em;
+  width: fit-content;
+  white-space: nowrap;
+
+  &.textBg {
+    background-color: var(--bg, $black-10);
+  }
+}
+
+.start,
+.title {
+  font-weight: 600;
+}
+
+// for elapsed events, we can hide some stuff
+[data-status='finished'] {
+  color: $gray-500;
+  .status {
+    display: none;
+  }
+}
+
+[data-status='live'] {
+  font-weight: 600;
+  color: $ui-white;
+
+  .status {
+    color: $active-red;
+  }
+}
+
+[data-status='future'] {
+  font-weight: 600;
+  color: $gray-300;
+
+  .status {
+    color: $green-500;
+  }
+}
@@ -0,0 +1,128 @@
+import { memo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useViewportSize } from '@mantine/hooks';
+import { isOntimeEvent, MaybeNumber } from 'ontime-types';
+import { dayInMs, getFirstEventNormal, getLastEventNormal, MILLIS_PER_HOUR } from 'ontime-utils';
+
+import useRundown from '../../../common/hooks-query/useRundown';
+import { isStringBoolean } from '../../viewers/common/viewUtils';
+
+import { type ProgressStatus, TimelineEntry } from './TimelineEntry';
+import { TimelineMarkers } from './TimelineMarkers';
+import { ProgressBar } from './TimelineProgressBar';
+import { getElementPosition, getEndHour, getEstimatedWidth, getLaneLevel, getStartHour } from './timelineUtils';
+
+import style from './Timeline.module.scss';
+
+export default memo(Timeline);
+
+function useTimeline() {
+  const { data } = useRundown();
+  if (data.revision === -1) {
+    return null;
+  }
+
+  const { firstEvent } = getFirstEventNormal(data.rundown, data.order);
+  const { lastEvent } = getLastEventNormal(data.rundown, data.order);
+  const firstStart = firstEvent?.timeStart ?? 0;
+  const lastEnd = lastEvent?.timeEnd ?? 0;
+  const normalisedLastEnd = lastEnd < firstStart ? lastEnd + dayInMs : lastEnd;
+
+  // timeline is padded to nearest hours (floor and ceil)
+  const startHour = getStartHour(firstStart) * MILLIS_PER_HOUR;
+  const endHour = getEndHour(normalisedLastEnd) * MILLIS_PER_HOUR;
+
+  return {
+    rundown: data.rundown,
+    order: data.order,
+    startHour,
+    endHour,
+  };
+}
+
+interface TimelineProps {
+  selectedEventId: string | null;
+}
+
+function Timeline(props: TimelineProps) {
+  const { selectedEventId } = props;
+  const { width: screenWidth } = useViewportSize();
+  const timelineData = useTimeline();
+  const [searchParams] = useSearchParams();
+  const fullHeight = isStringBoolean(searchParams.get('fullHeight'));
+
+  if (timelineData === null) {
+    return null;
+  }
+
+  const { rundown, order, startHour, endHour } = timelineData;
+
+  let hasTimelinePassedMidnight = false;
+  let previousEventStartTime: MaybeNumber = null;
+  let eventStatus: ProgressStatus = 'finished';
+  // a list of the right most element for each lane
+  const rightMostElements: Record<number, number> = {};
+
+  return (
+    <div className={style.timeline}>
+      <TimelineMarkers />
+      <ProgressBar startHour={startHour} endHour={endHour} />
+      <div className={style.timelineEvents}>
+        {order.map((eventId) => {
+          // for now we dont render delays and blocks
+          const event = rundown[eventId];
+          if (!isOntimeEvent(event)) {
+            return null;
+          }
+
+          // keep track of progress of rundown
+          if (eventStatus === 'live') {
+            eventStatus = 'future';
+          }
+          if (eventId === selectedEventId) {
+            eventStatus = 'live';
+          }
+
+          // we need to offset the start to account for midnight
+          if (!hasTimelinePassedMidnight) {
+            hasTimelinePassedMidnight = previousEventStartTime !== null && event.timeStart < previousEventStartTime;
+          }
+          const normalisedStart = hasTimelinePassedMidnight ? event.timeStart + dayInMs : event.timeStart;
+          previousEventStartTime = normalisedStart;
+
+          const { left: elementLeftPosition, width: elementWidth } = getElementPosition(
+            startHour,
+            endHour,
+            normalisedStart,
+            event.duration,
+            screenWidth,
+          );
+          const estimatedWidth = getEstimatedWidth(event.title);
+          const estimatedRightPosition = elementLeftPosition + estimatedWidth;
+          const laneLevel = getLaneLevel(rightMostElements, elementLeftPosition);
+
+          if (rightMostElements[laneLevel] === undefined || rightMostElements[laneLevel] < estimatedRightPosition) {
+            rightMostElements[laneLevel] = estimatedRightPosition;
+          }
+
+          return (
+            <TimelineEntry
+              key={eventId}
+              colour={event.colour}
+              duration={event.duration}
+              isLast={eventId === order[order.length - 1]}
+              lane={laneLevel}
+              left={elementLeftPosition}
+              status={eventStatus}
+              start={event.timeStart}
+              title={event.title}
+              width={elementWidth}
+              mayGrow={elementWidth < estimatedWidth}
+              fullHeight={fullHeight}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,90 @@
+import { useClock } from '../../../common/hooks/useSocket';
+import { alpha, cx } from '../../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../../common/utils/time';
+
+import { getStatusLabel } from './timelineUtils';
+
+import style from './Timeline.module.scss';
+
+export type ProgressStatus = 'finished' | 'live' | 'future';
+
+interface TimelineEntry {
+  colour: string;
+  duration: number;
+  isLast: boolean;
+  lane: number;
+  left: number;
+  status: ProgressStatus;
+  start: number;
+  title: string;
+  width: number;
+
+  mayGrow: boolean;
+  fullHeight: boolean;
+}
+
+const laneHeight = 120;
+const formatOptions = {
+  format12: 'hh:mm a',
+  format24: 'HH:mm',
+};
+
+export function TimelineEntry(props: TimelineEntry) {
+  const { colour, duration, isLast, lane, left, status, start, title, width, mayGrow, fullHeight } = props;
+
+  const formattedStartTime = formatTime(start, formatOptions);
+  const formattedDuration = formatDuration(duration);
+
+  const lighterColour = alpha(colour, 0.7);
+  const alphaColour = alpha(colour, 0.6);
+  const columnClasses = cx([style.entryColumn, fullHeight && style.fullHeight]);
+  const contentClasses = cx([style.entryContent, isLast && style.lastElement]);
+  const textBgClasses = cx([style.entryText, mayGrow && style.textBg]);
+
+  return (
+    <div
+      className={columnClasses}
+      style={{
+        '--color': colour,
+        '--lighter': lighterColour ?? '',
+        left: `${left}px`,
+        width: `${width}px`,
+      }}
+    >
+      <div
+        className={contentClasses}
+        data-status={status}
+        style={{
+          '--color': colour,
+          '--top': `${lane * laneHeight}px`,
+        }}
+      >
+        <div
+          className={textBgClasses}
+          style={{
+            '--bg': alphaColour ?? '',
+          }}
+        >
+          <div className={style.start}>{formattedStartTime}</div>
+          <div className={style.title}>{title}</div>
+          <div className={style.duration}>{formattedDuration}</div>
+          <TimelineEntryStatus status={status} start={start} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface TimelineEntryStatusProps {
+  status: ProgressStatus;
+  start: number;
+}
+// we isolate this component to avoid re-rendering too many elements
+function TimelineEntryStatus(props: TimelineEntryStatusProps) {
+  const { status, start } = props;
+  // TODO: account for offset instead of just using the clock
+  const { clock } = useClock();
+  const statusText = getStatusLabel(start - clock, status);
+
+  return <div className={style.status}>{statusText}</div>;
+}
@@ -0,0 +1,15 @@
+.markers {
+  width: 100%;
+  color: $ui-white;
+  display: flex;
+  height: 1rem;
+  line-height: 1rem;
+  font-size: calc(1rem - 2px);
+  justify-content: space-evenly;
+
+  & > span {
+    flex-grow: 1;
+    border-left: 1px solid black;
+    height: 100vh;
+  }
+}
@@ -0,0 +1,23 @@
+import useRundown from '../../../common/hooks-query/useRundown';
+
+import { getTimelineSections } from './timelineUtils';
+
+import style from './TimelineMarkers.module.scss';
+
+export function TimelineMarkers() {
+  const { data } = useRundown();
+
+  if (data.revision === -1) {
+    return null;
+  }
+
+  const elements = getTimelineSections(data.rundown, data.order);
+
+  return (
+    <div className={style.markers}>
+      {elements.map((tag, index) => {
+        return <span key={index}>{tag}</span>;
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,13 @@
+.progressBar {
+  width: 100%;
+  height: 0.75rem;
+
+  transition-duration: 0.3s;
+  transition-property: left;
+  background-color: $gray-900;
+
+  .progress {
+    height: 100%;
+    background-color: $active-red;;
+  }
+}
@@ -0,0 +1,23 @@
+import { useClock } from '../../../common/hooks/useSocket';
+
+import { getRelativePositionX } from './timelineUtils';
+
+import style from './TimelineProgressBar.module.scss';
+
+interface ProgressBarProps {
+  startHour: number;
+  endHour: number;
+}
+
+export function ProgressBar(props: ProgressBarProps) {
+  const { startHour, endHour } = props;
+  const { clock } = useClock();
+
+  const width = getRelativePositionX(startHour, endHour, clock);
+
+  return (
+    <div className={style.progressBar}>
+      <div className={style.progress} style={{ width: `${width}%` }} />
+    </div>
+  );
+}
@@ -0,0 +1,84 @@
+import { dayInMs } from 'ontime-utils';
+
+import { getElementPosition, getLaneLevel } from '../timelineUtils';
+
+describe('getCSSPosition()', () => {
+  it('accounts for rundown with one event', () => {
+    const scheduleStart = 0;
+    const scheduleEnd = dayInMs;
+    const eventStart = 0;
+    const eventDuration = dayInMs;
+    const containerWidth = 100;
+
+    const result = getElementPosition(scheduleStart, scheduleEnd, eventStart, eventDuration, containerWidth);
+    expect(result.left).toBe(0);
+    expect(result.width).toBe(containerWidth);
+  });
+
+  it('accounts for an event that starts halfway and ends at end', () => {
+    const scheduleStart = 0;
+    const scheduleEnd = 100;
+    const eventStart = 50;
+    const eventDuration = 50;
+    const containerWidth = 100;
+
+    const result = getElementPosition(scheduleStart, scheduleEnd, eventStart, eventDuration, containerWidth);
+    expect(result.left).toBe(50);
+    expect(result.width).toBe(50);
+  });
+
+  it('accounts for an event that starts first and ends halfway', () => {
+    const scheduleStart = 0;
+    const scheduleEnd = 100;
+    const eventStart = 0;
+    const eventDuration = 50;
+    const containerWidth = 100;
+
+    const result = getElementPosition(scheduleStart, scheduleEnd, eventStart, eventDuration, containerWidth);
+    expect(result.left).toBe(0);
+    expect(result.width).toBe(50);
+  });
+
+  it('accounts for an event that is in the middle of the rundown', () => {
+    const scheduleStart = 7;
+    const scheduleEnd = 23;
+    const eventStart = 10;
+    const eventDuration = 1;
+    const containerWidth = 1000;
+
+    // 16 hour event, this gives 62.5px per hour
+    const result = getElementPosition(scheduleStart, scheduleEnd, eventStart, eventDuration, containerWidth);
+    expect(result.left).toBe(187.5); // 3 * 62.5
+    expect(result.width).toBe(62.5);
+  });
+});
+
+describe('getLaneLevel()', () => {
+  it('should place in lane 0 if there is no overlap', () => {
+    const rightMostElements = { 0: 50 };
+    const left = 60;
+    const result = getLaneLevel(rightMostElements, left);
+    expect(result).toBe(0);
+  });
+
+  it('should place in next available lane if there is overlap', () => {
+    const rightMostElements = { 0: 150, 1: 100 };
+    const left = 120;
+    const result = getLaneLevel(rightMostElements, left);
+    expect(result).toBe(1);
+  });
+
+  it('should create a new lane if all existing lanes are overlapped', () => {
+    const rightMostElements = { 0: 200, 1: 250 };
+    const left = 150;
+    const result = getLaneLevel(rightMostElements, left);
+    expect(result).toBe(2);
+  });
+
+  it('should place in lane 0 if it is the first event', () => {
+    const rightMostElements = {};
+    const left = 0;
+    const result = getLaneLevel(rightMostElements, left);
+    expect(result).toBe(0);
+  });
+});
@@ -0,0 +1,154 @@
+import { isOntimeEvent, MaybeString, NormalisedRundown, OntimeEvent } from 'ontime-types';
+import {
+  dayInMs,
+  getByEventId,
+  getFirstEvent,
+  getFirstEventNormal,
+  getLastEventNormal,
+  getNextEvent,
+  MILLIS_PER_HOUR,
+  millisToString,
+  removeSeconds,
+} from 'ontime-utils';
+
+import { clamp } from '../../../common/utils/math';
+import { formatDuration } from '../../../common/utils/time';
+
+import type { ProgressStatus } from './TimelineEntry';
+
+type CSSPosition = {
+  left: number;
+  width: number;
+};
+
+/**
+ * Calculates the position (in %) of an element relative to a schedule
+ */
+export function getRelativePositionX(scheduleStart: number, scheduleEnd: number, now: number): number {
+  return clamp(((now - scheduleStart) / (scheduleEnd - scheduleStart)) * 100, 0, 100);
+}
+
+/**
+ * Estimates the width of an element based on its content
+ */
+export function getEstimatedWidth(content: string): number {
+  // use 8 as minimum width to account for duration string
+  // 12 is a rough estimate of the width of a character at 15px font size
+  return Math.max(content.length, 8) * 12;
+}
+/**
+ * Calculates an absolute position of an element based on a schedule
+ */
+export function getElementPosition(
+  scheduleStart: number,
+  scheduleEnd: number,
+  eventStart: number,
+  eventDuration: number,
+  containerWidth: number,
+): CSSPosition {
+  // TODO: events that finish at midnight have lastEnd 0
+  const totalDuration = scheduleEnd - scheduleStart;
+  const width = (eventDuration * containerWidth) / totalDuration;
+  const left = ((eventStart - scheduleStart) * containerWidth) / totalDuration;
+
+  return { left, width };
+}
+
+export function getStartHour(startTime: number): number {
+  const hours = Math.floor(startTime / MILLIS_PER_HOUR);
+  return hours;
+}
+
+export function getEndHour(endTime: number): number {
+  const hours = Math.ceil(endTime / MILLIS_PER_HOUR);
+  return hours;
+}
+
+export function makeTimelineSections(firstHour: number, lastHour: number) {
+  const timelineSections = [];
+  for (let i = firstHour; i < lastHour; i++) {
+    timelineSections.push(removeSeconds(millisToString(i * MILLIS_PER_HOUR)));
+  }
+  return timelineSections;
+}
+
+// TODO: account for elapsed days
+export function getTimelineSections(rundown: NormalisedRundown, order: string[]): string[] {
+  if (order.length === 0) {
+    return [];
+  }
+  const { firstEvent } = getFirstEventNormal(rundown, order);
+  const { lastEvent } = getLastEventNormal(rundown, order);
+  const firstStart = firstEvent?.timeStart ?? 0;
+  const lastEnd = lastEvent?.timeEnd ?? 0;
+  const normalisedLastEnd = lastEnd < firstStart ? lastEnd + dayInMs : lastEnd;
+
+  const startHour = getStartHour(firstStart);
+  const endHour = getEndHour(normalisedLastEnd);
+
+  const elements = makeTimelineSections(startHour, endHour);
+  return elements;
+}
+
+const MAX_DEPTH = 5;
+
+/**
+ * Estimates the top offset for an element
+ */
+export function getLaneLevel(rightMostElements: Record<number, number>, left: number): number {
+  for (let checkLane = 0; checkLane < MAX_DEPTH; checkLane++) {
+    if (rightMostElements[checkLane] === undefined) {
+      return checkLane;
+    }
+    if (rightMostElements[checkLane] < left) {
+      return checkLane;
+    }
+  }
+  return 0;
+}
+
+/**
+ * Returns a formatted label for a progress status
+ */
+export function getStatusLabel(timeToStart: number, status: ProgressStatus): string {
+  if (status === 'finished' || status === 'live') {
+    return status;
+  }
+
+  if (timeToStart < 0) {
+    return 'T - 0';
+  }
+
+  return `T - ${formatDuration(timeToStart)}`;
+}
+
+type UpcomingEvents = {
+  now: MaybeString;
+  next: MaybeString;
+  followedBy: MaybeString;
+};
+
+/**
+ * Returns upcoming events from current: now, next and followedBy
+ */
+export function getUpcomingEvents(events: OntimeEvent[], selectedId: MaybeString): UpcomingEvents {
+  if (events.length === 0) {
+    return { now: null, next: null, followedBy: null };
+  }
+
+  const nowEvent = selectedId ? getByEventId(events, selectedId) : getFirstEvent(events)?.firstEvent;
+
+  if (!isOntimeEvent(nowEvent)) {
+    return { now: null, next: null, followedBy: null };
+  }
+
+  const nextEvent = getNextEvent(events, nowEvent.id)?.nextEvent;
+  const followedByEvent = nextEvent ? getNextEvent(events, nextEvent.id)?.nextEvent : null;
+
+  // Return the titles, handling nulls appropriately
+  return {
+    now: nowEvent.title,
+    next: nextEvent ? nextEvent.title : null,
+    followedBy: followedByEvent ? followedByEvent.title : null,
+  };
+}
@@ -0,0 +1,52 @@
+.progress {
+  width: 100vw;
+  height: 100vh;
+
+  background-color: $ui-black;
+  color: $ui-white;
+
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.title {
+  padding-inline: 2rem;
+  text-align: left;
+  font-size: 3.5rem;
+}
+
+.sections {
+  padding-inline: 2rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  row-gap: 1rem;
+  column-gap: 3rem;
+}
+
+.sectionTitle {
+  line-height: 1.2em;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+}
+
+.sectionContent {
+  line-height: 1em;
+  font-size: 3rem;
+  text-transform: uppercase;
+  font-weight: 600;
+
+  &.now {
+        color: $red-500;
+
+  }
+
+  &.next {
+        color: $green-500;
+
+  }
+
+  &.subdue {
+    opacity: $opacity-disabled;
+  }
+}
@@ -0,0 +1,63 @@
+import { MaybeString, OntimeEvent, ProjectData, Settings } from 'ontime-types';
+
+import { getProgressOptions } from '../../common/components/view-params-editor/constants';
+import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
+import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
+import { cx } from '../../common/utils/styleUtils';
+import { formatTime, getDefaultFormat } from '../../common/utils/time';
+
+import Timeline from './Timeline/Timeline';
+import { getUpcomingEvents } from './Timeline/timelineUtils';
+
+import style from './TimelinePage.module.scss';
+
+interface TimelinePageProps {
+  backstageEvents: OntimeEvent[];
+  general: ProjectData;
+  selectedId: MaybeString;
+  settings: Settings | undefined;
+  time: ViewExtendedTimer;
+}
+
+export default function TimelinePage(props: TimelinePageProps) {
+  const { backstageEvents, general, selectedId, settings, time } = props;
+
+  const clock = formatTime(time.clock);
+  const { now, next, followedBy } = getUpcomingEvents(backstageEvents, selectedId);
+
+  // populate options
+  const defaultFormat = getDefaultFormat(settings?.timeFormat);
+  const progressOptions = getProgressOptions(defaultFormat);
+
+  return (
+    <div className={style.progress}>
+      <ViewParamsEditor paramFields={progressOptions} />
+      <div className={style.title}>{general.title}</div>
+      <div className={style.sections}>
+        <Section title='Time now' content={clock} category='now' />
+        <Section title='Next' content={next} category='next' />
+        <Section title='Current' content={now} category='now' />
+        <Section title='Followed by' content={followedBy} category='next' />
+      </div>
+      <Timeline selectedEventId={selectedId} />
+    </div>
+  );
+}
+
+interface SectionProps {
+  category: 'now' | 'next';
+  content: MaybeString;
+  title: string;
+}
+
+function Section(props: SectionProps) {
+  const { category, content, title } = props;
+
+  const contentClasses = cx([style.sectionContent, content != null ? style[category] : style.subdue]);
+  return (
+    <div>
+      <div className={style.sectionTitle}>{title}</div>
+      <div className={contentClasses}>{content ?? '-'}</div>
+    </div>
+  );
+}
@@ -5,7 +5,6 @@ import {
  Message,
  OntimeEvent,
  ProjectData,
-  Runtime,
  Settings,
  SupportedEvent,
  TimerMessage,
@@ -37,7 +36,6 @@ type WithDataProps = {
  publicEventNext: OntimeEvent | null;
  publicEventNow: OntimeEvent | null;
  publicSelectedId: string | null;
-  runtime: Runtime;
  selectedId: string | null;
  settings: Settings | undefined;
  time: ViewExtendedTimer;
@@ -68,7 +66,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
    }, [rundownData]);

    // websocket data
-    const { clock, timer, message, onAir, eventNext, publicEventNext, publicEventNow, eventNow, runtime } =
+    const { clock, timer, message, onAir, eventNext, publicEventNext, publicEventNow, eventNow } =
      useStore(runtimeStore);
    const publicSelectedId = publicEventNow?.id ?? null;
    const selectedId = eventNow?.id ?? null;
@@ -110,7 +108,6 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
          publicEventNext={publicEventNext}
          publicEventNow={publicEventNow}
          publicSelectedId={publicSelectedId}
-          runtime={runtime}
          selectedId={selectedId}
          settings={settings}
          time={TimeManagerType}
@@ -11,6 +11,7 @@ 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';
@@ -22,12 +23,8 @@ 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;
@@ -100,7 +97,7 @@ export default function Backstage(props: BackstageProps) {

  return (
    <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
-      <ViewParamsEditor viewOptions={backstageOptions} />
+      <ViewParamsEditor paramFields={backstageOptions} />
      <div className='project-header'>
        {general.title}
        <div className='clock-container'>
@@ -127,7 +124,7 @@ export default function Backstage(props: BackstageProps) {
              animate='visible'
              exit='exit'
            >
-              <TitleCard title={eventNow.title} secondary={secondaryTextNow} />
+              <TitleCard label='now' title={eventNow.title} secondary={secondaryTextNow} />
              <div className='timer-group'>
                <div className='aux-timers'>
                  <div className='aux-timers__label'>{getLocalizedString('common.started_at')}</div>
@@ -154,17 +151,16 @@ export default function Backstage(props: BackstageProps) {

        <AnimatePresence>
          {eventNext && (
-            <MotionTitleCard
+            <motion.div
              className='event next'
              key='next'
              variants={titleVariants}
              initial='hidden'
              animate='visible'
              exit='exit'
-              label='next'
-              title={eventNext.title}
-              secondary={secondaryTextNext}
-            />
+            >
+              <TitleCard label='next' title={eventNext.title} secondary={secondaryTextNext} />
+            </motion.div>
          )}
        </AnimatePresence>
      </div>
@@ -1,44 +0,0 @@
-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,
-    },
-  ];
-};
@@ -2,6 +2,7 @@ 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';
@@ -10,8 +11,6 @@ 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 {
@@ -131,7 +130,7 @@ export default function Clock(props: ClockProps) {
      }}
      data-testid='clock-view'
    >
-      <ViewParamsEditor viewOptions={clockOptions} />
+      <ViewParamsEditor paramFields={clockOptions} />
      <SuperscriptTime
        time={clock}
        className='clock'
@@ -1,76 +0,0 @@
-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)',
-  },
-];
@@ -3,7 +3,6 @@ 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'>;

@@ -69,13 +68,11 @@ export function getFormattedTimer(
    return options.removeSeconds ? timerPlaceholderMin : timerPlaceholder;
  }

-  if (timerType === TimerType.Clock) {
-    return formatTime(timer);
-  }
-
  let timeToParse = timer;
+
  if (options.removeSeconds) {
-    const isNegative = timeToParse < -MILLIS_PER_SECOND && timerType !== TimerType.CountUp;
+    const timerIsTimeOfDay = timerType === TimerType.Clock;
+    const isNegative = timeToParse < -MILLIS_PER_SECOND && !timerIsTimeOfDay && timerType !== TimerType.CountUp;
    if (isNegative) {
      // in negative numbers, we need to round down
      timeToParse -= MILLIS_PER_MINUTE;
@@ -21,11 +21,11 @@
    flex-direction: column;

    &__title {
-      font-size: clamp(1.5rem, 2vw, 2rem);
+      font-size: clamp(24px, 2vw, 32px);
    }

    &__events {
-      font-size: clamp(1rem, 1.5vw, 1.5rem);
+      font-size: clamp(16px, 1.5vw, 24px);
      margin-top: 1em;
      overflow-y: auto;
      height: 70vh;
@@ -38,18 +38,18 @@
  .countdown-container {
    height: 100%;
    width: 100%;
-    gap: min(2vh, 1rem);
-    padding: min(2vh, 1rem) clamp(1rem, 10vw, 4rem);
+    gap: min(2vh, 16px);
+    padding: min(2vh, 16px) clamp(16px, 10vw, 64px);

    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: $timer-label-size;
+        font-size: clamp(16px, 1.5vw, 24px);
        color: var(--label-color-override, $viewer-label-color);
        text-transform: uppercase;
      }

      .time {
-        font-size: $timer-value-size;
+        font-size: clamp(32px, 3.5vw, 50px);
        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(2rem, 3.5vw, 3.5rem);
+      font-size: clamp(32px, 3.5vw, 50px);
      font-weight: 600;
    }

@@ -105,7 +105,7 @@
    .title {
      grid-area: title;
      background-color: var(--card-background-color-override, $viewer-card-bg-color);
-      padding: 1rem 1.5rem;
+      padding: 16px 24px;
      border-radius: 8px;

      font-weight: 600;
@@ -119,49 +119,28 @@

    .timer-group {
      grid-area: timers;
-      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;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: flex-end;

-      &__projected-start {
-        grid-area: projected-start;
-      }
+      .aux-timers {
+        text-align: center;
+        font-size: clamp(24px, 1.75vw, 32px);

-      &__projected-end {
-        grid-area: projected-end;
-      }
+        &__label {
+          color: var(--label-color-override, $viewer-label-color);
+          text-transform: uppercase;
+        }

-      &__scheduled-start {
-        grid-area: scheduled-start;
-      }
+        &__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-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;
+          &--delayed {
+            color: $delay-color;
+          }
        }
      }
    }
@@ -1,17 +1,10 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import {
-  OntimeEvent,
-  OntimeRundownEntry,
-  Playback,
-  Runtime,
-  Settings,
-  SupportedEvent,
-  TimerPhase,
-  ViewSettings,
-} from 'ontime-types';
+import { OntimeEvent, OntimeRundownEntry, Playback, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
+import { millisToString, removeLeadingZero } from 'ontime-utils';

 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';
@@ -19,10 +12,8 @@ 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, getTimerItems, TimerMessage } from './countdown.helpers';
-import { getCountdownOptions } from './countdown.options';
+import { fetchTimerData, TimerMessage } from './countdown.helpers';
 import CountdownSelect from './CountdownSelect';

 import './Countdown.scss';
@@ -30,26 +21,27 @@ import './Countdown.scss';
 interface CountdownProps {
  isMirrored: boolean;
  backstageEvents: OntimeEvent[];
-  runtime: Runtime;
-  selectedId: string | null;
-  settings: Settings | undefined;
  time: ViewExtendedTimer;
+  selectedId: string | null;
  viewSettings: ViewSettings;
+  settings: Settings | undefined;
 }

 export default function Countdown(props: CountdownProps) {
-  const { isMirrored, backstageEvents, runtime, selectedId, settings, time, viewSettings } = props;
+  const { isMirrored, backstageEvents, time, selectedId, viewSettings, settings } = 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
-  // update data to the event we are following
+  // Check for user options
  useEffect(() => {
    if (!backstageEvents) {
      return;
@@ -58,12 +50,6 @@ 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);

@@ -80,50 +66,49 @@ 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.phase === TimerPhase.Overtime;
+  const finished = time.playback === Playback.Play && (time.current ?? 0) < 0 && time.startedAt;
  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 { scheduledStart, scheduledEnd, projectedStart, projectedEnd } = getTimerItems(
-    follow?.timeStart,
-    follow?.timeEnd,
-    delay,
-    runtime.offset,
-  );
+  const startTime = follow === null ? '...' : formatTime(follow.timeStart + delay);
+  const endTime = follow === null ? '...' : formatTime(follow.timeEnd + delay);

-  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 };
+  const formatTimer = (): string => {
+    if (runningMessage === TimerMessage.ended) {
+      return formatTime(runningTimer, { format12: 'hh:mm a', format24: 'HH:mm' });
    }
-    const eventIndex = searchParams.get('event');
-    if (eventIndex !== null) {
-      return { id: 'eventindex', value: eventIndex };
+    let formattedTime = millisToString(isSelected ? runningTimer : runningTimer + delay);
+    if (isSelected || runningMessage === TimerMessage.waiting) {
+      formattedTime = removeLeadingZero(formattedTime);
    }
-    return undefined;
+    return formattedTime;
  };
+  const formattedTimer = formatTimer();

  const defaultFormat = getDefaultFormat(settings?.timeFormat);
-  const viewOptions = getCountdownOptions(defaultFormat, persistParam());
+  const timeOption = getCountdownOptions(defaultFormat);

  return (
    <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
-      <ViewParamsEditor viewOptions={viewOptions} />
+      <ViewParamsEditor paramFields={timeOption} />
      {follow === null ? (
        <CountdownSelect events={backstageEvents} />
      ) : (
@@ -144,25 +129,13 @@ export default function Countdown(props: CountdownProps) {
          {follow?.title && <div className='title'>{follow.title}</div>}

          <div className='timer-group'>
-            {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 className='aux-timers'>
+              <div className='aux-timers__label'>{getLocalizedString('common.start_time')}</div>
+              <SuperscriptTime time={startTime} className={`aux-timers__value ${delayedTimerStyles}`} />
            </div>
-            <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 className='aux-timers'>
+              <div className='aux-timers__label'>{getLocalizedString('common.end_time')}</div>
+              <SuperscriptTime time={endTime} className={`aux-timers__value ${delayedTimerStyles}`} />
            </div>
          </div>
        </div>
@@ -1,8 +1,6 @@
 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',
@@ -22,85 +20,48 @@ export const sanitiseTitle = (title: string | null) => (title ? title : '{no tit
 */
 export const fetchTimerData = (
  time: ViewExtendedTimer,
-  follow: OntimeEvent | null,
+  follow: OntimeEvent,
  selectedId: string | null,
-  offset: number,
 ): { message: TimerMessage; timer: number } => {
-  if (follow === null) {
-    return { message: TimerMessage.unhandled, timer: 0 };
-  }
+  let message;
+  let timer;

  if (selectedId === follow.id) {
-    // if it is selected, it may not be running
-    return {
-      message: time.playback === Playback.Pause ? TimerMessage.waiting : TimerMessage.running,
-      timer: time.current ?? 0,
-    };
-  }
-
-  const showProjected = getShouldShowProjected();
-  const addedTime = showProjected ? offset : 0;
-  if (time.clock < follow.timeStart) {
+    // 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
-    return { message: TimerMessage.toStart, timer: follow.timeStart - time.clock - addedTime };
-  }
-
-  if (follow.timeStart <= time.clock && time.clock <= follow.timeEnd) {
+    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
-    return { message: TimerMessage.waiting, timer: time.current ?? 0 };
-  }
+    message = TimerMessage.waiting;
+    timer = time.current ?? 0;
+  } else {
+    // running timer timer is not the one we are following

-  // running timer timer is not the one we are following
+    if (follow.timeStart > follow.timeEnd) {
+      // ends day after

-  // 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 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 (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 };
+  return { message, timer };
 };
-
-/**
- * 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'));
-}
@@ -1,29 +0,0 @@
-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)] : []),
-];
@@ -72,8 +72,6 @@
      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';
      }
@@ -3,13 +3,12 @@ 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 = {
@@ -183,7 +182,7 @@ export default function LowerThird(props: LowerProps) {

  return (
    <div className='lower-third' style={{ backgroundColor: `#${options.key}` }}>
-      <ViewParamsEditor viewOptions={getLowerThirdOptions(customFields)} />
+      <ViewParamsEditor paramFields={getLowerThirdOptions(customFields)} />
      <div
        className={`container container--${playState}`}
        style={{ minWidth: `${options.width}vw`, animationDuration: transition }}
@@ -1,132 +0,0 @@
-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)',
-    },
-  ];
-};
@@ -2,6 +2,7 @@ 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';
@@ -10,8 +11,6 @@ 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 {
@@ -162,7 +161,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
      }}
      data-testid='minimal-timer'
    >
-      <ViewParamsEditor viewOptions={MINIMAL_TIMER_OPTIONS} />
+      <ViewParamsEditor paramFields={MINIMAL_TIMER_OPTIONS} />
      {showEndMessage ? (
        <div className='end-message'>{viewSettings.endMessage}</div>
      ) : (
@@ -1,91 +0,0 @@
-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)',
-  },
-];
@@ -43,7 +43,7 @@

    .time {
      font-size: clamp(32px, 3.5vw, 50px);
-      color: var(--secondary-color-override, $viewer-secondary-color);
+      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 0.95em;
    }
@@ -8,6 +8,7 @@ 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';
@@ -18,12 +19,8 @@ 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;
@@ -74,7 +71,7 @@ export default function Public(props: BackstageProps) {

  return (
    <div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
-      <ViewParamsEditor viewOptions={publicOptions} />
+      <ViewParamsEditor paramFields={publicOptions} />
      <div className='project-header'>
        {general.title}
        <div className='clock-container'>
@@ -86,33 +83,31 @@ export default function Public(props: BackstageProps) {
      <div className='now-container'>
        <AnimatePresence>
          {publicEventNow && (
-            <MotionTitleCard
+            <motion.div
              className='event now'
              key='now'
              variants={titleVariants}
              initial='hidden'
              animate='visible'
              exit='exit'
-              label='now'
-              title={publicEventNow.title}
-              secondary={secondaryTextNow}
-            />
+            >
+              <TitleCard label='now' title={publicEventNow.title} secondary={secondaryTextNow} />
+            </motion.div>
          )}
        </AnimatePresence>

        <AnimatePresence>
          {publicEventNext && (
-            <MotionTitleCard
+            <motion.div
              className='event next'
              key='next'
              variants={titleVariants}
              initial='hidden'
              animate='visible'
              exit='exit'
-              label='next'
-              title={publicEventNext.title}
-              secondary={secondaryTextNext}
-            />
+            >
+              <TitleCard label='next' title={publicEventNext.title} secondary={secondaryTextNext} />
+            </motion.div>
          )}
        </AnimatePresence>
      </div>
@@ -1,44 +0,0 @@
-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,
-    },
-  ];
-};
@@ -168,6 +168,7 @@ $orange-active: #f60;
    display: flex;
    align-items: start;
    gap: 0.5em;
+    white-space: nowrap;

    &--now {
      color: var(--studio-active-label, $red-active);
@@ -4,6 +4,7 @@ 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';
@@ -13,7 +14,6 @@ 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({ minFontSize: 150, maxFontSize: 500 });
+  const { fontSize: titleFontSize, ref: titleRef } = useFitText({ 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 viewOptions={studioClockOptions} />
+      <ViewParamsEditor paramFields={studioClockOptions} />
      <div className='clock-container'>
        {hasAmPm && <div className='clock__ampm'>{hasAmPm}</div>}
        <div className={`studio-timer ${!hideSeconds ? 'studio-timer--with-seconds' : ''}`}>{clock}</div>
@@ -1,9 +0,0 @@
-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,
-];
@@ -15,7 +15,7 @@
  padding: min(2vh, 16px) clamp(16px, 10vw, 64px);

  display: grid;
-  grid-template-columns: 100%;
+  grid-template-columns: auto;
  grid-template-rows: auto 1fr auto auto auto;
  grid-template-areas:
    'clock'
@@ -15,6 +15,7 @@ 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';
@@ -24,8 +25,6 @@ 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
@@ -44,8 +43,6 @@ const titleVariants = {
  },
 };

-export const MotionTitleCard = motion(TitleCard);
-
 interface TimerProps {
  customFields: CustomFields;
  eventNext: OntimeEvent | null;
@@ -159,7 +156,7 @@ export default function Timer(props: TimerProps) {

  return (
    <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
-      <ViewParamsEditor viewOptions={timerOptions} />
+      <ViewParamsEditor paramFields={timerOptions} />
      <div className={showBlackout ? 'blackout blackout--active' : 'blackout'} />
      {!userOptions.hideMessage && (
        <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
@@ -214,33 +211,31 @@ export default function Timer(props: TimerProps) {
        <>
          <AnimatePresence>
            {eventNow?.title && (
-              <MotionTitleCard
+              <motion.div
                className='event now'
                key='now'
                variants={titleVariants}
                initial='hidden'
                animate='visible'
                exit='exit'
-                label='now'
-                title={mainFieldNow}
-                secondary={secondaryTextNow}
-              />
+              >
+                <TitleCard label='now' title={mainFieldNow} secondary={secondaryTextNow} />
+              </motion.div>
            )}
          </AnimatePresence>

          <AnimatePresence>
            {eventNext?.title && (
-              <MotionTitleCard
+              <motion.div
+                className='event next'
                key='next'
                variants={titleVariants}
                initial='hidden'
                animate='visible'
                exit='exit'
-                label='next'
-                title={mainFieldNext}
-                secondary={secondaryTextNext}
-                className='event next'
-              />
+              >
+                <TitleCard label='next' title={mainFieldNext} secondary={secondaryTextNext} />
+              </motion.div>
            )}
          </AnimatePresence>
        </>
@@ -1,74 +0,0 @@
-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,
-    },
-  ];
-};
@@ -1,4 +1,4 @@
-@use 'ontimeStyles' as *;
+@use "ontimeStyles" as *;

 //////////////////////////////////// general app elements

@@ -15,9 +15,3 @@
    color: $ontime-color;
  }
 }
-
-@mixin ellipsis-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
@@ -15,6 +15,7 @@ $ontime-color: #ff7597;
 $error-red: $red-500;
 $warning-orange: $orange-500;
 $opacity-disabled: 0.4;
+$active-red: $red-700;

 // playback colours
 $playback-start: $green-600;
@@ -28,7 +28,3 @@ $timer-finished-color: $playback-negative;
 $timer-bold-font-family: 'Arial Black', sans-serif; // --card-background-color-override

 $external-color: rgba(white, 70%); // --external-color-override
-
-// properties of other timers (clock and countdown)
-$timer-label-size: clamp(16px, 1.5vw, 24px);
-$timer-value-size: clamp(2rem, 3.5vw, 3.5rem);
@@ -1,15 +1,13 @@
 import { TranslationObject } from './en';

 export const langDe: TranslationObject = {
-  'common.expected_finish': 'Erwartetes Ende',
+  'common.end_time': 'Endzeit',
+  'common.expected_finish': 'Voraussichtliches Ende',
  'common.minutes': 'min',
  'common.now': 'Jetzt',
  'common.next': 'Nächste',
  'common.public_message': 'Öffentliche Nachricht',
-  'common.scheduled_start': 'Geplanter beginn',
-  'common.scheduled_end': 'Geplantes ende',
-  'common.projected_start': 'Erwartetes beginn',
-  'common.projected_end': 'Erwartetes ende',
+  'common.start_time': 'Startzeit',
  'common.stage_timer': 'Bühnen-Timer',
  'common.started_at': 'Gestartet am',
  'common.time_now': 'Aktuelle Zeit',
@@ -1,13 +1,11 @@
 export const langEn = {
+  'common.end_time': 'End Time',
  'common.expected_finish': 'Expected Finish',
  'common.minutes': 'min',
  'common.now': 'Now',
  'common.next': 'Next',
  'common.public_message': 'Public message',
-  'common.scheduled_start': 'Scheduled start',
-  'common.scheduled_end': 'Scheduled end',
-  'common.projected_start': 'Projected start',
-  'common.projected_end': 'Projected end',
+  'common.start_time': 'Start Time',
  'common.stage_timer': 'Stage Timer',
  'common.started_at': 'Started At',
  'common.time_now': 'Time now',
@@ -1,15 +1,13 @@
 import { TranslationObject } from './en';

 export const langEs: TranslationObject = {
+  'common.end_time': 'Hora de finalización',
  'common.expected_finish': 'Finalización esperada',
  'common.minutes': 'min',
  'common.now': 'Ahora',
  'common.next': 'Siguiente',
  'common.public_message': 'Mensaje público',
-  'common.scheduled_start': 'Inicio programado',
-  'common.scheduled_end': 'Fin programado',
-  'common.projected_start': 'Inicio previsto',
-  'common.projected_end': 'Fin previsto',
+  'common.start_time': 'Hora de inicio',
  'common.stage_timer': 'Temporizador de presentador',
  'common.started_at': 'Iniciado en',
  'common.time_now': 'Ahora',
@@ -1,15 +1,13 @@
 import { TranslationObject } from './en';

 export const langFr: TranslationObject = {
+  'common.end_time': 'Termine à',
  'common.expected_finish': 'Fin estimée à',
  'common.minutes': 'min',
  'common.now': 'Maintenant',
  'common.next': 'A suivre',
  'common.public_message': 'Message public',
-  'common.scheduled_start': 'Début prévu',
-  'common.scheduled_end': 'Fin prévue',
-  'common.projected_start': 'Début projeté',
-  'common.projected_end': 'Fin projetée',
+  'common.start_time': 'Heure de début',
  'common.stage_timer': 'Minuteur de scène',
  'common.started_at': 'Commencé à',
  'common.time_now': 'Heure',
@@ -1,15 +1,13 @@
 import { TranslationObject } from './en';

 export const langIt: TranslationObject = {
+  'common.end_time': 'Ora di Fine',
  'common.expected_finish': 'Fine Prevista',
  'common.minutes': 'min',
  'common.now': 'Adesso',
  'common.next': 'Prossimo',
  'common.public_message': 'Messaggio pubblico',
-  'common.scheduled_start': 'Inizio programmato',
-  'common.scheduled_end': 'Fine programmata',
-  'common.projected_start': 'Inizio previsto',
-  'common.projected_end': 'Fine prevista',
+  'common.start_time': 'Ora di Inizio',
  'common.stage_timer': 'Orologio Palco',
  'common.started_at': 'Iniziato Alle',
  'common.time_now': 'Ora attuale',
@@ -1,15 +1,13 @@
 import { TranslationObject } from './en';

 export const langNo: TranslationObject = {
+  'common.end_time': 'Sluttid',
  'common.expected_finish': 'Forventet slutt',
  'common.minutes': 'min',
  'common.now': 'Nå',
  'common.next': 'Neste',
  'common.public_message': 'Offentlig beskjed',
-  'common.scheduled_start': 'Planlagt start',
-  'common.scheduled_end': 'Planlagt slutt',
-  'common.projected_start': 'Forventet start',
-  'common.projected_end': 'Forventet slutt',
+  'common.start_time': 'Starttid',
  'common.stage_timer': 'Scenetimer',
  'common.started_at': 'Startet',
  'common.time_now': 'Klokken nå',
@@ -1,15 +1,13 @@
 import { TranslationObject } from './en';

 export const langPl: TranslationObject = {
+  'common.end_time': 'Czas zakończenia',
  'common.expected_finish': 'Zakładany czas zakończenia',
  'common.minutes': 'min',
  'common.now': 'Teraz',
  'common.next': 'Następnie',
  'common.public_message': 'Wiadomość publiczna',
-  'common.scheduled_start': 'Planowany początek',
-  'common.scheduled_end': 'Planowany koniec',
-  'common.projected_start': 'Przewidywany początek',
-  'common.projected_end': 'Przewidywany koniec',
+  'common.start_time': 'Czas rozpoczęcia',
  'common.stage_timer': 'Timer Scena',
  'common.started_at': 'Rozpoczęte o',
  'common.time_now': 'Aktualny czas',
@@ -20,3 +18,4 @@ export const langPl: TranslationObject = {
  'countdown.waiting': 'Oczekiwanie na start',
  'countdown.overtime': 'ponad czasem',
 };
+
@@ -1,15 +1,13 @@
 import { TranslationObject } from './en';

 export const langPt: TranslationObject = {
+  'common.end_time': 'Hora de término',
  'common.expected_finish': 'Término esperado',
  'common.minutes': 'min',
  'common.now': 'Agora',
  'common.next': 'Próximo',
  'common.public_message': 'Mensagem pública',
-  'common.scheduled_start': 'Início programado',
-  'common.scheduled_end': 'Fim programado',
-  'common.projected_start': 'Início previsto',
-  'common.projected_end': 'Fim previsto',
+  'common.start_time': 'Hora de início',
  'common.stage_timer': 'Temporizador do presentador',
  'common.started_at': 'Iniciado em',
  'common.time_now': 'Hora atual',
@@ -1,15 +1,13 @@
 import { TranslationObject } from './en';

 export const langSv: TranslationObject = {
+  'common.end_time': 'Sluttid',
  'common.expected_finish': 'Förväntat slut',
  'common.minutes': 'min',
  'common.now': 'Nu',
  'common.next': 'Nästa',
  'common.public_message': 'Offentligt meddelande',
-  'common.scheduled_start': 'Planerad start',
-  'common.scheduled_end': 'Planerad slut',
-  'common.projected_start': 'Beräknad start',
-  'common.projected_end': 'Beräknad slut',
+  'common.start_time': 'Starttid',
  'common.stage_timer': 'Timer för scenen',
  'common.started_at': 'Började vid',
  'common.time_now': 'Klockan nu',
@@ -4,6 +4,7 @@ export const navigatorConstants = [
  { url: '/minimal', label: 'Minimal Timer' },
  { url: '/backstage', label: 'Backstage' },
  { url: '/public', label: 'Public' },
+  { url: '/timeline', label: 'Timeline' },
  { url: '/lower', label: 'Lower Thirds' },
  { url: '/studio', label: 'Studio Clock' },
  { url: '/countdown', label: 'Countdown' },
@@ -61,7 +61,6 @@ export default defineConfig({
        additionalData: `
        @use './src/theme/ontimeColours' as *;
        @use './src/theme/ontimeStyles' as *;
-        @use './src/theme/mixins' as *;
        `,
      },
    },
@@ -1,6 +1,6 @@
 {
  "name": "ontime",
-  "version": "3.4.0",
+  "version": "3.4.0-alpha-timeline.2",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -12,18 +12,17 @@
  "license": "AGPL-3.0-only",
  "main": "main.js",
  "devDependencies": {
-    "electron": "^31.2.0",
+    "electron": "^28.3.3",
    "electron-builder": "^24.13.3",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
-    "prettier": "^3.0.3",
-    "wait-on": "^7.2.0"
+    "prettier": "^3.0.3"
  },
  "scripts": {
    "postinstall": "",
    "lint": "eslint . --quiet",
    "lint-staged": "eslint",
-    "dev": "wait-on http://localhost:3000 && cross-env NODE_ENV=development electron .",
+    "dev": "cross-env NODE_ENV=development electron .",
    "dist-win": "electron-builder --publish=never --x64 --win",
    "dist-mac": "electron-builder --publish=never --mac",
    "dist-mac:local": "electron-builder --publish=never --mac -c.mac.identity=null",
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "3.4.0",
+  "version": "3.4.0-alpha-timeline.2",
  "exports": "./src/index.js",
  "dependencies": {
    "@googleapis/sheets": "^5.0.5",
@@ -20,29 +20,30 @@
    "node-xlsx": "^0.23.0",
    "ontime-utils": "workspace:*",
    "sanitize-filename": "^1.6.3",
-    "steno": "^4.0.2",
+    "steno": "^3.1.0",
+    "ts-essentials": "^9.4.1",
    "ws": "^8.13.0"
  },
  "devDependencies": {
    "@types/cors": "^2.8.17",
    "@types/express": "^4.17.17",
    "@types/multer": "^1.4.11",
-    "@types/node": "^20.14.10",
+    "@types/node": "^18.11.18",
    "@types/node-osc": "^6.0.2",
    "@types/websocket": "^1.0.5",
    "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^v7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
+    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
    "esbuild": "^0.19.10",
    "eslint": "^8.56.0",
    "eslint-plugin-prettier": "^5.1.3",
+    "nodemon": "^2.0.20",
    "ontime-types": "workspace:*",
    "prettier": "^3.3.1",
    "server-timing": "^3.3.3",
    "shx": "^0.3.4",
-    "ts-essentials": "^9.4.1",
-    "tsx": "^4.16.2",
-    "typescript": "^5.5.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.4.3",
    "vitest": "^1.6.0"
  },
  "scripts": {
@@ -50,9 +51,9 @@
    "set:demoproject": "shx cp ../../demo-db/db.json src/preloaded-db/db.json",
    "set:testproject": "shx cp ../../demo-db/db.json test-db/db.json",
    "postinstall": "pnpm addversion && pnpm set:demoproject && pnpm set:testproject",
-    "dev": "cross-env NODE_ENV=development tsx watch ./src/index.ts",
-    "dev:inspect": "cross-env NODE_ENV=development tsx watch --inspect ./src/index.ts",
-    "dev:test": "cross-env IS_TEST=true tsx ./src/index.ts",
+    "dev": "cross-env NODE_ENV=development nodemon --exec \"ts-node-esm\" ./src/index.ts",
+    "dev:inspect": "cross-env NODE_ENV=development nodemon --exec \"node --inspect --loader ts-node/esm\" ./src/index.ts",
+    "dev:test": "cross-env IS_TEST=true nodemon --exec \"ts-node-esm\" ./src/index.ts",
    "prebuild": "pnpm set:demoproject",
    "build": "pnpm prebuild && esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --legal-comments=external --outfile=dist/index.cjs",
    "build:electron": "pnpm prebuild && esbuild src/app.ts --log-level=error --platform=node --format=cjs --bundle --minify --legal-comments=external --outfile=dist/index.cjs",
@@ -8,17 +8,32 @@ import {
 } from 'ontime-types';
 import { getErrorMessage } from 'ontime-utils';

+import { join } from 'path';
+import { existsSync } from 'fs';
 import type { Request, Response } from 'express';

-import { doesProjectExist, handleUploaded } from '../../services/project-service/projectServiceUtils.js';
+import { failEmptyObjects } from '../../utils/routerUtils.js';
+import { resolveDbDirectory, resolveProjectsDirectory } from '../../setup/index.js';
+
 import * as projectService from '../../services/project-service/ProjectService.js';
+import { generateUniqueFileName } from '../../utils/generateUniqueFilename.js';
+import { appStateService } from '../../services/app-state-service/AppStateService.js';
+import { oscIntegration } from '../../services/integration-service/OscIntegration.js';
+import { httpIntegration } from '../../services/integration-service/HttpIntegration.js';
+import { DataProvider } from '../../classes/data-provider/DataProvider.js';

 export async function patchPartialProjectFile(req: Request, res: Response<DatabaseModel | ErrorResponse>) {
+  // all fields are optional in validation
+  if (failEmptyObjects(req.body, res)) {
+    res.status(400).send({ message: 'No field found to patch' });
+    return;
+  }
+
  try {
    const { rundown, project, settings, viewSettings, urlPresets, customFields, osc, http } = req.body;
    const patchDb: DatabaseModel = { rundown, project, settings, viewSettings, urlPresets, customFields, osc, http };

-    const newData = await projectService.patchCurrentProject(patchDb);
+    const newData = await projectService.applyDataModel(patchDb);

    res.status(200).send(newData);
  } catch (error) {
@@ -37,20 +52,27 @@ export async function patchPartialProjectFile(req: Request, res: Response<Databa
 *                         or a 500 status with an error message in case of an exception.
 */
 export async function createProjectFile(req: Request, res: Response<{ filename: string } | ErrorResponse>) {
-  const newProjectData: ProjectData = {
-    title: req.body?.title ?? '',
-    description: req.body?.description ?? '',
-    publicUrl: req.body?.publicUrl ?? '',
-    publicInfo: req.body?.publicInfo ?? '',
-    backstageUrl: req.body?.backstageUrl ?? '',
-    backstageInfo: req.body?.backstageInfo ?? '',
-  };
-
  try {
-    const newFileName = await projectService.createProject(req.body.filename, newProjectData);
+    const filename = generateUniqueFileName(resolveProjectsDirectory, req.body.filename);
+    const errors = projectService.validateProjectFiles({ newFilename: filename });
+
+    if (errors.length) {
+      return res.status(409).send({ message: 'Project with title already exists' });
+    }
+
+    const newProjectData: ProjectData = {
+      title: req.body?.title ?? '',
+      description: req.body?.description ?? '',
+      publicUrl: req.body?.publicUrl ?? '',
+      publicInfo: req.body?.publicInfo ?? '',
+      backstageUrl: req.body?.backstageUrl ?? '',
+      backstageInfo: req.body?.backstageInfo ?? '',
+    };
+
+    await projectService.createProjectFile(filename, newProjectData);

    res.status(200).send({
-      filename: newFileName,
+      filename,
    });
  } catch (error) {
    const message = getErrorMessage(error);
@@ -63,8 +85,10 @@ export async function createProjectFile(req: Request, res: Response<{ filename:
 */
 export async function projectDownload(req: Request, res: Response) {
  const { filename } = req.body;
-  const pathToFile = doesProjectExist(filename);
-  if (!pathToFile) {
+  const pathToFile = join(resolveDbDirectory, filename);
+
+  // Check if the file exists before attempting to download
+  if (!existsSync(pathToFile)) {
    return res.status(404).send({ message: `Project ${filename} not found.` });
  }

@@ -78,7 +102,6 @@ export async function projectDownload(req: Request, res: Response) {

 /**
 * uploads, parses and applies the data from a given file
- * Pretty much loadProject but with the extra upload step
 */
 export async function postProjectFile(req: Request, res: Response<MessageResponse | ErrorResponse>) {
  if (!req.file) {
@@ -87,18 +110,23 @@ export async function postProjectFile(req: Request, res: Response<MessageRespons
  }

  try {
+    const options = req.query;
    const { filename, path } = req.file;
-    await handleUploaded(path, filename);
-    await projectService.loadProjectFile(filename);
+
+    await projectService.handleUploadedFile(path, filename);
+    await projectService.applyProjectFile(filename, options);
+
+    const oscSettings = await DataProvider.getOsc();
+    const httpSettings = await DataProvider.getHttp();
+
+    oscIntegration.init(oscSettings);
+    httpIntegration.init(httpSettings);

    res.status(201).send({
      message: `Loaded project ${filename}`,
    });
  } catch (error) {
    const message = getErrorMessage(error);
-    if (message.startsWith('Project file')) {
-      return res.status(403).send({ message });
-    }
    res.status(400).send({ message });
  }
 }
@@ -122,16 +150,23 @@ export async function listProjects(_req: Request, res: Response<ProjectFileListR
 export async function loadProject(req: Request, res: Response<MessageResponse | ErrorResponse>) {
  try {
    const name = req.body.filename;
-    await projectService.loadProjectFile(name);
+    if (!projectService.doesProjectExist(name)) {
+      return res.status(404).send({ message: 'File not found' });
+    }
+
+    await projectService.applyProjectFile(name);
+
+    const oscSettings = await DataProvider.getOsc();
+    const httpSettings = await DataProvider.getHttp();
+
+    oscIntegration.init(oscSettings);
+    httpIntegration.init(httpSettings);

    res.status(201).send({
      message: `Loaded project ${name}`,
    });
  } catch (error) {
    const message = getErrorMessage(error);
-    if (message.startsWith('Project file')) {
-      return res.status(403).send({ message });
-    }
    res.status(500).send({ message });
  }
 }
@@ -147,12 +182,16 @@ export async function loadProject(req: Request, res: Response<MessageResponse |
 *                         or a 500 status with an error message in case of an exception.
 */
 export async function duplicateProjectFile(req: Request, res: Response<MessageResponse | ErrorResponse>) {
-  // file to copy from
-  const { filename } = req.params;
-  // new file name
-  const { newFilename } = req.body;
-
  try {
+    const { filename } = req.params;
+    const { newFilename } = req.body;
+
+    const errors = projectService.validateProjectFiles({ filename, newFilename });
+
+    if (errors.length) {
+      return res.status(409).send({ message: errors.join(', ') });
+    }
+
    await projectService.duplicateProjectFile(filename, newFilename);

    res.status(201).send({
@@ -160,10 +199,6 @@ export async function duplicateProjectFile(req: Request, res: Response<MessageRe
    });
  } catch (error) {
    const message = getErrorMessage(error);
-    if (message.startsWith('Project file')) {
-      return res.status(403).send({ message });
-    }
-
    res.status(500).send({ message });
  }
 }
@@ -180,9 +215,16 @@ export async function duplicateProjectFile(req: Request, res: Response<MessageRe
 */
 export async function renameProjectFile(req: Request, res: Response<MessageResponse | ErrorResponse>) {
  try {
-    const { newFilename } = req.body;
+    const { filename: newFilename } = req.body;
    const { filename } = req.params;

+    const errors = projectService.validateProjectFiles({ filename, newFilename });
+
+    if (errors.length) {
+      return res.status(409).send({ message: errors.join(', ') });
+    }
+
+    // Rename the file
    await projectService.renameProjectFile(filename, newFilename);

    res.status(201).send({
@@ -190,10 +232,6 @@ export async function renameProjectFile(req: Request, res: Response<MessageRespo
    });
  } catch (error) {
    const message = getErrorMessage(error);
-    if (message.startsWith('Project file')) {
-      return res.status(403).send({ message });
-    }
-
    res.status(500).send({ message });
  }
 }
@@ -209,32 +247,33 @@ export async function renameProjectFile(req: Request, res: Response<MessageRespo
 *                         or a 500 status with an error message in case of an exception.
 */
 export async function deleteProjectFile(req: Request, res: Response<MessageResponse | ErrorResponse>) {
-  const { filename } = req.params;
  try {
+    const { filename } = req.params;
+
+    const { lastLoadedProject } = await appStateService.get();
+
+    if (lastLoadedProject === filename) {
+      return res.status(403).send({ message: 'Cannot delete currently loaded project' });
+    }
+
+    const errors = projectService.validateProjectFiles({ filename });
+
+    if (errors.length) {
+      return res.status(409).send({ message: errors.join(', ') });
+    }
+
    await projectService.deleteProjectFile(filename);

-    res.status(200).send({
+    res.status(204).send({
      message: `Deleted project ${filename}`,
    });
  } catch (error) {
    const message = getErrorMessage(error);
-    if (message === 'Cannot delete currently loaded project') {
-      return res.status(403).send({ message });
-    }
-    if (message === 'Project file not found') {
-      return res.status(404).send({ message });
-    }
-
    res.status(500).send({ message });
  }
 }

-export async function getInfo(_req: Request, res: Response<GetInfo | ErrorResponse>) {
-  try {
-    const info = await projectService.getInfo();
-    res.status(200).send(info);
-  } catch (error) {
-    const message = getErrorMessage(error);
-    res.status(500).send({ message });
-  }
+export async function getInfo(_req: Request, res: Response<GetInfo>) {
+  const info = await projectService.getInfo();
+  res.status(200).send(info);
 }
@@ -18,7 +18,6 @@ import {
  validatePatchProject,
  validateFilenameBody,
  validateFilenameParam,
-  validateNewFilenameBody,
 } from './db.validation.js';

 export const router = express.Router();
@@ -32,8 +31,8 @@ router.post('/new', validateFilenameBody, validateNewProject, createProjectFile)
 router.get('/all', listProjects);

 router.post('/load', validateFilenameBody, loadProject);
-router.post('/:filename/duplicate', validateFilenameParam, validateNewFilenameBody, duplicateProjectFile);
-router.put('/:filename/rename', validateFilenameParam, validateNewFilenameBody, renameProjectFile);
+router.post('/:filename/duplicate', validateFilenameParam, validateFilenameBody, duplicateProjectFile);
+router.put('/:filename/rename', validateFilenameParam, validateFilenameBody, renameProjectFile);
 router.delete('/:filename', validateFilenameParam, deleteProjectFile);

 router.get('/info', getInfo);
@@ -26,22 +26,13 @@ export const validateNewProject = [
 * @description Validates request for pathing data in the project.
 */
 export const validatePatchProject = [
-  // Custom validator to ensure the body is not empty
-  (req: Request, res: Response, next: NextFunction) => {
-    if (Object.keys(req.body).length === 0) {
-      return res.status(422).json({ errors: [{ msg: 'Request body cannot be empty' }] });
-    }
-    next();
-  },
-
  body('rundown').isArray().optional({ nullable: false }),
  body('project').isObject().optional({ nullable: false }),
  body('settings').isObject().optional({ nullable: false }),
  body('viewSettings').isObject().optional({ nullable: false }),
-  body('urlPresets').isArray().optional({ nullable: false }),
+  body('aliases').isArray().optional({ nullable: false }),
  body('customFields').isObject().optional({ nullable: false }),
  body('osc').isObject().optional({ nullable: false }),
-  body('http').isObject().optional({ nullable: false }),

  (req: Request, res: Response, next: NextFunction) => {
    const errors = validationResult(req);
@@ -50,30 +41,6 @@ export const validatePatchProject = [
  },
 ];

-/**
- * @description Validates request with newFilename in the body.
- */
-export const validateNewFilenameBody = [
-  body('newFilename')
-    .exists()
-    .isString()
-    .trim()
-    .customSanitizer((input: string) => sanitize(input))
-    .withMessage('Failed to sanitize the filename')
-    .notEmpty()
-    .withMessage('Filename was empty or contained only invalid characters')
-    .customSanitizer((input: string) => ensureJsonExtension(input)),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) {
-      return res.status(422).json({ errors: errors.array() });
-    }
-
-    next();
-  },
-];
-
 /**
 * @description Validates request with filename in the body.
 */
@@ -11,7 +11,7 @@ import { existsSync } from 'fs';
 import xlsx from 'node-xlsx';

 import { parseExcel } from '../../utils/parser.js';
-import { parseRundown } from '../../utils/parserFunctions.js';
+import { parseCustomFields, parseRundown } from '../../utils/parserFunctions.js';
 import { deleteFile } from '../../utils/parserUtils.js';

 let excelData: { name: string; data: unknown[][] }[] = [];
@@ -42,10 +42,11 @@ export function generateRundownPreview(options: ImportMap): { rundown: OntimeRun
  const dataFromExcel = parseExcel(data, options);

  // we run the parsed data through an extra step to ensure the objects shape
-  const { rundown, customFields } = parseRundown(dataFromExcel);
+  const rundown = parseRundown(dataFromExcel);
  if (rundown.length === 0) {
    throw new Error(`Could not find data to import in the worksheet: ${options.worksheet}`);
  }
+  const customFields = parseCustomFields(dataFromExcel);

  // clear the data
  excelData = [];
@@ -1,14 +1,14 @@
 import type { ErrorResponse, HttpSettings } from 'ontime-types';
-import { getErrorMessage } from 'ontime-utils';

-import type { Request, Response } from 'express';
+import { Request, Response } from 'express';

+import { DataProvider } from '../../classes/data-provider/DataProvider.js';
 import { failEmptyObjects } from '../../utils/routerUtils.js';
 import { httpIntegration } from '../../services/integration-service/HttpIntegration.js';
-import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
+import { getErrorMessage } from 'ontime-utils';

 export async function getHTTP(_req: Request, res: Response<HttpSettings>) {
-  const http = getDataProvider().getHttp();
+  const http = DataProvider.getHttp();
  res.status(200).send(http);
 }

@@ -22,7 +22,7 @@ export async function postHTTP(req: Request, res: Response<HttpSettings | ErrorR

    httpIntegration.init(httpSettings);
    // we persist the data after init to avoid persisting invalid data
-    const result = await getDataProvider().setHttp(httpSettings);
+    const result = await DataProvider.setHttp(httpSettings);
    res.send(result).status(200);
  } catch (error) {
    const message = getErrorMessage(error);
@@ -1,14 +1,14 @@
 import type { ErrorResponse, OSCSettings } from 'ontime-types';
-import { getErrorMessage } from 'ontime-utils';

-import type { Request, Response } from 'express';
+import { Request, Response } from 'express';

+import { DataProvider } from '../../classes/data-provider/DataProvider.js';
 import { failEmptyObjects } from '../../utils/routerUtils.js';
 import { oscIntegration } from '../../services/integration-service/OscIntegration.js';
-import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
+import { getErrorMessage } from 'ontime-utils';

 export async function getOSC(_req: Request, res: Response<OSCSettings>) {
-  const osc = getDataProvider().getOsc();
+  const osc = DataProvider.getOsc();
  res.status(200).send(osc);
 }

@@ -22,7 +22,7 @@ export async function postOSC(req: Request, res: Response<OSCSettings | ErrorRes

    oscIntegration.init(oscSettings);
    // we persist the data after init to avoid persisting invalid data
-    const result = await getDataProvider().setOsc(oscSettings);
+    const result = await DataProvider.setOsc(oscSettings);

    res.send(result).status(200);
  } catch (error) {
@@ -1,14 +1,13 @@
 import { ErrorResponse, ProjectData } from 'ontime-types';
-import { getErrorMessage } from 'ontime-utils';

 import type { Request, Response } from 'express';
-
+import { DataProvider } from '../../classes/data-provider/DataProvider.js';
 import { removeUndefined } from '../../utils/parserUtils.js';
 import { failEmptyObjects } from '../../utils/routerUtils.js';
-import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
+import { getErrorMessage } from 'ontime-utils';

 export async function getProjectData(_req: Request, res: Response<ProjectData>) {
-  res.json(getDataProvider().getProjectData());
+  res.json(DataProvider.getProjectData());
 }

 export async function postProjectData(req: Request, res: Response<ProjectData | ErrorResponse>) {
@@ -26,7 +25,7 @@ export async function postProjectData(req: Request, res: Response<ProjectData |
      backstageInfo: req.body?.backstageInfo,
      endMessage: req.body?.endMessage,
    });
-    const newData = await getDataProvider().setProjectData(newEvent);
+    const newData = await DataProvider.setProjectData(newEvent);
    res.status(200).send(newData);
  } catch (error) {
    const message = getErrorMessage(error);
@@ -1,5 +1,4 @@
-import { ErrorResponse, MessageResponse, OntimeRundownEntry, RundownCached, RundownPaginated } from 'ontime-types';
-import { getErrorMessage } from 'ontime-utils';
+import { ErrorResponse, MessageResponse, OntimeRundown, OntimeRundownEntry, RundownCached } from 'ontime-types';

 import { Request, Response } from 'express';

@@ -14,63 +13,19 @@ import {
  reorderEvent,
  swapEvents,
 } from '../../services/rundown-service/RundownService.js';
-import {
-  getEventWithId,
-  getNormalisedRundown,
-  getPaginated,
-  getRundown,
-} from '../../services/rundown-service/rundownUtils.js';
+import { getNormalisedRundown, getRundown } from '../../services/rundown-service/rundownUtils.js';
+import { getErrorMessage } from 'ontime-utils';
+
+export async function rundownGetAll(_req: Request, res: Response<OntimeRundown>) {
+  const rundown = getRundown();
+  res.json(rundown);
+}

 export async function rundownGetNormalised(_req: Request, res: Response<RundownCached>) {
  const cachedRundown = getNormalisedRundown();
  res.json(cachedRundown);
 }

-export async function rundownGetById(req: Request, res: Response<OntimeRundownEntry | ErrorResponse>) {
-  const { eventId } = req.params;
-
-  try {
-    const event = getEventWithId(eventId);
-
-    if (!event) {
-      res.status(404).send({ message: 'Event not found' });
-      return;
-    }
-    res.status(200).json(event);
-  } catch (error) {
-    const message = getErrorMessage(error);
-    res.status(500).json({ message });
-  }
-}
-
-export async function rundownGetPaginated(req: Request, res: Response<RundownPaginated | ErrorResponse>) {
-  const { limit, offset } = req.query;
-
-  if (limit == null && offset == null) {
-    return res.json({
-      rundown: getRundown(),
-      total: getRundown().length,
-    });
-  }
-
-  try {
-    let parsedOffset = Number(offset);
-    if (Number.isNaN(parsedOffset)) {
-      parsedOffset = 0;
-    }
-    let parsedLimit = Number(limit);
-    if (Number.isNaN(parsedLimit)) {
-      parsedLimit = Infinity;
-    }
-    const paginatedRundown = getPaginated(parsedOffset, parsedLimit);
-
-    res.status(200).json(paginatedRundown);
-  } catch (error) {
-    const message = getErrorMessage(error);
-    res.status(400).json({ message });
-  }
-}
-
 export async function rundownPost(req: Request, res: Response<OntimeRundownEntry | ErrorResponse>) {
  if (failEmptyObjects(req.body, res)) {
    return;
@@ -5,9 +5,8 @@ import {
  rundownApplyDelay,
  rundownBatchPut,
  rundownDelete,
-  rundownGetById,
+  rundownGetAll,
  rundownGetNormalised,
-  rundownGetPaginated,
  rundownPost,
  rundownPut,
  rundownReorder,
@@ -17,7 +16,6 @@ import {
  paramsMustHaveEventId,
  rundownArrayOfIds,
  rundownBatchPutValidator,
-  rundownGetPaginatedQueryParams,
  rundownPostValidator,
  rundownPutValidator,
  rundownReorderValidator,
@@ -26,9 +24,8 @@ import {

 export const router = express.Router();

-router.get('/', rundownGetPaginatedQueryParams, rundownGetPaginated); // not used in Ontime frontend
+router.get('/', rundownGetAll); // not used in Ontime frontend
 router.get('/normalised', rundownGetNormalised);
-router.get('/:eventId', paramsMustHaveEventId, rundownGetById); // not used in Ontime frontend

 router.post('/', rundownPostValidator, rundownPost);

@@ -1,4 +1,4 @@
-import { body, param, query, validationResult } from 'express-validator';
+import { body, param, validationResult } from 'express-validator';
 import { Request, Response, NextFunction } from 'express';

 export const rundownPostValidator = [
@@ -75,14 +75,3 @@ export const rundownArrayOfIds = [
    next();
  },
 ];
-
-export const rundownGetPaginatedQueryParams = [
-  query('offset').isNumeric().optional(),
-  query('limit').isNumeric().optional(),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
-];
@@ -1,16 +1,15 @@
 import { ErrorResponse, Settings } from 'ontime-types';
 import { getErrorMessage, obfuscate } from 'ontime-utils';

-import type { Request, Response } from 'express';
+import { Request, Response } from 'express';

+import { DataProvider } from '../../classes/data-provider/DataProvider.js';
 import { failEmptyObjects } from '../../utils/routerUtils.js';
+import { extractPin } from '../../services/project-service/ProjectService.js';
 import { isDocker } from '../../setup/index.js';
-import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
-
-import { extractPin } from './settings.utils.js';

 export async function getSettings(_req: Request, res: Response<Settings>) {
-  const settings = getDataProvider().getSettings();
+  const settings = DataProvider.getSettings();
  const obfuscatedSettings = { ...settings };
  if (settings.editorKey) {
    obfuscatedSettings.editorKey = obfuscate(settings.editorKey);
@@ -28,7 +27,7 @@ export async function postSettings(req: Request, res: Response<Settings | ErrorR
    return;
  }
  try {
-    const settings = getDataProvider().getSettings();
+    const settings = DataProvider.getSettings();
    const editorKey = extractPin(req.body?.editorKey, settings.editorKey);
    const operatorKey = extractPin(req.body?.operatorKey, settings.operatorKey);
    const serverPort = Number(req.body?.serverPort);
@@ -58,7 +57,7 @@ export async function postSettings(req: Request, res: Response<Settings | ErrorR
      language,
      serverPort,
    };
-    await getDataProvider().setSettings(newData);
+    await DataProvider.setSettings(newData);
    res.status(200).send(newData);
  } catch (error) {
    const message = getErrorMessage(error);
@@ -1,15 +0,0 @@
-/**
- * Business logic for resolving a string
- */
-export function extractPin(value: string | undefined | null, fallback: string | null): string | null {
-  if (value === null) {
-    return value;
-  }
-  if (typeof value === 'undefined') {
-    return fallback;
-  }
-  if (value.length === 0) {
-    return null;
-  }
-  return value;
-}
@@ -1,13 +1,13 @@
 import type { ErrorResponse, URLPreset } from 'ontime-types';
+
+import { Request, Response } from 'express';
+
+import { DataProvider } from '../../classes/data-provider/DataProvider.js';
+import { failIsNotArray } from '../../utils/routerUtils.js';
 import { getErrorMessage } from 'ontime-utils';

-import type { Request, Response } from 'express';
-
-import { failIsNotArray } from '../../utils/routerUtils.js';
-import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
-
 export async function getUrlPresets(_req: Request, res: Response<URLPreset[]>) {
-  const presets = getDataProvider().getUrlPresets();
+  const presets = DataProvider.getUrlPresets();
  res.status(200).send(presets as URLPreset[]);
 }

@@ -21,7 +21,7 @@ export async function postUrlPresets(req: Request, res: Response<URLPreset[] | E
      alias: preset.alias,
      pathAndParams: preset.pathAndParams,
    }));
-    await getDataProvider().setUrlPresets(newPresets);
+    await DataProvider.setUrlPresets(newPresets);
    res.status(200).send(newPresets);
  } catch (error) {
    const message = getErrorMessage(error);
@@ -1,26 +1,31 @@
 import type { ErrorResponse, ViewSettings } from 'ontime-types';
+
+import { Request, Response } from 'express';
+
+import { DataProvider } from '../../classes/data-provider/DataProvider.js';
+import { failEmptyObjects } from '../../utils/routerUtils.js';
 import { getErrorMessage } from 'ontime-utils';

-import type { Request, Response } from 'express';
-
-import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
-
 export async function getViewSettings(_req: Request, res: Response<ViewSettings>) {
-  const views = getDataProvider().getViewSettings();
+  const views = DataProvider.getViewSettings();
  res.status(200).send(views);
 }

 export async function postViewSettings(req: Request, res: Response<ViewSettings | ErrorResponse>) {
+  if (failEmptyObjects(req.body, res)) {
+    return;
+  }
+
  try {
    const newData = {
      dangerColor: req.body.dangerColor,
-      endMessage: req.body.endMessage,
+      endMessage: req.body?.endMessage ?? '',
      freezeEnd: req.body.freezeEnd,
      normalColor: req.body.normalColor,
      overrideStyles: req.body.overrideStyles,
      warningColor: req.body.warningColor,
-    } as ViewSettings;
-    await getDataProvider().setViewSettings(newData);
+    };
+    await DataProvider.setViewSettings(newData);
    res.status(200).send(newData);
  } catch (error) {
    const message = getErrorMessage(error);
@@ -5,12 +5,11 @@ import { Request, Response, NextFunction } from 'express';
 * @description Validates object for POST /ontime/views
 */
 export const validateViewSettings = [
-  check('dangerColor').exists().isString().trim().withMessage('dangerColor value must be string'),
-  check('endMessage').exists().isString().trim().withMessage('endMessage value must be string'),
-  check('freezeEnd').exists().isBoolean().withMessage('freezeEnd value must be boolean'),
-  check('normalColor').exists().isString().trim().withMessage('normalColor value must be string'),
-  check('overrideStyles').exists().isBoolean().withMessage('overrideStyles value must be boolean'),
-  check('warningColor').exists().isString().trim().withMessage('warningColor value must be string'),
+  check('overrideStyles').isBoolean().withMessage('overrideStyles value must be boolean'),
+  check('endMessage').isString().trim().withMessage('endMessage value must be string'),
+  check('normalColor').isString().trim().withMessage('normalColor value must be string'),
+  check('warningColor').isString().trim().withMessage('warningColor value must be string'),
+  check('dangerColor').isString().trim().withMessage('dangerColor value must be string'),

  (req: Request, res: Response, next: NextFunction) => {
    const errors = validationResult(req);
@@ -55,17 +55,16 @@ const actionHandlers: Record<string, ActionHandler> = {
        throw new Error('Invalid property or value');
      }

-      // parseProperty is async because of the data lock
-      parseProperty(property, value).then((newObjectProperty) => {
-        const key = Object.keys(newObjectProperty)[0] as keyof OntimeEvent;
-        shouldThrottle = willCauseRegeneration(key) || shouldThrottle;
+      const newObjectProperty = parseProperty(property, value);

-        if (patchEvent.custom && newObjectProperty.custom) {
-          Object.assign(patchEvent.custom, newObjectProperty.custom);
-        } else {
-          Object.assign(patchEvent, newObjectProperty);
-        }
-      });
+      const key = Object.keys(newObjectProperty)[0] as keyof OntimeEvent;
+      shouldThrottle = willCauseRegeneration(key) || shouldThrottle;
+
+      if (patchEvent.custom && newObjectProperty.custom) {
+        Object.assign(patchEvent.custom, newObjectProperty.custom);
+      } else {
+        Object.assign(patchEvent, newObjectProperty);
+      }
    });

    if (shouldThrottle) {
@@ -1,17 +1,17 @@
 import { EndAction, OntimeEvent, TimerType, isKeyOfType, isOntimeEvent } from 'ontime-types';
 import { MILLIS_PER_SECOND, maxDuration } from 'ontime-utils';

+import { DataProvider } from '../classes/data-provider/DataProvider.js';
 import { editEvent } from '../services/rundown-service/RundownService.js';
 import { getEventWithId } from '../services/rundown-service/rundownUtils.js';
 import { coerceBoolean, coerceColour, coerceEnum, coerceNumber, coerceString } from '../utils/coerceType.js';
-import { getDataProvider } from '../classes/data-provider/DataProvider.js';

 /**
 *
 * @param {number} value time amount in seconds
 * @returns {number} time in milliseconds clamped to 0 and max duration
 */
-function clampDuration(value: number): number {
+function clampDuration(value: number) {
  const valueInMillis = value * MILLIS_PER_SECOND;
  if (valueInMillis > maxDuration || valueInMillis < 0) {
    throw new Error('Times should be from 0 to 23:59:59');
@@ -42,11 +42,10 @@ const propertyConversion = {
  timeEnd: (value: unknown) => clampDuration(coerceNumber(value)),
 };

-export async function parseProperty(property: string, value: unknown) {
+export function parseProperty(property: string, value: unknown) {
  if (property.startsWith('custom:')) {
    const customKey = property.split(':')[1].toLocaleLowerCase(); // all custom fields keys are lowercase
-    const customFields = getDataProvider().getCustomFields();
-    if (!(customKey in customFields)) {
+    if (!(customKey in DataProvider.getCustomFields())) {
      throw new Error(`Custom field ${customKey} not found`);
    }
    const parserFn = propertyConversion.custom;
@@ -1,4 +1,4 @@
-import { LogOrigin, Playback, SimpleDirection, SimplePlayback } from 'ontime-types';
+import { HttpSettings, LogOrigin, OSCSettings, Playback, SimpleDirection, SimplePlayback } from 'ontime-types';

 import 'dotenv/config';
 import express from 'express';
@@ -13,10 +13,11 @@ import {
  srcDirectory,
  environment,
  isProduction,
+  resolveDbPath,
  resolveExternalsDirectory,
  resolveStylesDirectory,
  resolvedPath,
-  resolvePublicDirectoy,
+  clearUploadfolder,
 } from './setup/index.js';
 import { ONTIME_VERSION } from './ONTIME_VERSION.js';
 import { consoleSuccess, consoleHighlight } from './utils/console.js';
@@ -27,7 +28,8 @@ import { integrationRouter } from './api-integration/integration.router.js';

 // Import adapters
 import { socket } from './adapters/WebsocketAdapter.js';
-import { getDataProvider } from './classes/data-provider/DataProvider.js';
+import { DataProvider } from './classes/data-provider/DataProvider.js';
+import { dbLoadingProcess } from './setup/loadDb.js';

 // Services
 import { integrationService } from './services/integration-service/IntegrationService.js';
@@ -42,10 +44,6 @@ import { messageService } from './services/message-service/MessageService.js';
 import { populateDemo } from './setup/loadDemo.js';
 import { getState } from './stores/runtimeState.js';
 import { initRundown } from './services/rundown-service/RundownService.js';
-import { initialiseProject } from './services/project-service/ProjectService.js';
-
-// Utilities
-import { clearUploadfolder } from './utils/upload.js';
 import { generateCrashReport } from './utils/generateCrashReport.js';
 import { getNetworkInterfaces } from './utils/networkInterfaces.js';

@@ -55,8 +53,8 @@ consoleHighlight(`Starting Ontime version ${ONTIME_VERSION}`);
 const canLog = isProduction;
 if (!canLog) {
  console.log(`Ontime running in ${environment} environment`);
-  console.log(`Ontime source directory at ${srcDirectory} `);
-  console.log(`Ontime public directory at ${resolvePublicDirectoy} `);
+  console.log(`Ontime directory at ${srcDirectory} `);
+  console.log(`Ontime database at ${resolveDbPath}`);
 }

 // Create express APP
@@ -149,11 +147,10 @@ const checkStart = (currentState: OntimeStartOrder) => {

 export const initAssets = async () => {
  checkStart(OntimeStartOrder.InitAssets);
+  await dbLoadingProcess;
  await clearUploadfolder();
  populateStyles();
  populateDemo();
-  const project = await initialiseProject();
-  logger.info(LogOrigin.Server, `Initialised Ontime with ${project}`);
 };

 /**
@@ -163,7 +160,8 @@ export const startServer = async (
  escalateErrorFn?: (error: string) => void,
 ): Promise<{ message: string; serverPort: number }> => {
  checkStart(OntimeStartOrder.InitServer);
-  const { serverPort } = getDataProvider().getSettings();
+
+  const { serverPort } = DataProvider.getSettings();

  expressServer = http.createServer(app);
  socket.init(expressServer);
@@ -194,8 +192,8 @@ export const startServer = async (
  logger.init(escalateErrorFn);

  // initialise rundown service
-  const persistedRundown = getDataProvider().getRundown();
-  const persistedCustomFields = getDataProvider().getCustomFields();
+  const persistedRundown = DataProvider.getRundown();
+  const persistedCustomFields = DataProvider.getCustomFields();
  initRundown(persistedRundown, persistedCustomFields);

  // load restore point if it exists
@@ -225,11 +223,11 @@ export const startServer = async (
 /**
 * starts integrations
 */
-export const startIntegrations = async () => {
+export const startIntegrations = async (config?: { osc: OSCSettings; http: HttpSettings }) => {
  checkStart(OntimeStartOrder.InitIO);

  // if a config is not provided, we use the persisted one
-  const { osc, http } = getDataProvider().getData();
+  const { osc, http } = config ?? DataProvider.getData();

  if (osc) {
    logger.info(LogOrigin.Tx, 'Initialising OSC Integration...');
@@ -4,7 +4,7 @@ import { generateId, millisToString } from 'ontime-utils';
 import { clock } from '../services/Clock.js';
 import { isProduction } from '../setup/index.js';
 import { socket } from '../adapters/WebsocketAdapter.js';
-import { consoleSubdued, consoleError } from '../utils/console.js';
+import { consoleSubdued, consoleRed } from '../utils/console.js';

 class Logger {
  private queue: Log[];
@@ -47,7 +47,7 @@ class Logger {
  private _push(log: Log) {
    if (this.canLog || log.level === LogLevel.Severe) {
      if (log.level === LogLevel.Severe) {
-        consoleError(`[${log.level}] \t ${log.origin} \t ${log.text}`);
+        consoleRed(`[${log.level}] \t ${log.origin} \t ${log.text}`);
      } else {
        consoleSubdued(`[${log.level}] \t ${log.origin} \t ${log.text}`);
      }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	0e73f2ecb8	bump version to alpha release	2024-06-24 21:58:50 +02:00
Carlos Valente	8aeb4c7a01	feat: progress view	2024-06-22 20:16:09 +02:00