feat: Keep screen awake (#1788)

* feat keepAwake hook

* reaqure lock after view change

* refactor: move it to a navigation view setting

* save to search params

.dockerignore

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

.github/workflows/build_resolver.yml

@@ -0,0 +1,42 @@
+name: Ontime Resolver build
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  build_cli:
+    permissions:
+      id-token: write
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        run: pnpm turbo @getontime/resolver#build
+
+      - name: Publish to NPM
+        run: pnpm publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true
+        working-directory: ./apps/resolver

.prettierignore

@@ -7,4 +7,5 @@ playwright-report
 
 **/*.toml
 **/*.yml
-**/*.json
+**/*.json
+!tsconfig.common.json

DEVELOPMENT.md

@@ -99,3 +99,16 @@ Other useful commands
 
 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`
+
+## CONTRIBUTION GUIDELINES
+
+If you want to propose changes to the codebase, please reach out before opening a Pull Request.
+
+For new PRs, please follow the following checklist:
+* [ ] You have updated and ran unit locally and they are passing. Unit tests are generally created for all utility functions and business logic 
+* [ ] You have ran code formatting and linting in all your changes
+* [ ] The branch is clean and the commits are meaningfully separated and contain descriptive messages
+* [ ] The PR body contains description and motivation for the changes
+
+After this checklist is complete, you can request a review from one of the maintainers to get feedback and approval on the changes. \
+We will review as soon as possible

apps/cli/package.json

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

apps/client/package.json

@@ -1,23 +1,23 @@
 {
   "name": "ontime-ui",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.4",
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.2",
+    "@base-ui-components/react": "1.0.0-beta.3",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource/open-sans": "^5.0.28",
+    "@fontsource/open-sans": "^5.2.6",
-    "@mantine/hooks": "^8.2.4",
+    "@mantine/hooks": "^8.2.8",
     "@sentry/react": "^10.2.0",
     "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.84.1",
+    "@tanstack/react-query": "^5.85.9",
-    "@tanstack/react-query-devtools": "^5.84.1",
+    "@tanstack/react-query-devtools": "^5.85.9",
     "@tanstack/react-table": "^8.21.3",
     "autosize": "^6.0.1",
     "axios": "^1.11.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "csv-stringify": "^6.6.0",
     "prismjs": "^1.30.0",
     "react": "^19.1.1",
@@ -27,11 +27,11 @@
     "react-hook-form": "^7.62.0",
     "react-icons": "5.5.0",
     "react-qr-code": "^2.0.18",
-    "react-router": "^7.8.0",
+    "react-router": "^7.8.2",
     "react-simple-code-editor": "^0.14.1",
     "react-virtuoso": "^4.14.0",
     "web-vitals": "^5.1.0",
-    "zustand": "^5.0.7"
+    "zustand": "^5.0.8"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -64,8 +64,8 @@
     "@sentry/vite-plugin": "^2.16.1",
     "@tanstack/eslint-plugin-query": "^5.8.4",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.6",
+    "@types/react-dom": "^19.1.9",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
     "@vitejs/plugin-react": "4.5.1",

apps/client/src/App.tsx

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

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

@@ -33,7 +33,13 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
     if (newPath === '/' || newPath === currentPath) {
       return;
     }
-    setRedirect({ target: id, redirect: newPath });
+
+    if (newPath.startsWith('preset-')) {
+      setRedirect({ target: id, redirect: newPath.slice(7) });
+    } else {
+      setRedirect({ target: id, redirect: newPath });
+    }
+
     onClose();
   };
 
@@ -45,7 +51,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
       label: view.label,
     })),
     ...enabledPresets.map((preset) => ({
-      value: preset.search,
+      value: `preset-${preset.alias}`,
       label: `URL Preset: ${preset.alias}`,
     })),
   ];
@@ -61,32 +67,11 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
         <>
           <Info>
             Remotely redirect the client to a different URL. <br />
-            Either by selecting a URL Preset or entering a custom path.
+            Either by entering a custom path or selecting a URL Preset.
             <br />
             <br />
             <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
           </Info>
-          <div>
-            <span className={style.label}>Select View or URL Preset</span>
-            <div className={style.textEntry}>
-              <Select
-                fluid
-                options={viewOptions}
-                defaultValue={viewOptions[0].value}
-                onValueChange={(value) => setSelected(value)}
-                disabled={enabledPresets.length === 0}
-              />
-              <Button
-                variant='primary'
-                aria-label='Redirect to preset'
-                className={style.redirect}
-                disabled={enabledPresets.length === 0 || selected === '/'}
-                onClick={() => handleRedirect(selected)}
-              >
-                Redirect <IoArrowForward />
-              </Button>
-            </div>
-          </div>
           <div className={style.inlineEntry}>
             <span className={style.label}>Enter custom path</span>
             <label className={style.textEntry}>
@@ -100,9 +85,34 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
               className={style.redirect}
               onClick={() => handleRedirect(path)}
             >
-              Redirect <IoArrowForward />
+              Redirect
+              <IoArrowForward />
             </Button>
           </div>
+          <div>
+            <span className={style.label}>Select View or URL Preset</span>
+            <div className={style.inlineEntry}>
+              <label className={style.textEntry}>
+                {origin}
+                <Select
+                  fluid
+                  options={viewOptions}
+                  defaultValue={viewOptions[0].value}
+                  onValueChange={(value) => setSelected(value)}
+                  disabled={enabledPresets.length === 0}
+                />
+              </label>
+              <Button
+                variant='primary'
+                aria-label='Redirect to preset'
+                className={style.redirect}
+                disabled={enabledPresets.length === 0 || selected === '/'}
+                onClick={() => handleRedirect(selected)}
+              >
+                Redirect <IoArrowForward />
+              </Button>
+            </div>
+          </div>
         </>
       }
     />

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

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

apps/client/src/common/components/protect-route/PinPage.module.scss

@@ -11,9 +11,11 @@
 }
 
 .pin {
+  margin-top: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
 
   input {
     font-size: 4rem;

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

@@ -39,7 +39,14 @@ export default function ParamInput({ paramField }: ParamInputProps) {
   }
 
   if (type === 'multi-option') {
-    return <MultiOption paramField={paramField} />;
+    const optionFromParams = searchParams.getAll(id);
+
+    return (
+      <MultiOption
+        paramField={paramField}
+        options={optionFromParams.length ? optionFromParams : paramField.defaultValue ?? ['']}
+      />
+    );
   }
 
   if (type === 'boolean') {
@@ -74,19 +81,17 @@ export default function ParamInput({ paramField }: ParamInputProps) {
 
 interface EditFormMultiOptionProps {
   paramField: ParamField & { type: 'multi-option' };
+  options: string[];
 }
 
-function MultiOption({ paramField }: EditFormMultiOptionProps) {
+function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
-  const [searchParams] = useSearchParams();
+  const { id, values } = paramField;
-  const { id, values, defaultValue = [''] } = paramField;
+  const [paramState, setParamState] = useState<string[]>(options);
-
-  const optionFromParams = searchParams.getAll(id);
-  const [paramState, setParamState] = useState<string[]>(optionFromParams.length ? optionFromParams : defaultValue);
 
+  // synchronise options
   useEffect(() => {
-    const params = searchParams.getAll(id);
+    setParamState(options);
-    setParamState(params.length ? params : defaultValue);
+  }, [options]);
-  }, [searchParams, id, defaultValue]);
 
   const toggleValue = (value: string, checked: boolean) => {
     if (checked) {

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

@@ -28,6 +28,7 @@
   bottom: 0;
 
   width: 40rem;
+  max-width: 100vw;
   height: 100vh;
 
   display: flex;

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

@@ -56,13 +56,18 @@ export function makeCustomFieldSelectOptions(customFields: CustomFields, filterI
 /**
  * Creates data for a select element that displays project custom data
  */
-export function makeProjectDataOptions(projectData: ProjectData): SelectOption[] {
+export function makeProjectDataOptions(
-  return projectData.custom.map((entry, index) => {
+  projectData: ProjectData,
+  additionalOptions: SelectOption[] = [],
+): SelectOption[] {
+  const generatedOptions = projectData.custom.map((entry, index) => {
     return {
       value: `${index}-${entry.title}`,
       label: entry.title,
     };
   });
+
+  return [...additionalOptions, ...generatedOptions];
 }
 
 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };

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

@@ -23,6 +23,9 @@ export const useFadeOutOnInactivity = (initialState = false) => {
 
     const throttledShowMenu = throttle(setShowMenuTrue, 1000);
 
+    // we call the function on mount, to make sure the menu is hidden
+    throttledShowMenu();
+
     document.addEventListener('mousemove', throttledShowMenu);
     document.addEventListener('keydown', throttledShowMenu);
 

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

@@ -1,6 +1,5 @@
-import { RefObject, useCallback, useEffect, useRef } from 'react';
+import { RefObject, useCallback, useEffect } from 'react';
-
+import { MaybeString } from 'ontime-types';
-import { useSelectedEventId } from './useSocket';
 
 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
   componentRef: RefObject<ComponentRef>,
@@ -18,37 +17,26 @@ function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends H
   scrollRef.current.scrollTo({ top, behavior: 'smooth' });
 }
 
-function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: RefObject<ComponentRef>,
-  scrollRef: RefObject<ScrollRef>,
-  topOffset: number,
-) {
-  if (!componentRef.current || !scrollRef.current) {
-    return;
-  }
-
-  const componentRect = componentRef.current.getBoundingClientRect();
-  const scrollRect = scrollRef.current.getBoundingClientRect();
-  const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - topOffset;
-
-  // maintain current x scroll position
-  scrollRef.current.scrollTo(scrollRef.current.scrollLeft, top);
-}
-
 interface UseFollowComponentProps {
   followRef: RefObject<HTMLElement | null>;
   scrollRef: RefObject<HTMLElement | null>;
   doFollow: boolean;
   topOffset?: number;
   setScrollFlag?: (newValue: boolean) => void;
+  followTrigger?: MaybeString; // this would be an entry id or null
 }
 
-export default function useFollowComponent(props: UseFollowComponentProps) {
+export default function useFollowComponent({
-  const { followRef, scrollRef, doFollow, topOffset = 100, setScrollFlag } = props;
+  followRef,
-
+  scrollRef,
-  // when cursor moves, view should follow
+  doFollow,
+  topOffset = 100,
+  setScrollFlag,
+  followTrigger,
+}: UseFollowComponentProps) {
+  // when trigger moves, view should follow
   useEffect(() => {
-    if (!doFollow) {
+    if (!doFollow || !followTrigger) {
       return;
     }
 
@@ -60,16 +48,14 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
         setScrollFlag?.(false);
       });
     }
-
+  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
-    // eslint-disable-next-line -- the prompt seems incorrect
-  }, [followRef?.current, scrollRef?.current]);
 
   const scrollToRefComponent = useCallback(
     (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
-      if (componentRef.current && containerRef.current) {
+      if (componentRef && containerRef) {
         // @ts-expect-error -- we know this are not null
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        scrollToComponent(componentRef!, scrollRef!, offset);
+        scrollToComponent(componentRef!, containerRef!, offset);
       }
     },
     [followRef, scrollRef, topOffset],
@@ -77,32 +63,3 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
 
   return scrollToRefComponent;
 }
-
-export function useFollowSelected(doFollow: boolean, topOffset = 100) {
-  const selectedEvenId = useSelectedEventId();
-
-  const selectedRef = useRef<HTMLTableRowElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!doFollow) {
-      return;
-    }
-
-    if (selectedEvenId && selectedRef.current && scrollRef.current) {
-      // Use requestAnimationFrame to ensure the component is fully loaded
-      window.requestAnimationFrame(() => {
-        snapToComponent(
-          { current: selectedRef.current } as RefObject<HTMLElement>,
-          { current: scrollRef.current } as RefObject<HTMLElement>,
-          topOffset,
-        );
-      });
-    }
-  }, [doFollow, selectedEvenId, topOffset]);
-
-  return {
-    selectedRef,
-    scrollRef,
-  };
-}

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

@@ -10,7 +10,9 @@ const createSelector =
 
 export const setClientRemote = {
   setIdentify: (payload: { target: string; identify: boolean }) => sendSocket('client', payload),
-  setRedirect: (payload: { target: string; redirect: string }) => sendSocket('client', payload),
+  setRedirect: (payload: { target: string; redirect: string }) => {
+    sendSocket('client', payload);
+  },
   setClientName: (payload: { target: string; rename: string }) => sendSocket('client', payload),
 };
 
@@ -162,24 +164,6 @@ export const useProgressData = createSelector((state: RuntimeStore) => ({
   timeDanger: state.eventNow?.timeDanger ?? null,
 }));
 
-export const useRundownOverview = createSelector((state: RuntimeStore) => ({
-  plannedStart: state.rundown.plannedStart,
-  actualStart: state.rundown.actualStart,
-  plannedEnd: state.rundown.plannedEnd,
-  expectedEnd: state.offset.expectedRundownEnd,
-}));
-
-export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) => ({
-  playback: state.timer.playback,
-  clock: state.clock,
-
-  numEvents: state.rundown.numEvents,
-  selectedEventIndex: state.rundown.selectedEventIndex,
-  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
-
-  groupExpectedEnd: state.offset.expectedGroupEnd,
-}));
-
 export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
   clock: state.clock,
   offset: state.offset.absolute,
@@ -188,7 +172,7 @@ export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
 export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
   offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
   mode: state.offset.mode,
-  currentDay: state.eventNow?.dayOffset ?? 0,
+  currentDay: state.rundown.currentDay ?? 0,
   actualStart: state.rundown.actualStart,
   plannedStart: state.rundown.plannedStart,
   clock: state.clock,
@@ -225,6 +209,45 @@ export const usePlayback = () => {
   return useRuntimeStore(featureSelector);
 };
 
+/* ======================= Overview data subscriptions ======================= */
+
+export const useRundownOverview = createSelector((state: RuntimeStore) => ({
+  plannedStart: state.rundown.plannedStart,
+  actualStart: state.rundown.actualStart,
+  plannedEnd: state.rundown.plannedEnd,
+  expectedEnd: state.offset.expectedRundownEnd,
+}));
+
+export const useProgressOverview = createSelector((state: RuntimeStore) => ({
+  numEvents: state.rundown.numEvents,
+  selectedEventIndex: state.rundown.selectedEventIndex,
+}));
+
+export const useOffsetOverview = createSelector((state: RuntimeStore) => ({
+  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
+  playback: state.timer.playback,
+}));
+
+export const useGroupTimerOverView = createSelector((state: RuntimeStore) => ({
+  clock: state.clock,
+  mode: state.offset.mode,
+  groupExpectedEnd: state.offset.expectedGroupEnd,
+  // we can force these numbers to 0 fo this use case to avoid null checks
+  actualGroupStart: state.rundown.actualGroupStart ?? 0,
+  currentDay: state.eventNow?.dayOffset ?? 0,
+  playback: state.timer.playback,
+}));
+
+export const useFlagTimerOverView = createSelector((state: RuntimeStore) => ({
+  clock: state.clock,
+  mode: state.offset.mode,
+  // we can force these numbers to 0 fo this use case to avoid null checks
+  actualStart: state.rundown.actualStart ?? 0,
+  plannedStart: state.rundown.plannedStart ?? 0,
+  currentDay: state.eventNow?.dayOffset ?? 0,
+  playback: state.timer.playback,
+}));
+
 /* ======================= View specific subscriptions ======================= */
 
 export const useTimerSocket = createSelector((state: RuntimeStore) => ({

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

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

apps/client/src/common/models/View.types.ts

@@ -1,19 +0,0 @@
-export type OverridableOptions = {
-  keyColour?: string;
-  textColour?: string;
-  textBackground?: string;
-  font?: string;
-  size?: number;
-  justifyContent?: 'start' | 'center' | 'end';
-  alignItems?: 'start' | 'center' | 'end';
-  left?: string;
-  top?: string;
-  hideNav?: boolean;
-  hideOvertime?: boolean;
-  hideMessagesOverlay?: boolean;
-  hideEndMessage?: boolean;
-  language?: string;
-  showProgressBar?: boolean;
-  hideTimerSeconds?: boolean;
-  removeLeadingZeros?: boolean;
-};

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

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

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

@@ -173,7 +173,7 @@ describe('initRundownMetadata()', () => {
       isPast: false,
       isNextDay: false,
       totalGap: 10,
-      isLinkedToLoaded: false,
+      isLinkedToLoaded: true,
       isLoaded: true,
       groupId: 'group',
       groupColour: 'red',

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

@@ -125,6 +125,7 @@ function processEntry(
   if (entry.id === selectedEventId) {
     processedData.isLoaded = true;
     processedData.isPast = false;
+    processedData.isLinkedToLoaded = true;
   }
 
   if (isOntimeGroup(entry)) {
@@ -158,7 +159,8 @@ function processEntry(
            * a) find an unlinked event
            * b) find a countToEnd event
            */
-          processedData.isLinkedToLoaded = entry.linkStart && !processedData.previousEvent?.countToEnd;
+          processedData.isLinkedToLoaded =
+            entry.linkStart && !processedData.previousEvent?.countToEnd && processedData.isLinkedToLoaded;
         }
 
         if (isNewLatest(entry, processedData.latestEvent)) {

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

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

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

@@ -1,5 +1,5 @@
 import {
-  ApiAction,
+  ApiActionTag,
   Log,
   MessageTag,
   RefetchKey,
@@ -199,7 +199,7 @@ export const connectSocket = () => {
   };
 };
 
-export function sendSocket<T extends MessageTag | ApiAction>(
+export function sendSocket<T extends MessageTag | ApiActionTag>(
   tag: T,
   payload: T extends MessageTag ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload'] : unknown,
 ): void {

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

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

apps/client/src/features/PresetWrapper.tsx

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

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

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

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { CustomFields, Rundown } from 'ontime-types';
 
 import Button from '../../../../../common/components/buttons/Button';
+import useRundown from '../../../../../common/hooks-query/useRundown';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import PreviewSpreadsheet from './preview/PreviewRundown';
@@ -17,7 +18,7 @@ interface ImportReviewProps {
 
 export default function ImportReview(props: ImportReviewProps) {
   const { rundown, customFields, onFinished, onCancel } = props;
-
+  const { data: currentRundown } = useRundown();
   const [loading, setLoading] = useState(false);
   const { importRundown } = useGoogleSheet();
   const resetPreview = useSheetStore((state) => state.resetPreview);
@@ -29,9 +30,12 @@ export default function ImportReview(props: ImportReviewProps) {
 
   const applyImport = async () => {
     setLoading(true);
+
+    // we need to import on-top of the currently loaded rundown
+    // so the id needs to match
     await importRundown(
       {
-        [rundown.id]: rundown,
+        [currentRundown.id]: { ...rundown, id: currentRundown.id, title: currentRundown.title },
       },
       customFields,
     );

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

@@ -14,4 +14,8 @@
 .copiable {
   cursor: text  ;
   user-select: text;
-}
+}
+
+.self {
+  background-color: $blue-1100;
+}

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

@@ -8,6 +8,7 @@ import { RenameClientModal } from '../../../../../common/components/client-modal
 import Tag from '../../../../../common/components/tag/Tag';
 import { setClientRemote } from '../../../../../common/hooks/useSocket';
 import { useClientStore } from '../../../../../common/stores/clientStore';
+import { cx } from '../../../../../common/utils/styleUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import style from './ClientControlPanel.module.scss';
@@ -71,13 +72,13 @@ export default function ClientList() {
               const { identify, name, path } = client;
               const isCurrent = id === key;
               return (
-                <tr key={key}>
+                <tr key={key} className={cx([isCurrent && style.self])}>
                   <Panel.InlineElements relation='inner' as='td'>
                     {isCurrent && <Tag>SELF</Tag>}
                     {name}
                   </Panel.InlineElements>
                   <td className={style.copiable}>{path}</td>
-                  <Panel.InlineElements relation='inner'>
+                  <Panel.InlineElements relation='inner' as='td'>
                     <Button
                       size='small'
                       className={`${identify ? style.blink : ''}`}

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

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

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

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

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

@@ -49,6 +49,7 @@ export default function Operator() {
     scrollRef,
     doFollow: !lockAutoScroll,
     topOffset: selectedOffset,
+    followTrigger: selectedEventId,
   });
 
   useWindowTitle('Operator');
@@ -181,7 +182,7 @@ export default function Operator() {
                   const { isPast, isSelected, isLinkedToLoaded, totalGap } = process(nestedEntry);
 
                   // hide past events (if setting) and skipped events
-                  if (hidePast && isPast) {
+                  if ((hidePast && isPast) || nestedEntry.skip) {
                     return null;
                   }
 

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

@@ -13,6 +13,7 @@ import { isStringBoolean } from '../viewers/common/viewUtils';
 
 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
   const fieldOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
     { value: 'title', label: 'Title' },
     { value: 'note', label: 'Note' },
   ]);
@@ -38,7 +39,7 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
           description: 'Field to be shown in the second line of text',
           type: 'option',
           values: fieldOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
         {
           id: 'subscribe',

apps/client/src/features/overview/composite/TimeElements.module.scss

@@ -47,9 +47,10 @@
 
 .daySpan {
   &::after {
-    content: '*';
+    content: "+"attr(data-day-offset);
     vertical-align: super;
-    font-size: 0.75em;
+    font-size: 0.6em;
+    letter-spacing: 0;
     color: $info-blue;
   }
 }
@@ -67,3 +68,10 @@
   font-size: calc(1rem - 2px);
   text-align: right;
 }
+
+.dueTime {
+  text-transform: capitalize;
+  font-size: 1rem;
+  letter-spacing: 0;
+  color: $playback-over;
+}

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

@@ -8,23 +8,26 @@ import {
   TbFolderPin,
   TbFolderStar,
 } from 'react-icons/tb';
-import { OntimeEvent, OntimeGroup, TimerPhase, TimerType } from 'ontime-types';
+import { OffsetMode, OntimeEvent, OntimeGroup, TimerPhase, TimerType } from 'ontime-types';
-import { isPlaybackActive, millisToString } from 'ontime-utils';
+import { dayInMs, isPlaybackActive, millisToString } from 'ontime-utils';
 
 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import {
   useClock,
   useCurrentGroupId,
+  useFlagTimerOverView,
+  useGroupTimerOverView,
   useNextFlag,
+  useOffsetOverview,
+  useProgressOverview,
   useRundownOverview,
-  useRuntimePlaybackOverview,
   useTimer,
 } from '../../../common/hooks/useSocket';
 import { useEntry } from '../../../common/hooks-query/useRundown';
 import { getOffsetState, getOffsetText } from '../../../common/utils/offset';
 import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';
-import { calculateEndAndDaySpan, formattedTime } from '../overview.utils';
+import { calculateEndAndDaySpan, formatDueTime, formattedTime } from '../overview.utils';
 
 import { OverUnder, TimeColumn } from './TimeLayout';
 
@@ -58,8 +61,8 @@ export function StartTimes() {
           <Tooltip text='Planned end time' render={<TbCalendarPin className={style.icon} />} />
           {maybePlannedDaySpan > 0 ? (
             <Tooltip
-              text={`Event spans over ${maybePlannedDaySpan + 1} days`}
+              text={`Rundown spans over ${maybePlannedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} />}
+              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybePlannedDaySpan} />}
             >
               {plannedEndText}
             </Tooltip>
