folow selected

* upgrade expressjs

* migration

* reenable test

* extend timeout on download test

* fixup! migration

* move empty body test from controller to validator

* enusre not empty

* extract validation function

* fixup! reenable test

* remove thin controllers

* disable e2e test of project file download

.github/workflows/build.yml

@@ -14,12 +14,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - 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: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - 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: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/build_cli.yml

@@ -20,13 +20,13 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: 'https://registry.npmjs.org'
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/test.yml

@@ -17,12 +17,12 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - 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: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9
+          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.nvmrc

@@ -1 +1 @@
-v20.15.1
+v22.15.1

DEVELOPMENT.md

@@ -9,8 +9,8 @@ Ontime consists of 3 distinct parts
 The steps below will assume you have locally installed the necessary dependencies.
 Other dependencies will be installed as part of the setup
 
-- __node__ (~20)
+- __node__ (~22)
-- __pnpm__ (~9)
+- __pnpm__ (~10)
 - __docker__ (only necessary to run and build docker images)
 
 ## LOCAL DEVELOPMENT

Dockerfile

@@ -1,13 +1,13 @@
-FROM node:20-bullseye AS builder
+FROM node:22-bullseye AS builder
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install -g pnpm@9.5.0
+RUN npm install -g pnpm@10.11.0
 COPY . /app
 WORKDIR /app
 RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils install --config.dedupe-peer-dependents=false --frozen-lockfile
 RUN pnpm --filter=ontime-ui --filter=ontime-server run build:docker
 
-FROM node:20-alpine
+FROM node:22-alpine
 
 # Set environment variables
 # Environment Variable to signal that we are running production

apps/client/package.json

@@ -72,7 +72,7 @@
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "4.5.1",
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
     "eslint-plugin-jest": "^28.6.0",
@@ -86,10 +86,10 @@
     "prettier": "catalog:",
     "sass": "^1.57.1",
     "typescript": "catalog:",
-    "vite": "^5.2.11",
+    "vite": "6.3.1",
-    "vite-plugin-compression2": "^1.3.3",
+    "vite-plugin-compression2": "1.4.0",
-    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-svgr": "4.3.0",
-    "vite-tsconfig-paths": "^4.3.1",
+    "vite-tsconfig-paths": "5.1.4",
     "vitest": "catalog:"
   }
 }

apps/client/src/AppRouter.tsx

@@ -25,11 +25,10 @@ const Operator = React.lazy(() => import('./features/operator/OperatorExport'));
 const TimerView = React.lazy(() => import('./views/timer/Timer'));
 const MinimalTimerView = React.lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
 const ClockView = React.lazy(() => import('./features/viewers/clock/Clock'));
-const Countdown = React.lazy(() => import('./features/viewers/countdown/Countdown'));
+const Countdown = React.lazy(() => import('./views/countdown/Countdown'));
 
 const Backstage = React.lazy(() => import('./views/backstage/Backstage'));
 const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
-const Public = React.lazy(() => import('./views/public/Public'));
 const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
 const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
 const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));
@@ -40,7 +39,6 @@ const SClock = withPreset(withData(ClockView));
 const SCountdown = withPreset(withData(Countdown));
 const SBackstage = withPreset(withData(Backstage));
 const SProjectInfo = withPreset(withData(ProjectInfo));
-const SPublic = withPreset(withData(Public));
 const SLowerThird = withPreset(withData(Lower));
 const SStudio = withPreset(withData(StudioClock));
 const STimeline = withPreset(withData(Timeline));
@@ -88,14 +86,6 @@ export default function AppRouter() {
             </ViewLoader>
           }
         />
-        <Route
-          path='/public'
-          element={
-            <ViewLoader>
-              <SPublic />
-            </ViewLoader>
-          }
-        />
         <Route
           path='/minimal'
           element={

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

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { CustomField, CustomFieldLabel, CustomFields } from 'ontime-types';
+import { CustomField, CustomFieldKey, CustomFields } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 
@@ -24,15 +24,15 @@ export async function postCustomField(newField: CustomField): Promise<CustomFiel
 /**
  * Edits single custom field
  */
-export async function editCustomField(label: CustomFieldLabel, newField: CustomField): Promise<CustomFields> {
+export async function editCustomField(key: CustomFieldKey, newField: CustomField): Promise<CustomFields> {
-  const res = await axios.put(`${customFieldsPath}/${label}`, { ...newField });
+  const res = await axios.put(`${customFieldsPath}/${key}`, { ...newField });
   return res.data;
 }
 
 /**
  * Deletes single custom field
  */
-export async function deleteCustomField(label: CustomFieldLabel): Promise<CustomFields> {
+export async function deleteCustomField(key: CustomFieldKey): Promise<CustomFields> {
-  const res = await axios.delete(`${customFieldsPath}/${label}`);
+  const res = await axios.delete(`${customFieldsPath}/${key}`);
   return res.data;
 }

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

@@ -51,7 +51,7 @@ type BatchEditEntry = {
 /**
  * HTTP request to edit multiple events
  */
-export async function putBatchEditEvents(data: BatchEditEntry): Promise<AxiosResponse<MessageResponse>> {
+export async function putBatchEditEvents(data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
   return axios.put(`${rundownPath}/batch`, data);
 }
 
@@ -83,7 +83,7 @@ export async function requestEventSwap(data: SwapEntry): Promise<AxiosResponse<M
 /**
  * HTTP request to request application of delay
  */
-export async function requestApplyDelay(delayId: EntryId): Promise<AxiosResponse<MessageResponse>> {
+export async function requestApplyDelay(delayId: EntryId): Promise<AxiosResponse<Rundown>> {
   return axios.patch(`${rundownPath}/applydelay/${delayId}`);
 }
 

apps/client/src/common/components/buttons/Button.module.scss

@@ -0,0 +1,61 @@
+@use '../../../theme/viewerDefs' as *;
+
+.baseButton {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+
+  width: fit-content;
+  padding-inline: 1em;
+
+  border: 1px solid transparent;
+  border-radius: 3px;
+
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.subtle {
+  background: $gray-1050;
+  color: $blue-400;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}
+
+.primary {
+  background: $blue-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $blue-600;
+  }
+
+  &:active:not(:disabled) {
+    background: $blue-800;
+    border-color: $blue-900;
+  }
+
+  &:disabled {
+    opacity: $viewer-opacity-disabled;
+  }
+}
+
+.medium {
+  height: 2rem;
+}
+
+.large {
+  height: 3.5rem;
+}

apps/client/src/common/components/buttons/Button.tsx

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './Button.module.scss';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'subtle' | 'primary';
+  size?: 'medium' | 'large';
+}
+
+export default function Button(props: ButtonProps) {
+  const { className, children, variant = 'subtle', size = 'medium', ...buttonProps } = props;
+
+  return (
+    <button className={cx([style.baseButton, style[variant], style[size], className])} type='button' {...buttonProps}>
+      {children}
+    </button>
+  );
+}

apps/client/src/common/components/buttons/IconButton.module.scss

@@ -1,21 +1,28 @@
-.subtle {
+@use '../../../theme/viewerDefs' as *;
+
+.baseIconButton {
   aspect-ratio: 1;
   height: 2rem;
-  height: 2rem;
+  width: 2rem;
   display: grid;
   place-content: center;
 
-  background: $gray-1050;
-  color: $blue-400;
   border: 1px solid transparent;
   border-radius: 3px;
 
+  cursor: pointer;
+}
+
+.subtle {
+  background: $gray-1050;
+  color: $blue-400;
+
   &:hover:not(:disabled):not(:active) {
     background: $gray-1000;
     color: $blue-500;
   }
 
-  &:active {
+  &:active:not(:disabled){
     background: $gray-1100;
     border-color: $gray-1250;
   }
@@ -24,3 +31,37 @@
     background: $gray-1050;
   }
 }
+
+.subtle-white {
+  background: $gray-1050;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    background: $gray-1050;
+  }
+}
+
+.destructive {
+  background: $red-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $red-600;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $red-800;
+    border-color: $red-900;
+  }
+}

apps/client/src/common/components/buttons/IconButton.tsx

@@ -4,10 +4,15 @@ import { cx } from '../../utils/styleUtils';
 
 import style from './IconButton.module.scss';
 
-export default function IconButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  const { className, children, ...buttonProps } = props;
+  variant?: 'subtle' | 'subtle-white' | 'destructive';
+}
+
+export default function IconButton(props: IconButtonProps) {
+  const { className, children, variant = 'subtle', ...buttonProps } = props;
+
   return (
-    <button className={cx([style.subtle, className])} {...buttonProps}>
+    <button className={cx([style.baseIconButton, style[variant], className])} type='button' {...buttonProps}>
       {children}
     </button>
   );

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

@@ -3,6 +3,7 @@ import { IoSettingsOutline } from 'react-icons/io5';
 
 import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
 import { cx } from '../../utils/styleUtils';
+import IconButton from '../buttons/IconButton';
 
 import style from './NavigationMenu.module.scss';
 
@@ -17,22 +18,24 @@ export default function FloatingNavigation(props: FloatingNavigationProps) {
 
   return (
     <div className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}>
-      <button
+      <IconButton
+        variant='subtle-white'
+        className={style.navButton}
         onClick={toggleMenu}
         aria-label='toggle menu'
-        className={style.navButton}
         data-testid='navigation__toggle-menu'
       >
         <IoApps />
-      </button>
+      </IconButton>
-      <button
+      <IconButton
-        className={style.button}
+        variant='subtle-white'
+        className={style.navButton}
         onClick={toggleSettings}
         aria-label='toggle settings'
         data-testid='navigation__toggle-settings'
       >
         <IoSettingsOutline />
-      </button>
+      </IconButton>
     </div>
   );
 }

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -3,8 +3,6 @@
 $menu-hover-bg: $gray-1350;
 $menu-focus-bg: $gray-1300;
 
-$icon-color: $ui-white;
-$button-bg: $gray-1050;
 $button-size: 3rem;
 
 .fadeable {
@@ -15,6 +13,7 @@ $button-size: 3rem;
 
   &.hidden {
     opacity: 0;
+    pointer-events: none;
   }
 }
 
@@ -41,20 +40,10 @@ $button-size: 3rem;
   z-index: 12;
 }
 
-.button {
-  font-size: 1.5rem;
-  color: $icon-color;
-  background-color: $button-bg;
-  width: $button-size;
-  height: $button-size;
-  display: grid;
-  place-content: center;
-  border-radius: 3px;
-}
-
 .navButton {
-  @extend .button;
+  font-size: 1.5rem;
-  z-index: 3;
+  height: $button-size;
+  width: $button-size;;
 }
 
 .link {

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

@@ -49,11 +49,11 @@ export function useFlatRundown() {
   // update data whenever the revision changes
   useEffect(() => {
     if (data.revision !== -1 && data.revision !== prevRevision) {
-      const flatRundown = data.order.map((id) => data.entries[id]);
+      const flatRundown = data.flatOrder.map((id) => data.entries[id]);
       setFlatRundown(flatRundown);
       setPrevRevision(data.revision);
     }
-  }, [data.entries, data.order, data.revision, prevRevision]);
+  }, [data.entries, data.flatOrder, data.revision, prevRevision]);
 
   // TODO: should we have a project id field?
   // invalidate current version if project changes

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

@@ -389,8 +389,18 @@ export const useEntryActions = () => {
       // Return a context with the previous rundown
       return { previousRundown };
     },
-    onSettled: async () => {
+    onSuccess: (response) => {
-      await queryClient.invalidateQueries({ queryKey: RUNDOWN });
+      if (!response.data) return;
+
+      const { id, title, order, flatOrder, entries, revision } = response.data;
+      queryClient.setQueryData<Rundown>(RUNDOWN, {
+        id,
+        title,
+        order,
+        flatOrder,
+        entries,
+        revision,
+      });
     },
     onError: (_error, _newEvent, context) => {
       queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousRundown);
@@ -521,6 +531,19 @@ export const useEntryActions = () => {
    */
   const _applyDelayMutation = useMutation({
     mutationFn: requestApplyDelay,
+    onSuccess: (response) => {
+      if (!response.data) return;
+
+      const { id, title, order, flatOrder, entries, revision } = response.data;
+      queryClient.setQueryData<Rundown>(RUNDOWN, {
+        id,
+        title,
+        order,
+        flatOrder,
+        entries,
+        revision,
+      });
+    },
     // Mutation finished, failed or successful
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: RUNDOWN });

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

@@ -2,31 +2,38 @@ import { useEffect, useState } from 'react';
 
 import { throttle } from '../utils/throttle';
 
+const inactiveTime = 3000; // 3 seconds
 
-export const useFadeOutOnInactivity = () => {
+/**
-  const [isMouseMoved, setIsMouseMoved] = useState(false);
+ * Provides whether there has been mouse movement in the page in the last <inactiveTime>
+ */
+export const useFadeOutOnInactivity = (initialState = false) => {
+  const [isUserActive, setIsUserActive] = useState(initialState);
 
   // show on mouse move
   useEffect(() => {
     let fadeOut: NodeJS.Timeout | null = null;
     const setShowMenuTrue = () => {
-      setIsMouseMoved(true);
+      setIsUserActive(true);
       if (fadeOut) {
         clearTimeout(fadeOut);
       }
-      fadeOut = setTimeout(() => setIsMouseMoved(false), 3000);
+      fadeOut = setTimeout(() => setIsUserActive(false), inactiveTime);
     };
 
     const throttledShowMenu = throttle(setShowMenuTrue, 1000);
 
     document.addEventListener('mousemove', throttledShowMenu);
+    document.addEventListener('keydown', throttledShowMenu);
+
     return () => {
       document.removeEventListener('mousemove', throttledShowMenu);
+      document.removeEventListener('keydown', throttledShowMenu);
       if (fadeOut) {
         clearTimeout(fadeOut);
       }
     };
   }, []);
 
-  return isMouseMoved;
+  return isUserActive;
 };

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

@@ -164,11 +164,15 @@ export const useTimeUntilData = createSelector((state: RuntimeStore) => ({
   clock: state.clock,
   offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
   offsetMode: state.runtime.offsetMode,
-  currentDay: state.eventNow?.dayOffset ?? 0, //The day of the currently running event
+  currentDay: state.eventNow?.dayOffset ?? 0,
   actualStart: state.runtime.actualStart,
   plannedStart: state.runtime.plannedStart,
 }));
 
+export const useCurrentDay = createSelector((state: RuntimeStore) => ({
+  currentDay: state.eventNow?.dayOffset ?? 0,
+}));
+
 export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({
   offset: state.runtime.offset,
 }));

apps/client/src/common/models/ProjectData.ts

@@ -8,4 +8,5 @@ export const projectDataPlaceholder: ProjectData = {
   backstageUrl: '',
   backstageInfo: '',
   projectLogo: null,
+  custom: [],
 };

apps/client/src/common/utils/__tests__/__snapshots__/styleUtils.test.ts.snap

@@ -2,4 +2,4 @@
 
 exports[`cx() > ignores falsy values 1`] = `""`;
 
-exports[`cx() > merges styles 1`] = `"_test_98a1e0 _another_98a1e0"`;
+exports[`cx() > merges styles 1`] = `"_test_d5d33f _another_d5d33f"`;

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

@@ -28,6 +28,7 @@ describe('cloneEvent()', () => {
       delay: 0,
       dayOffset: 0,
       gap: 0,
+      triggers: [],
       custom: {
         lighting: '3',
       } as EntryCustomFields,
@@ -36,6 +37,7 @@ describe('cloneEvent()', () => {
     const cloned = cloneEvent(original);
     expect(cloned).not.toBe(original);
     expect(cloned.custom).not.toBe(original.custom);
+    expect(cloned.triggers).not.toBe(original.triggers);
 
     expect(cloned).toMatchObject({
       type: SupportedEntry.Event,
@@ -59,6 +61,8 @@ describe('cloneEvent()', () => {
       gap: 0,
       timeWarning: original.timeWarning,
       timeDanger: original.timeDanger,
+      triggers: original.triggers,
+      custom: original.custom,
     });
   });
 });

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

@@ -30,6 +30,7 @@ export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
     gap: 0,
     timeWarning: event.timeWarning,
     timeDanger: event.timeDanger,
-    custom: { ...event.custom },
+    triggers: structuredClone(event.triggers),
+    custom: structuredClone(event.custom),
   };
 };

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

@@ -119,7 +119,7 @@ export function formatDuration(duration: number, hideSeconds = true): string {
   }
 
   if (!hideSeconds) {
-    const seconds = Math.floor((duration % MILLIS_PER_MINUTE) / MILLIS_PER_SECOND);
+    const seconds = Math.ceil((duration % MILLIS_PER_MINUTE) / MILLIS_PER_SECOND);
     if (seconds > 0) {
       result += `${seconds}s`;
     }

apps/client/src/externals.ts

@@ -49,10 +49,7 @@ function resolveUrl(protocol: 'http' | 'ws', path: string) {
   url.pathname = baseURI ? `${baseURI}/${path}` : path;
 
   // in development mode, we use the React port for UI, but need the requests to target the server
-  if (isDev) {
+  // this is done with a proxy in the vite config to avoid CORS issues in the dev environment
-    // this is used as a fallback port for development
-    url.port = '4001';
-  }
 
   const result = url.toString();
 

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { IoPencil, IoTrash } from 'react-icons/io5';
 import { IconButton } from '@chakra-ui/react';
-import { CustomField, CustomFieldLabel } from 'ontime-types';
+import { CustomField, CustomFieldKey } from 'ontime-types';
 
 import CopyTag from '../../../../../common/components/copy-tag/CopyTag';
 import Swatch from '../../../../../common/components/input/colour-input/Swatch';
@@ -17,8 +17,8 @@ interface CustomFieldEntryProps {
   label: string;
   fieldKey: string;
   type: 'string' | 'image';
-  onEdit: (label: CustomFieldLabel, patch: CustomField) => Promise<void>;
+  onEdit: (key: CustomFieldKey, patch: CustomField) => Promise<void>;
-  onDelete: (label: CustomFieldLabel) => Promise<void>;
+  onDelete: (key: CustomFieldKey) => Promise<void>;
 }
 
 export default function CustomFieldEntry(props: CustomFieldEntryProps) {

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
-import { CustomField, CustomFieldLabel } from 'ontime-types';
+import { CustomField, CustomFieldKey } from 'ontime-types';
 
 import { deleteCustomField, editCustomField, postCustomField } from '../../../../../common/api/customFields';
 import Info from '../../../../../common/components/info/Info';
@@ -31,14 +31,14 @@ export default function CustomFields() {
     setIsAdding(false);
   };
 
-  const handleEditField = async (label: CustomFieldLabel, customField: CustomField) => {
+  const handleEditField = async (key: CustomFieldKey, customField: CustomField) => {
-    await editCustomField(label, customField);
+    await editCustomField(key, customField);
     refetch();
   };
 
-  const handleDelete = async (label: string) => {
+  const handleDelete = async (key: CustomFieldKey) => {
     try {
-      await deleteCustomField(label);
+      await deleteCustomField(key);
       refetch();
     } catch (_error) {
       /** we do not handle errors here */

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

@@ -8,7 +8,5 @@
 }
 
 .column {
-  align-items: start;
-  display: flex;
   flex-direction: column;
 }

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

@@ -123,7 +123,7 @@ export default function ViewSettingsForm() {
                 onClick={onCodeEditorOpen}
                 variant='ontime-subtle'
                 size='sm'
-                isDisabled={!data.overrideStyles}
+                isDisabled={isSubmitting}
                 width='fit-content'
               >
                 Edit CSS override

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { IoTrash } from 'react-icons/io5';
 import { Button, Input, Textarea } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 
@@ -23,6 +24,7 @@ type ProjectCreateFormValues = {
   publicUrl?: string;
   backstageInfo?: string;
   backstageUrl?: string;
+  custom?: { title: string; value: string }[];
 };
 
 export default function ProjectCreateForm(props: ProjectCreateFromProps) {
@@ -34,6 +36,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
   const {
     handleSubmit,
     register,
+    control,
     formState: { isSubmitting, isValid },
     setFocus,
   } = useForm<ProjectCreateFormValues>({
@@ -44,6 +47,11 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
     },
   });
 
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'custom',
+  });
+
   // set focus to first field
   useEffect(() => {
     setFocus('title');
@@ -59,6 +67,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
         ...values,
         filename,
       });
+
       await queryClient.invalidateQueries({ queryKey: PROJECT_LIST });
       onClose();
     } catch (error) {
@@ -66,6 +75,10 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
     }
   };
 
+  const handleAddCustom = () => {
+    append({ title: '', value: '' });
+  };
+
   return (
     <Panel.Section
       as='form'
@@ -151,6 +164,42 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
             {...register('backstageUrl')}
           />
         </label>
+        <Panel.Section>
+          <Panel.ListItem>
+            <Panel.Field title='Custom data' description='Add custom data for your project' />
+            <Button variant='ontime-subtle' onClick={handleAddCustom}>
+              +
+            </Button>
+          </Panel.ListItem>
+          {fields.map((field, idx) => (
+            <div key={field.id} className={style.customDataItem}>
+              <Panel.Paragraph>{idx + 1}.</Panel.Paragraph>
+              <label>
+                Title
+                <Input
+                  variant='ontime-filled'
+                  size='sm'
+                  placeholder={field.title}
+                  autoComplete='off'
+                  {...register(`custom.${idx}.title` as const)}
+                />
+              </label>
+              <label>
+                Value
+                <Input
+                  variant='ontime-filled'
+                  size='sm'
+                  placeholder={field.value}
+                  autoComplete='off'
+                  {...register(`custom.${idx}.value` as const)}
+                />
+              </label>
+              <Button variant='ontime-ghosted' onClick={() => remove(idx)}>
+                <IoTrash />
+              </Button>
+            </div>
+          ))}
+        </Panel.Section>
       </Panel.Section>
     </Panel.Section>
   );

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

@@ -1,6 +1,6 @@
 import { ChangeEvent, useEffect, useRef } from 'react';
-import { useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
-import { IoDownloadOutline, IoTrash } from 'react-icons/io5';
+import { IoAdd, IoDownloadOutline, IoTrash } from 'react-icons/io5';
 import { Button, Input, Textarea } from '@chakra-ui/react';
 import { type ProjectData } from 'ontime-types';
 
@@ -25,6 +25,7 @@ export default function ProjectData() {
     formState: { isSubmitting, isValid, isDirty, errors },
     setError,
     watch,
+    control,
     setValue,
   } = useForm({
     defaultValues: data,
@@ -32,6 +33,12 @@ export default function ProjectData() {
     resetOptions: {
       keepDirtyValues: true,
     },
+    mode: 'onChange',
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'custom',
   });
 
   // reset form values if data changes
@@ -77,6 +84,10 @@ export default function ProjectData() {
     });
   };
 
+  const handleAddCustom = () => {
+    append({ title: '', value: '' });
+  };
+
   const onSubmit = async (formData: ProjectData) => {
     try {
       await postProjectData(formData);
@@ -231,6 +242,69 @@ export default function ProjectData() {
               {...register('backstageUrl')}
             />
           </label>
+          <Panel.Section style={{ marginTop: 0 }}>
+            <Panel.ListItem>
+              <Panel.Field title='Custom data' description='' />
+              <Button leftIcon={<IoAdd />} size='sm' variant='ontime-subtle' onClick={handleAddCustom}>
+                Add
+              </Button>
+            </Panel.ListItem>
+            {fields.length > 0 &&
+              fields.map((field, idx) => {
+                const rowErrors = errors.custom?.[idx] as
+                  | {
+                      title?: { message?: string };
+                      value?: { message?: string };
+                    }
+                  | undefined;
+                return (
+                  <div key={field.id} className={style.customDataItem}>
+                    <div>
+                      <div className={style.titleRow}>
+                        <label>
+                          Title
+                          <Input
+                            variant='ontime-filled'
+                            size='sm'
+                            defaultValue={field.title}
+                            placeholder='Title of your custom data'
+                            autoComplete='off'
+                            {...register(`custom.${idx}.title`, {
+                              required: { value: true, message: 'Field cannot be empty' },
+                            })}
+                          />
+                        </label>
+                        <Button
+                          size='sm'
+                          variant='ontime-subtle'
+                          color='#FA5656' // $red-500
+                          onClick={() => remove(idx)}
+                          leftIcon={<IoTrash />}
+                        >
+                          Delete Entry
+                        </Button>
+                      </div>
+                      {rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
+                    </div>
+                    <label>
+                      Value
+                      <Textarea
+                        variant='ontime-filled'
+                        resize='none'
+                        size='sm'
+                        defaultValue={field.value}
+                        autoComplete='off'
+                        placeholder='Text of your custom data'
+                        {...register(`custom.${idx}.value`, {
+                          required: { value: true, message: 'Field cannot be empty' },
+                        })}
+                      />
+                      {rowErrors?.value?.message && <Panel.Error>{rowErrors.value.message}</Panel.Error>}
+                    </label>
+                  </div>
+                );
+              })}
+          </Panel.Section>
         </Panel.Section>
       </Panel.Card>
     </Panel.Section>

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

@@ -57,3 +57,18 @@
     height: auto;
   }
 }
+
+.customDataItem {
+  display: contents;
+  width: 100%;
+
+  .titleRow{
+    display: flex;
+    gap: 1rem;
+    align-items: end;
+
+    label {
+      flex: 1;
+    }
+  }
+}

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

@@ -118,7 +118,8 @@
     padding-inline: 0.25rem;
     background-color: $gray-1250;
     color: $ui-white;
-    white-space: pre;
+    // allow multi-line text but trim before
+    white-space: pre-line;
   }
 }
 

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

@@ -78,7 +78,7 @@ function OperatorEvent(props: OperatorEventProps) {
       <span className={style.mainField}>{main}</span>
       <span className={style.schedule}>
         <ClockTime value={timeStart} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
-        -
+        →
         <ClockTime value={timeEnd} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
       </span>
 

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

@@ -36,8 +36,8 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
         },
         {
           id: 'subscribe',
-          title: 'Highlight Field',
+          title: 'Highlight Fields',
-          description: 'Choose a custom field to highlight',
+          description: 'Choose custom fields to highlight',
           type: 'multi-option',
           values: customFieldSelect,
         },

apps/client/src/features/overview/Overview.module.scss

@@ -45,6 +45,10 @@
   @include ellipsis-overflow;
 }
 
+.offset {
+  color: $muted-gray;
+}
+
 .ahead {
   color: $playback-ahead;
 }

apps/client/src/features/overview/Overview.tsx

@@ -1,4 +1,5 @@
 import { memo, PropsWithChildren, ReactNode, useMemo } from 'react';
+import { Playback } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
@@ -163,10 +164,10 @@ function ProgressOverview() {
 }
 
 function RuntimeOverview() {
-  const { clock, offset } = useRuntimePlaybackOverview();
+  const { clock, offset, playback } = useRuntimePlaybackOverview();
 
   const offsetText = getOffsetText(offset);
-  const offsetClasses = offset === null ? undefined : offset <= 0 ? style.behind : style.ahead;
+  const offsetClasses = cx([style.offset, playback !== Playback.Stop && (offset < 0 ? style.behind : style.ahead)]);
 
   return (
     <>

apps/client/src/features/rundown/event-editor/EventEditor.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { CustomFieldLabel, OntimeEvent } from 'ontime-types';
+import { OntimeEvent } from 'ontime-types';
 
 import AppLink from '../../../common/components/link/app-link/AppLink';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
@@ -14,7 +14,8 @@ import EventEditorEmpty from './EventEditorEmpty';
 
 import style from './EventEditor.module.scss';
 
-export type EditorUpdateFields = 'cue' | 'title' | 'note' | 'colour' | CustomFieldLabel;
+// any of the titles + custom field labels
+export type EditorUpdateFields = 'cue' | 'title' | 'note' | 'colour' | string;
 
 interface EventEditorProps {
   event: OntimeEvent;

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

@@ -14,12 +14,12 @@ import style from './EventEditorTriggers.module.scss';
 
 interface EventEditorTriggersProps {
   eventId: string;
-  triggers?: Trigger[];
+  triggers: Trigger[];
 }
 
 export default function EventEditorTriggers(props: EventEditorTriggersProps) {
   const { triggers, eventId } = props;
-  const showTriggers = triggers !== undefined && triggers.length > 0;
+  const showTriggers = triggers.length > 0;
 
   return (
     <>

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

@@ -81,7 +81,7 @@ export function getFormattedTimer(
   localisedMinutes: string,
   options: FormattingOptions,
 ): string {
-  if (timer == null) {
+  if (timer == null || timerType === TimerType.None) {
     return options.removeSeconds ? timerPlaceholderMin : timerPlaceholder;
   }
 
@@ -98,7 +98,7 @@ export function getFormattedTimer(
     }
   }
 
-  let display = millisToString(timeToParse);
+  let display = millisToString(timeToParse, { direction: timerType });
   if (options.removeLeadingZero) {
     display = removeLeadingZero(display);
   }

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

@@ -20,7 +20,7 @@ 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 { getSubscriptionDisplayData, getTimerItems, TimerMessage } from '../../../views/countdown/countdown.utils';
 import { getCountdownOptions } from './countdown.options';
 import CountdownSelect from './CountdownSelect';
 
@@ -78,7 +78,7 @@ export default function Countdown(props: CountdownProps) {
     }
   }, [backstageEvents, searchParams]);
 
-  const { message: runningMessage, timer: runningTimer } = fetchTimerData(time, follow, selectedId, runtime.offset);
+  const { message: runningMessage, timer: runningTimer } = getSubscriptionDisplayData(time, follow, selectedId, runtime.offset);
 
   const standby = time.playback !== Playback.Play && time.playback !== Playback.Roll && selectedId === follow?.id;
   const finished = time.phase === TimerPhase.Overtime;

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

@@ -4,8 +4,7 @@ import { OntimeEntry, OntimeEvent, SupportedEntry } from 'ontime-types';
 import Empty from '../../../common/components/state/Empty';
 import { formatTime } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
-
+import { sanitiseTitle } from '../../../views/countdown/countdown.utils';
-import { sanitiseTitle } from './countdown.helpers';
 
 import './Countdown.scss';
 

apps/client/src/features/viewers/countdown/__tests__/Countdown.test.js

@@ -1,6 +1,6 @@
 import { dayInMs } from 'ontime-utils';
 
-import { fetchTimerData, sanitiseTitle, TimerMessage } from '../countdown.helpers';
+import { getSubscriptionDisplayData, sanitiseTitle, TimerMessage } from '../../../../views/countdown/countdown.utils';
 
 describe('sanitiseTitle() function', () => {
   it('should return a title when valid', () => {
@@ -26,7 +26,7 @@ describe('fetchTimerData() function', () => {
     const follow = { id: followId };
     const time = { current: currentMockValue };
 
-    const { message, timer } = fetchTimerData(time, follow, followId);
+    const { message, timer } = getSubscriptionDisplayData(time, follow, followId);
     expect(message).toBe(TimerMessage.running);
     expect(timer).toBe(currentMockValue);
   });
@@ -37,7 +37,7 @@ describe('fetchTimerData() function', () => {
     const follow = { id: 'anotherevent', timeStart: startMockValue };
     const time = { clock: timeNow };
 
-    const { message, timer } = fetchTimerData(time, follow, 'notthesameevent');
+    const { message, timer } = getSubscriptionDisplayData(time, follow, 'notthesameevent');
     expect(message).toBe(TimerMessage.toStart);
     expect(timer).toBe(startMockValue - timeNow);
   });
@@ -50,7 +50,7 @@ describe('fetchTimerData() function', () => {
     const follow = { id: followId, timeStart: startMockValue, timeEnd: endMockValue };
     const time = { clock: timeNow, current: endMockValue - startMockValue };
 
-    const { message, timer } = fetchTimerData(time, follow, 'notthesameevent');
+    const { message, timer } = getSubscriptionDisplayData(time, follow, 'notthesameevent');
     expect(message).toBe(TimerMessage.waiting);
     expect(timer).toBe(endMockValue - startMockValue);
   });
@@ -63,7 +63,7 @@ describe('fetchTimerData() function', () => {
     const follow = { id: followId, timeStart: startMockValue, timeEnd: endMockValue };
     const time = { clock: timeNow, current: endMockValue - startMockValue };
 
-    const { message, timer } = fetchTimerData(time, follow, 'notthesameevent');
+    const { message, timer } = getSubscriptionDisplayData(time, follow, 'notthesameevent');
     expect(message).toBe(TimerMessage.ended);
     expect(timer).toBe(endMockValue);
   });
@@ -76,7 +76,7 @@ describe('fetchTimerData() function', () => {
     const follow = { id: followId, timeStart: startMockValue, timeEnd: endMockValue };
     const time = { clock: timeNow, current: dayInMs + endMockValue - startMockValue };
 
-    const { message, timer } = fetchTimerData(time, follow, 'notthesameevent');
+    const { message, timer } = getSubscriptionDisplayData(time, follow, 'notthesameevent');
     expect(message).toBe(TimerMessage.waiting);
     expect(timer).toBe(dayInMs + endMockValue - startMockValue);
   });
@@ -89,7 +89,7 @@ describe('fetchTimerData() function', () => {
     const follow = { id: followId, timeStart: startMockValue, timeEnd: endMockValue };
     const time = { clock: timeNow, current: dayInMs + endMockValue - startMockValue };
 
-    const { message, timer } = fetchTimerData(time, follow, followId);
+    const { message, timer } = getSubscriptionDisplayData(time, follow, followId);
     expect(message).toBe(TimerMessage.running);
     expect(timer).toBe(dayInMs + endMockValue - startMockValue);
   });
@@ -102,7 +102,7 @@ describe('fetchTimerData() function', () => {
     const follow = { id: followId, timeStart: startMockValue, timeEnd: endMockValue };
     const time = { clock: timeNow, current: dayInMs + endMockValue - startMockValue };
 
-    const { message, timer } = fetchTimerData(time, follow, 'notthesameevent');
+    const { message, timer } = getSubscriptionDisplayData(time, follow, 'notthesameevent');
     expect(message).toBe(TimerMessage.toStart);
     expect(timer).toBe(startMockValue - timeNow);
   });

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

@@ -1,106 +0,0 @@
-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',
-  waiting = 'waiting',
-  running = 'running',
-  ended = 'ended',
-  unhandled = '',
-}
-
-/**
- * Parses string as a title
- */
-export const sanitiseTitle = (title: string | null) => (title ? title : '{no title}');
-
-/**
- * Returns a parsed timer and relevant status message
- */
-export const fetchTimerData = (
-  time: ViewExtendedTimer,
-  follow: OntimeEvent | null,
-  selectedId: string | null,
-  offset: number,
-): { message: TimerMessage; timer: number } => {
-  if (follow === null) {
-    return { message: TimerMessage.unhandled, timer: 0 };
-  }
-
-  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) {
-    // if it hasnt started, we count to start
-    return { message: TimerMessage.toStart, timer: follow.timeStart - time.clock - addedTime };
-  }
-
-  if (follow.timeStart <= time.clock && time.clock <= follow.timeEnd) {
-    // if it has started, we show running timer
-    return { message: TimerMessage.waiting, timer: time.current ?? 0 };
-  }
-
-  // running timer timer is not the one we are following
-
-  // ends day after
-  if (follow.timeStart > follow.timeEnd) {
-    if (follow.timeStart > time.clock) {
-      // if it hasnt started, we count to start
-      return { message: TimerMessage.toStart, timer: follow.timeStart - time.clock - addedTime };
-    }
-    if (follow.timeStart <= time.clock) {
-      // if it has started, we show running timer
-      return { message: TimerMessage.waiting, timer: time.current ?? 0 };
-    }
-    // if it has ended, we show how long ago
-    return { message: TimerMessage.ended, timer: follow.timeEnd };
-  }
-
-  // if it has ended, we show how long ago
-  return { message: TimerMessage.ended, timer: follow.timeEnd };
-};
-
-/**
- * Gets values for the timer items
- */
-export function getTimerItems(start: number | undefined, end: number | undefined, delay: number, offset: number) {
-  if (start == null || end == null) {
-    return {
-      scheduledStart: '',
-      scheduledEnd: '',
-      projectedStart: '',
-      projectedEnd: '',
-    };
-  }
-
-  const showProjected = getShouldShowProjected();
-  const scheduledStart = formatTime(start + delay);
-  const scheduledEnd = formatTime(end + delay);
-  const projectedStart = showProjected ? formatTime(start + delay - offset) : '';
-  const projectedEnd = showProjected ? formatTime(end + delay - offset) : '';
-
-  return {
-    scheduledStart,
-    scheduledEnd,
-    projectedStart,
-    projectedEnd,
-  };
-}
-
-/**
- * Gets from the URL whether the showProjected option is active
- */
-function getShouldShowProjected() {
-  const params = new URL(document.location.href).searchParams;
-  return isStringBoolean(params.get('showProjected'));
-}

apps/client/src/theme/_ontimeStyles.scss

@@ -8,7 +8,7 @@ $component-border-radius-sm: 2px;
 $component-border-radius-full: 99px;
 
 // semantic colours
-$action-blue: #3182ce;
+$action-blue: $blue-500;
 $action-text-color: $blue-400;
 $ontime-color: #ff7597;
 $error-red: $red-500;

apps/client/src/theme/_viewerDefs.scss

@@ -13,7 +13,7 @@ $timer-label-size: clamp(12px, 1.25vw, 20px);
 $base-font-size: clamp(15px, 1.5vw, 28px);
 $title-font-size: clamp(18px, 2.25vw, 42px);
 $timer-value-size: clamp(24px, 2.5vw, 48px);
-$header-font-size: clamp(28px, 3.5vw, 64px);
+$header-font-size: clamp(24px, 2.5vw, 48px);
 
 // General styling
 $accent-color: $red-500; // --accent-color-override
@@ -24,8 +24,8 @@ $viewer-label-color: rgba(white, 25%);
 $viewer-background-color: $ui-black; // --background-color-override
 $viewer-color: rgba(white, 80%); // --color-override
 $viewer-secondary-color: rgba(white, 45%); // --secondary-color-override
-$viewer-card-bg-color: rgba(white, 7%); // --card-background-color-override
+$viewer-card-bg-color: rgba(white, 5%); // --card-background-color-override
-$element-border-radius: 8px;
+$element-border-radius: 4px;
 
 // Generic element sizes
 $view-element-gap: min(2vh, 16px);

apps/client/src/theme/ontimeCheckbox.ts

@@ -10,12 +10,12 @@ export const ontimeCheckboxOnDark = {
       opacity: 0.6,
     },
     _checked: {
-      borderColor: '#3182ce', // $action-blue
+      borderColor: '#578AF4', // $blue-500
-      backgroundColor: '#3182ce', //$action-blue
+      backgroundColor: '#578AF4', // $blue-500
       _disabled: {
         color: 'white',
-        borderColor: '#3182ce', // $action-blue
+        borderColor: '#578AF4', // $blue-500
-        backgroundColor: '#3182ce', //$action-blue
+        backgroundColor: '#578AF4', // $blue-500
         opacity: 0.6,
       },
     },

apps/client/src/theme/ontimeModal.ts

@@ -27,6 +27,7 @@ export const ontimeModal = {
   footer: {
     padding: '1rem',
     display: 'flex',
+    alignItems: 'left',
     gap: '0.5rem',
   },
 };

apps/client/src/theme/ontimeRadio.ts

@@ -25,12 +25,12 @@ export const ontimeBlockRadio = {
     backgroundColor: '#262626', // $gray-1200
     _checked: {
       borderColor: '#262626', // $gray-1200
-      color: '#3182ce', // $action-blue
+      color: '#578AF4', // $blue-500
-      backgroundColor: '#3182ce', // $action-blue
+      backgroundColor: '#578AF4', // $blue-500
     },
     _hover: {
-      color: '#3182ce', // $action-blue
+      color: '#578AF4', // $blue-500
-      backgroundColor: '#3182ce', // $action-blue
+      backgroundColor: '#578AF4', // $blue-500
       outline: 'none',
     },
   },

apps/client/src/translation/TranslationProvider.tsx

@@ -28,8 +28,10 @@ const translationsList = {
   zh: langZhCn,
 };
 
+export type TranslationKey = keyof typeof langEn;
+
 interface TranslationContextValue {
-  getLocalizedString: (key: keyof typeof langEn, lang?: string) => string;
+  getLocalizedString: (key: TranslationKey, lang?: string) => string;
 }
 
 const TranslationContext = createContext<TranslationContextValue>({
@@ -40,7 +42,7 @@ export const TranslationProvider = ({ children }: PropsWithChildren) => {
   const { data } = useSettings();
 
   const getLocalizedString = useCallback(
-    (key: keyof typeof langEn, lang = data?.language || 'en'): string => {
+    (key: TranslationKey, lang = data?.language || 'en'): string => {
       if (lang in translationsList) {
         if (key in translationsList[lang as keyof typeof translationsList]) {
           return translationsList[lang as keyof typeof translationsList][key];

apps/client/src/views/backstage/Backstage.tsx

@@ -111,7 +111,7 @@ export default function Backstage(props: BackstageProps) {
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
       <ViewParamsEditor viewOptions={backstageOptions} />
       <div className='project-header'>
-        {general?.projectLogo ? <ViewLogo name={general.projectLogo} className='logo' /> : <div className='logo' />}
+        {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
         <div className='title'>{general.title}</div>
         <div className='clock-container'>
           <div className='label'>{getLocalizedString('common.time_now')}</div>
@@ -176,7 +176,7 @@ export default function Backstage(props: BackstageProps) {
         )}
       </div>
 
-      {showSchedule && <ScheduleExport selectedId={selectedId} isBackstage />}
+      {showSchedule && <ScheduleExport selectedId={selectedId} />}
 
       <div className={cx(['info', !showSchedule && 'info--stretch'])}>
         {general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' className='qr' />}

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

@@ -1,18 +1,16 @@
 import { cx } from '../../../common/utils/styleUtils';
 
-import { getScheduledTimes } from './schedule.utils';
 import { useSchedule } from './ScheduleContext';
 import ScheduleItem from './ScheduleItem';
 
 import './Schedule.scss';
 
 interface ScheduleProps {
-  isProduction?: boolean;
   className?: string;
 }
 
-export default function Schedule({ isProduction, className }: ScheduleProps) {
+export default function Schedule({ className }: ScheduleProps) {
-  const { events, isBackstage, containerRef } = useSchedule();
+  const { events, containerRef } = useSchedule();
 
   if (events?.length < 1) {
     return null;
@@ -21,18 +19,15 @@ export default function Schedule({ isProduction, className }: ScheduleProps) {
   return (
     <ul className={cx(['schedule', className])} ref={containerRef}>
       {events.map((event) => {
-        const { timeStart, timeEnd, delay } = getScheduledTimes(event, isProduction);
-
         return (
           <ScheduleItem
             key={event.id}
-            timeStart={timeStart}
+            timeStart={event.timeStart}
-            timeEnd={timeEnd}
+            timeEnd={event.timeEnd}
             title={event.title}
-            colour={isBackstage ? event.colour : undefined}
+            colour={event.colour}
-            backstageEvent={!event.isPublic}
             skip={event.skip}
-            delay={delay}
+            delay={event.skip ? 0 : event.delay}
           />
         );
       })}

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

@@ -7,16 +7,15 @@ import ScheduleNav from './ScheduleNav';
 
 interface ScheduleExportProps {
   selectedId: MaybeString;
-  isBackstage?: boolean;
 }
 
 export default memo(ScheduleExport);
 function ScheduleExport(props: ScheduleExportProps) {
-  const { selectedId, isBackstage } = props;
+  const { selectedId } = props;
   return (
-    <ScheduleProvider selectedEventId={selectedId} isBackstage={isBackstage}>
+    <ScheduleProvider selectedEventId={selectedId}>
       <ScheduleNav className='schedule-nav-container' />
-      <Schedule isProduction={isBackstage} className='schedule-container' />
+      <Schedule className='schedule-container' />
     </ScheduleProvider>
   );
 }

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

@@ -16,14 +16,13 @@ interface ScheduleItemProps {
   timeStart: number;
   timeEnd: number;
   title: string;
-  backstageEvent: boolean;
   colour?: string;
   skip?: boolean;
   delay: number;
 }
 
 export default function ScheduleItem(props: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, backstageEvent, colour, skip, delay } = props;
+  const { timeStart, timeEnd, title, colour, skip, delay } = props;
   const { showProjected } = useScheduleOptions();
 
   if (showProjected) {
@@ -33,7 +32,6 @@ export default function ScheduleItem(props: ScheduleItemProps) {
         timeEnd={timeEnd}
         title={title}
         colour={colour}
-        backstageEvent={backstageEvent}
         skip={skip}
         delay={delay}
       />
@@ -47,7 +45,6 @@ export default function ScheduleItem(props: ScheduleItemProps) {
         timeEnd={timeEnd}
         title={title}
         colour={colour}
-        backstageEvent={backstageEvent}
         skip={skip}
         delay={delay}
       />
@@ -63,7 +60,6 @@ export default function ScheduleItem(props: ScheduleItemProps) {
         <SuperscriptTime time={start} />
         →
         <SuperscriptTime time={end} />
-        {backstageEvent && '*'}
       </div>
       <div className='entry-title'>{title}</div>
     </li>
@@ -71,7 +67,7 @@ export default function ScheduleItem(props: ScheduleItemProps) {
 }
 
 function DelayedScheduleItem(props: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, backstageEvent, colour, skip, delay } = props;
+  const { timeStart, timeEnd, title, colour, skip, delay } = props;
 
   const start = formatTime(timeStart, formatOptions);
   const end = formatTime(timeEnd, formatOptions);
@@ -86,13 +82,11 @@ function DelayedScheduleItem(props: ScheduleItemProps) {
           <SuperscriptTime time={start} />
           →
           <SuperscriptTime time={end} />
-          {backstageEvent && '*'}
         </span>
         <span className='entry-times--delay'>
           <SuperscriptTime time={delayedStart} />
           →
           <SuperscriptTime time={delayedEnd} />
-          {backstageEvent && '*'}
         </span>
       </div>
       <div className='entry-title'>{title}</div>
@@ -101,7 +95,7 @@ function DelayedScheduleItem(props: ScheduleItemProps) {
 }
 
 function ProjectedScheduleItem(props: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, backstageEvent, colour, skip, delay } = props;
+  const { timeStart, timeEnd, title, colour, skip, delay } = props;
 
   return (
     <li className={cx(['entry', skip && 'entry--skip'])}>
@@ -110,7 +104,6 @@ function ProjectedScheduleItem(props: ScheduleItemProps) {
         <ProjectedTime time={timeStart} delay={delay} />
         →
         <ProjectedTime time={timeEnd} delay={delay} />
-        {backstageEvent && '*'}
       </div>
       <div className='entry-title'>{title}</div>
     </li>

apps/client/src/views/common/schedule/schedule.options.ts

@@ -19,14 +19,14 @@ export const scheduleOptions: ViewOption = {
     {
       id: 'cycleInterval',
       title: 'Cycle interval',
-      description: 'How long (in seconds) should each schedule page be shown.',
+      description: 'How long (in seconds) should each schedule page be shown',
       type: 'number',
       defaultValue: 10,
     },
     {
       id: 'showProjected',
       title: 'Show projected time',
-      description: 'Whether scheduled times should account for runtime offset.',
+      description: 'Whether scheduled times should account for runtime offset',
       type: 'boolean',
       defaultValue: false,
     },

apps/client/src/views/common/schedule/schedule.utils.ts

@@ -1,19 +0,0 @@
-import { OntimeEvent } from 'ontime-types';
-
-/**
- * Gather rules for how to present scheduled times
- */
-export function getScheduledTimes(event: OntimeEvent, isProduction?: boolean) {
-  if (isProduction) {
-    return {
-      timeStart: event.timeStart,
-      timeEnd: event.timeEnd,
-      delay: event.skip ? 0 : event.delay,
-    };
-  }
-  return {
-    timeStart: event.timeStart,
-    timeEnd: event.timeEnd,
-    delay: 0,
-  };
-}

apps/client/src/views/countdown/Countdown.scss

@@ -0,0 +1,197 @@
+@use '../../theme/viewerDefs' as *;
+
+$item-height: 3.5rem;
+
+.countdown {
+  margin: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+  height: 100vh;
+
+  font-family: var(--font-family-override, $viewer-font-family);
+  background: var(--background-color-override, $viewer-background-color);
+  color: var(--color-override, $viewer-color);
+  display: flex;
+  flex-direction: column;
+  gap: $view-element-gap;
+  padding: $view-outer-padding;
+  font-size: $base-font-size;
+
+  /* =================== HEADER + EXTRAS ===================*/
+  .project-header {
+    font-size: $header-font-size;
+    font-weight: 600;
+    display: flex;
+    gap: 1rem;
+  }
+
+  .logo {
+    max-width: min(200px, 20vw);
+  }
+
+  .title {
+    line-height: 1.1em;
+  }
+
+  .clock-container {
+    margin-left: auto;
+    font-weight: 600;
+
+    .label {
+      font-size: $timer-label-size;
+      color: var(--label-color-override, $viewer-label-color);
+      text-transform: uppercase;
+    }
+
+    .time {
+      font-size: $timer-value-size;
+      color: var(--secondary-color-override, $viewer-secondary-color);
+      letter-spacing: 0.05em;
+      line-height: 0.95em;
+    }
+  }
+
+  .fab-container {
+    position: fixed;
+    bottom: 1.5rem;
+    bottom: calc(1.5rem + env(safe-area-inset-bottom));
+    right: $view-inline-padding;
+
+    display: flex;
+    justify-content: end;
+    gap: 2rem;
+
+    transition-property: opacity;
+    transition-duration: 0.3s;
+  }
+
+  .fab-container--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* ========================= LIST ========================*/
+  .empty-container {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    button {
+      margin-top: 2rem;
+    }
+  }
+
+  .list-container {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  /* ====================== LIST-ITEM ======================*/
+  .sub {
+    margin: 2px;
+    flex: 1;
+    display: grid;
+    grid-template-columns: 1rem 1fr auto;
+    grid-template-areas:
+      'binder schedule  status'
+      'binder title     timer'
+      'binder secondary secondary';
+    column-gap: 1rem;
+    background: $viewer-card-bg-color;
+    padding-right: 1rem;
+    border-radius: $element-border-radius;
+    overflow: clip;
+
+    &:hover {
+      .sub__label {
+        color: $ui-white;
+      }
+    }
+  }
+
+  .sub--selected {
+    background: $blue-700;
+  }
+
+  .sub--live {
+    background-color: $green-700;
+  }
+
+  .sub__binder {
+    background: var(--user-color, $viewer-card-bg-color);
+    grid-area: binder;
+  }
+
+  .sub__schedule {
+    grid-area: schedule;
+    padding-top: 0.5rem;
+
+    display: flex;
+    gap: 0.25em;
+    font-size: $timer-label-size;
+  }
+
+  .sub__schedule--delayed {
+    color: $delay-color;
+  }
+
+  .sub__schedule--ahead {
+    color: $green-500;
+  }
+
+  .sub__schedule--behind {
+    color: $orange-500;
+  }
+
+  .sub__title {
+    grid-area: title;
+    padding-bottom: 0.5rem;
+
+    font-size: $title-font-size;
+    line-height: 1.1em;
+  }
+
+  .sub__secondary {
+    grid-area: secondary;
+    padding-bottom: 0.5rem;
+
+    font-size: $base-font-size;
+    line-height: 1.1em;
+    // allow multi-line text but trim before
+    white-space: pre-line;
+  }
+
+  .sub__status {
+    grid-area: status;
+    padding-top: 0.5rem;
+
+    font-size: $timer-label-size;
+    text-align: right;
+  }
+
+  .sub__label {
+    grid-area: status;
+    padding-top: 0.5rem;
+
+    font-size: $timer-label-size;
+    color: var(--label-color-override, $viewer-label-color);
+    text-align: right;
+  }
+
+  .sub__timer {
+    grid-area: timer;
+
+    font-size: $timer-value-size;
+    line-height: 1.1em;
+    font-weight: 600;
+    text-align: right;
+  }
+
+  /* ====================== MODIFIERS ======================*/
+  .subdued {
+    opacity: 0.6;
+  }
+}

apps/client/src/views/countdown/Countdown.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { IoAdd } from 'react-icons/io5';
+import {
+  CustomFields,
+  EntryId,
+  isOntimeEvent,
+  isPlayableEvent,
+  OntimeEvent,
+  ProjectData,
+  Settings,
+} from 'ontime-types';
+
+import Button from '../../common/components/buttons/Button';
+import Empty from '../../common/components/state/Empty';
+import ViewLogo from '../../common/components/view-logo/ViewLogo';
+import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
+import { useWindowTitle } from '../../common/hooks/useWindowTitle';
+import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
+import { formatTime, getDefaultFormat } from '../../common/utils/time';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
+import { useTranslation } from '../../translation/TranslationProvider';
+
+import { getCountdownOptions, useCountdownOptions } from './countdown.options';
+import CountdownSelect from './CountdownSelect';
+import CountdownSubscriptions from './CountdownSubscriptions';
+
+import './Countdown.scss';
+
+interface CountdownProps {
+  backstageEvents: OntimeEvent[];
+  customFields: CustomFields;
+  general: ProjectData;
+  time: ViewExtendedTimer;
+  isMirrored: boolean;
+  selectedId: EntryId | null;
+  settings: Settings | undefined;
+}
+
+export default function Countdown(props: CountdownProps) {
+  const { backstageEvents, customFields, general, time, isMirrored, selectedId, settings } = props;
+
+  const { getLocalizedString } = useTranslation();
+  const { subscriptions } = useCountdownOptions();
+  const [editMode, setEditMode] = useState(false);
+
+  useWindowTitle('Countdown');
+
+  // gather rundown data
+  const playableEvents = backstageEvents.filter((event) => isOntimeEvent(event) && isPlayableEvent(event));
+
+  // gather timer data
+  const clock = formatTime(time.clock);
+
+  // gather presentation data
+  const hasEvents = playableEvents.length > 0;
+
+  // gather option data
+  const defaultFormat = getDefaultFormat(settings?.timeFormat);
+  const countdownOptions = getCountdownOptions(defaultFormat, customFields);
+
+  return (
+    <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
+      <ViewParamsEditor viewOptions={countdownOptions} />
+      <div className='project-header'>
+        {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
+        <div className='title'>{general.title}</div>
+        <div className='clock-container'>
+          <div className='label'>{getLocalizedString('common.time_now')}</div>
+          <SuperscriptTime time={clock} className='time' />
+        </div>
+      </div>
+
+      {!hasEvents && <Empty text={getLocalizedString('common.no_data')} className='empty-container' />}
+
+      {hasEvents && editMode && (
+        <CountdownSelect events={playableEvents} subscriptions={subscriptions} disableEdit={() => setEditMode(false)} />
+      )}
+
+      {hasEvents && !editMode && (
+        <CountdownContents
+          playableEvents={playableEvents}
+          subscriptions={subscriptions}
+          time={time}
+          goToEditMode={() => setEditMode(true)}
+          selectedId={selectedId}
+        />
+      )}
+    </div>
+  );
+}
+
+interface CountdownContentsProps {
+  playableEvents: OntimeEvent[];
+  selectedId: EntryId | null;
+  subscriptions: EntryId[];
+  time: ViewExtendedTimer;
+  goToEditMode: () => void;
+}
+
+function CountdownContents(props: CountdownContentsProps) {
+  const { playableEvents, selectedId, subscriptions, time, goToEditMode } = props;
+
+  const { getLocalizedString } = useTranslation();
+
+  if (subscriptions.length === 0) {
+    return (
+      <div className='empty-container'>
+        <Empty text={getLocalizedString('countdown.select_event')} className='empty-container' />
+        <Button variant='primary' size='large' onClick={goToEditMode}>
+          <IoAdd /> Add
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <CountdownSubscriptions
+      events={playableEvents}
+      selectedId={selectedId}
+      subscriptions={subscriptions}
+      time={time}
+      goToEditMode={goToEditMode}
+    />
+  );
+}

apps/client/src/views/countdown/CountdownSelect.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { IoArrowBack, IoClose, IoSaveOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+import { EntryId, OntimeEvent } from 'ontime-types';
+
+import Button from '../../common/components/buttons/Button';
+import { cx } from '../../common/utils/styleUtils';
+import ClockTime from '../../features/viewers/common/clock-time/ClockTime';
+
+import { makeSubscriptionsUrl } from './countdown.utils';
+
+import './Countdown.scss';
+
+interface CountdownSelectProps {
+  events: OntimeEvent[];
+  subscriptions: EntryId[];
+  disableEdit: () => void;
+}
+
+export default function CountdownSelect(props: CountdownSelectProps) {
+  const { events, subscriptions, disableEdit } = props;
+  const [selected, setSelected] = useState<EntryId[]>(subscriptions);
+  const navigate = useNavigate();
+
+  /**
+   * Toggles an entry from the selected set
+   */
+  const toggleSelect = (entryId: EntryId) => {
+    setSelected((prev) => {
+      if (prev.includes(entryId)) {
+        // If the entry is already selected, remove it
+        return prev.filter((id) => id !== entryId);
+      }
+      return [...prev, entryId];
+    });
+  };
+
+  /**
+   * Creates a URL with the selected subscriptions
+   * and navigates to it
+   */
+  const applySelection = () => {
+    const url = makeSubscriptionsUrl(window.location.href, selected);
+    disableEdit();
+    navigate(url.search.toString());
+  };
+
+  // make a copy of the selected array for quick lookup
+  const selectedIds = new Set(selected);
+
+  return (
+    <div className='list-container'>
+      {events.map((event: OntimeEvent, index: number) => {
+        const title = event.title || '{no title}';
+        const isSelected = selectedIds.has(event.id);
+
+        return (
+          <div
+            key={index}
+            role='button'
+            tabIndex={0}
+            onClick={() => toggleSelect(event.id)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                toggleSelect(event.id);
+                e.stopPropagation();
+              }
+            }}
+            className={cx(['sub', isSelected && 'sub--selected'])}
+          >
+            <div className='sub__binder' style={{ '--user-color': event?.colour ?? '' }} />
+            <div className='sub__schedule'>
+              <ClockTime value={event.timeStart} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+              →
+              <ClockTime value={event.timeEnd} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+            </div>
+            <div className='sub__label'>{isSelected ? 'Click to remove' : 'Click to add'}</div>
+            <div className='sub__title'>{title}</div>
+          </div>
+        );
+      })}
+
+      <div className='fab-container'>
+        <Button variant='subtle' size='large' onClick={disableEdit}>
+          <IoArrowBack /> Go back
+        </Button>
+        <Button variant='subtle' size='large' onClick={() => setSelected([])} disabled={selected.length === 0}>
+          <IoClose /> Clear
+        </Button>
+        <Button variant='primary' size='large' disabled={events.length < 1} onClick={applySelection}>
+          <IoSaveOutline /> Save
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/client/src/views/countdown/CountdownSubscriptions.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState } from 'react';
+import { IoPencil } from 'react-icons/io5';
+import { EntryId, OntimeEvent, Playback } from 'ontime-types';
+
+import Button from '../../common/components/buttons/Button';
+import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
+import useFollowComponent from '../../common/hooks/useFollowComponent';
+import { useCurrentDay, useRuntimeOffset } from '../../common/hooks/useSocket';
+import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
+import { cx } from '../../common/utils/styleUtils';
+import FollowButton from '../../features/operator/follow-button/FollowButton';
+import ClockTime from '../../features/viewers/common/clock-time/ClockTime';
+import { getPropertyValue } from '../../features/viewers/common/viewUtils';
+import { useTranslation } from '../../translation/TranslationProvider';
+
+import { useCountdownOptions } from './countdown.options';
+import { getOrderedSubscriptions, getSubscriptionDisplayData, sanitiseTitle, timerProgress } from './countdown.utils';
+
+import './Countdown.scss';
+
+interface CountdownSubscriptionsProps {
+  events: OntimeEvent[];
+  selectedId: EntryId | null;
+  subscriptions: EntryId[];
+  time: ViewExtendedTimer;
+  goToEditMode: () => void;
+}
+
+export default function CountdownSubscriptions(props: CountdownSubscriptionsProps) {
+  const { time, events, selectedId, goToEditMode } = props;
+  const { followSelected, secondarySource, subscriptions, showProjected } = useCountdownOptions();
+  const showFab = useFadeOutOnInactivity(true);
+
+  const [lockAutoScroll, setLockAutoScroll] = useState(false);
+  const selectedRef = useRef<HTMLDivElement | null>(null);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const scrollToComponent = useFollowComponent({
+    followRef: selectedRef,
+    scrollRef,
+    doFollow: !lockAutoScroll,
+    topOffset: 0,
+  });
+
+  // reset scroll if nothing is selected
+  useEffect(() => {
+    if (!selectedId) {
+      if (!lockAutoScroll) {
+        scrollRef.current?.scrollTo(0, 0);
+      }
+    }
+  }, [selectedId, lockAutoScroll, scrollRef]);
+
+  // scroll to component if user clicks the Follow button
+  const handleOffset = () => {
+    if (selectedId) {
+      scrollToComponent();
+    }
+    setLockAutoScroll(false);
+  };
+
+  // gather data
+  const subscribedEvents = getOrderedSubscriptions(subscriptions, events);
+
+  return (
+    <div className='list-container'>
+      {subscribedEvents.map((event) => {
+        const secondaryData = getPropertyValue(event, secondarySource);
+        const isLive = event.id === selectedId && time.playback !== Playback.Armed;
+
+        return (
+          <div key={event.id} className={cx(['sub', isLive && 'sub--live'])}>
+            <div className='sub__binder' style={{ '--user-color': event.colour }} />
+            <div className={cx(['sub__schedule', event.delay > 0 && 'sub__schedule--delayed'])}>
+              {showProjected ? (
+                <ProjectedSchedule timeStart={event.timeStart} timeEnd={event.timeEnd} delay={event.delay} />
+              ) : (
+                <>
+                  <ClockTime value={event.timeStart + event.delay} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+                  →
+                  <ClockTime value={event.timeEnd + event.delay} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+                </>
+              )}
+            </div>
+            <SubscriptionStatus key={event.id} event={event} selectedId={selectedId} time={time} />
+            <div className={cx(['sub__title', !event.title && 'subdued'])}>{sanitiseTitle(event.title)}</div>
+            {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
+          </div>
+        );
+      })}
+      <div className={cx(['fab-container', !showFab && 'fab-container--hidden'])}>
+        <Button variant='primary' size='large' disabled={events.length < 1} onClick={goToEditMode}>
+          <IoPencil /> Edit
+        </Button>
+      </div>
+      <FollowButton isVisible={lockAutoScroll} onClickHandler={handleOffset} />
+    </div>
+  );
+}
+
+interface ProjectedScheduleProps {
+  timeStart: number;
+  timeEnd: number;
+  delay: number;
+}
+function ProjectedSchedule(props: ProjectedScheduleProps) {
+  const { timeStart, timeEnd, delay } = props;
+
+  const { offset } = useRuntimeOffset();
+
+  // offset is negative if we are ahead
+  const projectedOffset = offset - delay;
+
+  const classes = cx([projectedOffset > 0 && 'sub__schedule--ahead', projectedOffset < 0 && 'sub__schedule--behind']);
+
+  return (
+    <>
+      <ClockTime
+        value={timeStart - projectedOffset}
+        className={classes}
+        preferredFormat12='h:mm'
+        preferredFormat24='HH:mm'
+      />
+      →
+      <ClockTime value={timeEnd - projectedOffset} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+    </>
+  );
+}
+
+interface SubscriptionStatusProps {
+  time: ViewExtendedTimer;
+  event: OntimeEvent;
+  selectedId: EntryId | null;
+}
+
+function SubscriptionStatus(props: SubscriptionStatusProps) {
+  const { time, event, selectedId } = props;
+
+  const { getLocalizedString } = useTranslation();
+  const { currentDay } = useCurrentDay();
+  const { offset } = useRuntimeOffset();
+  const { showProjected } = useCountdownOptions();
+
+  // TODO: use reporter values as in the event block chip
+  const { status, timer } = getSubscriptionDisplayData(
+    time,
+    event,
+    selectedId,
+    offset,
+    currentDay,
+    getLocalizedString('common.minutes'),
+    showProjected,
+  );
+
+  return (
+    <>
+      <div className='sub__status'>{getLocalizedString(timerProgress[status])}</div>
+      <div className='sub__timer'>{timer}</div>
+    </>
+  );
+}

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

@@ -0,0 +1,107 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { CustomFields, EntryId, OntimeEvent } from 'ontime-types';
+
+import {
+  getTimeOption,
+  makeOptionsFromCustomFields,
+  OptionTitle,
+} from '../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../common/components/view-params-editor/types';
+import { isStringBoolean } from '../../features/viewers/common/viewUtils';
+
+export const getCountdownOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
+
+  return [
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
+        {
+          id: 'sub',
+          title: 'Event subscription',
+          description: 'The events to follow',
+          value: '',
+          type: 'persist',
+        },
+        {
+          // TODO: adding a secondary source is removing the subscriptions
+          // this seems to be a bug with persist assuming that the property has a single entry
+          id: 'secondary-src',
+          title: 'Event secondary text',
+          description: 'Select the data source for auxiliary text shown in the card',
+          type: 'option',
+          values: secondaryOptions,
+          defaultValue: '',
+        },
+      ],
+    },
+    {
+      title: OptionTitle.ElementVisibility,
+      collapsible: true,
+      options: [
+        {
+          id: 'followSelected',
+          title: 'Follow selected event',
+          description: 'Whether the view should automatically scroll to the selected event',
+          type: 'boolean',
+          defaultValue: false,
+        },
+        {
+          id: 'hidePast',
+          title: 'Hide Past Events',
+          description: 'Whether to hide events that have passed',
+          type: 'boolean',
+          defaultValue: false,
+        },
+      ],
+    },
+    {
+      title: OptionTitle.BehaviourOptions,
+      collapsible: true,
+      options: [
+        {
+          id: 'showProjected',
+          title: 'Show projected time',
+          description: 'Whether scheduled times should account for runtime offset',
+          type: 'boolean',
+          defaultValue: false,
+        },
+      ],
+    },
+  ];
+};
+
+type CountdownOptions = {
+  subscriptions: EntryId[];
+  secondarySource: keyof OntimeEvent | null;
+  showProjected: boolean;
+  followSelected: boolean;
+  hidePast: boolean;
+};
+
+/**
+ * Utility extract the view options from URL Params
+ * the names and fallback are manually matched with timerOptions
+ */
+function getOptionsFromParams(searchParams: URLSearchParams): CountdownOptions {
+  // we manually make an object that matches the key above
+  return {
+    subscriptions: searchParams.getAll('sub') as EntryId[],
+    secondarySource: searchParams.get('secondary-src') as keyof OntimeEvent | null,
+    showProjected: isStringBoolean(searchParams.get('showProjected')),
+    followSelected: isStringBoolean(searchParams.get('followSelected')),
+    hidePast: isStringBoolean(searchParams.get('hidePast')),
+  };
+}
+
+/**
+ * Hook exposes the backstage view options
+ */
+export function useCountdownOptions(): CountdownOptions {
+  const [searchParams] = useSearchParams();
+  const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
+  return options;
+}

apps/client/src/views/countdown/countdown.utils.ts

@@ -0,0 +1,194 @@
+import { EntryId, OntimeEvent, Playback, TimerType } from 'ontime-types';
+
+import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
+import { getFormattedTimer } from '../../features/viewers/common/viewUtils';
+import type { TranslationKey } from '../../translation/TranslationProvider';
+
+/**
+ * Parses string as a title
+ */
+export const sanitiseTitle = (title: string | null) => (title ? title : '{no title}');
+
+const subscriptionTimerDisplayOptions = {
+  removeSeconds: true,
+  removeLeadingZero: true,
+} as const;
+
+type TimerMessage = Record<string, TranslationKey>;
+export type ProgressStatus = 'future' | 'due' | 'live' | 'done';
+
+export const timerProgress: TimerMessage = {
+  future: 'countdown.to_start',
+  due: 'timeline.due',
+  live: 'timeline.live',
+  done: 'countdown.ended',
+};
+
+/**
+ * Returns a parsed timer and relevant status message
+ * Handles events in different days but disregards whether an event has actually played
+ * TODO: get data from reporter and check if the event has played
+ * TODO: get timer data granularly
+ */
+export function getSubscriptionDisplayData(
+  time: ViewExtendedTimer,
+  subscribedEvent: OntimeEvent,
+  selectedId: EntryId | null,
+  offset: number,
+  currentDay: number,
+  minutesString: string,
+  showProjected = false,
+): { status: ProgressStatus; timer: string } {
+  const addedTime = showProjected ? offset : 0;
+
+  if (selectedId === subscribedEvent.id) {
+    // 1. An event that is loaded but not running is {'due': <countdown | overtime>}
+    if (time.playback === Playback.Armed) {
+      // if we are following the event, but it is not running, we show the armed timer
+      return {
+        status: 'due',
+        timer: getFormattedTimer(
+          subscribedEvent.timeStart + addedTime,
+          TimerType.CountDown,
+          minutesString,
+          subscriptionTimerDisplayOptions,
+        ),
+      };
+    }
+
+    // 2. An event with a time-to-start lower than 0 is {'due': <countdown | scheduledStart>}
+    return {
+      status: 'live',
+      timer: getFormattedTimer(time.current, TimerType.CountDown, minutesString, subscriptionTimerDisplayOptions),
+    };
+  }
+
+  /**
+   * If the running timer is not the one we are following
+   * we can be in future, due or have ended
+   */
+
+  // 3. event is the day after
+  if (subscribedEvent.dayOffset > currentDay) {
+    return {
+      status: 'future',
+      timer: getFormattedTimer(
+        subscribedEvent.timeStart - time.clock - addedTime,
+        TimerType.CountDown,
+        minutesString,
+        subscriptionTimerDisplayOptions,
+      ),
+    };
+  }
+
+  // 4. event is the before after, show the scheduled end
+  if (subscribedEvent.dayOffset < currentDay) {
+    return {
+      status: 'done',
+      timer: getFormattedTimer(
+        subscribedEvent.timeEnd,
+        TimerType.CountDown,
+        minutesString,
+        subscriptionTimerDisplayOptions,
+      ),
+    };
+  }
+
+  // 5. if event is in future, we count to the scheduled start
+  if (time.clock < subscribedEvent.timeStart) {
+    return {
+      status: 'future',
+      timer: getFormattedTimer(
+        subscribedEvent.timeStart - time.clock - addedTime,
+        TimerType.CountDown,
+        minutesString,
+        subscriptionTimerDisplayOptions,
+      ),
+    };
+  }
+
+  // 6. if event has ended, we count to the scheduled end
+  if (time.clock > subscribedEvent.timeEnd) {
+    return {
+      status: 'done',
+      timer: getFormattedTimer(
+        subscribedEvent.timeEnd,
+        TimerType.CountDown,
+        minutesString,
+        subscriptionTimerDisplayOptions,
+      ),
+    };
+  }
+
+  // the event here has to be due
+  return {
+    status: 'due',
+    timer: getFormattedTimer(
+      subscribedEvent.timeStart + addedTime,
+      TimerType.CountDown,
+      minutesString,
+      subscriptionTimerDisplayOptions,
+    ),
+  };
+}
+
+/**
+ * Adds a set of subscriptions to the URL parameters
+ */
+export function makeSubscriptionsUrl(urlRef: string, subscriptions: EntryId[]) {
+  const url = new URL(urlRef);
+  const newParams = new URLSearchParams();
+
+  // copy existing parameters except for 'sub'
+  for (const [key, value] of url.searchParams.entries()) {
+    if (key !== 'sub') {
+      newParams.append(key, value);
+    }
+  }
+
+  // add new subscriptions
+  subscriptions.forEach((id) => {
+    newParams.append('sub', id);
+  });
+
+  url.search = newParams.toString();
+
+  return url;
+}
+
+/**
+ * Returns an array of events subscribed events ordered by scheduled
+ * Since the original array is already ordered, we simply filter out the events
+ * which are not in the subscriptions list.
+ */
+export function getOrderedSubscriptions(subscriptions: EntryId[], playableEvents: OntimeEvent[]): OntimeEvent[] {
+  return playableEvents.filter((event) => subscriptions.includes(event.id));
+}
+
+/**
+ * Checks through the rundown whether the current event is linked to the loaded event
+ */
+export function isLinkedToLoadedEvent(events: OntimeEvent[], loadedId: EntryId | null, currentId: EntryId): boolean {
+  // if nothing is loaded, we return true to simplify the logic
+  if (!loadedId) {
+    return true;
+  }
+
+  const loadedIndex = events.findIndex((event) => event.id === loadedId);
+  if (loadedIndex === -1) {
+    return true;
+  }
+
+  for (let i = loadedIndex; i < events.length; i++) {
+    const event = events[i];
+    if (event.id === currentId) {
+      return true;
+    }
+
+    if (event.linkStart === null) {
+      return false;
+    }
+  }
+
+  return true;
+}

apps/client/src/views/cuesheet/__tests__/cuesheet.utils.test.ts

@@ -96,11 +96,12 @@ describe('makeTable()', () => {
           "Is Public? (x)",
           "Skip?",
           "lighting",
+          "Type",
         ],
         [
           "00:00:00",
           "00:00:00",
-          "...",
+          "",
           "",
           "",
           "",
@@ -109,6 +110,7 @@ describe('makeTable()', () => {
           "x",
           "",
           "",
+          "",
         ],
       ]
     `);

apps/client/src/views/cuesheet/cuesheet.utils.ts

@@ -20,7 +20,7 @@ type CsvHeaderKey = OntimeEntryCommonKeys | keyof CustomFields;
 
 export const parseField = (field: CsvHeaderKey, data: unknown): string => {
   if (field === 'timeStart' || field === 'timeEnd' || field === 'duration') {
-    return millisToString(data as MaybeNumber);
+    return millisToString(data as MaybeNumber, { fallback: '' });
   }
 
   if (field === 'isPublic' || field === 'skip') {
@@ -55,6 +55,7 @@ export const makeTable = (headerData: ProjectData, rundown: OntimeEntry[], custo
     'isPublic',
     'skip',
     ...customFieldKeys,
+    'type',
   ];
 
   const fieldTitles = [
@@ -69,6 +70,7 @@ export const makeTable = (headerData: ProjectData, rundown: OntimeEntry[], custo
     'Is Public? (x)',
     'Skip?',
     ...customFieldLabels,
+    'Type',
   ];
 
   // add header row to data

apps/client/src/views/project-info/ProjectInfo.scss

@@ -25,7 +25,9 @@
     flex: 1;
     max-height: 100%;
     overflow-y: auto;
-    width: min(calc(100vw - 4rem), 800px);
+    width: min(calc(100vw - 4rem), 960px);
+
+    padding-bottom: 10vh;
   }
 
   .info__label {
@@ -33,11 +35,15 @@
     color: var(--label-color-override, $viewer-label-color);
     text-transform: uppercase;
     margin-top: $view-element-gap;
-    white-space: pre;
+  }
+
+  .info__value {
+    white-space: break-spaces;
   }
 
   a.info__value {
     color: $action-text-color;
+  
     &:hover {
       color: $ontime-color;
     }

apps/client/src/views/project-info/ProjectInfo.tsx

@@ -8,6 +8,7 @@ import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { useTranslation } from '../../translation/TranslationProvider';
 
 import BackstageInfo from './backstage-info/BackstageInfo';
+import CustomInfo from './custom-info/CustomInfo';
 import PublicInfo from './public-info/PublicInfo';
 import { projectInfoOptions } from './projectInfo.options';
 
@@ -66,6 +67,7 @@ export default function ProjectInfo(props: ProjectInfoProps) {
         )}
         <BackstageInfo general={general} />
         <PublicInfo general={general} />
+        <CustomInfo general={general} />
       </div>
     </div>
   );

apps/client/src/views/project-info/custom-info/CustomInfo.tsx

@@ -0,0 +1,36 @@
+import { Fragment } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { ProjectData } from 'ontime-types';
+
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
+interface CustomInfoProps {
+  general: ProjectData;
+}
+
+export default function CustomInfo(props: CustomInfoProps) {
+  const { general } = props;
+  const [searchParams] = useSearchParams();
+
+  const showCustom = isStringBoolean(searchParams.get('showCustom'));
+
+  if (!showCustom || general.custom === undefined || general.custom.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {general.custom.map((info, idx) => {
+        if (!info.title || !info.value) {
+          return null;
+        }
+        return (
+          <Fragment key={`${info.title}-${idx}`}>
+            <div className='info__label'>{info.title}</div>
+            <div className='info__value'>{info.value}</div>
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}

apps/client/src/views/project-info/projectInfo.options.ts

@@ -9,14 +9,21 @@ export const projectInfoOptions: ViewOption[] = [
       {
         id: 'showBackstage',
         title: 'Show backstage Data',
-        description: 'Weather to show fields related to the backstage views',
+        description: 'Whether to show fields related to the backstage views',
         type: 'boolean',
         defaultValue: false,
       },
       {
         id: 'showPublic',
         title: 'Show Public Data',
-        description: 'Weather to show fields related to the public views',
+        description: 'Whether to show fields related to the public views',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      {
+        id: 'showCustom',
+        title: 'Show Custom Data',
+        description: 'Whether to show fields related to the custom data',
         type: 'boolean',
         defaultValue: false,
       },

apps/client/src/views/public/Public.scss

@@ -1,204 +0,0 @@
-@use '../../theme/viewerDefs' as *;
-
-.public-screen {
-  margin: 0;
-  box-sizing: border-box; /* reset */
-  overflow: hidden;
-  width: 100%; /* restrict the page width to viewport */
-  height: 100vh;
-
-  font-family: var(--font-family-override, $viewer-font-family);
-  background: var(--background-color-override, $viewer-background-color);
-  color: var(--color-override, $viewer-color);
-  gap: $view-element-gap;
-  padding: $view-outer-padding;
-  font-size: $base-font-size;
-
-  display: grid;
-  grid-template-columns: 1fr 40vw;
-  grid-template-rows: auto 12px 1fr auto;
-  grid-template-areas:
-    'header    header'
-    'now       schedule-nav'
-    'info      schedule';
-
-  .empty-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    margin-top: 25vh;
-    color: var(--label-color-override, $viewer-label-color);
-  }
-
-  /* =================== HEADER + EXTRAS ===================*/
-
-  .project-header {
-    grid-area: header;
-    font-size: $header-font-size;
-    font-weight: 600;
-    display: flex;
-    gap: 1rem;
-  }
-
-  .logo {
-    max-width: min(200px, 20vw);
-  }
-
-  .title {
-    line-height: 1.1em;
-  }
-
-  .clock-container {
-    margin-left: auto;
-    font-weight: 600;
-
-    .label {
-      font-size: $timer-label-size;
-      color: var(--label-color-override, $viewer-label-color);
-      text-transform: uppercase;
-    }
-
-    .time {
-      font-size: $timer-value-size;
-      color: var(--secondary-color-override, $viewer-secondary-color);
-      letter-spacing: 0.05em;
-      line-height: 0.95em;
-    }
-  }
-
-  /* =================== MAIN - NOW ===================*/
-
-  .card-container {
-    grid-area: now;
-    display: flex;
-    flex-direction: column;
-    gap: $view-element-gap;
-  }
-
-  .event {
-    background-color: var(--card-background-color-override, $viewer-card-bg-color);
-    padding: $view-card-padding;
-    border-radius: $element-border-radius;
-  }
-
-  .timer-group {
-    border-top: 2px solid var(--background-color-override, $viewer-background-color);
-    margin-top: max(1vh, 16px);
-    padding-top: max(1vh, 16px);
-    display: flex;
-    row-gap: 0.5em;
-  }
-
-  .time-entry {
-    &__label {
-      font-size: $timer-label-size;
-      color: var(--label-color-override, $viewer-label-color);
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    &__value {
-      font-size: $base-font-size;
-      color: var(--secondary-color-override, $viewer-secondary-color);
-      letter-spacing: 0.05em;
-      line-height: 0.95em;
-    }
-
-    &--pending {
-      color: var(--timer-pending-color-override, $ontime-roll);
-    }
-  }
-
-  /* =================== MAIN - SCHEDULE ===================*/
-
-  $schedule-left-spacing: clamp(16px, 4vw, 64px);
-  .schedule-container {
-    grid-area: schedule;
-    overflow: hidden;
-    height: 100%;
-    padding-left: $schedule-left-spacing;
-  }
-
-  .schedule-nav-container {
-    grid-area: schedule-nav;
-    padding-left: $schedule-left-spacing;
-  }
-
-  /* =================== MAIN - INFO ===================*/
-
-  .info {
-    grid-area: info;
-    display: flex;
-    gap: max(1vw, 16px);
-    align-self: flex-end;
-    overflow: hidden;
-    align-items: end;
-
-    &__message {
-      font-size: $base-font-size;
-      line-height: 1.2em;
-      white-space: pre-line;
-      overflow: hidden;
-      flex: 1;
-    }
-
-    .qr {
-      padding: 0.5rem;
-      background-color: $ui-white;
-      border-radius: 2px;
-    }
-  }
-}
-
-/* =================== MOBILE ===================*/
-@media screen and (max-width: 768px) {
-  .public-screen {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-
-    .project-header {
-      flex-direction: column;
-      position: relative;
-      gap: 0.5rem;
-    }
-
-    .logo img{
-      height: min(50px, 10vh);
-    }
-
-    .timer-group {
-      flex-wrap: wrap;
-    }
-
-    .clock-container {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
-
-    .schedule-nav-container {
-      padding-left: 0;
-      justify-content: center;
-    }
-  
-    .schedule-container {
-      padding-left: 0;
-      flex: 1;
-    }
-
-    .info {
-      width: 100%;
-      text-align: right;
-    }
-
-    .qr {
-      display: none;
-    }
-
-    .info--stretch {
-      flex: 1;
-    }
-  }
-}

apps/client/src/views/public/Public.tsx

@@ -1,126 +0,0 @@
-import QRCode from 'react-qr-code';
-import { useViewportSize } from '@mantine/hooks';
-import { CustomFields, OntimeEvent, ProjectData, Settings } from 'ontime-types';
-
-import Empty from '../../common/components/state/Empty';
-import TitleCard from '../../common/components/title-card/TitleCard';
-import ViewLogo from '../../common/components/view-logo/ViewLogo';
-import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
-import { useWindowTitle } from '../../common/hooks/useWindowTitle';
-import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
-import { cx } from '../../common/utils/styleUtils';
-import { formatTime, getDefaultFormat } from '../../common/utils/time';
-import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
-import { useTranslation } from '../../translation/TranslationProvider';
-import { getIsPendingStart } from '../backstage/backstage.utils';
-import ScheduleExport from '../common/schedule/ScheduleExport';
-
-import { getPublicOptions, usePublicOptions } from './public.options';
-import { getCardData, getFirstStartTime } from './public.utils';
-
-import './Public.scss';
-
-interface BackstageProps {
-  customFields: CustomFields;
-  events: OntimeEvent[];
-  general: ProjectData;
-  isMirrored: boolean;
-  publicEventNow: OntimeEvent | null;
-  publicEventNext: OntimeEvent | null;
-  time: ViewExtendedTimer;
-  publicSelectedId: string | null;
-  settings: Settings | undefined;
-}
-
-export default function Public(props: BackstageProps) {
-  const {
-    customFields,
-    events,
-    general,
-    isMirrored,
-    publicEventNow,
-    publicEventNext,
-    time,
-    publicSelectedId,
-    settings,
-  } = props;
-
-  const { getLocalizedString } = useTranslation();
-  const { secondarySource } = usePublicOptions();
-  const { height: screenHeight } = useViewportSize();
-
-  useWindowTitle('Public Schedule');
-
-  // gather card data
-  const hasEvents = events.length > 0;
-  const { showNow, nowMain, nowSecondary, showNext, nextMain, nextSecondary } = getCardData(
-    publicEventNow,
-    publicEventNext,
-    'title',
-    secondarySource,
-    time.playback,
-  );
-
-  // gather timer data
-  const clock = formatTime(time.clock);
-  const isPendingStart = getIsPendingStart(time.playback, time.phase);
-  const scheduledStart = (() => {
-    if (showNow) return undefined;
-    if (!hasEvents) return undefined;
-    return getFirstStartTime(events[0]);
-  })();
-
-  // gather presentation styles
-  const qrSize = Math.max(window.innerWidth / 15, 72);
-  const showSchedule = hasEvents && screenHeight > 700; // in vertical screens we may not have space
-  const showPending = scheduledStart !== undefined;
-
-  // gather option data
-  const defaultFormat = getDefaultFormat(settings?.timeFormat);
-  const publicOptions = getPublicOptions(defaultFormat, customFields);
-
-  return (
-    <div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
-      <ViewParamsEditor viewOptions={publicOptions} />
-      <div className='project-header'>
-        {general?.projectLogo ? <ViewLogo name={general.projectLogo} className='logo' /> : <div className='logo' />}
-        <div className='title'>{general.title}</div>
-        <div className='clock-container'>
-          <div className='label'>{getLocalizedString('common.time_now')}</div>
-          <SuperscriptTime time={clock} className='time' />
-        </div>
-      </div>
-
-      {!hasEvents && <Empty text={getLocalizedString('countdown.waiting')} className='empty-container' />}
-
-      <div className='card-container'>
-        {showNow && hasEvents && (
-          <TitleCard className='event now' label='now' title={nowMain} secondary={nowSecondary} />
-        )}
-        {showPending && (
-          <div className='event'>
-            <div className='title-card__placeholder'>{getLocalizedString('countdown.waiting')}</div>
-            <div className='timer-group'>
-              <div className='time-entry'>
-                <div className={cx(['time-entry__label', isPendingStart && 'time-entry--pending'])}>
-                  {getLocalizedString('common.scheduled_start')}
-                </div>
-                <SuperscriptTime time={formatTime(scheduledStart)} className='time-entry__value' />
-              </div>
-            </div>
-          </div>
-        )}
-        {showNext && hasEvents && (
-          <TitleCard className='event next' label='next' title={nextMain} secondary={nextSecondary} />
-        )}
-      </div>
-
-      {showSchedule && <ScheduleExport selectedId={publicSelectedId} />}
-
-      <div className={cx(['info', !showSchedule && 'info--stretch'])}>
-        {general.publicUrl && <QRCode value={general.publicUrl} size={qrSize} level='L' className='qr' />}
-        {general.publicInfo && <div className='info__message'>{general.publicInfo}</div>}
-      </div>
-    </div>
-  );
-}

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

@@ -1,58 +0,0 @@
-import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { CustomFields, OntimeEvent } from 'ontime-types';
-
-import {
-  getTimeOption,
-  makeOptionsFromCustomFields,
-  OptionTitle,
-} from '../../common/components/view-params-editor/constants';
-import { ViewOption } from '../../common/components/view-params-editor/types';
-import { scheduleOptions } from '../common/schedule/schedule.options';
-
-export const getPublicOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
-
-  return [
-    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-    {
-      title: OptionTitle.DataSources,
-      collapsible: true,
-      options: [
-        {
-          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: '',
-        },
-      ],
-    },
-    scheduleOptions,
-  ];
-};
-
-type PublicOptions = {
-  secondarySource: keyof OntimeEvent | null;
-};
-
-/**
- * Utility extract the view options from URL Params
- * the names and fallback are manually matched with timerOptions
- */
-function getOptionsFromParams(searchParams: URLSearchParams): PublicOptions {
-  // we manually make an object that matches the key above
-  return {
-    secondarySource: searchParams.get('secondary-src') as keyof OntimeEvent | null,
-  };
-}
-
-/**
- * Hook exposes the backstage view options
- */
-export function usePublicOptions(): PublicOptions {
-  const [searchParams] = useSearchParams();
-  const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
-  return options;
-}

apps/client/src/views/public/public.utils.ts

@@ -1,45 +0,0 @@
-import { OntimeEvent, Playback } from 'ontime-types';
-
-import { enDash } from '../../common/utils/styleUtils';
-import { getPropertyValue } from '../../features/viewers/common/viewUtils';
-
-/**
- * What should we be showing in the cards?
- */
-export function getCardData(
-  eventNow: OntimeEvent | null,
-  eventNext: OntimeEvent | null,
-  mainSource: keyof OntimeEvent | null,
-  secondarySource: keyof OntimeEvent | null,
-  playback: Playback,
-) {
-  if (playback === Playback.Stop) {
-    return {
-      showNow: false,
-      nowMain: undefined,
-      nowSecondary: undefined,
-      showNext: false,
-      nextMain: undefined,
-      nextSecondary: undefined,
-    };
-  }
-
-  // if we are loaded, we show the upcoming event as next
-  const nowMain = getPropertyValue(eventNow, mainSource ?? 'title') || enDash;
-  const nowSecondary = getPropertyValue(eventNow, secondarySource);
-  const nextMain = getPropertyValue(eventNext, mainSource ?? 'title') || enDash;
-  const nextSecondary = getPropertyValue(eventNext, secondarySource);
-
-  return {
-    showNow: eventNow !== null,
-    nowMain,
-    nowSecondary,
-    showNext: eventNext !== null,
-    nextMain,
-    nextSecondary,
-  };
-}
-
-export function getFirstStartTime(firstPublicEvent: OntimeEvent | null): number | undefined {
-  return firstPublicEvent?.timeStart;
-}

apps/client/src/views/timer/Timer.tsx

@@ -1,4 +1,3 @@
-import { AnimatePresence } from 'framer-motion';
 import {
   CustomFields,
   MessageState,
@@ -11,6 +10,7 @@ import {
 
 import { FitText } from '../../common/components/fit-text/FitText';
 import MultiPartProgressBar from '../../common/components/multi-part-progress-bar/MultiPartProgressBar';
+import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
@@ -21,7 +21,6 @@ import SuperscriptTime from '../../features/viewers/common/superscript-time/Supe
 import { getFormattedTimer, getTimerByType } from '../../features/viewers/common/viewUtils';
 import { useTranslation } from '../../translation/TranslationProvider';
 
-import { MotionTitleCard, titleVariants } from './timer.animations';
 import { getTimerOptions, useTimerOptions } from './timer.options';
 import {
   getCardData,
@@ -189,37 +188,8 @@ export default function Timer(props: TimerProps) {
 
       {!hideCards && (
         <>
-          <AnimatePresence>
+          {showNow && <TitleCard className='event now' label='now' title={nowMain} secondary={nowSecondary} />}
-            {showNow && (
+          {showNext && <TitleCard className='event next' label='next' title={nextMain} secondary={nextSecondary} />}
-              <MotionTitleCard
-                className='event now'
-                key='now'
-                variants={titleVariants}
-                initial='hidden'
-                animate='visible'
-                exit='exit'
-                label='now'
-                title={nowMain}
-                secondary={nowSecondary}
-              />
-            )}
-          </AnimatePresence>
-
-          <AnimatePresence>
-            {showNext && (
-              <MotionTitleCard
-                className='event next'
-                key='next'
-                variants={titleVariants}
-                initial='hidden'
-                animate='visible'
-                exit='exit'
-                label='next'
-                title={nextMain}
-                secondary={nextSecondary}
-              />
-            )}
-          </AnimatePresence>
         </>
       )}
     </div>

apps/client/src/views/timer/timer.animations.ts

@@ -1,20 +0,0 @@
-import { motion } from 'framer-motion';
-
-import TitleCard from '../../common/components/title-card/TitleCard';
-
-export const titleVariants = {
-  hidden: {
-    x: -2500,
-  },
-  visible: {
-    x: 0,
-    transition: {
-      duration: 1,
-    },
-  },
-  exit: {
-    x: -2500,
-  },
-};
-
-export const MotionTitleCard = motion(TitleCard);

apps/client/vite.config.js

@@ -39,6 +39,29 @@ export default defineConfig({
   ],
   server: {
     port: 3000,
+    proxy: {
+      '^/login*': {
+        target: 'http://localhost:4001/',
+        changeOrigin: true,
+        configure: logProxyRequests,
+      },
+      '^/data*': {
+        target: 'http://localhost:4001/',
+        changeOrigin: true,
+        configure: logProxyRequests,
+      },
+      '^/api*': {
+        target: 'http://localhost:4001/',
+        changeOrigin: true,
+        configure: logProxyRequests,
+      },
+      '^/ws*': {
+        target: 'http://localhost:4001/',
+        changeOrigin: true,
+        configure: logProxyRequests,
+        ws: true,
+      },
+    },
   },
   test: {
     globals: true,
@@ -70,11 +93,17 @@ export default defineConfig({
     preprocessorOptions: {
       scss: {
         additionalData: `
-        @use './src/theme/ontimeColours' as *;
+        @use '@/theme/ontimeColours' as *;
-        @use './src/theme/ontimeStyles' as *;
+        @use '@/theme/ontimeStyles' as *;
-        @use './src/theme/mixins' as *;
+        @use '@/theme/mixins' as *;
         `,
       },
     },
   },
 });
+
+function logProxyRequests(proxy) {
+  proxy.on('proxyReq', (_proxyReq, req, _res) => {
+    console.log('Proxy:', req.method, req.url);
+  });
+}

apps/electron/package.json

@@ -12,8 +12,8 @@
   "license": "AGPL-3.0-only",
   "main": "src/main.js",
   "devDependencies": {
-    "electron": "^31.2.0",
+    "electron": "36.3.1",
-    "electron-builder": "^24.13.3",
+    "electron-builder": "26.0.12",
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
     "prettier": "catalog:",
@@ -38,9 +38,7 @@
       "icon": "icon.icns"
     },
     "mac": {
-      "notarize": {
+      "notarize": true,
-        "teamId": "MDAU6QK6R4"
-      },
       "hardenedRuntime": true,
       "gatekeeperAssess": false,
       "entitlements": "./entitlements.plist",

apps/server/package.json

@@ -6,19 +6,18 @@
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",
-    "classic-level": "^3.0.0",
+    "cookie": "1.0.2",
-    "cookie": "^1.0.2",
+    "cookie-parser": "1.4.7",
-    "cookie-parser": "^1.4.7",
+    "cors": "2.8.5",
-    "cors": "^2.8.5",
     "dotenv": "^16.0.1",
-    "express": "^4.21.1",
+    "express": "5.1.0",
-    "express-static-gzip": "^2.2.0",
+    "express-static-gzip": "3.0.0",
-    "express-validator": "^7.2.0",
+    "express-validator": "7.2.1",
+    "multer": "2.0.1",
     "fast-equals": "^5.0.1",
     "google-auth-library": "^9.4.2",
     "got": "^14.4.5",
     "lowdb": "^7.0.1",
-    "multer": "^1.4.5-lts.1",
     "ontime-utils": "workspace:*",
     "osc-min": "2.1.2",
     "sanitize-filename": "^1.6.3",
@@ -27,10 +26,10 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@types/cookie-parser": "^1.4.8",
+    "@types/cookie-parser": "1.4.9",
-    "@types/cors": "^2.8.17",
+    "@types/cors": "2.8.19",
-    "@types/express": "^4.17.17",
+    "@types/express": "5.0.3",
-    "@types/multer": "^1.4.11",
+    "@types/multer": "1.4.13",
     "@types/node": "catalog:",
     "@types/websocket": "^1.0.5",
     "@types/ws": "^8.5.10",

apps/server/src/adapters/OscAdapter.ts

@@ -5,7 +5,7 @@ import * as dgram from 'node:dgram';
 
 import { logger } from '../classes/Logger.js';
 import { dispatchFromAdapter } from '../api-integration/integration.controller.js';
-import { isOntimeCloud } from '../externals.js';
+import { isOntimeCloud } from '../setup/environment.js';
 
 import { integrationPayloadFromPath } from './utils/parse.js';
 import type { IAdapter } from './IAdapter.js';

apps/server/src/api-data/assets/assets.controller.ts

@@ -1,41 +0,0 @@
-import { defaultCss } from '../../user/styles/bundledCss.js';
-import type { Request, Response } from 'express';
-import { readCssFile, writeCssFile } from './assets.service.js';
-
-/**
- * Exposes the contents of the cssOverride.css file
- */
-export async function getCssOverride(_req: Request, res: Response) {
-  try {
-    const data = await readCssFile();
-    res.status(200).send(data);
-  } catch (error) {
-    res.status(500).send({ message: error });
-  }
-}
-
-/**
- * Allows modifying the cssOverride.css file
- */
-export async function postCssOverride(req: Request, res: Response) {
-  const { css } = req.body;
-
-  try {
-    await writeCssFile(css);
-    res.status(204).send();
-  } catch (error) {
-    res.status(500).send({ message: error });
-  }
-}
-
-/**
- * Restores the default cssOverride.css file
- */
-export async function restoreCss(_req: Request, res: Response) {
-  try {
-    await writeCssFile(defaultCss);
-    res.status(200).send(defaultCss);
-  } catch (error) {
-    res.status(500).send({ message: error });
-  }
-}

apps/server/src/api-data/assets/assets.router.ts

@@ -1,10 +1,40 @@
 import express from 'express';
-
+import type { Request, Response } from 'express';
-import { getCssOverride, postCssOverride, restoreCss } from './assets.controller.js';
+import type { ErrorResponse } from 'ontime-types';
 import { validatePostCss } from './assets.validation.js';
+import { readCssFile, writeCssFile } from './assets.service.js';
+import { getErrorMessage } from 'ontime-utils';
+import { defaultCss } from '../../user/styles/bundledCss.js';
 
 export const router = express.Router();
 
-router.get('/css', getCssOverride);
+router.get('/css', async (_req: Request, res: Response<string | ErrorResponse>) => {
-router.post('/css', validatePostCss, postCssOverride);
+  try {
-router.post('/css/restore', restoreCss);
+    const data = await readCssFile();
+    res.status(200).send(data);
+  } catch (error) {
+    const message = getErrorMessage(error);
+    res.status(500).send({ message });
+  }
+});
+
+router.post('/css', validatePostCss, async (req: Request, res: Response<never | ErrorResponse>) => {
+  const { css } = req.body;
+  try {
+    await writeCssFile(css);
+    res.status(204).send();
+  } catch (error) {
+    const message = getErrorMessage(error);
+    res.status(500).send({ message });
+  }
+});
+
+router.post('/css/restore', async (_req: Request, res: Response<string | ErrorResponse>) => {
+  try {
+    await writeCssFile(defaultCss);
+    res.status(200).send(defaultCss);
+  } catch (error) {
+    const message = getErrorMessage(error);
+    res.status(500).send({ message });
+  }
+});

apps/server/src/api-data/assets/assets.validation.ts

@@ -1,12 +1,4 @@
-import { Request, Response, NextFunction } from 'express';
+import { body } from 'express-validator';
-import { body, validationResult } from 'express-validator';
+import { requestValidationFunction } from '../validation-utils/validationFunction.js';
 
-export const validatePostCss = [
+export const validatePostCss = [body('css').isString().trim(), requestValidationFunction];
-  body('css').exists().isString().trim(),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
-];

apps/server/src/api-data/automation/__tests__/automation.dao.test.ts

@@ -1,4 +1,6 @@
-import { TriggerDTO, TimerLifeCycle, AutomationDTO, Automation } from 'ontime-types';
+import { TriggerDTO, TimerLifeCycle, AutomationDTO, Automation, EntryId } from 'ontime-types';
+
+import { makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
 
 import {
   addTrigger,
@@ -12,6 +14,7 @@ import {
   getAutomationTriggers,
   getAutomations,
 } from '../automation.dao.js';
+
 import { makeOSCAction, makeHTTPAction } from './testUtils.js';
 
 beforeAll(() => {
@@ -186,11 +189,9 @@ describe('editAutomation()', async () => {
 });
 
 describe('deleteAutomation()', () => {
-  // saving the ID of the added automation
-  let firstAutomation: Automation;
   beforeEach(async () => {
     await deleteAll();
-    firstAutomation = await addAutomation({
+    await addAutomation({
       title: 'test-osc',
       filterRule: 'all',
       filters: [],
@@ -198,35 +199,15 @@ describe('deleteAutomation()', () => {
     });
   });
 
-  it('should remove m automation from the list', async () => {
+  it('should remove an automation from the list', async () => {
     const automations = getAutomations();
     expect(Object.keys(automations).length).toEqual(1);
 
-    await deleteAutomation(Object.keys(automations)[0]);
+    const rundown = makeRundown({});
+    const timedEventOrder: EntryId[] = [];
+
+    await deleteAutomation(rundown, timedEventOrder, Object.keys(automations)[0]);
     const removed = getAutomations();
     expect(Object.keys(removed).length).toEqual(0);
   });
-
-  it('should not remove an automation which is in use', async () => {
-    const automations = getAutomations();
-    await addTrigger({
-      title: 'test-automation',
-      trigger: TimerLifeCycle.onLoad,
-      automationId: firstAutomation.id,
-    });
-
-    const automationKeys = Object.keys(automations);
-    const automationId = automationKeys[0];
-    expect(automationId).toEqual(firstAutomation.id);
-    expect(automationKeys.length).toEqual(1);
-    expect(automations[automationId]).toMatchObject({
-      id: automationId,
-      title: 'test-osc',
-      filterRule: 'all',
-      filters: expect.any(Array),
-      outputs: expect.any(Array),
-    });
-
-    await expect(deleteAutomation(automationId)).rejects.toThrowError();
-  });
 });

apps/server/src/api-data/automation/__tests__/automation.service.test.ts

@@ -1,7 +1,7 @@
 import { PlayableEvent, TimerLifeCycle } from 'ontime-types';
 
 import { makeRuntimeStateData } from '../../../stores/__mocks__/runtimeState.mocks.js';
-import { makeOntimeEvent } from '../../../services/rundown-service/__mocks__/rundown.mocks.js';
+import { makeOntimeEvent } from '../../rundown/__mocks__/rundown.mocks.js';
 
 import { deleteAllTriggers, addTrigger, addAutomation } from '../automation.dao.js';
 import { testConditions, triggerAutomations } from '../automation.service.js';

apps/server/src/api-data/automation/__tests__/automation.utils.test.ts

@@ -1,4 +1,6 @@
-import { parseTemplateNested, stringToOSCArgs } from '../automation.utils.js';
+import { TimerLifeCycle } from 'ontime-types';
+import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { isAutomationUsed, parseTemplateNested, stringToOSCArgs } from '../automation.utils.js';
 
 describe('parseTemplateNested()', () => {
   it('parses string with a single-level variable name', () => {
@@ -245,3 +247,53 @@ describe('test stringToOSCArgs()', () => {
     expect(stringToOSCArgs(test)).toStrictEqual(expected);
   });
 });
+
+describe('isAutomationUsed()', () => {
+  it('returns the first event which uses an automation', () => {
+    const rundown = makeRundown({
+      entries: {
+        '1': makeOntimeEvent({
+          id: '1',
+          triggers: [
+            {
+              id: 'trigger-1',
+              title: 'Trigger 1',
+              trigger: TimerLifeCycle.onClock,
+              automationId: 'test-automation',
+            },
+          ],
+        }),
+      },
+    });
+
+    const timedEventOrder = ['1'];
+    const automationId = 'test-automation';
+
+    const result = isAutomationUsed(rundown, timedEventOrder, automationId);
+    expect(result).toBe('1');
+  });
+
+  it('returns returns undefined if there are no matches', () => {
+    const rundown = makeRundown({
+      entries: {
+        '1': makeOntimeEvent({
+          id: '1',
+          triggers: [
+            {
+              id: 'trigger-1',
+              title: 'Trigger 1',
+              trigger: TimerLifeCycle.onClock,
+              automationId: 'test-automation',
+            },
+          ],
+        }),
+      },
+    });
+
+    const timedEventOrder = ['1'];
+    const automationId = 'does-not-exist';
+
+    const result = isAutomationUsed(rundown, timedEventOrder, automationId);
+    expect(result).toBeUndefined();
+  });
+});

apps/server/src/api-data/automation/automation.controller.ts

@@ -5,12 +5,14 @@ import type { Request, Response } from 'express';
 
 import { oscServer } from '../../adapters/OscAdapter.js';
 
+import { getCurrentRundown, getRundownMetadata } from '../rundown/rundown.dao.js';
+
 import * as automationDao from './automation.dao.js';
 import * as automationService from './automation.service.js';
 import { parseOutput } from './automation.validation.js';
 
 export function getAutomationSettings(_req: Request, res: Response<AutomationSettings>) {
-  res.json(automationDao.getAutomationSettings());
+  res.status(200).json(automationDao.getAutomationSettings());
 }
 
 export async function postAutomationSettings(req: Request, res: Response<AutomationSettings | ErrorResponse>) {
@@ -106,7 +108,10 @@ export async function editAutomation(req: Request, res: Response<Automation | Er
 
 export async function deleteAutomation(req: Request, res: Response<void | ErrorResponse>) {
   try {
-    await automationDao.deleteAutomation(req.params.id);
+    const rundown = getCurrentRundown();
+    const { timedEventOrder } = getRundownMetadata();
+
+    await automationDao.deleteAutomation(rundown, timedEventOrder, req.params.id);
     res.status(204).send();
   } catch (error) {
     const message = getErrorMessage(error);

apps/server/src/api-data/automation/automation.dao.ts

@@ -2,14 +2,17 @@ import type {
   Automation,
   AutomationDTO,
   AutomationSettings,
+  EntryId,
   NormalisedAutomation,
+  Rundown,
   Trigger,
   TriggerDTO,
 } from 'ontime-types';
 import { deleteAtIndex, generateId } from 'ontime-utils';
 
 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
-import { getTimedEvents } from '../../services/rundown-service/rundownUtils.js';
+
+import { isAutomationUsed } from './automation.utils.js';
 
 /**
  * Gets a copy of the stored automation settings
@@ -133,7 +136,7 @@ export async function editAutomation(id: string, newAutomation: AutomationDTO):
 /**
  * Deletes a automation given its ID
  */
-export async function deleteAutomation(id: string): Promise<void> {
+export async function deleteAutomation(rundown: Rundown, timedEventOrder: EntryId[], id: string): Promise<void> {
   const automations = getAutomations();
   // ignore request if automation does not exist
   if (!Object.hasOwn(automations, id)) {
@@ -149,13 +152,9 @@ export async function deleteAutomation(id: string): Promise<void> {
   }
 
   // prevent deleting a automation that is in use in events
-  const events = getTimedEvents().filter(
+  const isInUse = isAutomationUsed(rundown, timedEventOrder, id);
-    (event) => event.triggers && event.triggers.some((trigger) => trigger.automationId === id),
+  if (isInUse) {
-  );
+    throw new Error(`Unable to delete automation used in event with ID ${isInUse}`);
-  if (events.length) {
-    throw new Error(
-      `Unable to delete automation used in event: ${events[0].id}${events.length > 1 ? ` and ${events.length - 1} more` : ''}`,
-    );
   }
 
   delete automations[id];

apps/server/src/api-data/automation/automation.parser.ts

@@ -1,7 +1,7 @@
 import { DatabaseModel, AutomationSettings, NormalisedAutomation, Trigger } from 'ontime-types';
 
 import { dbModel } from '../../models/dataModel.js';
-import type { ErrorEmitter } from '../../utils/parser.js';
+import type { ErrorEmitter } from '../../utils/parserUtils.js';
 
 interface LegacyData extends Partial<DatabaseModel> {
   http?: unknown;

apps/server/src/api-data/automation/automation.router.ts

@@ -12,7 +12,6 @@ import {
   testOutput,
 } from './automation.controller.js';
 import {
-  paramContainsId,
   validateAutomationSettings,
   validateAutomation,
   validateAutomationPatch,
@@ -20,6 +19,7 @@ import {
   validateTrigger,
   validateTriggerPatch,
 } from './automation.validation.js';
+import { paramsWithId } from '../validation-utils/validationFunction.js';
 
 export const router = express.Router();
 
@@ -28,10 +28,10 @@ router.post('/', validateAutomationSettings, postAutomationSettings);
 
 router.post('/trigger', validateTrigger, postTrigger);
 router.put('/trigger/:id', validateTriggerPatch, putTrigger);
-router.delete('/trigger/:id', paramContainsId, deleteTrigger);
+router.delete('/trigger/:id', paramsWithId, deleteTrigger);
 
 router.post('/automation', validateAutomation, postAutomation);
 router.put('/automation/:id', validateAutomationPatch, editAutomation);
-router.delete('/automation/:id', paramContainsId, deleteAutomation);
+router.delete('/automation/:id', paramsWithId, deleteAutomation);
 
 router.post('/test', validateTestPayload, testOutput);

apps/server/src/api-data/automation/automation.service.ts

@@ -12,7 +12,7 @@ import { getPropertyFromPath } from 'ontime-utils';
 
 import { logger } from '../../classes/Logger.js';
 import { getState, type RuntimeState } from '../../stores/runtimeState.js';
-import { isOntimeCloud } from '../../externals.js';
+import { isOntimeCloud } from '../../setup/environment.js';
 
 import { emitOSC } from './clients/osc.client.js';
 import { emitHTTP } from './clients/http.client.js';

apps/server/src/api-data/automation/automation.utils.ts

@@ -1,4 +1,4 @@
-import { FilterRule, MaybeNumber, OntimeAction } from 'ontime-types';
+import { EntryId, FilterRule, isOntimeEvent, MaybeNumber, OntimeAction, Rundown } from 'ontime-types';
 import { millisToString, removeLeadingZero, splitWhitespace, getPropertyFromPath } from 'ontime-utils';
 import type { OscArgOrArrayInput, OscArgInput } from 'osc-min';
 
@@ -195,3 +195,25 @@ export function isBooleanEquals(a: boolean, b: string): boolean {
   }
   return false;
 }
+
+/**
+ * Checks is an automation is used in a rundown
+ * TODO(v4): this currently only checks the current rundown, we will need to check all rundowns in the future
+ */
+export function isAutomationUsed(
+  rundown: Rundown,
+  timedEventOrder: EntryId[],
+  automationId: string,
+): EntryId | undefined {
+  for (let i = 0; i < timedEventOrder.length; i++) {
+    const eventId = timedEventOrder[i];
+    const event = rundown.entries[eventId];
+    if (isOntimeEvent(event) && event.triggers) {
+      for (const trigger of event.triggers) {
+        if (trigger.automationId === automationId) {
+          return eventId;
+        }
+      }
+    }
+  }
+}

apps/server/src/api-data/automation/automation.validation.ts

@@ -10,84 +10,50 @@ import {
 } from 'ontime-types';
 import { parseUserTime } from 'ontime-utils';
 
-import type { Request, Response, NextFunction } from 'express';
+import { body, oneOf, param } from 'express-validator';
-import { body, oneOf, param, validationResult } from 'express-validator';
 
 import * as assert from '../../utils/assert.js';
 
 import { isFilterOperator, isFilterRule, isOntimeActionAction } from './automation.utils.js';
-
+import { requestValidationFunction } from '../validation-utils/validationFunction.js';
-export const paramContainsId = [
-  param('id').exists(),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
-];
 
 export const validateAutomationSettings = [
-  body('enabledAutomations').exists().isBoolean(),
+  body('enabledAutomations').isBoolean(),
-  body('enabledOscIn').exists().isBoolean(),
+  body('enabledOscIn').isBoolean(),
-  body('oscPortIn').exists().isPort(),
+  body('oscPortIn').isPort(),
   body('triggers').optional().isArray(),
   body('triggers.*.title').optional().isString().trim(),
   body('triggers.*.trigger').optional().isIn(timerLifecycleValues),
   body('triggers.*.automationId').optional().isString().trim(),
   body('automations').optional().custom(parseAutomation),
 
-  (req: Request, res: Response, next: NextFunction) => {
+  requestValidationFunction,
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
 ];
 
 export const validateTrigger = [
-  body('title').exists().isString().trim(),
+  body('title').isString().trim().notEmpty(),
-  body('trigger').exists().isIn(timerLifecycleValues),
+  body('trigger').isIn(timerLifecycleValues),
-  body('automationId').exists().isString().trim(),
+  body('automationId').isString().trim().notEmpty(),
 
-  (req: Request, res: Response, next: NextFunction) => {
+  requestValidationFunction,
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
 ];
 
 export const validateTriggerPatch = [
-  param('id').exists(),
+  param('id').isString().notEmpty(),
-  body('title').optional().isString().trim(),
+  body('title').optional().isString().trim().notEmpty(),
   body('trigger').optional().isIn(timerLifecycleValues),
-  body('automationId').optional().isString().trim(),
+  body('automationId').optional().isString().trim().notEmpty(),
 
-  (req: Request, res: Response, next: NextFunction) => {
+  requestValidationFunction,
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
 ];
 
-export const validateAutomation = [
+export const validateAutomation = [body().custom(parseAutomation), requestValidationFunction];
-  body().custom(parseAutomation),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
-];
 
 export const validateAutomationPatch = [
-  param('id').exists(),
+  param('id').isString().notEmpty(),
   body().custom(parseAutomation),
 
-  (req: Request, res: Response, next: NextFunction) => {
+  requestValidationFunction,
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
 ];
 
 /**
@@ -140,7 +106,7 @@ function validateOutput(output: Array<unknown>): output is AutomationOutput[] {
 }
 
 export const validateTestPayload = [
-  body('type').exists().isIn(['osc', 'http', 'ontime']),
+  body('type').isIn(['osc', 'http', 'ontime']),
 
   // validation for OSC message
   oneOf([
@@ -162,11 +128,7 @@ export const validateTestPayload = [
   body('visible').if(body('type').equals('ontime')).optional().isString().trim(),
   body('secondarySource').if(body('type').equals('ontime')).optional().isString().trim(),
 
-  (req: Request, res: Response, next: NextFunction) => {
+  requestValidationFunction,
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
 ];
 
 /**

apps/server/src/api-data/custom-fields/__tests__/customFields.parser.test.ts

@@ -1,81 +1,6 @@
-import { CustomFields, Settings, URLPreset } from 'ontime-types';
+import { CustomFields } from 'ontime-types';
 
-import {
+import { parseCustomFields, sanitiseCustomFields } from '../customFields.parser.js';
-  parseCustomFields,
-  parseProject,
-  parseSettings,
-  parseUrlPresets,
-  parseViewSettings,
-  sanitiseCustomFields,
-} from '../parserFunctions.js';
-
-describe('parseProject()', () => {
-  it('returns an a base model if nothing is given', () => {
-    const errorEmitter = vi.fn();
-    const result = parseProject({}, errorEmitter);
-    expect(result).toBeTypeOf('object');
-    expect(errorEmitter).toHaveBeenCalledOnce();
-    expect(result).toMatchObject({
-      title: '',
-      description: '',
-      publicUrl: '',
-      publicInfo: '',
-      backstageUrl: '',
-      backstageInfo: '',
-      projectLogo: null,
-    });
-  });
-});
-
-describe('parseSettings()', () => {
-  it('throws if settings object does not exist', () => {
-    expect(() => parseSettings({})).toThrow();
-  });
-
-  it('returns an a base model as long as we have the app version', () => {
-    const result = parseSettings({ settings: { version: '1' } as Settings });
-    expect(result).toBeTypeOf('object');
-    expect(result).toMatchObject({
-      version: expect.any(String),
-      serverPort: 4001,
-      editorKey: null,
-      operatorKey: null,
-      timeFormat: '24',
-      language: 'en',
-    });
-  });
-});
-
-describe('parseViewSettings()', () => {
-  it('returns an a base model if nothing is given', () => {
-    const errorEmitter = vi.fn();
-    const result = parseViewSettings({}, errorEmitter);
-    expect(result).toBeTypeOf('object');
-    expect(errorEmitter).toHaveBeenCalledOnce();
-  });
-});
-
-describe('parseUrlPresets()', () => {
-  it('returns an a base model if nothing is given', () => {
-    const errorEmitter = vi.fn();
-    const result = parseUrlPresets({}, errorEmitter);
-    expect(result).toBeTypeOf('object');
-    expect(errorEmitter).toHaveBeenCalledOnce();
-  });
-
-  it('parses data, skipping invalid results', () => {
-    const errorEmitter = vi.fn();
-    const urlPresets = [{ enabled: true, alias: 'alias', pathAndParams: 'ss' }] as URLPreset[];
-    const result = parseUrlPresets({ urlPresets }, errorEmitter);
-    expect(result.length).toEqual(1);
-    expect(result.at(0)).toMatchObject({
-      enabled: true,
-      alias: 'alias',
-      pathAndParams: 'ss',
-    });
-    expect(errorEmitter).not.toHaveBeenCalled();
-  });
-});
 
 describe('parseCustomFields()', () => {
   it('returns an a base model if nothing is given', () => {

apps/server/src/api-data/custom-fields/customFields.controller.ts

@@ -1,51 +0,0 @@
-import { CustomField, CustomFields, ErrorResponse } from 'ontime-types';
-
-import type { Request, Response } from 'express';
-
-import { getErrorMessage } from 'ontime-utils';
-import {
-  createCustomField,
-  editCustomField,
-  getCustomFields as getCustomFieldsFromCache,
-  removeCustomField,
-} from '../../services/rundown-service/rundownCache.js';
-
-export async function getCustomFields(_req: Request, res: Response<CustomFields>) {
-  const customFields = getCustomFieldsFromCache();
-  res.json(customFields);
-}
-
-export async function postCustomField(req: Request, res: Response<CustomFields | ErrorResponse>) {
-  try {
-    const newField = req.body as CustomField;
-    const allFields = await createCustomField(newField);
-    res.status(201).send(allFields);
-  } catch (error) {
-    const message = getErrorMessage(error);
-    res.status(400).send({ message });
-  }
-}
-
-export async function putCustomField(req: Request, res: Response<CustomFields | ErrorResponse>) {
-  try {
-    const oldLabel = req.params.label;
-    const { colour, type, label } = req.body;
-    const newFields = await editCustomField(oldLabel, { label, colour, type });
-    res.status(200).send(newFields);
-  } catch (error) {
-    const message = getErrorMessage(error);
-    res.status(400).send({ message });
-  }
-}
-
-// Expects { label: <label> }
-export async function deleteCustomField(req: Request, res: Response<CustomFields | ErrorResponse>) {
-  try {
-    const fieldToDelete = req.params.label;
-    await removeCustomField(fieldToDelete);
-    res.sendStatus(204);
-  } catch (error) {
-    const message = getErrorMessage(error);
-    res.status(400).send({ message });
-  }
-}

apps/server/src/api-data/custom-fields/customFields.parser.ts

@@ -0,0 +1,64 @@
+import { DatabaseModel, CustomFields, CustomField } from 'ontime-types';
+import { isAlphanumericWithSpace, customFieldLabelToKey } from 'ontime-utils';
+
+import type { ErrorEmitter } from '../../utils/parserUtils.js';
+
+/**
+ * Parse customFields entry
+ */
+export function parseCustomFields(data: Partial<DatabaseModel>, emitError?: ErrorEmitter): CustomFields {
+  if (typeof data.customFields !== 'object') {
+    emitError?.('No data found to import');
+    return {};
+  }
+  console.log('Found Custom Fields, importing...');
+
+  const customFields = sanitiseCustomFields(data.customFields);
+
+  if (Object.keys(customFields).length !== Object.keys(data.customFields).length) {
+    emitError?.('Skipped invalid custom fields');
+  }
+  return customFields;
+}
+
+export function sanitiseCustomFields(data: object): CustomFields {
+  const newCustomFields: CustomFields = {};
+
+  for (const [_originalKey, field] of Object.entries(data)) {
+    if (!isValidField(field)) {
+      continue;
+    }
+
+    if (!isAlphanumericWithSpace(field.label)) {
+      continue;
+    }
+
+    // the key is always made from the label
+    const key = customFieldLabelToKey(field.label);
+
+    if (key in newCustomFields) {
+      continue;
+    }
+
+    newCustomFields[key] = {
+      type: field.type,
+      colour: field.colour,
+      label: field.label,
+    };
+  }
+
+  function isValidField(data: unknown): data is CustomField {
+    return (
+      typeof data === 'object' &&
+      data !== null &&
+      'label' in data &&
+      data.label !== '' &&
+      'colour' in data &&
+      typeof data.colour === 'string' &&
+      'type' in data &&
+      (data.type === 'string' || data.type === 'image')
+    );
+  }
+
+  return newCustomFields;
+}

apps/server/src/api-data/custom-fields/customFields.router.ts

@@ -1,14 +1,49 @@
-import express from 'express';
+import { CustomField, CustomFields, ErrorResponse } from 'ontime-types';
+import { getErrorMessage } from 'ontime-utils';
+
+import express from 'express';
+import type { Request, Response } from 'express';
+
+import { getProjectCustomFields } from '../rundown/rundown.dao.js';
+import { createCustomField, editCustomField, deleteCustomField } from '../rundown/rundown.service.js';
 
-import { deleteCustomField, getCustomFields, postCustomField, putCustomField } from './customFields.controller.js';
 import { validateCustomField, validateDeleteCustomField, validateEditCustomField } from './customFields.validation.js';
 
 export const router = express.Router();
 
-router.get('/', getCustomFields);
+router.get('/', async (_req: Request, res: Response<CustomFields>) => {
+  const customFields = getProjectCustomFields();
+  res.status(200).json(customFields);
+});
 
-router.post('/', validateCustomField, postCustomField);
+router.post('/', validateCustomField, async (req: Request, res: Response<CustomFields | ErrorResponse>) => {
+  try {
+    const newFields = await createCustomField(req.body as CustomField);
+    res.status(201).send(newFields);
+  } catch (error) {
+    const message = getErrorMessage(error);
+    res.status(400).send({ message });
+  }
+});
 
-router.put('/:label', validateEditCustomField, putCustomField);
+router.put('/:key', validateEditCustomField, async (req: Request, res: Response<CustomFields | ErrorResponse>) => {
+  try {
+    const currentKey = req.params.key;
+    const { colour, type, label } = req.body;
+    const newFields = await editCustomField(currentKey, { label, colour, type });
+    res.status(200).send(newFields);
+  } catch (error) {
+    const message = getErrorMessage(error);
+    res.status(400).send({ message });
+  }
+});
 
-router.delete('/:label', validateDeleteCustomField, deleteCustomField);
+router.delete('/:key', validateDeleteCustomField, async (req: Request, res: Response<CustomFields | ErrorResponse>) => {
+  try {
+    const customFields = await deleteCustomField(req.params.key);
+    res.status(200).send(customFields);
+  } catch (error) {
+    const message = getErrorMessage(error);
+    res.status(400).send({ message });
+  }
+});

apps/server/src/api-data/custom-fields/customFields.validation.ts

@@ -1,51 +1,35 @@
 import { isAlphanumericWithSpace } from 'ontime-utils';
 
-import type { Request, Response, NextFunction } from 'express';
+import { body, param } from 'express-validator';
-import { body, param, validationResult } from 'express-validator';
+import { requestValidationFunction } from '../validation-utils/validationFunction.js';
 
 export const validateCustomField = [
   body('label')
-    .exists()
     .isString()
     .trim()
+    .notEmpty()
     .custom((value) => {
       return isAlphanumericWithSpace(value);
     }),
-  body('type').exists().isIn(['string', 'image']),
+  body('type').isIn(['string', 'image']),
-  body('colour').exists().isString().trim(),
+  body('colour').isString().trim(),
 
-  (req: Request, res: Response, next: NextFunction) => {
+  requestValidationFunction,
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
 ];
 
 export const validateEditCustomField = [
-  param('label').exists().isString().trim(),
+  param('key').isString().trim().notEmpty(),
   body('label')
-    .exists()
     .isString()
     .trim()
+    .notEmpty()
     .custom((value) => {
       return isAlphanumericWithSpace(value);
     }),
-  body('type').exists().isIn(['string', 'image']),
+  body('type').isIn(['string', 'image']),
-  body('colour').exists().isString().trim(),
+  body('colour').isString().trim(),
 
-  (req: Request, res: Response, next: NextFunction) => {
+  requestValidationFunction,
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
 ];
 
-export const validateDeleteCustomField = [
+export const validateDeleteCustomField = [param('key').isString().notEmpty(), requestValidationFunction];
-  param('label').exists().isString(),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
-];

apps/server/src/api-data/db/__tests__/db.parser.test.ts

@@ -0,0 +1,56 @@
+/* eslint-disable no-console --  we are mocking the console */
+
+import { demoDb } from '../../../models/demoProject.js';
+
+import { parseDatabaseModel } from '../db.parser.js';
+
+// mock data provider
+beforeAll(() => {
+  vi.mock('../../classes/data-provider/DataProvider.js', () => {
+    return {
+      getDataProvider: vi.fn().mockImplementation(() => {
+        return {
+          setRundown: vi.fn().mockImplementation((newData) => newData),
+          setCustomFields: vi.fn().mockImplementation((newData) => newData),
+        };
+      }),
+    };
+  });
+});
+
+describe('test parseDatabaseModel() with demo project (valid)', () => {
+  const filteredDemoProject = structuredClone(demoDb);
+  const { data } = parseDatabaseModel(filteredDemoProject);
+
+  it('has 17 events with 12 top level events', () => {
+    expect(data.rundowns.default.order.length).toBe(12);
+    expect(Object.keys(data.rundowns.default.entries).length).toBe(17);
+  });
+
+  it('is the same as the demo project since all data is valid', () => {
+    // @ts-expect-error -- its ok
+    delete filteredDemoProject.settings.version;
+    // @ts-expect-error -- its ok
+    delete data.settings.version;
+    expect(data).toMatchObject(filteredDemoProject);
+  });
+});
+
+describe('test parseDatabaseModel() edge cases', () => {
+  it('skips unknown app and version settings', () => {
+    console.log = vi.fn();
+    const testData = {
+      settings: {
+        osc_port: 8888,
+      },
+    };
+
+    // @ts-expect-error -- we know this is wrong, testing imports outside domain
+    expect(() => parseDatabaseModel(testData)).toThrow();
+  });
+
+  it('fails with invalid JSON', () => {
+    // @ts-expect-error -- we know this is wrong, testing imports outside domain
+    expect(() => parseDatabaseModel('some random dataset')).toThrow();
+  });
+});

apps/server/src/api-data/db/db.controller.ts

@@ -58,6 +58,7 @@ export async function createProjectFile(req: Request, res: Response<{ filename:
         backstageUrl: req.body?.backstageUrl ?? '',
         backstageInfo: req.body?.backstageInfo ?? '',
         projectLogo: req.body?.projectLogo ?? null,
+        custom: req.body?.custom ?? [],
       },
     });
 
@@ -105,7 +106,8 @@ export async function projectDownload(req: Request, res: Response) {
   const { filename } = req.body;
   const pathToFile = doesProjectExist(filename);
   if (!pathToFile) {
-    return res.status(404).send({ message: `Project ${filename} not found.` });
+    res.status(404).send({ message: `Project ${filename} not found.` });
+    return;
   }
 
   res.download(pathToFile, filename, (error) => {
@@ -137,7 +139,8 @@ export async function postProjectFile(req: Request, res: Response<MessageRespons
   } catch (error) {
     const message = getErrorMessage(error);
     if (message.startsWith('Project file')) {
-      return res.status(403).send({ message });
+      res.status(403).send({ message });
+      return;
     }
     res.status(400).send({ message });
   }
@@ -194,7 +197,8 @@ export async function loadProject(req: Request, res: Response<MessageResponse |
   } catch (error) {
     const message = getErrorMessage(error);
     if (message.startsWith('Project file')) {
-      return res.status(403).send({ message });
+      res.status(403).send({ message });
+      return;
     }
     res.status(500).send({ message });
   }
@@ -203,7 +207,7 @@ export async function loadProject(req: Request, res: Response<MessageResponse |
 /**
  * Loads the demo project
  */
-export async function loadDemo(req: Request, res: Response<MessageResponse | ErrorResponse>) {
+export async function loadDemo(_req: Request, res: Response<MessageResponse | ErrorResponse>) {
   try {
     const projectName = await projectService.loadDemoProject();
 
@@ -213,7 +217,8 @@ export async function loadDemo(req: Request, res: Response<MessageResponse | Err
   } catch (error) {
     const message = getErrorMessage(error);
     if (message.startsWith('Project file')) {
-      return res.status(403).send({ message });
+      res.status(403).send({ message });
+      return;
     }
     res.status(500).send({ message });
   }
@@ -244,7 +249,8 @@ 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(403).send({ message });
+      return;
     }
 
     res.status(500).send({ message });
@@ -274,7 +280,8 @@ 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(403).send({ message });
+      return;
     }
 
     res.status(500).send({ message });
@@ -302,10 +309,12 @@ export async function deleteProjectFile(req: Request, res: Response<MessageRespo
   } catch (error) {
     const message = getErrorMessage(error);
     if (message === 'Cannot delete currently loaded project') {
-      return res.status(403).send({ message });
+      res.status(403).send({ message });
+      return;
     }
     if (message === 'Project file not found') {
-      return res.status(404).send({ message });
+      res.status(404).send({ message });
+      return;
     }
 
     res.status(500).send({ message });

apps/server/src/api-data/db/db.middleware.ts

@@ -1,11 +1,10 @@
 import type { Request } from 'express';
 import multer, { type FileFilterCallback } from 'multer';
 
-import { JSON_MIME } from '../../utils/parser.js';
 import { storage } from '../../utils/upload.js';
 
 const filterProjectFile = (_req: Request, file: Express.Multer.File, cb: FileFilterCallback) => {
-  if (file.mimetype.includes(JSON_MIME)) {
+  if (file.mimetype.includes('application/json')) {
     cb(null, true);
   } else {
     cb(null, false);