@@ -71,8 +74,8 @@ export function StartTimes() {
           <Tooltip text='Expected end time' render={<TbCalendarStar className={style.icon} />} />
           {maybeExpectedEnd !== null && maybeExpectedDaySpan > 0 ? (
             <Tooltip
-              text={`Event spans over ${maybeExpectedDaySpan + 1} days`}
+              text={`Rundown spans over ${maybeExpectedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} />}
+              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybeExpectedDaySpan} />}
             >
               {formattedTime(maybeExpectedEnd)}
             </Tooltip>
@@ -96,61 +99,110 @@ export function MetadataTimes() {
   );
 }
 
-//TODO: there a some things here we still need to think about, mainly what to do whit the planed group duration in relation to the events
 function GroupTimes() {
-  const { clock, groupExpectedEnd } = useRuntimePlaybackOverview();
+  const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback } = useGroupTimerOverView();
   const { currentGroupId } = useCurrentGroupId();
   const group = useEntry(currentGroupId) as OntimeGroup | null;
 
-  // the group end time dose not encode any day offsets
+  const active = isPlaybackActive(playback);
-  const plannedGroupEnd = group && group.timeStart !== null ? group.timeStart + group.duration - clock : null;
+
-  const plannedTimeUntilGroupEnd = formattedTime(plannedGroupEnd, 3, TimerType.CountDown);
+  // the group end time dose not encode any day offsets so it is calculated with group start time and duration
+  const plannedGroupEnd = (() => {
+    if (!active) return null;
+    if (!group || group.timeStart === null) return null;
+    const normalizedClock = clock + currentDay * dayInMs;
+
+    return mode === OffsetMode.Absolute
+      ? group.timeStart + group.duration - normalizedClock
+      : actualGroupStart + group.duration - normalizedClock;
+  })();
+
+  const plannedTimeUntilGroupEnd = formatDueTime(plannedGroupEnd, 3, TimerType.CountDown);
 
   const expectedGroupEnd = groupExpectedEnd !== null ? groupExpectedEnd - clock : null;
-  const expectedTimeUntilGroupEnd = formattedTime(expectedGroupEnd, 3, TimerType.CountDown);
+  const expectedTimeUntilGroupEnd = formatDueTime(expectedGroupEnd, 3, TimerType.CountDown);
-
-  const groupTitle = group?.title ?? null;
 
   return (
     <div className={style.metadataRow}>
-      <span className={groupTitle ? style.labelTitle : style.label}>{`${groupTitle ? groupTitle : 'Group'} `}</span>
+      <span className={group?.title ? style.labelTitle : style.label}>{`${group?.title || 'Group'} `}</span>
       <div className={style.labelledElement}>
         <Tooltip text='Time to planned group end' render={<TbFolderPin className={style.icon} />} />
-        <span className={cx([style.time, !group && style.muted])}>{plannedTimeUntilGroupEnd}</span>
+        <span
+          className={cx([
+            style.time,
+            (!group || !active) && style.muted,
+            plannedTimeUntilGroupEnd === 'due' && style.dueTime,
+          ])}
+        >
+          {plannedTimeUntilGroupEnd}
+        </span>
       </div>
       <div className={style.labelledElement}>
         <Tooltip text='Time to expected group end' render={<TbFolderStar className={style.icon} />} />
-        <span className={cx([style.time, groupExpectedEnd === null && style.muted])}>{expectedTimeUntilGroupEnd}</span>
+        <span
+          className={cx([
+            style.time,
+            !groupExpectedEnd && style.muted,
+            expectedTimeUntilGroupEnd === 'due' && style.dueTime,
+          ])}
+        >
+          {expectedTimeUntilGroupEnd}
+        </span>
       </div>
     </div>
   );
 }
 
 function FlagTimes() {
-  const { clock } = useClock();
+  const { clock, mode, actualStart, plannedStart, playback, currentDay } = useFlagTimerOverView();
   const { id, expectedStart } = useNextFlag();
   const entry = useEntry(id) as OntimeEvent | null;
 
-  const plannedFlagStart = entry ? entry.timeStart - clock : null;
+  const active = isPlaybackActive(playback);
-  const plannedTimeUntilDisplay = formattedTime(plannedFlagStart, 3, TimerType.CountDown);
+
+  const plannedFlagStart = (() => {
+    if (!active) return null;
+    if (!entry) return null;
+    const normalizedTimeStart = entry.timeStart + entry.dayOffset * dayInMs;
+    const normalizedClock = clock + currentDay * dayInMs;
+    return mode === OffsetMode.Absolute
+      ? normalizedTimeStart - normalizedClock
+      : normalizedTimeStart + actualStart - plannedStart - normalizedClock;
+  })();
+
+  const plannedTimeUntilDisplay = formatDueTime(plannedFlagStart, 3, TimerType.CountDown);
 
   const expectedTimeUntil = expectedStart !== null ? expectedStart - clock : null;
-  const expectedTimeUntilDisplay = formattedTime(expectedTimeUntil, 3, TimerType.CountDown);
+  const expectedTimeUntilDisplay = formatDueTime(expectedTimeUntil, 3, TimerType.CountDown);
 
   const title = entry?.title ?? null;
 
   return (
     <div className={style.metadataRow}>
-      <span className={title ? style.labelTitle : style.label}>{`${title ? title : 'Flag'} `}</span>
+      <span className={title ? style.labelTitle : style.label}>{`${title || 'Flag'} `}</span>
       <div className={style.labelledElement}>
         <Tooltip text='Time to next flag planned start' render={<TbFlagPin className={style.icon} />} />
-        <span data-testid='flag-plannedStart' className={cx([style.time, !entry && style.muted])}>
+        <span
+          data-testid='flag-plannedStart'
+          className={cx([
+            style.time,
+            (!entry || !active) && style.muted,
+            plannedTimeUntilDisplay === 'due' && style.dueTime,
+          ])}
+        >
           {plannedTimeUntilDisplay}
         </span>
       </div>
       <div className={style.labelledElement}>
         <Tooltip text='Time to next flag expected start' render={<TbFlagStar className={style.icon} />} />
-        <span data-testid='flag-expectedStart' className={cx([style.time, expectedTimeUntil === null && style.muted])}>
+        <span
+          data-testid='flag-expectedStart'
+          className={cx([
+            style.time,
+            expectedTimeUntil === null && style.muted,
+            expectedTimeUntilDisplay === 'due' && style.dueTime,
+          ])}
+        >
           {expectedTimeUntilDisplay}
         </span>
       </div>
@@ -159,7 +211,7 @@ function FlagTimes() {
 }
 
 export function ProgressOverview() {
-  const { numEvents, selectedEventIndex } = useRuntimePlaybackOverview();
+  const { numEvents, selectedEventIndex } = useProgressOverview();
 
   const current = selectedEventIndex !== null ? selectedEventIndex + 1 : enDash;
   const progressText = numEvents ? `${current} of ${numEvents || enDash}` : enDash;
@@ -168,7 +220,7 @@ export function ProgressOverview() {
 }
 
 export function OffsetOverview() {
-  const { offset, playback } = useRuntimePlaybackOverview();
+  const { offset, playback } = useOffsetOverview();
 
   const isPlaying = isPlaybackActive(playback);
   const offsetState = getOffsetState(isPlaying ? offset : null);
@@ -179,8 +231,9 @@ export function OffsetOverview() {
 
 export function ClockOverview({ className }: { className?: string }) {
   const { clock } = useClock();
+  const formattedClock = formatTime(clock);
 
-  return <TimeColumn label='Time now' value={formattedTime(clock)} className={className} />;
+  return <TimeColumn label='Time now' value={formattedClock} className={className} />;
 }
 
 export function TimerOverview({ className }: { className?: string }) {

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

@@ -3,6 +3,23 @@ import { dayInMs, millisToString } from 'ontime-utils';
 
 import { timerPlaceholder, timerPlaceholderMin } from '../../common/utils/styleUtils';
 
+/**
+ * Composition to stop negative timers from being formatted
+ * They should show a due string instead
+ *
+ * This is used for cases when a negative timer is unwanted
+ * eg: count down to a milestone
+ */
+export function formatDueTime(
+  time: MaybeNumber,
+  segments: number = 3,
+  direction?: TimerType.CountDown | TimerType.CountUp,
+  dueString = 'due',
+): string {
+  if (time !== null && time <= 0) return dueString;
+  return formattedTime(time, segments, direction);
+}
+
 /**
  * Encapsulates the logic for formatting time in overview
  */

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

@@ -82,7 +82,12 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
 
   const cursorRef = useRef<HTMLDivElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
-  useFollowComponent({ followRef: cursorRef, scrollRef, doFollow: editorMode === AppMode.Run });
+  useFollowComponent({
+    followRef: cursorRef,
+    scrollRef,
+    doFollow: true,
+    followTrigger: editorMode === AppMode.Edit ? cursor : featureData?.selectedEventId,
+  });
 
   // DND KIT
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
@@ -312,7 +317,7 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
     setMetadata(rundownMetadata);
   }, [order, entries, rundownMetadata]);
 
-  // in run mode, we follow selection
+  // in run mode, we follow the playback selection and open groups as needed
   useEffect(() => {
     if (editorMode !== AppMode.Run || !featureData?.selectedEventId) {
       return;

apps/client/src/features/rundown/RundownExport.module.scss

@@ -28,20 +28,22 @@
   padding-inline: 0;
   box-shadow: $box-shadow-right;
 
-  flex: 1 2 auto; /* flex-grow: 1, flex-shrink: 2, flex-basis: auto */
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
   min-width: 38rem;
-  max-width: 60rem;
+  max-width: none;
+  width: 0;
 }
 
 .side {
   max-height: 100%;
-  max-width: 45rem;
   margin: 0.5rem 0;
   padding: 1rem;
   padding-right: 0;
   background-color: $gray-1325;
   border-radius: 0 8px 8px 0;
 
-  flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
-  max-width: 45rem;
+  // width is locked to swatch picker elements
+  min-width: calc(15 * 2rem + 13 * 0.5rem);
+  width: 0;
 }

apps/client/src/features/rundown/rundown-event/composite/RundownEventChip.tsx

@@ -73,9 +73,7 @@ interface EventUntilProps {
   isLinkedToLoaded: boolean;
 }
 
-function EventUntil(props: EventUntilProps) {
+function EventUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }: EventUntilProps) {
-  const { timeStart, delay, dayOffset, totalGap, isLinkedToLoaded } = props;
-
   const timeUntil = useTimeUntilExpectedStart({ timeStart, delay, dayOffset }, { totalGap, isLinkedToLoaded });
   const isDue = timeUntil < MILLIS_PER_SECOND;
 

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

@@ -41,9 +41,9 @@ export function canDrop(
   order?: 'after' | 'before',
   isTargetCollapsed?: boolean,
 ): boolean {
-  // this would mean inserting a group inside another
+  // inserting before would mean adding a group inside another
   if (targetType === 'end-group') {
-    return false;
+    return order === 'after';
   }
 
   // this means swapping places with another group

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

@@ -29,7 +29,7 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
       { value: OntimeView.Timer, label: 'Timer' },
       { value: OntimeView.Cuesheet, label: 'Cuesheet' },
       { value: OntimeView.Operator, label: 'Operator' },
-      { value: '', label: 'Companion' },
+      { value: '<<companion>>', label: 'Companion' },
       ...urlPresetData.map((preset) => ({
         value: `preset-${preset.alias}`,
         label: `URL Preset: ${preset.alias}`,

apps/client/src/sentry.config.ts

@@ -64,7 +64,7 @@ export const initializeSentry = () => {
       /NetworkError/i,
       /The operation couldn't be completed/i,
     ],
-    denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i],
+    denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i, /external\//i],
     beforeSend(event) {
       // Drop errors that happen during known data-unavailable states
       const error = event.exception?.values?.[0]?.value;

apps/client/src/theme/_viewerDefs.scss

@@ -17,7 +17,6 @@ $header-font-size: clamp(24px, 2.5vw, 48px);
 
 // General styling
 $accent-color: $red-500; // --accent-color-override
-$delay-color: $ontime-delay-text;
 $viewer-label-color: rgba(white, 25%);
 
 // Main Properties of a viewer

apps/client/src/translation/languages/de.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langDe: TranslationObject = {
   'common.expected_finish': 'Erwartetes Ende',
   'common.minutes': 'min',
+  'common.seconds': 'sek',
   'common.now': 'Jetzt',
   'common.next': 'Nächste',
   'common.scheduled_start': 'Geplanter beginn',
@@ -15,6 +16,7 @@ export const langDe: TranslationObject = {
   'common.no_data': 'Keine Daten',
   'countdown.ended': 'Veranstaltung endete um',
   'countdown.running': 'Veranstaltung läuft',
+  'countdown.loaded': 'Veranstaltung geladen',
   'countdown.select_event': 'Wählen Sie eine Veranstaltung aus, um sie zu verfolgen',
   'countdown.to_start': 'Zeit bis zum Start',
   'countdown.waiting': 'Warten auf den Veranstaltungsbeginn',

apps/client/src/translation/languages/es.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langEs: TranslationObject = {
   'common.expected_finish': 'Finalización esperada',
   'common.minutes': 'min',
+  'common.seconds': 'sec',
   'common.now': 'Ahora',
   'common.next': 'Siguiente',
   'common.scheduled_start': 'Inicio programado',
@@ -15,6 +16,7 @@ export const langEs: TranslationObject = {
   'common.no_data': 'Sin datos',
   'countdown.ended': 'Evento finalizado a las',
   'countdown.running': 'Evento en curso',
+  'countdown.loaded': 'Evento está cargado', //TODO: check translation
   'countdown.select_event': 'Seleccionar un evento para seguir',
   'countdown.to_start': 'Tiempo para comenzar',
   'countdown.waiting': 'Esperando el inicio del evento',

apps/client/src/translation/languages/fr.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langFr: TranslationObject = {
   'common.expected_finish': 'Fin estimée à',
   'common.minutes': 'min',
+  'common.seconds': 'sec',
   'common.now': 'Maintenant',
   'common.next': 'A suivre',
   'common.scheduled_start': 'Début prévu',
@@ -15,6 +16,7 @@ export const langFr: TranslationObject = {
   'common.no_data': 'Aucune donnée',
   'countdown.ended': 'Évènement terminé à',
   'countdown.running': 'Évènement en cours',
+  'countdown.loaded': 'Évènement chargé',
   'countdown.select_event': 'Sélectionnez un évènement à suivre',
   'countdown.to_start': 'Évènement commence dans',
   'countdown.waiting': 'En attente du début de l’évènement',

apps/client/src/translation/languages/it.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langIt: TranslationObject = {
   'common.expected_finish': 'Fine Prevista',
   'common.minutes': 'min',
+  'common.seconds': 'sec',
   'common.now': 'Adesso',
   'common.next': 'Prossimo',
   'common.scheduled_start': 'Inizio programmato',
@@ -15,6 +16,7 @@ export const langIt: TranslationObject = {
   'common.no_data': 'Nessun dato disponibile',
   'countdown.ended': 'Evento finito alle',
   'countdown.running': 'Evento in corso',
+  'countdown.loaded': 'Evento caricato', //TODO: check translation
   'countdown.select_event': 'Seleziona un evento da seguire',
   'countdown.to_start': 'Tempo alla partenza',
   'countdown.waiting': "In attesa dell'inizio dell'evento",

apps/client/src/translation/languages/pt.ts

@@ -3,6 +3,7 @@ import { TranslationObject } from 'ontime-types';
 export const langPt: TranslationObject = {
   'common.expected_finish': 'Término esperado',
   'common.minutes': 'min',
+  'common.seconds': 'sec',
   'common.now': 'Agora',
   'common.next': 'Próximo',
   'common.scheduled_start': 'Início programado',
@@ -15,6 +16,7 @@ export const langPt: TranslationObject = {
   'common.no_data': 'Sem dados',
   'countdown.ended': 'Evento encerrado às',
   'countdown.running': 'Evento em andamento',
+  'countdown.loaded': 'Evento carregado', //TODO: check translation
   'countdown.select_event': 'Selecione um evento para acompanhar',
   'countdown.to_start': 'Tempo para iniciar',
   'countdown.waiting': 'Aguardando o início do evento',

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

@@ -10,15 +10,19 @@ import {
   makeProjectDataOptions,
 } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
-import { scheduleOptions } from '../common/schedule/schedule.options';
+import { getScheduleOptions } from '../common/schedule/schedule.options';
 
 export const getBackstageOptions = (
   timeFormat: string,
   customFields: CustomFields,
   projectData: ProjectData,
 ): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, [{ value: 'note', label: 'Note' }]);
+  const customFieldOptions = makeOptionsFromCustomFields(customFields, []);
-  const projectDataOptions = makeProjectDataOptions(projectData);
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
+    { value: 'note', label: 'Note' },
+  ]);
+  const projectDataOptions = makeProjectDataOptions(projectData, [{ value: 'none', label: 'None' }]);
 
   return [
     { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
@@ -32,11 +36,11 @@ export const getBackstageOptions = (
           description: 'Select the data source for auxiliary text shown in now and next cards',
           type: 'option',
           values: secondaryOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
       ],
     },
-    scheduleOptions,
+    getScheduleOptions(customFieldOptions),
     {
       title: OptionTitle.ElementVisibility,
       collapsible: true,
@@ -47,7 +51,7 @@ export const getBackstageOptions = (
           description: 'Select a project data source to show in the view',
           type: 'option',
           values: projectDataOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
       ],
     },

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

@@ -1,14 +1,5 @@
-import {
+import { createContext, PropsWithChildren, RefObject, use, useEffect, useLayoutEffect, useRef, useState } from 'react';
-  createContext,
+import { EntryId, isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';
-  PropsWithChildren,
-  RefObject,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import { isOntimeEvent, OntimeEntry, OntimeEvent } from 'ontime-types';
 
 import { usePartialRundown } from '../../../common/hooks-query/useRundown';
 
@@ -25,13 +16,18 @@ interface ScheduleContextState {
 const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);
 
 interface ScheduleProviderProps {
-  selectedEventId: string | null;
+  selectedEventId: EntryId | null;
 }
 
 export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildren<ScheduleProviderProps>) => {
-  const { cycleInterval, stopCycle } = useScheduleOptions();
+  const { cycleInterval, stopCycle, filter } = useScheduleOptions();
-  const { data: events } = usePartialRundown((event: OntimeEntry) => {
+  const { data: events } = usePartialRundown((entry: OntimeEntry) => {
-    return isOntimeEvent(event);
+    if (filter) {
+      // custom keys are prepended with custom-
+      const customKey = filter.startsWith('custom-') ? filter.slice('custom-'.length) : filter;
+      return isOntimeEvent(entry) && Boolean(entry.custom[customKey]);
+    }
+    return isOntimeEvent(entry);
   });
 
   const [firstIndex, setFirstIndex] = useState(-1);
@@ -135,7 +131,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
   selectedEventIndex = 0;
 
   return (
-    <ScheduleContext.Provider
+    <ScheduleContext
       value={{
         events: viewEvents as OntimeEvent[],
         selectedEventId,
@@ -145,12 +141,12 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
       }}
     >
       {children}
-    </ScheduleContext.Provider>
+    </ScheduleContext>
   );
 };
 
 export const useSchedule = () => {
-  const context = useContext(ScheduleContext);
+  const context = use(ScheduleContext);
   if (!context) {
     throw new Error('useSchedule() can only be used inside a ScheduleContext');
   }

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

@@ -22,8 +22,7 @@ interface ScheduleItemProps {
   delay: number;
 }
 
-export default function ScheduleItem(props: ScheduleItemProps) {
+export default function ScheduleItem({ timeStart, timeEnd, title, colour, skip, delay }: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, colour, skip, delay } = props;
   const { showExpected } = useScheduleOptions();
 
   if (showExpected) {
@@ -67,9 +66,7 @@ export default function ScheduleItem(props: ScheduleItemProps) {
   );
 }
 
-function DelayedScheduleItem(props: ScheduleItemProps) {
+function DelayedScheduleItem({ timeStart, timeEnd, title, colour, skip, delay }: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, colour, skip, delay } = props;
-
   const start = formatTime(timeStart, formatOptions);
   const end = formatTime(timeEnd, formatOptions);
   const delayedStart = formatTime(timeStart + delay, formatOptions);
@@ -95,9 +92,7 @@ function DelayedScheduleItem(props: ScheduleItemProps) {
   );
 }
 
-function ExpectedScheduleItem(props: ScheduleItemProps) {
+function ExpectedScheduleItem({ timeStart, timeEnd, title, colour, skip, delay }: ScheduleItemProps) {
-  const { timeStart, timeEnd, title, colour, skip, delay } = props;
-
   return (
     <li className={cx(['entry', skip && 'entry--skip'])}>
       <div className='entry-times'>
@@ -116,12 +111,11 @@ interface ExpectedTimeProps {
   delay: number;
 }
 
-function ExpectedTime(props: ExpectedTimeProps) {
+function ExpectedTime({ time, delay }: ExpectedTimeProps) {
-  const { time, delay } = props;
   const { offset } = useRuntimeOffset();
 
   const expectedOffset = offset - delay;
-  const expectedTime = formatTime(time - offset, formatOptions);
+  const expectedTime = formatTime(time + offset, formatOptions);
   const expectedState = getOffsetState(expectedOffset);
 
   return <SuperscriptTime className={`entry-times--${expectedState}`} time={expectedTime} />;

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

@@ -1,14 +1,23 @@
 import { useMemo } from 'react';
 import { useSearchParams } from 'react-router';
 
+import { SelectOption } from '../../../common/components/select/Select';
 import { OptionTitle } from '../../../common/components/view-params-editor/constants';
-import { ViewOption } from '../../../common/components/view-params-editor/viewParams.types';
+import type { ViewOption } from '../../../common/components/view-params-editor/viewParams.types';
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 
-export const scheduleOptions: ViewOption = {
+export const getScheduleOptions = (customFieldOptions: SelectOption[]): ViewOption => ({
   title: OptionTitle.Schedule,
   collapsible: true,
   options: [
+    {
+      id: 'filter',
+      title: 'Filter',
+      description: 'Hide events without data in the selected custom field',
+      type: 'option',
+      values: customFieldOptions,
+      defaultValue: 'None',
+    },
     {
       id: 'stopCycle',
       title: 'Stop cycling through event pages',
@@ -31,9 +40,10 @@ export const scheduleOptions: ViewOption = {
       defaultValue: false,
     },
   ],
-};
+});
 
 type ScheduleOptions = {
+  filter: string | null;
   cycleInterval: number;
   stopCycle: boolean;
   showExpected: boolean;
@@ -41,6 +51,7 @@ type ScheduleOptions = {
 
 function getScheduleOptionsFromParams(searchParams: URLSearchParams): ScheduleOptions {
   return {
+    filter: searchParams.get('filter'),
     cycleInterval: Number(searchParams.get('cycleInterval')) || 10,
     stopCycle: isStringBoolean(searchParams.get('stopCycle')),
     showExpected: isStringBoolean(searchParams.get('showExpected')),

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

@@ -118,7 +118,11 @@ $item-height: 3.5rem;
   }
 
   .sub--live {
-    background-color: $green-700;
+    background-color: $active-green;
+  }
+
+  .sub--armed {
+    background-color: $gray-1325;
   }
 
   .sub__binder {
@@ -137,15 +141,19 @@ $item-height: 3.5rem;
   }
 
   .sub__schedule--delayed {
-    color: $delay-color;
+    color: $ontime-delay-text;
+  }
+
+  .sub__schedule--strike {
+    text-decoration: line-through;
   }
 
   .sub__schedule--over {
-    color: $playback-over
+    color: $playback-over;
   }
 
   .sub__schedule--under {
-    color: $playback-under
+    color: $playback-under;
   }
 
   .sub__title {

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

@@ -9,6 +9,7 @@ import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useClock } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { formatTime, getDefaultFormat } from '../../common/utils/time';
 import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
 import { useTranslation } from '../../translation/TranslationProvider';
@@ -39,14 +40,14 @@ export default function CountdownLoader() {
   return <Countdown {...data} />;
 }
 
-function Countdown({ customFields, events, projectData, isMirrored, settings }: CountdownData) {
+function Countdown({ customFields, rundownData, projectData, isMirrored, settings }: CountdownData) {
   const { getLocalizedString } = useTranslation();
   const { subscriptions } = useCountdownOptions();
 
   const [editMode, setEditMode] = useState(false);
 
   // gather rundown data
-  const playableEvents = events.filter((event) => isOntimeEvent(event) && isPlayableEvent(event));
+  const playableEvents = rundownData.filter((entry) => isOntimeEvent(entry) && isPlayableEvent(entry));
 
   // gather presentation data
   const hasEvents = playableEvents.length > 0;
@@ -85,7 +86,7 @@ function Countdown({ customFields, events, projectData, isMirrored, settings }:
 }
 
 interface CountdownContentsProps {
-  playableEvents: OntimeEvent[];
+  playableEvents: ExtendedEntry<OntimeEvent>[];
   subscriptions: EntryId[];
   goToEditMode: () => void;
 }

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

@@ -1,32 +1,37 @@
 import { useEffect, useRef, useState } from 'react';
 import { IoPencil } from 'react-icons/io5';
-import { EntryId, OntimeEvent } from 'ontime-types';
+import { MaybeNumber, OntimeEvent } from 'ontime-types';
+import { dayInMs } from 'ontime-utils';
 
 import Button from '../../common/components/buttons/Button';
 import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
-import {
+import { useExpectedStartData, usePlayback, useSelectedEventId } from '../../common/hooks/useSocket';
-  useCountdownSocket,
+import useReport from '../../common/hooks-query/useReport';
-  useCurrentDay,
-  usePlayback,
-  useRuntimeOffset,
-  useSelectedEventId,
-} from '../../common/hooks/useSocket';
 import { getOffsetState } from '../../common/utils/offset';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
 import FollowButton from '../../features/operator/follow-button/FollowButton';
 import ClockTime from '../../features/viewers/common/clock-time/ClockTime';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
 import { getPropertyValue } from '../../features/viewers/common/viewUtils';
-import { useTranslation } from '../../translation/TranslationProvider';
 
 import { useCountdownOptions } from './countdown.options';
-import { getIsLive, getSubscriptionDisplayData, sanitiseTitle, timerProgress } from './countdown.utils';
+import {
+  CountdownEvent,
+  extendEventData,
+  getIsLive,
+  isOutsideRange,
+  preferredFormat12,
+  preferredFormat24,
+  useSubscriptionDisplayData,
+} from './countdown.utils';
 
 import './Countdown.scss';
 
 interface CountdownSubscriptionsProps {
-  subscribedEvents: OntimeEvent[];
+  subscribedEvents: ExtendedEntry<OntimeEvent>[];
   goToEditMode: () => void;
 }
 
@@ -36,6 +41,9 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
   const { selectedEventId } = useSelectedEventId();
   const showFab = useFadeOutOnInactivity(true);
 
+  const { data: reportData } = useReport();
+  const { offset, currentDay, actualStart, plannedStart, mode } = useExpectedStartData();
+
   const timeoutId = useRef<NodeJS.Timeout | null>(null);
   const [lockAutoScroll, setLockAutoScroll] = useState(false);
   const selectedRef = useRef<HTMLDivElement | null>(null);
@@ -45,6 +53,7 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
     scrollRef,
     doFollow: !lockAutoScroll,
     topOffset: 0,
+    followTrigger: selectedEventId,
   });
 
   // reset scroll if nothing is selected
@@ -92,23 +101,19 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
       {subscribedEvents.map((event) => {
         const secondaryData = getPropertyValue(event, secondarySource);
         const isLive = getIsLive(event.id, selectedEventId, playback);
-
+        const isArmed = !isLive && event.id === selectedEventId;
+        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
+        const title = event.title.length ? event.title : ' '; // insert utf-8 empty space to avoid the line collapsing
         return (
-          <div key={event.id} ref={isLive ? selectedRef : undefined} className={cx(['sub', isLive && 'sub--live'])}>
+          <div
+            key={event.id}
+            ref={isLive ? selectedRef : undefined}
+            className={cx(['sub', isLive && 'sub--live', isArmed && 'sub--armed'])}
+          >
             <div className='sub__binder' style={{ '--user-color': event.colour }} />
-            <div className={cx(['sub__schedule', event.delay > 0 && 'sub__schedule--delayed'])}>
+            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
-              {showExpected ? (
+            <SubscriptionStatus event={countdownEvent} />
-                <ExpectedSchedule timeStart={event.timeStart} timeEnd={event.timeEnd} delay={event.delay} />
+            <div className={cx(['sub__title', !event.title && 'subdued'])}>{title}</div>
-              ) : (
-                <>
-                  <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} selectedEventId={selectedEventId} />
-            <div className={cx(['sub__title', !event.title && 'subdued'])}>{sanitiseTitle(event.title)}</div>
             {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
           </div>
         );
@@ -123,63 +128,82 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
   );
 }
 
-interface ExpectedScheduleProps {
+type ScheduleTimeProps = {
-  timeStart: number;
+  event: CountdownEvent;
-  timeEnd: number;
+  showExpected: boolean;
-  delay: number;
+};
-}
+//TODO: consider relative mode
-function ExpectedSchedule(props: ExpectedScheduleProps) {
+export function ScheduleTime(props: ScheduleTimeProps) {
-  const { timeStart, timeEnd, delay } = props;
+  const { event, showExpected } = props;
+  const { timeStart, duration, delay, expectedStart, countToEnd } = event;
 
-  const { offset } = useRuntimeOffset();
+  const plannedStart = timeStart + delay + event.dayOffset * dayInMs;
 
-  // offset is negative if we are ahead
+  // only show new exacted value if outside  range of the planned value
-  const expectedOffset = offset - delay;
+  const isExpectedValueShow = showExpected && isOutsideRange(plannedStart, expectedStart);
-  const expectedState = getOffsetState(expectedOffset);
+
+  const plannedStateClass = isExpectedValueShow ? 'sub__schedule--strike' : delay !== 0 ? 'sub__schedule--delayed' : '';
+
+  const expectedStateClass = `sub__schedule--${getOffsetState(expectedStart - plannedStart)}`;
+  const plannedEnd = plannedStart + duration + delay;
+  const expectedEnd = countToEnd ? Math.max(expectedStart + duration, plannedEnd) : expectedStart + duration;
+  const expectedEndClass = `sub__schedule--${getOffsetState(expectedEnd - plannedEnd)}`;
 
   return (
-    <>
+    <div className='sub__schedule'>
       <ClockTime
-        value={timeStart - expectedOffset}
+        value={plannedStart}
-        className={`sub__schedule--${expectedState}`}
+        preferredFormat12={preferredFormat12}
-        preferredFormat12='h:mm'
+        preferredFormat24={preferredFormat24}
-        preferredFormat24='HH:mm'
+        className={plannedStateClass}
       />
-      →
+      {!isExpectedValueShow && (
-      <ClockTime value={timeEnd - expectedOffset} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
+        <>
-    </>
+          →
+          <ClockTime
+            value={plannedEnd}
+            preferredFormat12={preferredFormat12}
+            preferredFormat24={preferredFormat24}
+            className={plannedStateClass}
+          />
+        </>
+      )}
+      {isExpectedValueShow && (
+        <>
+          <ClockTime
+            value={expectedStart}
+            className={expectedStateClass}
+            preferredFormat12={preferredFormat12}
+            preferredFormat24={preferredFormat24}
+          />
+          →
+          <ClockTime
+            value={expectedEnd}
+            className={expectedEndClass}
+            preferredFormat12={preferredFormat12}
+            preferredFormat24={preferredFormat24}
+          />
+        </>
+      )}
+    </div>
   );
 }
 
 interface SubscriptionStatusProps {
-  event: OntimeEvent;
+  event: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number };
-  selectedEventId: EntryId | null;
 }
 
-function SubscriptionStatus({ event, selectedEventId }: SubscriptionStatusProps) {
+function SubscriptionStatus({ event }: SubscriptionStatusProps) {
-  const { getLocalizedString } = useTranslation();
+  const { status, statusDisplay, timeDisplay } = useSubscriptionDisplayData(event);
-  const { currentDay } = useCurrentDay();
-  const { offset } = useRuntimeOffset();
-  const { showExpected } = useCountdownOptions();
-  const { playback, current, clock } = useCountdownSocket();
-
-  // TODO: use reporter values as in the event block chip
-  const { status, timer } = getSubscriptionDisplayData(
-    current,
-    playback,
-    clock,
-    event,
-    selectedEventId,
-    offset,
-    currentDay,
-    getLocalizedString('common.minutes'),
-    showExpected,
-  );
 
   return (
     <>
-      <div className='sub__status'>{getLocalizedString(timerProgress[status])}</div>
+      <div className='sub__status'>{statusDisplay}</div>
-      <div className='sub__timer'>{timer}</div>
+      {status === 'done' ? (
+        <SuperscriptTime className='sub__timer' time={timeDisplay} />
+      ) : (
+        <div className='sub__timer'>{timeDisplay}</div>
+      )}
     </>
   );
 }

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

@@ -1,11 +1,10 @@
 @use '@/theme/viewerDefs' as *;
 
 .single-container {
-  height: 100%;
+  margin-top: 7.5vh;
-  margin-top: 5vh;
   display: flex;
   flex-direction: column;
-  gap: $view-element-gap;
+  gap: 5rem;
 }
 
 .event__title {
@@ -13,13 +12,25 @@
   padding: $view-card-padding;
   border-radius: $element-border-radius;
   font-size: clamp(40px, 4.5vw, 80px);
-  line-height: 1.1em;
+  line-height: 1.1;
   text-align: center;
+  border-left: 0.25em solid;
+  border-color: var(--card-background-color-override, $viewer-card-bg-color);
+
+  .secondary {
+    text-align: left;
+    font-size: $title-font-size;
+  }
+
+  .sub__schedule {
+    color: inherit;
+    font-size: $base-font-size;
+  }
 }
 
 .event__status {
   color: var(--secondary-color-override, $viewer-secondary-color);
-  font-size: clamp(2rem, 3.5vw, 3.5rem);
+  font-size: $header-font-size;
   font-weight: 600;
   text-transform: uppercase;
 }

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

@@ -1,29 +1,57 @@
 import { IoPencil } from 'react-icons/io5';
-import { OntimeEvent } from 'ontime-types';
+import { MaybeNumber, OntimeEvent } from 'ontime-types';
+import { getExpectedStart } from 'ontime-utils';
 
 import Button from '../../common/components/buttons/Button';
 import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
-import { useCountdownSocket, useCurrentDay, useRuntimeOffset, useSelectedEventId } from '../../common/hooks/useSocket';
+import { useExpectedStartData } from '../../common/hooks/useSocket';
+import useReport from '../../common/hooks-query/useReport';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { cx } from '../../common/utils/styleUtils';
-import { useTranslation } from '../../translation/TranslationProvider';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
+import { getPropertyValue } from '../../features/viewers/common/viewUtils';
 
 import { useCountdownOptions } from './countdown.options';
-import { getSubscriptionDisplayData, timerProgress } from './countdown.utils';
+import { useSubscriptionDisplayData } from './countdown.utils';
+import { ScheduleTime } from './CountdownSubscriptions';
 
 import './SingleEventCountdown.scss';
 
 interface SingleEventCountdownProps {
-  subscribedEvent: OntimeEvent;
+  subscribedEvent: ExtendedEntry<OntimeEvent>;
   goToEditMode: () => void;
 }
 
 export default function SingleEventCountdown({ subscribedEvent, goToEditMode }: SingleEventCountdownProps) {
+  const { secondarySource, showExpected } = useCountdownOptions();
   const showFab = useFadeOutOnInactivity(true);
+  const { data: reportData } = useReport();
+
+  const { offset, currentDay, actualStart, plannedStart, mode } = useExpectedStartData();
+  const { totalGap, isLinkedToLoaded } = subscribedEvent;
+  const expectedStart = getExpectedStart(subscribedEvent, {
+    currentDay,
+    totalGap,
+    actualStart,
+    plannedStart,
+    isLinkedToLoaded,
+    offset,
+    mode,
+  });
+
+  const { endedAt } = reportData[subscribedEvent.id] ?? { endedAt: null };
+  const countdownEvent = { ...subscribedEvent, expectedStart, endedAt };
+  const title = subscribedEvent.title.length ? subscribedEvent.title : ' '; // insert utf-8 empty space to avoid the line collapsing
+  const secondaryData = getPropertyValue(subscribedEvent, secondarySource);
 
   return (
     <div className='single-container' data-testid='countdown-event'>
-      <SubscriptionStatus event={subscribedEvent} />
+      <SubscriptionStatus event={countdownEvent} />
-      <div className='event__title'>{subscribedEvent.title}</div>
+      <div className='event__title' style={{ borderColor: countdownEvent.colour }}>
+        <ScheduleTime event={countdownEvent} showExpected={showExpected} />
+        {title}
+        {secondaryData && <div className='secondary'>{secondaryData}</div>}
+      </div>
       <div className={cx(['fab-container', !showFab && 'fab-container--hidden'])}>
         <Button variant='primary' size='xlarge' onClick={goToEditMode}>
           <IoPencil /> Edit
@@ -34,34 +62,20 @@ export default function SingleEventCountdown({ subscribedEvent, goToEditMode }:
 }
 
 interface SubscriptionStatusProps {
-  event: OntimeEvent;
+  event: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number };
 }
 
 function SubscriptionStatus({ event }: SubscriptionStatusProps) {
-  const { getLocalizedString } = useTranslation();
+  const { status, statusDisplay, timeDisplay } = useSubscriptionDisplayData(event);
-  const { selectedEventId } = useSelectedEventId();
-  const { currentDay } = useCurrentDay();
-  const { offset } = useRuntimeOffset();
-  const { showExpected } = useCountdownOptions();
-  const { playback, current, clock } = useCountdownSocket();
-
-  // TODO: use reporter values as in the event block chip
-  const { status, timer } = getSubscriptionDisplayData(
-    current,
-    playback,
-    clock,
-    event,
-    selectedEventId,
-    offset,
-    currentDay,
-    getLocalizedString('common.minutes'),
-    showExpected,
-  );
 
   return (
     <>
-      <div className='event__status'>{getLocalizedString(timerProgress[status])}</div>
+      <div className='event__status'>{statusDisplay}</div>
-      <div className='event__timer'>{timer}</div>
+      {status === 'done' ? (
+        <SuperscriptTime className='event__timer' time={timeDisplay} />
+      ) : (
+        <div className='event__timer'>{timeDisplay}</div>
+      )}
     </>
   );
 }

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

@@ -14,7 +14,10 @@ export const getCountdownOptions = (
   customFields: CustomFields,
   persistedSubscriptions: EntryId[],
 ): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, [{ value: 'note', label: 'Note' }]);
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
+    { value: 'note', label: 'Note' },
+  ]);
 
   return [
     { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
@@ -28,7 +31,7 @@ export const getCountdownOptions = (
           description: 'Select the data source for auxiliary text shown in the card',
           type: 'option',
           values: secondaryOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
       ],
     },

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

@@ -1,8 +1,11 @@
-import { EntryId, MaybeNumber, OntimeEvent, Playback, TimerType } from 'ontime-types';
+import { EntryId, MaybeNumber, OffsetMode, OntimeEntry, OntimeEvent, OntimeReport, Playback } from 'ontime-types';
-import { dayInMs } from 'ontime-utils';
+import { getExpectedStart, MILLIS_PER_MINUTE, removeSeconds } from 'ontime-utils';
 
-import { getFormattedTimer } from '../../features/viewers/common/viewUtils';
+import { useCountdownSocket } from '../../common/hooks/useSocket';
-import type { TranslationKey } from '../../translation/TranslationProvider';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
+import { timerPlaceholderMin } from '../../common/utils/styleUtils';
+import { formatDuration, formatTime } from '../../common/utils/time';
+import { type TranslationKey, useTranslation } from '../../translation/TranslationProvider';
 
 /**
  * Parses string as a title
@@ -11,6 +14,9 @@ export function sanitiseTitle(title: string | null) {
   return title ?? '{no title}';
 }
 
+export const preferredFormat12 = 'h:mm a';
+export const preferredFormat24 = 'HH:mm';
+
 /**
  * Whether the current event is live
  */
@@ -18,137 +24,96 @@ export function getIsLive(currentId: EntryId, selectedId: EntryId | null, playba
   return currentId === selectedId && playback !== Playback.Armed;
 }
 
-const subscriptionTimerDisplayOptions = {
+export type ProgressStatus = 'future' | 'due' | 'live' | 'done' | 'pending' | 'loaded';
-  removeSeconds: true,
+type TimerMessage = Record<ProgressStatus, TranslationKey>;
-  removeLeadingZero: true,
-} as const;
-
-const subscriptionScheduledTimeDisplayOptions = {
-  removeSeconds: true,
-  removeLeadingZero: false,
-} 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',
+  live: 'countdown.running',
+  pending: 'countdown.waiting',
+  loaded: 'countdown.loaded',
   done: 'countdown.ended',
 };
 
+export function getFormattedTime(
+  value: MaybeNumber,
+  status: ProgressStatus,
+  minText: string,
+  secText: string,
+  dueText: string,
+) {
+  if (value === null) return timerPlaceholderMin;
+  if (status === 'future' || status === 'live') {
+    if (value <= 0) return dueText.toUpperCase();
+    return formatDuration(value, value > MILLIS_PER_MINUTE * 2)
+      .replace('m', `${minText} `)
+      .replace('s', secText);
+  }
+  return removeSeconds(formatTime(value));
+}
+
 /**
  * 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(
+export function useSubscriptionDisplayData(
-  current: MaybeNumber,
+  subscribedEvent: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number },
-  playback: Playback,
+): { status: ProgressStatus; statusDisplay: string; timeDisplay: string } {
-  clock: number,
+  const { playback, current, clock } = useCountdownSocket();
-  subscribedEvent: OntimeEvent,
+  const { getLocalizedString } = useTranslation();
-  selectedId: EntryId | null,
-  offset: number,
-  currentDay: number,
-  minutesString: string,
-  showExpected = false,
-): { status: ProgressStatus; timer: string } {
-  const offsetAndDelay = showExpected ? offset + subscribedEvent.delay : 0;
 
-  if (selectedId === subscribedEvent.id) {
+  const bigDuration = (value: number) => {
-    // 1. An event that is loaded but not running is {'due': <countdown | overtime>}
+    if (value <= 0) return getLocalizedString('countdown.overtime').toUpperCase();
+    return formatDuration(value, value > MILLIS_PER_MINUTE * 2)
+      .replace('m', `${getLocalizedString('common.minutes')} `)
+      .replace('s', getLocalizedString('common.seconds'));
+  };
+
+  if (subscribedEvent.isLoaded) {
     if (playback === Playback.Armed) {
-      // if we are following the event, but it is not running, we show the scheduled start
       return {
-        status: 'due',
+        status: 'loaded',
-        timer: getFormattedTimer(
+        statusDisplay: getLocalizedString(timerProgress['loaded']),
-          subscribedEvent.timeStart + offsetAndDelay,
+        timeDisplay: bigDuration(subscribedEvent.duration),
-          TimerType.CountDown,
-          minutesString,
-          subscriptionScheduledTimeDisplayOptions,
-        ),
       };
     }
 
-    // 2. An event with a time-to-start lower than 0 is {'due': <countdown | scheduledStart>}, show the running timer
     return {
       status: 'live',
-      timer: getFormattedTimer(current, TimerType.CountDown, minutesString, subscriptionTimerDisplayOptions),
+      statusDisplay: getLocalizedString(timerProgress['live']),
+      timeDisplay: bigDuration(current ?? 0),
     };
   }
 
-  /**
+  if (playback === Playback.Stop || playback === Playback.Armed) {
-   * 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, we show a countdown to start
-  if (subscribedEvent.dayOffset > currentDay) {
-    const dayOffset = (subscribedEvent.dayOffset - currentDay) * dayInMs;
     return {
-      status: 'future',
+      status: 'pending',
-      timer: getFormattedTimer(
+      statusDisplay: getLocalizedString(timerProgress['pending']),
-        subscribedEvent.timeStart + dayOffset - clock - offsetAndDelay,
+      timeDisplay: ' ',
-        TimerType.CountDown,
-        minutesString,
-        subscriptionTimerDisplayOptions,
-      ),
     };
   }
 
-  // 4. event is the before after, show the scheduled end
+  if (subscribedEvent.isPast) {
-  // TODO: get the time from the reporter
-  if (subscribedEvent.dayOffset < currentDay) {
     return {
       status: 'done',
-      timer: getFormattedTimer(
+      statusDisplay: getLocalizedString(timerProgress['done']),
-        subscribedEvent.timeEnd,
+      timeDisplay: formatTime(subscribedEvent.endedAt, { format12: preferredFormat12, format24: preferredFormat24 }),
-        TimerType.CountDown,
-        minutesString,
-        subscriptionScheduledTimeDisplayOptions,
-      ),
     };
   }
 
-  // 5. if event is in future, we count to the scheduled start
+  if (subscribedEvent.expectedStart - clock <= 0) {
-  // TODO: get time until
-  if (clock < subscribedEvent.timeStart) {
     return {
-      status: 'future',
+      status: 'due',
-      timer: getFormattedTimer(
+      statusDisplay: getLocalizedString(timerProgress['future']), // We use future here on purpose for the look of it
-        subscribedEvent.timeStart - clock - offsetAndDelay,
+      timeDisplay: getLocalizedString(timerProgress['due']).toUpperCase(),
-        TimerType.CountDown,
-        minutesString,
-        subscriptionTimerDisplayOptions,
-      ),
     };
   }
 
-  // 6. if event has ended, we show the scheduled end
-  // TODO: get the time from the reporter
-  if (clock > subscribedEvent.timeEnd) {
-    return {
-      status: 'done',
-      timer: getFormattedTimer(
-        subscribedEvent.timeEnd,
-        TimerType.CountDown,
-        minutesString,
-        subscriptionScheduledTimeDisplayOptions,
-      ),
-    };
-  }
-
-  // the event here has to be due, we show the countdown the expected start time
   return {
-    status: 'due',
+    status: 'future',
-    timer: getFormattedTimer(
+    statusDisplay: getLocalizedString(timerProgress['future']),
-      subscribedEvent.timeStart + offsetAndDelay,
+    timeDisplay: bigDuration(subscribedEvent.expectedStart - clock),
-      TimerType.CountDown,
-      minutesString,
-      subscriptionScheduledTimeDisplayOptions,
-    ),
   };
 }
 
@@ -181,7 +146,7 @@ export function makeSubscriptionsUrl(urlRef: string, subscriptions: EntryId[]) {
  * 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[] {
+export function getOrderedSubscriptions<T extends OntimeEntry>(subscriptions: EntryId[], playableEvents: T[]): T[] {
   return playableEvents.filter((event) => subscriptions.includes(event.id));
 }
 
@@ -212,3 +177,32 @@ export function isLinkedToLoadedEvent(events: OntimeEvent[], loadedId: EntryId |
 
   return true;
 }
+
+export function isOutsideRange(a: number, b: number): boolean {
+  return Math.abs(a - b) > MILLIS_PER_MINUTE;
+}
+
+export type CountdownEvent = ExtendedEntry<OntimeEvent> & { expectedStart: number; endedAt: MaybeNumber };
+
+export function extendEventData(
+  event: ExtendedEntry<OntimeEvent>,
+  currentDay: number,
+  actualStart: MaybeNumber,
+  plannedStart: MaybeNumber,
+  offset: number,
+  mode: OffsetMode,
+  reportData: OntimeReport,
+): CountdownEvent {
+  const { totalGap, isLinkedToLoaded } = event;
+  const expectedStart = getExpectedStart(event, {
+    currentDay,
+    totalGap,
+    actualStart,
+    plannedStart,
+    isLinkedToLoaded,
+    offset,
+    mode,
+  });
+  const { endedAt } = reportData[event.id] ?? { endedAt: null };
+  return { ...event, expectedStart, endedAt };
+}

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

@@ -2,14 +2,15 @@ import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useFlatRundown } from '../../common/hooks-query/useRundown';
+import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { aggregateQueryStatus, ViewData } from '../utils/viewLoader.utils';
 
 export interface CountdownData {
   customFields: CustomFields;
-  events: OntimeEntry[];
+  rundownData: ExtendedEntry<OntimeEntry>[];
   projectData: ProjectData;
   isMirrored: boolean;
   settings: Settings;
@@ -20,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundown();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();
@@ -28,7 +29,7 @@ export function useCountdownData(): ViewData<CountdownData> {
   return {
     data: {
       customFields,
-      events: rundownData,
+      rundownData,
       projectData,
       isMirrored,
       settings,

apps/client/src/views/cuesheet/cuesheet-dnd/CuesheetDnd.tsx

@@ -11,14 +11,14 @@ import {
 import { ColumnDef } from '@tanstack/react-table';
 
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
-import useColumnManager from '../cuesheet-table/useColumnManager';
+import { useColumnOrder } from '../cuesheet-table/useColumnManager';
 
 interface CuesheetDndProps {
   columns: ColumnDef<ExtendedEntry>[];
 }
 
 export default function CuesheetDnd({ columns, children }: PropsWithChildren<CuesheetDndProps>) {
-  const { columnOrder, saveColumnOrder } = useColumnManager(columns);
+  const { columnOrder, saveColumnOrder } = useColumnOrder(columns);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -13,14 +13,14 @@ import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../cuesheet.options';
 
-import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
+import { CuesheetHeader, SortableCuesheetHeader } from './cuesheet-table-elements/CuesheetHeader';
 import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
 import GroupRow from './cuesheet-table-elements/GroupRow';
 import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
 import CuesheetTableMenu from './cuesheet-table-menu/CuesheetTableMenu';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
-import useColumnManager from './useColumnManager';
+import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';
 
 import style from './CuesheetTable.module.scss';
 
@@ -79,8 +79,9 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
     [cuesheetMode, data, hideIndexColumn, hideTableSeconds, showDelayedTimes, updateEntry, updateTimer],
   );
 
-  const { columnVisibility, columnOrder, columnSizing, resetColumnOrder, setColumnVisibility, setColumnSizing } =
+  const { columnOrder, resetColumnOrder } = useColumnOrder(columns);
-    useColumnManager(columns);
+  const { columnSizing, setColumnSizing } = useColumnSizes();
+  const { columnVisibility, setColumnVisibility } = useColumnVisibility();
 
   const table = useReactTable({
     data,
@@ -167,7 +168,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
               />
             );
           },
-          TableRow: ({ item: _item, ...virtuosoProps }) => {
+          TableRow: ({ item: _item, style: injectedStyles, ...virtuosoProps }) => {
             // eslint-disable-next-line react/destructuring-assignment
             const rowIndex = virtuosoProps['data-index'];
             const row = rows[rowIndex];
@@ -183,13 +184,16 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                   rowId={row.id}
                   rowIndex={row.index}
                   table={table}
+                  injectedStyles={injectedStyles}
                   {...virtuosoProps}
                 />
               );
             }
 
             if (isOntimeDelay(entry)) {
-              return <DelayRow key={key} duration={entry.duration} {...virtuosoProps} />;
+              return (
+                <DelayRow key={key} duration={entry.duration} injectedStyles={injectedStyles} {...virtuosoProps} />
+              );
             }
 
             if (isOntimeMilestone(entry)) {
@@ -204,6 +208,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                   rowId={row.id}
                   rowIndex={rowIndex}
                   table={table}
+                  injectedStyles={injectedStyles}
                   {...virtuosoProps}
                 />
               );
@@ -225,6 +230,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
                 rowId={row.id}
                 rowIndex={rowIndex}
                 table={table}
+                injectedStyles={injectedStyles}
                 {...virtuosoProps}
               />
             );
@@ -232,11 +238,14 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
           TableHead: (virtuosoProps) => <thead className={style.tableHeader} {...virtuosoProps} />,
         }}
         fixedHeaderContent={() => {
-          return table
+          return table.getHeaderGroups().map((headerGroup) => {
-            .getHeaderGroups()
+            const HeaderComponent = table.getState().columnSizingInfo.isResizingColumn
-            .map((headerGroup) => (
+              ? CuesheetHeader
-              <CuesheetHeader key={headerGroup.id} cuesheetMode={cuesheetMode} headerGroup={headerGroup} />
+              : SortableCuesheetHeader;
-            ));
+
+            // if the table is being resized, we render non-sortable headers to avoid performance issues
+            return <HeaderComponent key={headerGroup.id} cuesheetMode={cuesheetMode} headerGroup={headerGroup} />;
+          });
         }}
       />
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx

@@ -7,7 +7,7 @@ import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
 
-import { SortableCell } from './SortableCell';
+import { Draggable, SortableCell, TableCell } from './SortableCell';
 
 import style from '../CuesheetTable.module.scss';
 
@@ -16,8 +16,9 @@ interface CuesheetHeaderProps {
   cuesheetMode: AppMode;
 }
 
-export default function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHeaderProps) {
+export function SortableCuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHeaderProps) {
   const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
+
   return (
     <tr key={headerGroup.id}>
       {cuesheetMode === AppMode.Edit && <th className={style.actionColumn} tabIndex={-1} />}
@@ -43,8 +44,10 @@ export default function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHe
           return (
             <SortableCell
               key={header.column.columnDef.id}
-              header={header}
+              columnId={header.column.id}
+              colSpan={header.colSpan}
               injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
+              draggable={<Draggable header={header} />}
             >
               {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
             </SortableCell>
@@ -54,3 +57,43 @@ export default function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHe
     </tr>
   );
 }
+
+export function CuesheetHeader({ headerGroup, cuesheetMode }: CuesheetHeaderProps) {
+  const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
+
+  return (
+    <tr key={headerGroup.id}>
+      {cuesheetMode === AppMode.Edit && <th className={style.actionColumn} tabIndex={-1} />}
+      {!hideIndexColumn && (
+        <th className={style.indexColumn} tabIndex={-1}>
+          #
+        </th>
+      )}
+      {headerGroup.headers.map((header) => {
+        const customBackground = header.column.columnDef.meta?.colour;
+        const canWrite = header.column.columnDef.meta?.canWrite;
+
+        const customStyles: CSSProperties = {
+          opacity: canWrite ? 1 : 0.6,
+        };
+        if (customBackground) {
+          const customColour = getAccessibleColour(customBackground);
+          customStyles.backgroundColor = customColour.backgroundColor;
+          customStyles.color = customColour.color;
+        }
+
+        return (
+          <TableCell
+            key={header.column.columnDef.id}
+            columnId={header.column.id}
+            colSpan={header.colSpan}
+            injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
+            draggable={<Draggable header={header} />}
+          >
+            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+          </TableCell>
+        );
+      })}
+    </tr>
+  );
+}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 
 import { millisToDelayString } from '../../../../common/utils/dateConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
@@ -7,9 +7,10 @@ import style from './DelayRow.module.scss';
 
 interface DelayRowProps {
   duration: number;
+  injectedStyles?: CSSProperties;
 }
 
-function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
+function DelayRow({ duration, injectedStyles, ...virtuosoProps }: DelayRowProps) {
   const hideDelays = usePersistedCuesheetOptions((state) => state.hideDelays);
 
   if (hideDelays || duration === 0) {
@@ -19,7 +20,7 @@ function DelayRow({ duration, ...virtuosoProps }: DelayRowProps) {
   const delayTime = millisToDelayString(duration, 'expanded');
 
   return (
-    <tr className={style.delayRow} data-testid='cuesheet-delay' {...virtuosoProps}>
+    <tr className={style.delayRow} data-testid='cuesheet-delay' style={injectedStyles} {...virtuosoProps}>
       <td tabIndex={0}>{delayTime}</td>
     </tr>
   );

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { CSSProperties, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
@@ -26,6 +26,7 @@ interface EventRowProps {
   parent: EntryId | null;
   rowIndex: number;
   table: Table<ExtendedEntry<OntimeEntry>>;
+  injectedStyles?: CSSProperties;
 }
 
 export default function EventRow({
@@ -42,6 +43,7 @@ export default function EventRow({
   parent,
   rowIndex,
   table,
+  injectedStyles,
   ...virtuosoProps
 }: EventRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -81,6 +83,7 @@ export default function EventRow({
         parent && style.hasParent,
       ])}
       style={{
+        ...injectedStyles,
         opacity: `${isPast ? '0.2' : '1'}`,
         '--user-bg': groupColour ?? 'transparent',
       }}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.module.scss

@@ -4,3 +4,7 @@
   padding-top: 0.25em;
   width: 100%;
 }
+
+.multiline {
+  white-space: break-spaces;
+}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.tsx

@@ -2,6 +2,10 @@ import { PropsWithChildren } from 'react';
 
 import style from './GhostedText.module.scss';
 
-export default function GhostedText({ children }: PropsWithChildren) {
+interface GhostedTextProps {
-  return <div className={style.ghostedText}>{children}</div>;
+  multiline?: boolean;
+}
+
+export default function GhostedText({ children, multiline }: PropsWithChildren<GhostedTextProps>) {
+  return <div className={`${style.ghostedText} ${multiline ? style.multiline : ''}`}>{children}</div>;
 }

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.tsx

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
@@ -15,9 +16,18 @@ interface GroupRowProps {
   rowId: string;
   rowIndex: number;
   table: Table<ExtendedEntry>;
+  injectedStyles?: CSSProperties;
 }
 
-export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...virtuosoProps }: GroupRowProps) {
+export default function GroupRow({
+  groupId,
+  colour,
+  rowId,
+  rowIndex,
+  table,
+  injectedStyles,
+  ...virtuosoProps
+}: GroupRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
     cuesheetMode: AppMode.Edit,
     hideIndexColumn: false,
@@ -26,7 +36,12 @@ export default function GroupRow({ groupId, colour, rowId, rowIndex, table, ...v
   const openMenu = useCuesheetTableMenu((store) => store.openMenu);
 
   return (
-    <tr className={style.groupRow} style={{ '--user-bg': colour }} data-testid='cuesheet-group' {...virtuosoProps}>
+    <tr
+      className={style.groupRow}
+      style={{ ...injectedStyles, '--user-bg': colour }}
+      data-testid='cuesheet-group'
+      {...virtuosoProps}
+    >
       {cuesheetMode === AppMode.Edit && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
@@ -20,6 +21,7 @@ interface MilestoneRowProps {
   rowId: string;
   rowIndex: number;
   table: Table<ExtendedEntry>;
+  injectedStyles?: CSSProperties;
 }
 
 export default function MilestoneRow({
@@ -31,6 +33,7 @@ export default function MilestoneRow({
   rowId,
   rowIndex,
   table,
+  injectedStyles,
   ...virtuosoProps
 }: MilestoneRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -56,6 +59,7 @@ export default function MilestoneRow({
     <tr
       className={cx([style.milestoneRow, Boolean(parentBgColour) && style.hasParent])}
       style={{
+        ...injectedStyles,
         opacity: `${isPast ? '0.2' : '1'}`,
         '--user-bg': parentBgColour ?? 'transparent',
       }}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SortableCell.tsx

@@ -8,16 +8,16 @@ import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import style from '../CuesheetTable.module.scss';
 
 interface SortableCellProps {
-  header: Header<ExtendedEntry, unknown>;
+  columnId: string;
+  colSpan: number;
   injectedStyles: CSSProperties;
   children: ReactNode;
+  draggable: ReactNode;
 }
 
-export function SortableCell({ header, injectedStyles, children }: SortableCellProps) {
+export function SortableCell({ columnId, colSpan, injectedStyles, children, draggable }: SortableCellProps) {
-  const { column, colSpan } = header;
-
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: column.id,
+    id: columnId,
   });
 
   // build drag styles
@@ -34,12 +34,31 @@ export function SortableCell({ header, injectedStyles, children }: SortableCellP
       <div {...attributes} {...listeners}>
         {children}
       </div>
-      <div
+      {draggable}
-        onDoubleClick={() => header.column.resetSize()}
-        onMouseDown={header.getResizeHandler()}
-        onTouchStart={header.getResizeHandler()}
-        className={style.resizer}
-      />
     </th>
   );
 }
+
+export function TableCell({ colSpan, injectedStyles, children, draggable }: SortableCellProps) {
+  return (
+    <th style={injectedStyles} colSpan={colSpan} tabIndex={-1}>
+      <div>{children}</div>
+      {draggable}
+    </th>
+  );
+}
+
+interface DraggableProps {
+  header: Header<ExtendedEntry, unknown>;
+}
+
+export function Draggable({ header }: DraggableProps) {
+  return (
+    <div
+      onDoubleClick={() => header.column.resetSize()}
+      onMouseDown={header.getResizeHandler()}
+      onTouchStart={header.getResizeHandler()}
+      className={style.resizer}
+    />
+  );
+}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx

@@ -143,7 +143,7 @@ function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, u
 
   const canWrite = column.columnDef.meta?.canWrite;
   if (!canWrite) {
-    return <GhostedText>{initialValue}</GhostedText>;
+    return <GhostedText multiline>{initialValue}</GhostedText>;
   }
 
   return <MultiLineCell initialValue={initialValue as string} handleUpdate={update} />;

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/rowObserver.ts

@@ -1,51 +0,0 @@
-import { useVisibleRowsStore } from './visibleRowsStore';
-
-let observer: IntersectionObserver | null = null;
-
-function getObserver(): IntersectionObserver {
-  if (!observer) {
-    const options: IntersectionObserverInit = {
-      root: null,
-      rootMargin: '400px 0px', // prevent unmounting rows too early
-      threshold: 0.25,
-    };
-
-    const handleOnIntersect: IntersectionObserverCallback = (entries) => {
-      const visibleRows = useVisibleRowsStore.getState();
-      entries.forEach((entry) => {
-        const targetId = entry.target.id;
-        if (entry.isIntersecting) {
-          visibleRows.addVisibleRow(targetId);
-        } else {
-          visibleRows.removeVisibleRow(targetId);
-        }
-      });
-    };
-
-    observer = new IntersectionObserver(handleOnIntersect, options);
-  }
-
-  return observer;
-}
-
-/**
- * register a row element in the observer
- */
-export function observeRow(element: HTMLElement) {
-  getObserver().observe(element);
-}
-
-/**
- * unregister a row element in the observer
- */
-export function unobserveRow(element: HTMLElement) {
-  getObserver().unobserve(element);
-}
-
-/**
- * cleanup observer, should be called when the table component unmounts
- */
-export function cleanup() {
-  observer?.disconnect();
-  observer = null;
-}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/visibleRowsStore.ts

@@ -1,18 +0,0 @@
-import { create } from 'zustand';
-
-interface VisibleRowsStore {
-  visibleRows: Set<string>;
-  addVisibleRow: (id: string) => void;
-  removeVisibleRow: (id: string) => void;
-}
-
-export const useVisibleRowsStore = create<VisibleRowsStore>((set) => ({
-  visibleRows: new Set(),
-  addVisibleRow: (id) => set((state) => ({ visibleRows: new Set(state.visibleRows).add(id) })),
-  removeVisibleRow: (id) =>
-    set((state) => {
-      const newSet = new Set(state.visibleRows);
-      newSet.delete(id);
-      return { visibleRows: newSet };
-    }),
-}));

apps/client/src/views/cuesheet/cuesheet-table/useColumnManager.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocalStorage } from '@mantine/hooks';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
 
 import { debounce } from '../../../common/utils/debounce';
 import { makeStageKey } from '../../../common/utils/localStorage';
@@ -14,17 +14,8 @@ const saveSizesToStorage = debounce((sizes: Record<string, number>) => {
   localStorage.setItem(tableSizesKey, JSON.stringify(sizes));
 }, 500);
 
-export default function useColumnManager(columns: ColumnDef<ExtendedEntry>[]) {
+export function useColumnSizes() {
-  const [columnVisibility, setColumnVisibility] = useLocalStorage({
+  const [columnSizing, setColumnSizingState] = useState<Record<string, number>>(() => {
-    key: tableHiddenKey,
-    defaultValue: {},
-  });
-  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
-    key: tableOrderKey,
-    defaultValue: columns.map((col) => col.id as string),
-  });
-
-  const [columnSizing, setColumnSizingState] = useState(() => {
     try {
       const stored = localStorage.getItem(tableSizesKey);
       return stored ? JSON.parse(stored) : {};
@@ -38,10 +29,22 @@ export default function useColumnManager(columns: ColumnDef<ExtendedEntry>[]) {
     saveSizesToStorage(columnSizing);
   }, [columnSizing]);
 
-  const setColumnSizing = useCallback((sizes: typeof columnSizing) => {
+  const setColumnSizing = useCallback((sizesOrUpdater: Updater<ColumnSizingState>) => {
-    setColumnSizingState(sizes);
+    setColumnSizingState(sizesOrUpdater);
   }, []);
 
+  return {
+    columnSizing,
+    setColumnSizing,
+  };
+}
+
+export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[]) {
+  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
+    key: tableOrderKey,
+    defaultValue: columns.map((col) => col.id as string),
+  });
+
   // update column order if columns change
   useEffect(() => {
     const newColumns = columns.map((col) => col.id as string);
@@ -55,12 +58,20 @@ export default function useColumnManager(columns: ColumnDef<ExtendedEntry>[]) {
   }, [columns, saveColumnOrder]);
 
   return {
-    columnVisibility,
     columnOrder,
-    columnSizing,
-    resetColumnOrder,
-    setColumnVisibility,
     saveColumnOrder,
-    setColumnSizing,
+    resetColumnOrder,
+  };
+}
+
+export function useColumnVisibility() {
+  const [columnVisibility, setColumnVisibility] = useLocalStorage({
+    key: tableHiddenKey,
+    defaultValue: {},
+  });
+
+  return {
+    columnVisibility,
+    setColumnVisibility,
   };
 }

apps/client/src/views/editor/finder/Finder.module.scss

@@ -66,4 +66,5 @@
 .scrollContainer {
   max-height: 70vh;
   overflow: auto;
+  padding-top: 1rem;
 }

apps/client/src/views/editor/finder/Finder.tsx

@@ -71,8 +71,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
               results.map((entry, index) => {
                 const isSelected = selected === index;
                 const displayIndex = entry.type === SupportedEntry.Event ? entry.eventIndex : '-';
-                const displayCue = entry.type === SupportedEntry.Event ? entry.cue : '';
+                const displayCue = 'cue' in entry ? entry.cue : '';
-                const colour = entry.type === SupportedEntry.Event ? entry.colour : '';
 
                 return (
                   <li
@@ -83,7 +82,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
                     onClick={submit}
                   >
                     <div className={style.data}>
-                      <div className={style.index} style={{ '--color': colour }}>
+                      <div className={style.index} style={{ '--color': entry.colour }}>
                         {displayIndex}
                       </div>
                       <div className={style.cue}>{displayCue}</div>
@@ -99,7 +98,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
       footerElements={
         <div className={style.footer}>
           Use the keywords <span className={style.em}>cue</span>, <span className={style.em}>index</span> or
-          <span className={style.em}>title</span> to filter search
+          <span className={style.em}>title</span> to filter search.
         </div>
       }
     />

apps/client/src/views/editor/finder/useFinder.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { useSessionStorage } from '@mantine/hooks';
-import { EntryId, isOntimeEvent, isOntimeGroup, MaybeString, SupportedEntry } from 'ontime-types';
+import { EntryId, isOntimeEvent, isOntimeGroup, isOntimeMilestone, MaybeString, SupportedEntry } from 'ontime-types';
 
 import { useFlatRundown } from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -9,14 +9,15 @@ const maxResults = 12;
 
 type FilterableGroup = {
   type: SupportedEntry.Group;
-  id: string;
+  id: EntryId;
   index: number;
   title: string;
+  colour: string;
 };
 
 type FilterableEvent = {
   type: SupportedEntry.Event;
-  id: string;
+  id: EntryId;
   index: number;
   eventIndex: number;
   title: string;
@@ -25,7 +26,17 @@ type FilterableEvent = {
   parent: MaybeString;
 };
 
-type FilterableEntry = FilterableGroup | FilterableEvent;
+type FilterableMilestone = {
+  type: SupportedEntry.Milestone;
+  id: EntryId;
+  index: number;
+  title: string;
+  cue: string;
+  colour: string;
+  parent: MaybeString;
+};
+
+type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;
 
 export default function useFinder() {
   const { data, rundownId } = useFlatRundown();
@@ -59,7 +70,7 @@ export default function useFinder() {
       lastSearchString.current = searchValue;
 
       if (searchValue.startsWith('index ')) {
-        const searchString = searchValue.replace('index ', '').trim();
+        const searchString = searchValue.slice('index '.length).trim();
         const { results, error } = searchByIndex(searchString);
         setResults(results);
         setError(error);
@@ -67,14 +78,14 @@ export default function useFinder() {
       }
 
       if (searchValue.startsWith('cue ')) {
-        const searchString = searchValue.replace('cue ', '').trim();
+        const searchString = searchValue.slice('cue '.length).trim();
         const { results, error } = searchByCue(searchString);
         setResults(results);
         setError(error);
         return;
       }
 
-      const searchString = searchValue.replace('title ', '').trim();
+      const searchString = searchValue.startsWith('title ') ? searchValue.slice('title '.length).trim() : searchValue;
       const { results, error } = searchByTitle(searchString);
       setResults(results);
       setError(error);
@@ -162,33 +173,46 @@ export default function useFinder() {
             break;
           }
 
-          const event = data[i];
+          const entry = data[i];
-          if (isOntimeEvent(event)) {
+          if (isOntimeEvent(entry)) {
-            if (event.title.toLowerCase().includes(searchString)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
               remaining--;
               results.push({
                 type: SupportedEntry.Event,
-                id: event.id,
+                id: entry.id,
                 index: i,
                 eventIndex,
-                title: event.title,
+                title: entry.title,
-                cue: event.cue,
+                cue: entry.cue,
-                colour: event.colour,
+                colour: entry.colour,
-                parent: event.parent,
+                parent: entry.parent,
               } satisfies FilterableEvent);
             }
             eventIndex++;
-          }
+          } else if (isOntimeGroup(entry)) {
-          if (isOntimeGroup(event)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
-            if (event.title.toLowerCase().includes(searchString)) {
               remaining--;
               results.push({
                 type: SupportedEntry.Group,
-                id: event.id,
+                id: entry.id,
                 index: i,
-                title: event.title,
+                title: entry.title,
+                colour: entry.colour,
               } satisfies FilterableGroup);
             }
+          } else if (isOntimeMilestone(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Milestone,
+                id: entry.id,
+                index: i,
+                title: entry.title,
+                cue: entry.cue,
+                colour: entry.colour,
+                parent: entry.parent,
+              } satisfies FilterableMilestone);
+            }
           }
         }
         return { results, error: null };
@@ -200,7 +224,7 @@ export default function useFinder() {
   const select = useCallback(
     (selectedEvent: FilterableEntry) => {
       // First expand the parent group if this is an event inside a group
-      if (selectedEvent.type === SupportedEntry.Event && selectedEvent.parent !== null) {
+      if ('parent' in selectedEvent && selectedEvent.parent !== null) {
         // Try direct state update instead of using callback
         const currentGroups = [...new Set(collapsedGroups)];
         const newGroups = currentGroups.filter((id) => id !== selectedEvent.parent);

apps/client/src/views/timeline/Timeline.module.scss

@@ -105,7 +105,7 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
 }
 
 .delay {
-  color: $delay-color;
+  color: $ontime-delay-text;
 }
 
 .timeOverview {
@@ -117,7 +117,7 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
 .cross {
   text-decoration: line-through;
   text-decoration-thickness: 2px;
-  text-decoration-color: $delay-color;
+  text-decoration-color: $ontime-delay-text;
 }
 
 .separeLeft {

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

@@ -183,7 +183,7 @@ export function getUpcomingEvents(events: PlayableEvent[], selectedId: MaybeStri
  * Utility function calculates time to start
  */
 export function getTimeToStart(now: number, start: number, delay: number, offset: number): number {
-  return start + delay - now - offset;
+  return start + delay - now + offset;
 }
 
 interface TimelineLayout {

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

@@ -68,7 +68,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
     hidePhase,
     font,
     keyColour,
-    textColour,
+    timerColour,
   } = useTimerOptions();
 
   const { getLocalizedString } = useTranslation();
@@ -131,11 +131,11 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
   );
 
   // gather presentation styles
-  const timerColour = getTimerColour(viewSettings, textColour, showWarning, showDanger);
+  const resolvedTimerColour = getTimerColour(viewSettings, timerColour, showWarning, showDanger);
   const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
   const userStyles = {
     ...(keyColour && { '--timer-bg': keyColour }),
-    ...(textColour && { '--timer-colour': timerColour }),
+    ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
     ...(font && { '--timer-font': font }),
   };
 

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

@@ -25,10 +25,12 @@ const timerDisplayOptions: SelectOption[] = [
 
 export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
   const mainOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
     { value: 'title', label: 'Title' },
     { value: 'note', label: 'Note' },
   ]);
   const secondaryOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
     { value: 'title', label: 'Title' },
     { value: 'note', label: 'Note' },
   ]);
@@ -84,7 +86,7 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           description: 'Select the data source for the main text',
           type: 'option',
           values: mainOptions,
-          defaultValue: 'Title',
+          defaultValue: 'title',
         },
         {
           id: 'secondary-src',
@@ -92,7 +94,7 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           description: 'Select the data source for the secondary text',
           type: 'option',
           values: secondaryOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
       ],
     },
@@ -163,9 +165,9 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           defaultValue: '101010',
         },
         {
-          id: 'textColour',
+          id: 'timerColour',
-          title: 'Text Colour',
+          title: 'Timer Colour',
-          description: 'Text colour. Default: #f6f6f6',
+          description: 'Timer colour. Default: #f6f6f6',
           type: 'colour',
           defaultValue: 'f6f6f6',
         },
@@ -191,7 +193,7 @@ type TimerOptions = {
   hidePhase: boolean;
   font?: string;
   keyColour?: string;
-  textColour?: string;
+  timerColour?: string;
 };
 
 /**
@@ -226,7 +228,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
 
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),
-    textColour: makeColourString(getValue('textColour')),
+    timerColour: makeColourString(getValue('timerColour')),
   };
 }
 

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

@@ -42,8 +42,8 @@ const fontSizeMap: { [key: number]: number } = {
   4: 28, // 9:01
   5: 28, // -9:01, 10:01, 9 min
   6: 25, // -10:01, 10 min
-  8: 20, // 23:01:01
+  8: 18, // 23:01:01
-  9: 20, // -23:01:01
+  9: 18, // -23:01:01
 };
 
 /**

apps/client/tsconfig.json

@@ -1,6 +1,7 @@
 {
+  "extends": "../../tsconfig.common.json",
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "esnext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -13,26 +14,13 @@
     ],
     "module": "esnext",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "allowUnreachableCode": false,
     "allowUnusedLabels": false,
-    "noImplicitThis": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "allowJs": true,
     "baseUrl": "src",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "outDir": "build"
   },
   "include": [
     "src"

apps/electron/package.json

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

apps/resolver/.gitignore

@@ -0,0 +1 @@
+*.tgz

apps/resolver/README.md

@@ -0,0 +1,17 @@
+# Ontime Resolver
+
+Congratulations! You got this far into Ontime's rabbit hole and want to manage your installation.
+
+The Resolver is an attempt to expose our ontime's api so it is easier to integrate with  
+
+## Links
+- [Ontime's repository](https://github.com/cpvalente/ontime)
+- [Ontime's documentation](https://docs.getontime.no/)
+- [Ontime's website](https://getontime.no/)
+
+## Sponsoring
+You can help the development of this project or say thank you with a one time donation. \
+See the [terms of donations](https://github.com/cpvalente/ontime/blob/master/SPONSOR.md)
+
+[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
+[![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)

apps/resolver/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@getontime/resolver",
+  "version": "4.0.0-beta.4",
+  "type": "module",
+  "repository": "https://github.com/cpvalente/ontime",
+  "types": "./dist/main.d.ts",
+  "main": "./dist/main.js",
+  "description": "shared typings for ontime",
+  "scripts": {
+    "lint": "eslint . --quiet",
+    "prebuild": "pnpm rimraf ./dist",
+    "build": "tsup && pnpm rimraf ./dist/index.js",
+    "postbuild": "pnpm rimraf ./dist/index.d.ts"
+  },
+  "keywords": ["ontime", "resolver", "parser"],
+  "author": "",
+  "license": "AGPL-3.0-only",
+  "devDependencies": {
+    "@sprout2000/esbuild-copy-plugin": "^1.1.19",
+    "@typescript-eslint/parser": "catalog:",
+    "eslint": "catalog:",
+    "tsup": "^8.5.0",
+    "rimraf": "catalog:",
+    "typescript": "catalog:",
+    "ontime-types": "workspace:^4.0.0"
+  },
+  "files": ["dist"]
+}

apps/resolver/src/main.ts

@@ -0,0 +1,20 @@
+// api
+export { MessageTag, RefetchKey } from 'ontime-types';
+export type { ApiAction, ApiActionTag, ApiResponse } from 'ontime-types';
+export type { WsPacketToClient, WsPacketToServer } from 'ontime-types';
+
+// stores
+export type { RuntimeStore, TimerState, MessageState, RundownState, Offset } from 'ontime-types';
+export { TimerPhase, Playback, runtimeStorePlaceholder, OffsetMode } from 'ontime-types';
+
+// aux timer
+export type { SimpleTimerState } from 'ontime-types';
+export { SimplePlayback, SimpleDirection } from 'ontime-types';
+
+// entries
+export type { OntimeEvent, OntimeGroup, EntryCustomFields, CustomFields, Rundown } from 'ontime-types';
+export { SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeDelay, isOntimeMilestone } from 'ontime-types';
+
+// functions
+export { isWsPacketToClient } from './websocket.js';
+export type { SocketSender } from './websocket.js';

apps/resolver/src/websocket.ts

@@ -0,0 +1,18 @@
+import { ApiAction, ApiActionTag, MessageTag, WsPacketToClient, WsPacketToServer } from 'ontime-types';
+
+/**
+ * A helper type for sending correct websocket messages to ontime
+ */
+export type SocketSender = <T extends MessageTag | ApiActionTag>(
+  tag: T,
+  payload: T extends MessageTag
+    ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload']
+    : Pick<ApiAction & { tag: T }, 'payload'>['payload'],
+) => void;
+
+/**
+ * a soft type guard for WS packets
+ */
+export function isWsPacketToClient(data: unknown): data is WsPacketToClient {
+  return typeof data === 'object' && data !== null && 'tag' in data && 'payload' in data;
+}

apps/resolver/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.common.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "allowUnusedLabels": false,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "allowJs": true,
+    "declaration": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "baseUrl": "src",
+  },
+  "include": [
+    "src",
+  ],
+  "exclude": [
+    "node_modules",
+  ]
+}

apps/resolver/tsup.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'tsup';
+import copyPlugin from '@sprout2000/esbuild-copy-plugin';
+
+export default defineConfig({
+  clean: false, //we can't use clean as i dose so after the copy plugin runs
+  entry: ['src/main.ts'],
+  outDir: 'dist',
+  bundle: true,
+
+  dts: { resolve: true },
+  format: 'esm',
+  target: 'esnext',
+  platform: 'node',
+  esbuildPlugins: [
+    copyPlugin.copyPlugin({
+      src: './node_modules/ontime-types/dist',
+      dest: './dist',
+    }),
+  ],
+});

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.4",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",
@@ -20,7 +20,6 @@
     "ontime-utils": "workspace:*",
     "osc-min": "2.1.2",
     "sanitize-filename": "^1.6.3",
-    "steno": "^4.0.2",
     "ws": "^8.18.0",
     "xlsx": "^0.18.5"
   },
@@ -41,7 +40,7 @@
     "prettier": "catalog:",
     "server-timing": "^3.3.3",
     "shx": "^0.3.4",
-    "ts-essentials": "^10.0.3",
+    "ts-essentials": "catalog:",
     "tsx": "^4.19.2",
     "typescript": "catalog:",
     "vitest": "catalog:"

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

@@ -1,6 +1,6 @@
-import { TriggerDTO, TimerLifeCycle, AutomationDTO, Automation, EntryId } from 'ontime-types';
+import { TriggerDTO, TimerLifeCycle, AutomationDTO, Automation, ProjectRundowns } from 'ontime-types';
 
-import { makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+import { makeOntimeEvent } from '../../rundown/__mocks__/rundown.mocks.js';
 
 import {
   addTrigger,
@@ -203,10 +203,29 @@ describe('deleteAutomation()', () => {
     const automations = getAutomations();
     expect(Object.keys(automations).length).toEqual(1);
 
-    const rundown = makeRundown({});
+    const projectRundowns: ProjectRundowns = {
-    const timedEventOrder: EntryId[] = [];
+      'rundown-1': {
-
+        id: 'rundown-1',
-    await deleteAutomation(rundown, timedEventOrder, Object.keys(automations)[0]);
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
+      },
+    };
+    await deleteAutomation(projectRundowns, Object.keys(automations)[0]);
     const removed = getAutomations();
     expect(Object.keys(removed).length).toEqual(0);
   });

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

@@ -1,5 +1,7 @@
-import { TimerLifeCycle } from 'ontime-types';
+import { ProjectRundowns, TimerLifeCycle } from 'ontime-types';
-import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
+
+import { makeOntimeEvent } from '../../rundown/__mocks__/rundown.mocks.js';
+
 import { isAutomationUsed, parseTemplateNested, stringToOSCArgs } from '../automation.utils.js';
 
 describe('parseTemplateNested()', () => {
@@ -250,50 +252,109 @@ describe('test stringToOSCArgs()', () => {
 
 describe('isAutomationUsed()', () => {
   it('returns the first event which uses an automation', () => {
-    const rundown = makeRundown({
+    const projectRundowns: ProjectRundowns = {
-      entries: {
+      'rundown-1': {
-        '1': makeOntimeEvent({
+        id: 'rundown-1',
-          id: '1',
+        title: 'Rundown 1',
-          triggers: [
+        order: ['1'],
-            {
+        flatOrder: ['1'],
-              id: 'trigger-1',
+        entries: {
-              title: 'Trigger 1',
+          '1': makeOntimeEvent({
-              trigger: TimerLifeCycle.onClock,
+            id: '1',
-              automationId: 'test-automation',
+            triggers: [
-            },
+              {
-          ],
+                id: 'trigger-1',
-        }),
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
       },
-    });
+    };
-
-    const timedEventOrder = ['1'];
     const automationId = 'test-automation';
 
-    const result = isAutomationUsed(rundown, timedEventOrder, automationId);
+    const result = isAutomationUsed(projectRundowns, automationId);
-    expect(result).toBe('1');
+    expect(result).toStrictEqual(['Rundown 1', '1']);
+  });
+
+  it('finds usages in any rundown', () => {
+    const projectRundowns: ProjectRundowns = {
+      'rundown-1': {
+        id: 'rundown-1',
+        title: 'Rundown 1',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
+      },
+      'rundown-2': {
+        id: 'rundown-2',
+        title: 'Rundown 2',
+        order: ['1'],
+        flatOrder: ['1'],
+        entries: {
+          '1': makeOntimeEvent({
+            id: '1',
+            triggers: [
+              {
+                id: 'trigger-1',
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'in-the-second-rundown',
+              },
+            ],
+          }),
+        },
+        revision: 1,
+      },
+    };
+    const automationId = 'in-the-second-rundown';
+
+    const result = isAutomationUsed(projectRundowns, automationId);
+    expect(result).toStrictEqual(['Rundown 2', '1']);
   });
 
   it('returns returns undefined if there are no matches', () => {
-    const rundown = makeRundown({
+    const projectRundowns: ProjectRundowns = {
-      entries: {
+      'rundown-1': {
-        '1': makeOntimeEvent({
+        id: 'rundown-1',
-          id: '1',
+        title: 'Rundown 1',
-          triggers: [
+        order: ['1'],
-            {
+        flatOrder: ['1'],
-              id: 'trigger-1',
+        entries: {
-              title: 'Trigger 1',
+          '1': makeOntimeEvent({
-              trigger: TimerLifeCycle.onClock,
+            id: '1',
-              automationId: 'test-automation',
+            triggers: [
-            },
+              {
-          ],
+                id: 'trigger-1',
-        }),
+                title: 'Trigger 1',
+                trigger: TimerLifeCycle.onClock,
+                automationId: 'test-automation',
+              },
+            ],
+          }),
+        },
+        revision: 1,
       },
-    });
+    };
-
-    const timedEventOrder = ['1'];
     const automationId = 'does-not-exist';
 
-    const result = isAutomationUsed(rundown, timedEventOrder, automationId);
+    const result = isAutomationUsed(projectRundowns, automationId);
     expect(result).toBeUndefined();
   });
 });

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

@@ -4,8 +4,7 @@ import { Automation, AutomationSettings, ErrorResponse, Trigger } from 'ontime-t
 import type { Request, Response } from 'express';
 
 import { oscServer } from '../../adapters/OscAdapter.js';
-
+import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
-import { getCurrentRundown, getRundownMetadata } from '../rundown/rundown.dao.js';
 
 import * as automationDao from './automation.dao.js';
 import * as automationService from './automation.service.js';
@@ -108,10 +107,8 @@ export async function editAutomation(req: Request, res: Response<Automation | Er
 
 export async function deleteAutomation(req: Request, res: Response<void | ErrorResponse>) {
   try {
-    const rundown = getCurrentRundown();
+    const projectRundowns = getDataProvider().getProjectRundowns();
-    const { timedEventOrder } = getRundownMetadata();
+    await automationDao.deleteAutomation(projectRundowns, req.params.id);
-
-    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,9 +2,8 @@ import type {
   Automation,
   AutomationDTO,
   AutomationSettings,
-  EntryId,
   NormalisedAutomation,
-  Rundown,
+  ProjectRundowns,
   Trigger,
   TriggerDTO,
 } from 'ontime-types';
@@ -136,15 +135,15 @@ export async function editAutomation(id: string, newAutomation: AutomationDTO):
 /**
  * Deletes a automation given its ID
  */
-export async function deleteAutomation(rundown: Rundown, timedEventOrder: EntryId[], id: string): Promise<void> {
+export async function deleteAutomation(projectRundowns: ProjectRundowns, automationId: string): Promise<void> {
   const automations = getAutomations();
   // ignore request if automation does not exist
-  if (!Object.hasOwn(automations, id)) {
+  if (!Object.hasOwn(automations, automationId)) {
     return;
   }
 
   // prevent deleting a automation that is in use in triggers
-  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === id);
+  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === automationId);
   if (triggers.length) {
     throw new Error(
       `Unable to delete automation used in trigger ${triggers[0].title}${triggers.length > 1 ? ` and ${triggers.length - 1} more` : ''}`,
@@ -152,12 +151,12 @@ export async function deleteAutomation(rundown: Rundown, timedEventOrder: EntryI
   }
 
   // prevent deleting a automation that is in use in events
-  const isInUse = isAutomationUsed(rundown, timedEventOrder, id);
+  const isInUse = isAutomationUsed(projectRundowns, automationId);
   if (isInUse) {
-    throw new Error(`Unable to delete automation used in event with ID ${isInUse}`);
+    throw new Error(`Unable to delete automation used in rundown: ${isInUse[0]}, in event with ID: ${isInUse[1]}`);
   }
 
-  delete automations[id];
+  delete automations[automationId];
   await saveChanges({ automations });
 }
 

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

@@ -1,4 +1,13 @@
-import { EntryId, FilterRule, isOntimeEvent, MaybeNumber, OntimeAction, ontimeActionKeyValues, Rundown } from 'ontime-types';
+import {
+  EntryId,
+  FilterRule,
+  isOntimeEvent,
+  MaybeNumber,
+  OntimeAction,
+  ontimeActionKeyValues,
+  ProjectRundowns,
+  RundownEntries,
+} from 'ontime-types';
 import { millisToString, removeLeadingZero, splitWhitespace, getPropertyFromPath } from 'ontime-utils';
 import type { OscArgOrArrayInput, OscArgInput } from 'osc-min';
 
@@ -198,22 +207,40 @@ export function isBooleanEquals(a: boolean, b: string): boolean {
 
 /**
  * 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(
+function isAutomationUsedInRundown(
-  rundown: Rundown,
+  entries: RundownEntries,
-  timedEventOrder: EntryId[],
+  flatOrder: EntryId[],
   automationId: string,
 ): EntryId | undefined {
-  for (let i = 0; i < timedEventOrder.length; i++) {
+  for (let i = 0; i < flatOrder.length; i++) {
-    const eventId = timedEventOrder[i];
+    const eventId = flatOrder[i];
-    const event = rundown.entries[eventId];
+    const entry = entries[eventId];
-    if (isOntimeEvent(event) && event.triggers) {
+
-      for (const trigger of event.triggers) {
+    // only ontime events can contain triggers
+    if (isOntimeEvent(entry) && entry.triggers) {
+      for (const trigger of entry.triggers) {
         if (trigger.automationId === automationId) {
-          return eventId;
+          return entry.id;
         }
       }
     }
   }
 }
+
+/**
+ * Checks if an automation is used in any of the project rundowns
+ */
+export function isAutomationUsed(
+  projectRundowns: ProjectRundowns,
+  automationId: string,
+): [string, EntryId] | undefined {
+  for (const rundownId in projectRundowns) {
+    const rundown = projectRundowns[rundownId];
+    const usedInEvent = isAutomationUsedInRundown(rundown.entries, rundown.flatOrder, automationId);
+
+    if (usedInEvent) {
+      return [rundown.title, usedInEvent];
+    }
+  }
+}

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

@@ -31,7 +31,6 @@ export async function patchPartialProjectFile(req: Request, res: Response<Databa
     };
 
     const newData = await projectService.patchCurrentProject(patchDb);
-
     res.status(200).send(newData);
   } catch (error) {
     const message = getErrorMessage(error);

apps/server/src/api-data/excel/__tests__/mockData.ts

@@ -10,7 +10,7 @@ export const dataFromExcelTemplate = [
     'Timer type',
     'Count to end',
     'Skip',
-    'Notes',
+    'Note',
     't0',
     'Test1',
     'test2',