feat: allow naming aux timers

apps/cli/package.json

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

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "4.13.0",
+  "version": "4.12.0",
   "private": true,
   "type": "module",
   "dependencies": {

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

@@ -1,18 +0,0 @@
-import { ComponentProps } from 'react';
-
-import Button from './Button';
-
-type ToggleButtonProps = Omit<ComponentProps<typeof Button>, 'variant'> & {
-  /** whether the option this button controls is currently on */
-  pressed: boolean;
-};
-
-/**
- * A button which carries an on / off state.
- *
- * Keeps the pressed styling and the accessible state together, so that a toggle
- * cannot end up looking active without also announcing that it is.
- */
-export default function ToggleButton({ pressed, ...buttonProps }: ToggleButtonProps) {
-  return <Button variant={pressed ? 'primary' : 'subtle'} aria-pressed={pressed} {...buttonProps} />;
-}

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

@@ -95,6 +95,22 @@ export const useAuxTimersTime = createSelector((state: RuntimeStore) => {
   };
 });
 
+export const useAuxTimersName = createSelector((state: RuntimeStore) => {
+  return {
+    aux1: state.auxtimer1.name,
+    aux2: state.auxtimer2.name,
+    aux3: state.auxtimer3.name,
+  };
+});
+
+export const useAuxTimersActive = createSelector((state: RuntimeStore) => {
+  return (
+    state.auxtimer1.playback === SimplePlayback.Start ||
+    state.auxtimer2.playback === SimplePlayback.Start ||
+    state.auxtimer3.playback === SimplePlayback.Start
+  );
+});
+
 export const useAuxTimerTime = (index: number) =>
   createSelector((state: RuntimeStore) => {
     if (index === 1) return state.auxtimer1.current;
@@ -108,15 +124,18 @@ export const useAuxTimerControl = (index: number) =>
       return {
         playback: state.auxtimer1.playback,
         direction: state.auxtimer1.direction,
+        name: state.auxtimer1.name,
       };
     if (index === 2)
       return {
         playback: state.auxtimer2.playback,
         direction: state.auxtimer2.direction,
+        name: state.auxtimer2.name,
       };
     return {
       playback: state.auxtimer3.playback,
       direction: state.auxtimer3.direction,
+      name: state.auxtimer3.name,
     };
   })();
 

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

@@ -6,4 +6,5 @@ export const ontimePlaceholderSettings: Settings = {
   operatorKey: null,
   timeFormat: '24',
   language: 'en',
+  auxTimerNames: ['', '', ''],
 };

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

@@ -13,6 +13,7 @@ type EditorSettingsStore = {
   defaultTimerType: TimerType;
   defaultEndAction: EndAction;
   inheritGroupColour: boolean;
+  auxTimersCollapsed: boolean;
   setDefaultDuration: (defaultDuration: string) => void;
   setLinkPrevious: (linkPrevious: boolean) => void;
   setInheritGroupColour: (inheritGroupColour: boolean) => void;
@@ -21,6 +22,7 @@ type EditorSettingsStore = {
   setDangerTime: (dangerTime: string) => void;
   setDefaultTimerType: (defaultTimerType: TimerType) => void;
   setDefaultEndAction: (defaultEndAction: EndAction) => void;
+  setAuxTimersCollapsed: (auxTimersCollapsed: boolean) => void;
 };
 
 export const editorSettingsDefaults = {
@@ -32,6 +34,7 @@ export const editorSettingsDefaults = {
   timerType: TimerType.CountDown,
   endAction: EndAction.None,
   inheritGroupColour: false,
+  auxTimersCollapsed: false,
 };
 
 enum EditorSettingsKeys {
@@ -43,6 +46,7 @@ enum EditorSettingsKeys {
   DefaultTimerType = 'ontime-default-timer-type',
   DefaultEndAction = 'ontime-default-end-action',
   InheritGroupColour = 'ontime-inherit-group-colour',
+  AuxTimersCollapsed = 'ontime-aux-timers-collapsed',
 }
 
 export const useEditorSettings = create<EditorSettingsStore>((set) => {
@@ -67,6 +71,10 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
       EditorSettingsKeys.InheritGroupColour,
       editorSettingsDefaults.inheritGroupColour,
     ),
+    auxTimersCollapsed: booleanFromLocalStorage(
+      EditorSettingsKeys.AuxTimersCollapsed,
+      editorSettingsDefaults.auxTimersCollapsed,
+    ),
 
     setDefaultDuration: (defaultDuration) =>
       set(() => {
@@ -110,5 +118,10 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
         localStorage.setItem(EditorSettingsKeys.InheritGroupColour, String(inheritGroupColour));
         return { inheritGroupColour };
       }),
+    setAuxTimersCollapsed: (auxTimersCollapsed) =>
+      set(() => {
+        localStorage.setItem(EditorSettingsKeys.AuxTimersCollapsed, String(auxTimersCollapsed));
+        return { auxTimersCollapsed };
+      }),
   };
 });

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

@@ -1,26 +0,0 @@
-import { getRememberedDimensions, rememberDimensions } from '../imageDimensions';
-
-/** stand-in for a loaded HTMLImageElement */
-function makeImage(naturalWidth: number, naturalHeight: number) {
-  return { naturalWidth, naturalHeight } as HTMLImageElement;
-}
-
-test('We remember the size of an image, so that we can reserve its space when it comes back', () => {
-  expect(getRememberedDimensions('http://ontime.local/unseen.png')).toBe(null);
-
-  rememberDimensions('http://ontime.local/image.png', makeImage(1920, 1080));
-  expect(getRememberedDimensions('http://ontime.local/image.png')).toMatchObject({ width: 1920, height: 1080 });
-
-  // an image which failed to load has no size to offer
-  rememberDimensions('http://ontime.local/broken.png', makeImage(0, 0));
-  expect(getRememberedDimensions('http://ontime.local/broken.png')).toBe(null);
-});
-
-test('We keep the most recently seen images, older entries are forgotten', () => {
-  for (let i = 0; i < 600; i++) {
-    rememberDimensions(`http://ontime.local/${i}.png`, makeImage(100, 50));
-  }
-
-  expect(getRememberedDimensions('http://ontime.local/0.png')).toBe(null);
-  expect(getRememberedDimensions('http://ontime.local/599.png')).toMatchObject({ width: 100, height: 50 });
-});

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

@@ -0,0 +1,10 @@
+export function getAuxTimerLabel(name: string | undefined, fallback: string): string {
+  const custom = name?.trim();
+  return custom ? custom : fallback;
+}
+
+/** Combines the aux timer's index with its custom name, eg. "Aux 1: Speaker" */
+export function getAuxTimerIndexedLabel(name: string | undefined, index: number): string {
+  const custom = name?.trim();
+  return custom ? `Aux ${index}: ${custom}` : `Aux ${index}`;
+}

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

@@ -1,49 +0,0 @@
-/**
- * Images in the cuesheet live inside a virtualised table:
- * rows are unmounted when they leave the viewport and mounted again when they come back.
- * A re-mounted image has no dimensions until it is available,
- * which makes the row change height and the table shift under the user.
- *
- * We remember the size of the images we have already seen
- * so that we can reserve the space they will take.
- * This only holds two numbers per image: we leave the image data itself to the browser cache,
- * which knows better than us when memory should be released.
- */
-
-export interface ImageDimensions {
-  width: number;
-  height: number;
-}
-
-/** how many sizes we remember, this is only a few bytes per entry */
-const maxSize = 500;
-
-const dimensions = new Map<string, ImageDimensions>();
-
-/**
- * @returns the size of a previously loaded image, if we have seen it before
- */
-export function getRememberedDimensions(src: string): ImageDimensions | null {
-  return dimensions.get(src) ?? null;
-}
-
-/**
- * Records the size of a loaded image
- */
-export function rememberDimensions(src: string, image: HTMLImageElement) {
-  if (image.naturalHeight === 0) {
-    return;
-  }
-
-  // the map iteration order is our LRU queue, re-adding the entry marks it as recently used
-  dimensions.delete(src);
-  dimensions.set(src, { width: image.naturalWidth, height: image.naturalHeight });
-
-  while (dimensions.size > maxSize) {
-    const oldest = dimensions.keys().next();
-    if (oldest.done) {
-      return;
-    }
-    dimensions.delete(oldest.value);
-  }
-}

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

@@ -0,0 +1,95 @@
+import { Settings } from 'ontime-types';
+import { auxTimerNameMaxLength } from 'ontime-utils';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { postSettings } from '../../../../common/api/settings';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Info from '../../../../common/components/info/Info';
+import Input from '../../../../common/components/input/input/Input';
+import useSettings from '../../../../common/hooks-query/useSettings';
+import { preventEscape } from '../../../../common/utils/keyEvent';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+export default function AuxTimerSettings() {
+  const { data, status, refetch } = useSettings();
+  const {
+    handleSubmit,
+    register,
+    reset,
+    setError,
+    formState: { isSubmitting, isDirty, errors },
+  } = useForm<Settings>({
+    defaultValues: data,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset(data);
+    }
+  }, [data, reset]);
+
+  const onSubmit = async (formData: Settings) => {
+    try {
+      await postSettings(formData);
+    } catch (error) {
+      const message = maybeAxiosError(error);
+      setError('root', { message });
+    } finally {
+      await refetch();
+    }
+  };
+
+  const onReset = () => {
+    reset(data);
+  };
+
+  const isLoading = status === 'pending';
+
+  return (
+    <Panel.Section
+      as='form'
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(event) => preventEscape(event, onReset)}
+      id='aux-timer-settings'
+    >
+      <Panel.Card>
+        <Panel.SubHeader>
+          Aux timers
+          <Panel.InlineElements>
+            <Button disabled={!isDirty || isSubmitting} variant='ghosted' onClick={onReset}>
+              Revert to saved
+            </Button>
+            <Button type='submit' loading={isSubmitting} disabled={!isDirty} variant='primary'>
+              Save
+            </Button>
+          </Panel.InlineElements>
+        </Panel.SubHeader>
+        <Panel.Divider />
+        <Panel.Section>
+          <Info>Give the aux timers custom names. Names are shown across the editor controls and views.</Info>
+          <Panel.Loader isLoading={isLoading} />
+          <Panel.Error>{errors.root?.message}</Panel.Error>
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field title='Aux timer 1' description='Custom name for aux timer 1' />
+              <Input maxLength={auxTimerNameMaxLength} placeholder='Aux 1' {...register('auxTimerNames.0')} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field title='Aux timer 2' description='Custom name for aux timer 2' />
+              <Input maxLength={auxTimerNameMaxLength} placeholder='Aux 2' {...register('auxTimerNames.1')} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field title='Aux timer 3' description='Custom name for aux timer 3' />
+              <Input maxLength={auxTimerNameMaxLength} placeholder='Aux 3' {...register('auxTimerNames.2')} />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}

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

@@ -3,6 +3,7 @@ import { isDocker } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
 import CustomViews from '../manage-panel/CustomViews';
+import AuxTimerSettings from './AuxTimerSettings';
 import GeneralSettings from './GeneralSettings';
 import McpSection from './McpSection';
 import ProjectData from './ProjectData';
@@ -12,6 +13,7 @@ import ViewSettings from './ViewSettings';
 export default function SettingsPanel({ location }: PanelBaseProps) {
   const dataRef = useScrollIntoView<HTMLDivElement>('data', location);
   const generalRef = useScrollIntoView<HTMLDivElement>('general', location);
+  const auxTimersRef = useScrollIntoView<HTMLDivElement>('aux-timers', location);
   const viewRef = useScrollIntoView<HTMLDivElement>('view', location);
   const customViewsRef = useScrollIntoView<HTMLDivElement>('custom-views', location);
   const mcpRef = useScrollIntoView<HTMLDivElement>('mcp', location);
@@ -26,6 +28,9 @@ export default function SettingsPanel({ location }: PanelBaseProps) {
       <div ref={generalRef}>
         <GeneralSettings />
       </div>
+      <div ref={auxTimersRef}>
+        <AuxTimerSettings />
+      </div>
       <div ref={viewRef}>
         <ViewSettings />
       </div>

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

@@ -24,6 +24,7 @@ const staticOptions = [
         label: 'General settings',
         keywords: ['pin', 'password', 'lock', 'language', 'time format', 'timezone'],
       },
+      { id: 'settings__aux-timers', label: 'Aux timers', keywords: ['aux', 'auxiliary'] },
       {
         id: 'settings__view',
         label: 'View settings',

apps/client/src/features/control/playback/PlaybackControl.module.scss

@@ -3,6 +3,34 @@
   margin: 0 auto;
 }
 
+.auxHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+}
+
+.auxHeaderButtons {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.activeIndicator {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: $active-indicator;
+}
+
 .auxTimers {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

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

@@ -1,4 +1,10 @@
-import { usePlaybackControl } from '../../../common/hooks/useSocket';
+import { IoChevronDown, IoChevronUp, IoSettingsOutline } from 'react-icons/io5';
+
+import IconButton from '../../../common/components/buttons/IconButton';
+import Tooltip from '../../../common/components/tooltip/Tooltip';
+import { useAuxTimersActive, usePlaybackControl } from '../../../common/hooks/useSocket';
+import { useEditorSettings } from '../../../common/stores/editorSettings';
+import useAppSettingsNavigation from '../../app-settings/useAppSettingsNavigation';
 import AddTime from './add-time/AddTime';
 import { AuxTimer } from './aux-timer/AuxTimer';
 import PlaybackButtons from './playback-buttons/PlaybackButtons';
@@ -8,6 +14,9 @@ import style from './PlaybackControl.module.scss';
 
 export default function PlaybackControl() {
   const data = usePlaybackControl();
+  const { setLocation } = useAppSettingsNavigation();
+  const { auxTimersCollapsed, setAuxTimersCollapsed } = useEditorSettings();
+  const isAuxTimerActive = useAuxTimersActive();
 
   return (
     <div className={style.mainContainer}>
@@ -20,11 +29,42 @@ export default function PlaybackControl() {
         selectedEventIndex={data.selectedEventIndex}
         timerPhase={data.timerPhase}
       />
-      <div className={style.auxTimers}>
-        <AuxTimer index={1} />
-        <AuxTimer index={2} />
-        <AuxTimer index={3} />
+      <div className={style.auxHeader}>
+        <span className={style.label}>
+          Aux timers
+          {auxTimersCollapsed && isAuxTimerActive && <span className={style.activeIndicator} />}
+        </span>
+        <div className={style.auxHeaderButtons}>
+          <Tooltip
+            text='Name aux timers'
+            render={
+              <IconButton
+                size='small'
+                variant='subtle-white'
+                aria-label='Name aux timers'
+                onClick={() => setLocation('settings__aux-timers')}
+              />
+            }
+          >
+            <IoSettingsOutline />
+          </Tooltip>
+          <IconButton
+            size='small'
+            variant='subtle-white'
+            aria-label={auxTimersCollapsed ? 'Expand aux timers' : 'Collapse aux timers'}
+            onClick={() => setAuxTimersCollapsed(!auxTimersCollapsed)}
+          >
+            {auxTimersCollapsed ? <IoChevronUp /> : <IoChevronDown />}
+          </IconButton>
+        </div>
       </div>
+      {!auxTimersCollapsed && (
+        <div className={style.auxTimers}>
+          <AuxTimer index={1} />
+          <AuxTimer index={2} />
+          <AuxTimer index={3} />
+        </div>
+      )}
     </div>
   );
 }

apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss

@@ -1,8 +1,18 @@
 .label {
   display: block;
   margin-top: 1rem;
+  // aux timers sit in a 3 column grid, without this a long name would grow its column
+  // instead of shrinking to it, breaking the equal column layout
+  min-width: 0;
+}
+
+.labelText {
+  display: block;
   font-size: $inner-section-text-size;
   color: $label-gray;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .controls {

apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx

@@ -3,7 +3,9 @@ import { millisToString, parseUserTime } from 'ontime-utils';
 import { IoArrowDown, IoArrowUp, IoPause, IoPlay, IoStop } from 'react-icons/io5';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import { setAuxTimer, useAuxTimerControl, useAuxTimerTime } from '../../../../common/hooks/useSocket';
+import { getAuxTimerIndexedLabel } from '../../../../common/utils/auxTimerUtils';
 import TapButton from '../tap-button/TapButton';
 
 import style from './AuxTimer.module.scss';
@@ -13,10 +15,12 @@ interface AuxTimerProps {
 }
 
 export function AuxTimer({ index }: AuxTimerProps) {
-  const { playback, direction } = useAuxTimerControl(index);
+  const { playback, direction, name } = useAuxTimerControl(index);
 
   const { stop, setDirection } = setAuxTimer;
 
+  const label = getAuxTimerIndexedLabel(name, index);
+
   const toggleDirection = () => {
     const newDirection = direction === SimpleDirection.CountDown ? SimpleDirection.CountUp : SimpleDirection.CountDown;
     setDirection(index, newDirection);
@@ -27,10 +31,12 @@ export function AuxTimer({ index }: AuxTimerProps) {
 
   return (
     <label className={style.label}>
-      Aux Timer {index}
+      <Tooltip text={label} render={<span />} className={style.labelText}>
+        {label}
+      </Tooltip>
       <div className={style.controls}>
         <div className={style.input}>
-          <AuxTimerInput index={index} isActive={isActive} />
+          <AuxTimerInput index={index} isActive={isActive} placeholder={`Aux ${index}`} />
           <TapButton onClick={toggleDirection} aspect='tight' disabled={isActive}>
             {direction === SimpleDirection.CountDown && <IoArrowDown data-testid={`aux-timer-direction-${index}`} />}
             {direction === SimpleDirection.CountUp && <IoArrowUp data-testid={`aux-timer-direction-${index}`} />}
@@ -50,9 +56,10 @@ export function AuxTimer({ index }: AuxTimerProps) {
 interface AuxTimerInputProps {
   index: number;
   isActive: boolean;
+  placeholder: string;
 }
 
-function AuxTimerInput({ index, isActive }: AuxTimerInputProps) {
+function AuxTimerInput({ index, isActive, placeholder }: AuxTimerInputProps) {
   const newTimeInMs = useAuxTimerTime(index);
   const { setDuration } = setAuxTimer;
 
@@ -70,7 +77,7 @@ function AuxTimerInput({ index, isActive }: AuxTimerInputProps) {
   }
 
   return (
-    <TimeInput submitHandler={handleTimeUpdate} name={`aux${index}`} time={newTimeInMs} placeholder={`Aux ${index}`} />
+    <TimeInput submitHandler={handleTimeUpdate} name={`aux${index}`} time={newTimeInMs} placeholder={placeholder} />
   );
 }
 

apps/client/src/features/log/Log.tsx

@@ -3,7 +3,6 @@ import { useCallback, useState } from 'react';
 import { IoClose } from 'react-icons/io5';
 
 import Button from '../../common/components/buttons/Button';
-import ToggleButton from '../../common/components/buttons/ToggleButton';
 import { clearLogs, useLogData } from '../../common/stores/logger';
 import { cx } from '../../common/utils/styleUtils';
 import * as Panel from '../app-settings/panel-utils/PanelUtils';
@@ -56,60 +55,72 @@ export default function Log() {
     <div className={cx([style.container, isExtracted && style.extracted])}>
       <Panel.InlineElements className={style.buttonBar}>
         <span className={style.filterLabel}>Filter by</span>
-        <ToggleButton
-          pressed={showUser}
+        <Button
+          variant={showUser ? 'primary' : 'subtle'}
           size='small'
+          aria-pressed={showUser}
+          aria-label={`${showUser ? 'Hide' : 'Show'} ${LogOrigin.User} events`}
           onClick={() => setShowUser((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.User)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.User}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showClient}
+        </Button>
+        <Button
+          variant={showClient ? 'primary' : 'subtle'}
           size='small'
+          aria-pressed={showClient}
+          aria-label={`${showClient ? 'Hide' : 'Show'} ${LogOrigin.Client} events`}
           onClick={() => setShowClient((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Client)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Client}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showServer}
+        </Button>
+        <Button
+          variant={showServer ? 'primary' : 'subtle'}
           size='small'
+          aria-pressed={showServer}
+          aria-label={`${showServer ? 'Hide' : 'Show'} ${LogOrigin.Server} events`}
           onClick={() => setShowServer((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Server)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Server}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showPlayback}
+        </Button>
+        <Button
+          variant={showPlayback ? 'primary' : 'subtle'}
           size='small'
+          aria-pressed={showPlayback}
+          aria-label={`${showPlayback ? 'Hide' : 'Show'} ${LogOrigin.Playback} events`}
           onClick={() => setShowPlayback((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Playback)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Playback}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showRx}
+        </Button>
+        <Button
+          variant={showRx ? 'primary' : 'subtle'}
           size='small'
+          aria-pressed={showRx}
+          aria-label={`${showRx ? 'Hide' : 'Show'} ${LogOrigin.Rx} events`}
           onClick={() => setShowRx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Rx)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Rx}
-        </ToggleButton>
-        <ToggleButton
-          pressed={showTx}
+        </Button>
+        <Button
+          variant={showTx ? 'primary' : 'subtle'}
           size='small'
+          aria-pressed={showTx}
+          aria-label={`${showTx ? 'Hide' : 'Show'} ${LogOrigin.Tx} events`}
           onClick={() => setShowTx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Tx)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Tx}
-        </ToggleButton>
+        </Button>
         <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
           <IoClose /> Clear
         </Button>

apps/client/src/features/rundown/placements/FinderPlacement.tsx

@@ -8,16 +8,10 @@ export default memo(FinderPlacement);
 function FinderPlacement() {
   const [isOpen, handler] = useDisclosure();
 
-  /**
-   * The empty tagsToIgnore is significant: by default the hook skips input elements,
-   * which would make the shortcut dead while editing an entry.
-   *
-   * This opens rather than toggles. Toggling on a key that also mounts and unmounts the
-   * dialog races against it, and browsers treat a repeated find shortcut as "focus the
-   * search again" rather than "close it". The finder selects its input instead, and
-   * Escape closes.
-   */
-  useHotkeys([['mod + f', handler.open, { preventDefault: true }]], []);
+  useHotkeys([
+    ['mod + f', handler.toggle, { preventDefault: true }],
+    ['Escape', handler.close, { preventDefault: true }],
+  ]);
 
   if (isOpen) {
     return <Finder isOpen={isOpen} onClose={handler.close} />;

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

@@ -312,7 +312,6 @@ export default function RundownEvent({
       onClick={handleFocusClick}
       onContextMenu={onContextMenu}
       data-testid='rundown-event'
-      data-selected={isSelected}
       {...(isPlaying ? { 'data-running': true } : {})}
     >
       <RundownIndicators timeStart={timeStart} delay={delay} gap={gap} isNextDay={isNextDay} />

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

@@ -1,18 +0,0 @@
-import { isValidImageSource } from '../cuesheet-table/cuesheet-table-elements/EditableImage';
-
-test('An image is referenced by link, anything else is rejected', () => {
-  const testCases = [
-    { value: 'https://example.com/image.png', isValid: true },
-    { value: 'http://example.com/image.png', isValid: true },
-    // a file is local to the machine running ontime, it would not resolve for the clients we serve
-    { value: '/user/image.png', isValid: false },
-    { value: 'file:///Users/me/image.png', isValid: false },
-    { value: 'C:\\images\\image.png', isValid: false },
-    // values which do not describe a location we can reach
-    { value: 'www.example.com/image.png', isValid: false },
-    { value: 'https://', isValid: false },
-    { value: 'some text', isValid: false },
-  ];
-
-  testCases.forEach((t) => expect(isValidImageSource(t.value)).toBe(t.isValid));
-});

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

@@ -5,19 +5,6 @@
   &:not(:read-only):hover::placeholder {
     opacity: 1;
   }
-
-  &[data-invalid] {
-    outline: 1px solid $red-500;
-  }
-}
-
-/** feedback on a value we cannot use, either rejected or failed to load */
-.message {
-  display: block;
-  padding: 0.25rem 0;
-  color: $red-500;
-  font-size: calc(1rem - 3px);
-  line-height: 1.2;
 }
 
 .imageCell {

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

@@ -1,54 +1,27 @@
-import { memo, useState } from 'react';
+import { memo } from 'react';
 
 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
-import { getRememberedDimensions, rememberDimensions } from '../../../../common/utils/imageDimensions';
 
 import style from './EditableImage.module.scss';
 
 interface EditableImageProps {
   initialValue: string;
-  fieldLabel: string;
   readOnly?: boolean;
   updateValue: (newValue: string) => void;
 }
 
 export default memo(EditableImage);
 
-/**
- * Images are referenced by link: anything local to the machine running ontime
- * would not resolve for the clients we serve the cuesheet to
- */
-export function isValidImageSource(value: string): boolean {
-  try {
-    const url = new URL(value);
-    return url.protocol === 'http:' || url.protocol === 'https:';
-  } catch {
-    return false;
-  }
-}
-
-function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: EditableImageProps) {
-  const [isRejected, setIsRejected] = useState(false);
-  /** we keep track of the source itself, so that the state follows the value being shown */
-  const [failedSource, setFailedSource] = useState<string | null>(null);
-  const [loadedSource, setLoadedSource] = useState<string | null>(null);
-
+function EditableImage({ initialValue, readOnly, updateValue }: EditableImageProps) {
   const handleUpdate = (newValue: string) => {
-    const value = newValue.trim();
-
-    if (value === initialValue) {
-      setIsRejected(false);
+    if (newValue === initialValue) {
       return;
     }
-
-    if (value !== '' && !isValidImageSource(value)) {
-      setIsRejected(true);
+    if (newValue !== '' && !newValue.startsWith('http')) {
       return;
     }
-
-    setIsRejected(false);
-    updateValue(value);
+    updateValue(newValue);
   };
 
   const openInNewTab = () => {
@@ -63,42 +36,22 @@ function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: Edit
 
   if (!initialValue) {
     return (
-      <>
-        <Input
-          variant='ghosted'
-          className={style.imageInput}
-          fluid
-          placeholder='Paste image URL'
-          data-invalid={isRejected || undefined}
-          onChange={() => setIsRejected(false)}
-          onBlur={(event) => handleUpdate(event.currentTarget.value)}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              handleUpdate(event.currentTarget.value);
-            }
-          }}
-        />
-        {isRejected && <span className={style.message}>Images are referenced by link (https://...)</span>}
-      </>
+      <Input
+        variant='ghosted'
+        className={style.imageInput}
+        fluid
+        placeholder='Paste image URL'
+        onBlur={(event) => handleUpdate(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            handleUpdate(event.currentTarget.value);
+          }
+        }}
+        defaultValue={initialValue}
+      />
     );
   }
 
-  /**
-   * The cuesheet is virtualised: rows are unmounted once they leave the viewport.
-   * When the row comes back, we reserve the space the image took
-   * so that the table does not shift while the browser makes it available.
-   * The reservation is given in CSS so that it follows the column being resized,
-   * the same way the image itself does once it is shown.
-   */
-  const knownDimensions = getRememberedDimensions(initialValue);
-  const isLoaded = loadedSource === initialValue;
-  const reservedSpace = knownDimensions
-    ? {
-        aspectRatio: knownDimensions.width / knownDimensions.height,
-        width: `min(100%, ${knownDimensions.width}px)`,
-      }
-    : undefined;
-
   return (
     <div className={style.imageCell}>
       {!readOnly && (
@@ -109,22 +62,7 @@ function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: Edit
           </Button>
         </div>
       )}
-      {failedSource === initialValue ? (
-        <span className={style.message}>Could not load image</span>
-      ) : (
-        <img
-          src={initialValue}
-          alt={fieldLabel}
-          className={style.image}
-          onLoad={(event) => {
-            rememberDimensions(initialValue, event.currentTarget);
-            setLoadedSource(initialValue);
-          }}
-          onError={() => setFailedSource(initialValue)}
-          /** until the image is available, we reserve the space it took the last time we saw it */
-          style={isLoaded ? undefined : reservedSpace}
-        />
-      )}
+      {Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />}
     </div>
   );
 }

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

@@ -175,14 +175,7 @@ function LazyImage({ row, column, table }: CuesheetCellContext) {
 
   const canWrite = column.columnDef.meta?.canWrite;
   const initialValue = event.custom[column.id];
-  return (
-    <EditableImage
-      initialValue={initialValue}
-      fieldLabel={getColumnLabel(column)}
-      updateValue={update}
-      readOnly={!canWrite}
-    />
-  );
+  return <EditableImage initialValue={initialValue} updateValue={update} readOnly={!canWrite} />;
 }
 
 function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {

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

@@ -3,14 +3,11 @@
 .error {
   padding-inline: 0.5rem;
   font-size: 1rem;
-  // rows grow when a match is shown from a note or custom field
-  min-height: 3rem;
-  padding-block: 0.35rem;
+  height: 3rem;
 
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
 }
 
 .entry[data-selected='true'] {
@@ -21,47 +18,21 @@
   color: $label-gray;
 }
 
-.more {
-  padding-inline: 0.5rem;
-  padding-block: 0.75rem;
-  font-size: calc(1rem - 2px);
-  color: $label-gray;
-  border-top: 1px solid $gray-1000;
-  text-align: center;
-}
-
 .error {
   color: $error-red;
 }
 
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.35rem;
-  padding-top: 0.75rem;
-}
-
-.filterLabel {
-  font-size: calc(1rem - 3px);
-  color: $label-gray;
-  margin-right: 0.15rem;
-}
-
 .data {
   display: grid;
   grid-template-areas:
     'index cue'
-    'index title'
-    'index match';
+    'index title';
   column-gap: 1rem;
   grid-template-rows: min-content 1fr;
-  min-width: 0;
 
   .index {
     grid-area: index;
-    // background and text colour come from getAccessibleColour, which keeps the
-    // number legible whatever colour the user gave the entry
+    background-color: var(--color, $gray-1000);
     border-radius: 2px;
     padding-block: 0.25rem;
     width: 3.5rem;
@@ -71,33 +42,14 @@
 
   .title {
     grid-area: title;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   .cue {
     grid-area: cue;
     font-size: calc(1rem - 2px);
     color: $label-gray;
+    max-height: 1em;
     min-height: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .match {
-    grid-area: match;
-    font-size: calc(1rem - 3px);
-    color: $label-gray;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .matchLabel {
-    color: $ui-white;
-    margin-right: 0.4rem;
   }
 }
 
@@ -111,14 +63,13 @@
   color: $label-gray;
 }
 
-.count {
+.filterHint {
   text-align: right;
-  white-space: nowrap;
 }
 
-.go {
-  white-space: nowrap;
-  padding-left: 1rem;
+.em {
+  color: $ui-white;
+  margin-inline: 0.25rem;
 }
 
 .hints {
@@ -147,7 +98,7 @@
     flex-direction: column;
   }
 
-  .count {
+  .filterHint {
     text-align: left;
   }
 }

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

@@ -1,12 +1,11 @@
-import { MaybeString } from 'ontime-types';
-import { KeyboardEvent, useDeferredValue, useEffect, useRef, useState } from 'react';
+import { useDebouncedCallback } from '@mantine/hooks';
+import { SupportedEntry } from 'ontime-types';
+import { KeyboardEvent, useState } from 'react';
 
-import ToggleButton from '../../../common/components/buttons/ToggleButton';
 import Input from '../../../common/components/input/input/Input';
 import Kbd from '../../../common/components/kbd/Kbd';
 import Modal from '../../../common/components/modal/Modal';
-import { getAccessibleColour } from '../../../common/utils/styleUtils';
-import useFinder, { FinderResult } from './useFinder';
+import useFinder from './useFinder';
 
 import style from './Finder.module.scss';
 
@@ -16,76 +15,46 @@ interface FinderProps {
 }
 
 export default function Finder({ isOpen, onClose }: FinderProps) {
-  const [search, setSearch] = useState('');
-  const [filter, setFilter] = useState<MaybeString>(null);
-  const [selectedId, setSelectedId] = useState<MaybeString>(null);
+  const { find, select, results, error } = useFinder();
+  const [selected, setSelected] = useState(0);
 
-  /**
-   * Keeps typing responsive while the list re-renders.
-   * The search itself is cheap, rendering the results is what costs.
-   */
-  const deferredSearch = useDeferredValue(search);
-  const { select, results, error, total, filters, appliedFilter } = useFinder(deferredSearch, filter);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const activeRef = useRef<HTMLLIElement>(null);
-
-  /**
-   * We track the selection by ID so that it survives the result list changing under us:
-   * an entry that no longer exists falls back to the first result instead of dangling past the end
-   */
-  const activeIndex = Math.max(
-    0,
-    results.findIndex((entry) => entry.id === selectedId),
-  );
-  const activeEntry = results.at(activeIndex);
-
-  /** keep the highlighted entry in view while navigating with the keyboard */
-  useEffect(() => {
-    activeRef.current?.scrollIntoView({ block: 'nearest' });
-  }, [activeEntry?.id]);
+  const debouncedFind = useDebouncedCallback(find, 100);
 
   const navigate = (event: KeyboardEvent<HTMLDivElement>) => {
-    // pressing the search shortcut again selects the query, ready to be replaced
-    if ((event.metaKey || event.ctrlKey) && event.key === 'f') {
-      event.preventDefault();
-      inputRef.current?.select();
-      return;
-    }
-
     // all operations need results
     if (results.length === 0) {
       return;
     }
     if (event.key === 'ArrowDown') {
-      setSelectedId(results[(activeIndex + 1) % results.length].id);
+      setSelected((prev) => (prev + 1) % results.length);
     }
     if (event.key === 'ArrowUp') {
-      setSelectedId(results[(activeIndex - 1 + results.length) % results.length].id);
+      setSelected((prev) => (prev - 1 + results.length) % results.length);
     }
     if (event.key === 'Enter') {
       event.preventDefault();
       event.stopPropagation();
-      submit(activeEntry);
+      submit();
     }
   };
 
-  const submit = (entry: FinderResult | undefined) => {
-    if (!entry) {
-      return;
-    }
-    select(entry);
+  const submit = () => {
+    const selectedEvent = results[selected];
+    select(selectedEvent);
     onClose();
   };
 
-  /** Scopes the search to a single field, or back to all fields when tapped again */
-  const handleFilter = (filterKey: string) => {
-    setFilter((previous) => (previous === filterKey ? null : filterKey));
-    inputRef.current?.focus();
+  const handleMouseMoveEvent = (event: React.MouseEvent<HTMLUListElement>) => {
+    const target = event.target as HTMLElement;
+    const li = target.closest('li');
+    if (li) {
+      const index = Number(li.dataset.index);
+      if (!isNaN(index)) {
+        setSelected(index);
+      }
+    }
   };
 
-  const hiddenResults = total - results.length;
-
   return (
     <Modal
       title=''
@@ -94,68 +63,35 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
       showBackdrop
       bodyElements={
         <div onKeyDown={navigate}>
-          <Input
-            ref={inputRef}
-            height='large'
-            fluid
-            autoFocus
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder='Search...'
-          />
-          <div className={style.filters} data-testid='finder-filters'>
-            <span className={style.filterLabel}>Filter by</span>
-            {filters.map((option) => (
-              <ToggleButton
-                key={option.key}
-                pressed={appliedFilter === option.key}
-                size='small'
-                onClick={() => handleFilter(option.key)}
-              >
-                {option.label}
-              </ToggleButton>
-            ))}
-          </div>
-          <ul className={style.scrollContainer}>
+          <Input height='large' fluid onChange={debouncedFind} placeholder='Search...' />
+          <ul className={style.scrollContainer} onMouseMove={handleMouseMoveEvent}>
             {error && <li className={style.error}>{error}</li>}
-            {!error && results.length === 0 && <li className={style.empty}>No results</li>}
-            {results.map((entry) => {
-              const isSelected = activeEntry?.id === entry.id;
-              // the title and cue are already on the row, a match anywhere else needs showing
-              const showMatch = entry.match !== null && entry.match.key !== 'title' && entry.match.key !== 'cue';
+            {results.length === 0 && <li className={style.empty}>No results</li>}
+            {results.length > 0 &&
+              results.map((entry, index) => {
+                const isSelected = selected === index;
+                const displayIndex = entry.type === SupportedEntry.Event ? entry.eventIndex : '-';
+                const displayCue = 'cue' in entry ? entry.cue : '';
 
-              return (
-                <li
-                  key={entry.id}
-                  ref={isSelected ? activeRef : undefined}
-                  className={style.entry}
-                  data-testid='finder-result'
-                  data-selected={isSelected}
-                  onClick={() => submit(entry)}
-                  onPointerEnter={() => setSelectedId(entry.id)}
-                >
-                  <div className={style.data}>
-                    <div className={style.index} style={getAccessibleColour(entry.colour)}>
-                      {entry.eventIndex ?? '-'}
-                    </div>
-                    <div className={style.cue}>{entry.cue}</div>
-                    <div className={style.title}>{entry.title}</div>
-                    {showMatch && (
-                      <div className={style.match} data-testid='finder-result-match'>
-                        <span className={style.matchLabel}>{entry.match?.label}</span>
-                        {entry.match?.excerpt}
+                return (
+                  <li
+                    key={entry.id}
+                    className={style.entry}
+                    data-selected={isSelected}
+                    data-index={index}
+                    onClick={submit}
+                  >
+                    <div className={style.data}>
+                      <div className={style.index} style={{ '--color': entry.colour }}>
+                        {displayIndex}
                       </div>
-                    )}
-                  </div>
-                  {isSelected && <span className={style.go}>Go ⏎</span>}
-                </li>
-              );
-            })}
-            {hiddenResults > 0 && (
-              <li className={style.more} data-testid='finder-more'>
-                {hiddenResults} more {hiddenResults === 1 ? 'result' : 'results'} — keep typing to narrow the search
-              </li>
-            )}
+                      <div className={style.cue}>{displayCue}</div>
+                      <div className={style.title}>{entry.title}</div>
+                    </div>
+                    {isSelected && <span>Go ⏎</span>}
+                  </li>
+                );
+              })}
           </ul>
         </div>
       }
@@ -176,11 +112,10 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
               Close
             </span>
           </div>
-          {total > 0 && (
-            <div className={style.count} data-testid='finder-count'>
-              {hiddenResults > 0 ? `Showing ${results.length} of ${total}` : `${total} result${total === 1 ? '' : 's'}`}
-            </div>
-          )}
+          <div className={style.filterHint}>
+            Filter by <span className={style.em}>cue</span>, <span className={style.em}>index</span>, or
+            <span className={style.em}>title</span>
+          </div>
         </div>
       }
     />

apps/client/src/views/editor/finder/useFinder.test.ts

@@ -1,162 +0,0 @@
-import { CustomFields, OntimeDelay, OntimeEvent, OntimeGroup, OntimeMilestone, SupportedEntry } from 'ontime-types';
-
-import { parseQuery, searchByIndex, searchByText } from './useFinder';
-
-function makeEvent(id: string, overrides: Partial<OntimeEvent> = {}): OntimeEvent {
-  return {
-    type: SupportedEntry.Event,
-    id,
-    cue: '',
-    title: '',
-    note: '',
-    colour: '#000000',
-    custom: {},
-    parent: null,
-    ...overrides,
-  } as OntimeEvent;
-}
-
-function makeGroup(id: string, overrides: Partial<OntimeGroup> = {}): OntimeGroup {
-  return {
-    type: SupportedEntry.Group,
-    id,
-    title: '',
-    note: '',
-    colour: '#000000',
-    custom: {},
-    ...overrides,
-  } as OntimeGroup;
-}
-
-function makeMilestone(id: string, overrides: Partial<OntimeMilestone> = {}): OntimeMilestone {
-  return {
-    type: SupportedEntry.Milestone,
-    id,
-    cue: '',
-    title: '',
-    note: '',
-    colour: '#000000',
-    custom: {},
-    parent: null,
-    ...overrides,
-  } as OntimeMilestone;
-}
-
-function makeDelay(id: string): OntimeDelay {
-  return { type: SupportedEntry.Delay, id, duration: 1000, parent: null };
-}
-
-describe('parseQuery()', () => {
-  const filters = [
-    { key: 'cue', label: 'Cue' },
-    { key: 'Camera_Notes', label: 'Camera Notes' },
-  ];
-
-  it.each([
-    ['cue 12', { filterKey: 'cue', searchString: '12' }],
-    ['cue:12', { filterKey: 'cue', searchString: '12' }],
-    ['camera_notes:wide', { filterKey: 'Camera_Notes', searchString: 'wide' }],
-  ])('parses the field prefix in %s', (searchValue, expected) => {
-    expect(parseQuery(searchValue, filters)).toStrictEqual(expected);
-  });
-
-  it('keeps an unprefixed query as a search across all fields', () => {
-    expect(parseQuery('zebrafish', filters)).toStrictEqual({ filterKey: null, searchString: 'zebrafish' });
-  });
-
-  it('recognises a filter before any search text has been entered', () => {
-    expect(parseQuery('cue', filters)).toStrictEqual({ filterKey: 'cue', searchString: '' });
-  });
-});
-
-describe('searchByText()', () => {
-  const customFields: CustomFields = {
-    Camera_Notes: { type: 'text', label: 'Camera Notes', colour: '#000000' },
-    Slide: { type: 'image', label: 'Slide', colour: '#000000' },
-  };
-
-  it('searches cue, title, note, and text custom fields in rundown order', () => {
-    const data = [
-      makeMilestone('milestone', { cue: 'needle' }),
-      makeGroup('group', { title: 'needle' }),
-      makeEvent('note', { note: 'find the needle here' }),
-      makeEvent('custom', { custom: { Camera_Notes: 'needle' } }),
-    ];
-
-    const outcome = searchByText(data, customFields, null, 'needle');
-
-    expect(outcome.results.map(({ id, match }) => ({ id, field: match?.key }))).toStrictEqual([
-      { id: 'milestone', field: 'cue' },
-      { id: 'group', field: 'title' },
-      { id: 'note', field: 'note' },
-      { id: 'custom', field: 'Camera_Notes' },
-    ]);
-    expect(outcome.total).toBe(4);
-  });
-
-  it('searches only the selected field', () => {
-    const data = [
-      makeEvent('title', { title: 'needle' }),
-      makeEvent('note', { note: 'needle' }),
-      makeEvent('custom', { custom: { Camera_Notes: 'needle' } }),
-    ];
-
-    const outcome = searchByText(data, customFields, 'note', 'needle');
-
-    expect(outcome.results.map((result) => result.id)).toStrictEqual(['note']);
-    expect(outcome.total).toBe(1);
-  });
-
-  it('reports the first matching field so the result can explain why it matched', () => {
-    const data = [makeEvent('event', { cue: 'NEEDLE', title: 'another needle' })];
-
-    const outcome = searchByText(data, customFields, null, 'needle');
-
-    expect(outcome.results[0].match).toStrictEqual({ key: 'cue', label: 'Cue', excerpt: 'NEEDLE' });
-  });
-
-  it('does not search image custom fields', () => {
-    const data = [makeEvent('image-only', { custom: { Slide: 'needle' } })];
-
-    expect(searchByText(data, customFields, null, 'needle')).toStrictEqual({ results: [], error: null, total: 0 });
-  });
-
-  it('reports the full match count while limiting rendered results', () => {
-    const data = Array.from({ length: 51 }, (_, index) => makeEvent(String(index), { title: 'needle' }));
-
-    const outcome = searchByText(data, customFields, null, 'needle');
-
-    expect(outcome.results).toHaveLength(50);
-    expect(outcome.total).toBe(51);
-  });
-});
-
-describe('searchByIndex()', () => {
-  it('counts only events while preserving the flat rundown position', () => {
-    const data = [
-      makeGroup('group'),
-      makeDelay('delay'),
-      makeEvent('first'),
-      makeMilestone('milestone'),
-      makeEvent('second'),
-    ];
-
-    const outcome = searchByIndex(data, '2');
-
-    expect(outcome.results).toHaveLength(1);
-    expect(outcome.results[0]).toMatchObject({ id: 'second', index: 4, eventIndex: 2 });
-    expect(outcome.total).toBe(1);
-  });
-
-  it.each(['0', 'not-a-number'])('rejects invalid index %s', (index) => {
-    expect(searchByIndex([makeEvent('event')], index)).toStrictEqual({
-      results: [],
-      error: 'Invalid index',
-      total: 0,
-    });
-  });
-
-  it('returns no result when the event index is beyond the rundown', () => {
-    expect(searchByIndex([makeEvent('event')], '2')).toStrictEqual({ results: [], error: null, total: 0 });
-  });
-});

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

@@ -1,259 +1,239 @@
-import {
-  CustomFields,
-  EntryId,
-  MaybeNumber,
-  MaybeString,
-  OntimeEntry,
-  OntimeEvent,
-  OntimeGroup,
-  OntimeMilestone,
-  isOntimeDelay,
-  isOntimeEvent,
-} from 'ontime-types';
-import { useCallback, useMemo } from 'react';
+import { EntryId, MaybeString, SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 
-import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { useFlatRundown } from '../../../common/hooks-query/useRundown';
 import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';
 
-/** How many results we render, the total number of matches is reported separately */
-const maxResults = 50;
-/** Notes can hold a whole script, we only show enough to explain the match */
-const excerptPadding = 40;
+const maxResults = 12;
 
-const indexFilter = 'index';
-
-/** Everything except delays, which carry no text to search */
-type SearchableEntry = OntimeEvent | OntimeGroup | OntimeMilestone;
-
-type FinderFilter = { key: string; label: string };
-
-/**
- * Offered to the user as filter badges. Index is a positional lookup rather than a
- * text field, so it is handled separately from the fields a search runs over.
- */
-const staticFilters: FinderFilter[] = [
-  { key: indexFilter, label: 'Index' },
-  { key: 'cue', label: 'Cue' },
-  { key: 'title', label: 'Title' },
-  { key: 'note', label: 'Note' },
-];
-
-/** Why an entry matched, so the UI can show the user */
-type FinderMatch = { key: string; label: string; excerpt: string };
-
-export type FinderResult = {
+type FilterableGroup = {
+  type: SupportedEntry.Group;
   id: EntryId;
-  /** position in the flat rundown, which is how the rundown reveals an entry */
   index: number;
-  /** 1-based position among events, null for groups and milestones */
-  eventIndex: MaybeNumber;
   title: string;
-  /** groups have no cue */
+  colour: string;
+};
+
+type FilterableEvent = {
+  type: SupportedEntry.Event;
+  id: EntryId;
+  index: number;
+  eventIndex: number;
+  title: string;
   cue: string;
   colour: string;
   parent: MaybeString;
-  /** absent when the entry was found by index rather than by matching text */
-  match: FinderMatch | null;
 };
 
-type SearchOutcome = { results: FinderResult[]; error: MaybeString; total: number };
+type FilterableMilestone = {
+  type: SupportedEntry.Milestone;
+  id: EntryId;
+  index: number;
+  title: string;
+  cue: string;
+  colour: string;
+  parent: MaybeString;
+};
 
-const noResults: SearchOutcome = { results: [], error: null, total: 0 };
+type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;
 
-/** Groups are the only searchable entry with neither a cue nor a parent */
-function toResult(entry: SearchableEntry, index: number, eventIndex: MaybeNumber, match: FinderMatch | null) {
-  return {
-    id: entry.id,
-    index,
-    eventIndex,
-    title: entry.title,
-    cue: 'cue' in entry ? entry.cue : '',
-    colour: entry.colour,
-    parent: 'parent' in entry ? entry.parent : null,
-    match,
-  } satisfies FinderResult;
-}
-
-/** Shows enough of a long value for the user to see why it matched */
-function makeExcerpt(value: string, matchIndex: number, searchLength: number): string {
-  const start = Math.max(0, matchIndex - excerptPadding);
-  const end = Math.min(value.length, matchIndex + searchLength + excerptPadding);
-  return `${start > 0 ? '…' : ''}${value.slice(start, end)}${end < value.length ? '…' : ''}`;
-}
-
-/**
- * The first field of an entry to contain the search string, if any.
- * Fields are tried in the order we prefer to report a match.
- */
-function findMatch(
-  entry: SearchableEntry,
-  customFields: CustomFields,
-  filterKey: MaybeString,
-  searchString: string,
-): FinderMatch | null {
-  function check(key: string, label: string, value: string): FinderMatch | null {
-    if (!value || (filterKey !== null && key !== filterKey)) {
-      return null;
-    }
-    const matchIndex = value.toLowerCase().indexOf(searchString);
-    if (matchIndex === -1) {
-      return null;
-    }
-    return { key, label, excerpt: makeExcerpt(value, matchIndex, searchString.length) };
-  }
-
-  // groups have no cue, the rest is common to every searchable entry
-  const fromCue = 'cue' in entry ? check('cue', 'Cue', entry.cue) : null;
-  const match = fromCue ?? check('title', 'Title', entry.title) ?? check('note', 'Note', entry.note);
-  if (match !== null) {
-    return match;
-  }
-
-  // custom fields are named by the project, so these can only be reached generically
-  for (const [key, value] of Object.entries(entry.custom)) {
-    const definition = customFields[key];
-    if (definition?.type !== 'text') {
-      continue;
-    }
-    const custom = check(key, definition.label || key, value);
-    if (custom) return custom;
-  }
-
-  return null;
-}
-
-/**
- * Splits the raw search value into an optional field filter and the text to look for.
- * Both `cue 12` and `cue:12` are accepted so that typing agrees with the filter badges.
- */
-export function parseQuery(searchValue: string, filters: FinderFilter[]) {
-  for (const filter of filters) {
-    // the search value is already lowercased, custom field keys are not
-    const prefix = filter.key.toLowerCase();
-    if (searchValue === prefix) {
-      return { filterKey: filter.key, searchString: '' };
-    }
-    if (searchValue.startsWith(`${prefix} `) || searchValue.startsWith(`${prefix}:`)) {
-      return { filterKey: filter.key, searchString: searchValue.slice(prefix.length + 1).trim() };
-    }
-  }
-  return { filterKey: null, searchString: searchValue };
-}
-
-/** Finds the single event at a 1-based position in the rundown */
-export function searchByIndex(data: OntimeEntry[], indexString: string): SearchOutcome {
-  const target = Number(indexString);
-  if (isNaN(target) || target < 1) {
-    return { ...noResults, error: 'Invalid index' };
-  }
-
-  let eventIndex = 0;
-  for (let i = 0; i < data.length; i++) {
-    const entry = data[i];
-    if (!isOntimeEvent(entry)) {
-      continue;
-    }
-    eventIndex++;
-    if (eventIndex === target) {
-      return { results: [toResult(entry, i, eventIndex, null)], error: null, total: 1 };
-    }
-  }
-
-  return noResults;
-}
-
-/**
- * Matches entries on a single field when one is selected, otherwise on every text field.
- * Results keep rundown order, which keeps them predictable during a show.
- */
-export function searchByText(
-  data: OntimeEntry[],
-  customFields: CustomFields,
-  filterKey: MaybeString,
-  searchString: string,
-): SearchOutcome {
-  const results: FinderResult[] = [];
-  let total = 0;
-  // indexes exposed to the UI are 1-based
-  let eventIndex = 0;
-
-  for (let i = 0; i < data.length; i++) {
-    const entry = data[i];
-    if (isOntimeDelay(entry)) {
-      continue;
-    }
-    const isEvent = isOntimeEvent(entry);
-    if (isEvent) {
-      eventIndex++;
-    }
-
-    const match = findMatch(entry, customFields, filterKey, searchString);
-    if (match === null) {
-      continue;
-    }
-
-    total++;
-    if (results.length < maxResults) {
-      results.push(toResult(entry, i, isEvent ? eventIndex : null, match));
-    }
-  }
-
-  return { results, error: null, total };
-}
-
-/**
- * @param searchValue - the text the user is looking for
- * @param activeFilter - a field selected from the filter badges, if any
- */
-export default function useFinder(searchValue: string, activeFilter: MaybeString) {
+export default function useFinder() {
   const { data, rundownId } = useFlatRundown();
-  const { data: customFields } = useCustomFields();
+  const [results, setResults] = useState<FilterableEntry[]>([]);
+  const [error, setError] = useState<MaybeString>(null);
+  const lastSearchString = useRef('');
 
   const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
 
-  /** The filters offered to the user: the fixed fields plus whatever the project defines */
-  const filters = useMemo<FinderFilter[]>(() => {
-    const customFilters = Object.entries(customFields)
-      .filter(([_key, field]) => field.type === 'text')
-      .map(([key, field]) => ({ key, label: field.label || key }));
-    return [...staticFilters, ...customFilters];
-  }, [customFields]);
+  /** Filters the rundown to a given evaluation */
+  const find = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (!data || data.length === 0) {
+        setError('No data');
+        return;
+      }
+      setError(null);
 
-  const { results, error, total, appliedFilter } = useMemo(() => {
-    if (data.length === 0) {
-      return { ...noResults, error: 'No data', appliedFilter: activeFilter };
-    }
+      if (event.target.value === '') {
+        setResults([]);
+        return;
+      }
 
-    const normalised = searchValue.trim().toLowerCase();
-    if (normalised === '') {
-      return { ...noResults, appliedFilter: activeFilter };
-    }
+      const searchValue = event.target.value.toLowerCase();
+      lastSearchString.current = searchValue;
 
-    /**
-     * If a badge is selected it scopes the search; otherwise, keyword prefixes in the input
-     * (e.g. "cue:" / "title:") are parsed and the matching badge is highlighted.
-     */
-    const { filterKey, searchString } = activeFilter
-      ? { filterKey: activeFilter, searchString: normalised }
-      : parseQuery(normalised, filters);
+      if (searchValue.startsWith('index ')) {
+        const searchString = searchValue.slice('index '.length).trim();
+        const { results, error } = searchByIndex(searchString);
+        setResults(results);
+        setError(error);
+        return;
+      }
 
-    if (filterKey === indexFilter) {
-      return { ...searchByIndex(data, searchString), appliedFilter: filterKey };
-    }
-    if (searchString === '') {
-      // a filter is selected, but there is nothing to match on yet
-      return { ...noResults, appliedFilter: filterKey };
-    }
-    return { ...searchByText(data, customFields, filterKey, searchString), appliedFilter: filterKey };
-  }, [data, customFields, filters, searchValue, activeFilter]);
+      if (searchValue.startsWith('cue ')) {
+        const searchString = searchValue.slice('cue '.length).trim();
+        const { results, error } = searchByCue(searchString);
+        setResults(results);
+        setError(error);
+        return;
+      }
+
+      const searchString = searchValue.startsWith('title ') ? searchValue.slice('title '.length).trim() : searchValue;
+      const { results, error } = searchByTitle(searchString);
+      setResults(results);
+      setError(error);
+
+      /** Returns a single item with a matching index */
+      function searchByIndex(searchString: string) {
+        const searchIndex = Number(searchString);
+        if (isNaN(searchIndex) || searchIndex < 1) {
+          return { results: [], error: 'Invalid index' };
+        }
+
+        if (searchIndex > data.length) {
+          return { results: [], error: null };
+        }
+
+        // indexes exposed to the UI are 1-based
+        let eventIndex = 1;
+        const results: FilterableEvent[] = [];
+        for (let i = 0; i < data.length; i++) {
+          const event = data[i];
+          if (isOntimeEvent(event)) {
+            if (eventIndex === searchIndex) {
+              results.push({
+                type: SupportedEntry.Event,
+                id: event.id,
+                index: i,
+                eventIndex,
+                title: event.title,
+                cue: event.cue,
+                colour: event.colour,
+                parent: event.parent,
+              } satisfies FilterableEvent);
+              break;
+            }
+            eventIndex++;
+          }
+        }
+
+        return { results, error: null };
+      }
+
+      /** Returns maxResults of OntimeEvents that match the cue field */
+      function searchByCue(searchString: string) {
+        // indexes exposed to the UI are 1-based
+        let eventIndex = 1;
+        // limit amount of results we show
+        let remaining = maxResults;
+        const results: FilterableEvent[] = [];
+
+        for (let i = 0; i < data.length; i++) {
+          if (remaining <= 0) {
+            break;
+          }
+          const event = data[i];
+          if (isOntimeEvent(event)) {
+            if (event.cue.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Event,
+                id: event.id,
+                index: i,
+                eventIndex,
+                title: event.title,
+                cue: event.cue,
+                colour: event.colour,
+                parent: event.parent,
+              } satisfies FilterableEvent);
+            }
+            eventIndex++;
+          }
+        }
+        return { results, error: null };
+      }
+
+      /** Returns maxResults of OntimeEvents that match the title field*/
+      function searchByTitle(searchString: string) {
+        // indexes exposed to the UI are 1-based
+        let eventIndex = 1;
+        // limit amount of results we show
+        let remaining = maxResults;
+        const results: FilterableEntry[] = [];
+
+        for (let i = 0; i < data.length; i++) {
+          if (remaining <= 0) {
+            break;
+          }
+
+          const entry = data[i];
+          if (isOntimeEvent(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Event,
+                id: entry.id,
+                index: i,
+                eventIndex,
+                title: entry.title,
+                cue: entry.cue,
+                colour: entry.colour,
+                parent: entry.parent,
+              } satisfies FilterableEvent);
+            }
+            eventIndex++;
+          } else if (isOntimeGroup(entry)) {
+            if (entry.title.toLowerCase().includes(searchString)) {
+              remaining--;
+              results.push({
+                type: SupportedEntry.Group,
+                id: entry.id,
+                index: i,
+                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 };
+      }
+    },
+    [data],
+  );
 
   const select = useCallback(
-    (result: FinderResult) => {
-      selectAndRevealEntry({ id: result.id, index: result.index, parent: result.parent });
+    (selectedEvent: FilterableEntry) => {
+      selectAndRevealEntry({
+        id: selectedEvent.id,
+        index: selectedEvent.index,
+        parent: 'parent' in selectedEvent ? selectedEvent.parent : null,
+      });
     },
     [selectAndRevealEntry],
   );
 
-  return { select, results, error, total, filters, appliedFilter };
+  /** clear results when source data changes */
+  useEffect(() => {
+    setResults([]);
+    setError(null);
+    // fake a submit event to re-run the search
+    if (lastSearchString.current) {
+      find({ target: { value: lastSearchString.current } } as ChangeEvent<HTMLInputElement>);
+    }
+  }, [data, find]);
+
+  return { find, select, results, error };
 }

apps/client/src/views/studio/StudioTimers.tsx

@@ -1,7 +1,8 @@
 import { Playback, TimerPhase, ViewSettings } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
-import { useAuxTimersTime, useStudioTimersSocket } from '../../common/hooks/useSocket';
+import { useAuxTimersName, useAuxTimersTime, useStudioTimersSocket } from '../../common/hooks/useSocket';
+import { getAuxTimerLabel } from '../../common/utils/auxTimerUtils';
 import { getOffsetState } from '../../common/utils/offset';
 import { cx } from '../../common/utils/styleUtils';
 import { useTranslation } from '../../translation/TranslationProvider';
@@ -121,22 +122,23 @@ export default function StudioTimers({ viewSettings }: StudioTimersProps) {
 
 function StudioTimersAux() {
   const auxTimer = useAuxTimersTime();
+  const auxName = useAuxTimersName();
 
   return (
     <div className='card' id='card-aux'>
       <div className='card__row'>
         <div>
-          <div className='label'>Aux 1</div>
+          <div className='label'>{getAuxTimerLabel(auxName.aux1, 'Aux 1')}</div>
           <div className='extra'>{millisToString(auxTimer.aux1)}</div>
         </div>
 
         <div>
-          <div className='label center'>Aux 2</div>
+          <div className='label center'>{getAuxTimerLabel(auxName.aux2, 'Aux 2')}</div>
           <div className='extra center'>{millisToString(auxTimer.aux2)}</div>
         </div>
 
         <div>
-          <div className='label right'>Aux 3</div>
+          <div className='label right'>{getAuxTimerLabel(auxName.aux3, 'Aux 3')}</div>
           <div className='extra right'>{millisToString(auxTimer.aux3)}</div>
         </div>
       </div>

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

@@ -195,24 +195,6 @@
     font-weight: 600;
   }
 
-  .sound-prompt {
-    position: absolute;
-    bottom: $view-block-padding;
-    left: $view-inline-padding;
-    padding: 0.5em 0.75em;
-    border-radius: $element-border-radius;
-    background-color: $viewer-card-bg-color;
-    color: $viewer-secondary-color;
-    font-size: $timer-label-size;
-    text-transform: uppercase;
-    pointer-events: none;
-    transition: opacity $viewer-transition-time;
-
-    &--hidden {
-      opacity: 0;
-    }
-  }
-
   /* =================== LOGO ===================*/
   .logo {
     position: absolute;

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

@@ -8,7 +8,6 @@ import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
-import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import { useTimerSocket } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { cx } from '../../common/utils/styleUtils';
@@ -31,7 +30,6 @@ import {
   getTotalTime,
 } from './timer.utils';
 import { TimerData, useTimerData } from './useTimerData';
-import { useTimerSound } from './useTimerSound';
 
 import './Timer.scss';
 
@@ -68,7 +66,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
     freezeOvertime,
     freezeMessage,
     hidePhase,
-    endSound,
     font,
     keyColour,
     timerColour,
@@ -78,8 +75,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
   const { getLocalizedString } = useTranslation();
   const localisedMinutes = getLocalizedString('common.minutes');
 
-  const showSoundPrompt = useTimerSound(time.phase, endSound);
-
   // gather modifiers
   const viewTimerType = timerType ?? timerTypeNow;
   const showOverlay = getShowMessage(message.timer);
@@ -161,8 +156,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
 
       <ViewParamsEditor target={OntimeView.Timer} viewOptions={timerOptions} />
 
-      {showSoundPrompt && <SoundPermissionPrompt />}
-
       <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
 
       {!hideMessage && (
@@ -234,13 +227,3 @@ function TimerAutoTickingClock({ clockFormat }: { clockFormat: MaybeString }) {
     </div>
   );
 }
-
-function SoundPermissionPrompt() {
-  const isUserActive = useFadeOutOnInactivity(true);
-
-  return (
-    <div className={cx(['sound-prompt', !isUserActive && 'sound-prompt--hidden'])} aria-live='polite'>
-      Interact with the page (click/tap or press any key) to enable sound
-    </div>
-  );
-}

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

@@ -1,34 +0,0 @@
-import { TimerPhase } from 'ontime-types';
-
-import { shouldPlayEndSound } from '../timer.utils';
-
-describe('shouldPlayEndSound()', () => {
-  test.each([TimerPhase.Default, TimerPhase.Warning, TimerPhase.Danger])(
-    'sounds when a running timer goes into overtime from %s',
-    (previousPhase) => {
-      expect(shouldPlayEndSound(previousPhase, TimerPhase.Overtime)).toBe(true);
-    },
-  );
-
-  it('stays silent on the first phase we see, a client could be joining mid-overtime', () => {
-    expect(shouldPlayEndSound(null, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('stays silent when the phase was reset, a reload during overtime starts from none', () => {
-    expect(shouldPlayEndSound(TimerPhase.None, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('stays silent for a roll timer waiting to start', () => {
-    expect(shouldPlayEndSound(TimerPhase.Pending, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('sounds once, not on every update while in overtime', () => {
-    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('stays silent on phases which are not the end of the timer', () => {
-    expect(shouldPlayEndSound(TimerPhase.Default, TimerPhase.Warning)).toBe(false);
-    expect(shouldPlayEndSound(TimerPhase.Warning, TimerPhase.Danger)).toBe(false);
-    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.None)).toBe(false);
-  });
-});

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

@@ -16,7 +16,6 @@ import { ViewOption } from '../../common/components/view-params-editor/viewParam
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean, makeColourString } from '../common/viewUtils';
-import { endSoundOptions, isEndSound, type EndSound } from './timer.sound';
 
 // manually match the properties of TimerType excluding the None
 const timerDisplayOptions: SelectOption[] = [
@@ -77,15 +76,6 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           type: 'boolean',
           defaultValue: false,
         },
-        {
-          id: 'endSound',
-          title: 'Play sound on timer end',
-          description:
-            'Plays a sound in this screen when the timer reaches zero. The screen must be interacted with once before it can play',
-          type: 'option',
-          values: endSoundOptions,
-          defaultValue: 'none',
-        },
       ],
     },
     {
@@ -203,7 +193,6 @@ type TimerOptions = {
   freezeOvertime: boolean;
   freezeMessage: string;
   hidePhase: boolean;
-  endSound: EndSound;
   font?: string;
   keyColour?: string;
   timerColour?: string;
@@ -219,7 +208,6 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
 
   // Get timerType from either source
   const timerType = validateTimerType(getValue('timerType'), TimerType.None);
-  const endSoundValue = getValue('endSound');
 
   return {
     hideClock: isStringBoolean(getValue('hideClock')),
@@ -239,7 +227,6 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
     freezeOvertime: isStringBoolean(getValue('freezeOvertime')),
     freezeMessage: getValue('freezeMessage') ?? '',
     hidePhase: isStringBoolean(getValue('hidePhase')),
-    endSound: isEndSound(endSoundValue) ? endSoundValue : 'none',
 
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),

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

@@ -1,20 +0,0 @@
-import arpeggio from '../../assets/sounds/arpeggio.wav';
-import bell from '../../assets/sounds/bell.wav';
-import chime from '../../assets/sounds/chime.wav';
-import type { SelectOption } from '../../common/components/select/Select';
-
-// synthesised tones bundled with the app, no external source or licence to track
-export const endSoundSources = { chime, bell, arpeggio } as const;
-
-export type EndSound = 'none' | keyof typeof endSoundSources;
-
-export const endSoundOptions: SelectOption[] = [
-  { value: 'none', label: 'None' },
-  { value: 'chime', label: 'Chime' },
-  { value: 'bell', label: 'Bell' },
-  { value: 'arpeggio', label: 'Arpeggio' },
-];
-
-export function isEndSound(value: string | null): value is EndSound {
-  return value === 'none' || value === 'chime' || value === 'bell' || value === 'arpeggio';
-}

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

@@ -189,18 +189,3 @@ export function getCardData(
     nextSecondary,
   };
 }
-
-/**
- * Whether the end of timer sound should play for a given phase transition
- * We only sound the transition into overtime from a phase that was already counting,
- * which keeps a client that connects or reloads mid-overtime silent
- */
-export function shouldPlayEndSound(previousPhase: TimerPhase | null, phase: TimerPhase): boolean {
-  if (phase !== TimerPhase.Overtime) {
-    return false;
-  }
-
-  return (
-    previousPhase === TimerPhase.Default || previousPhase === TimerPhase.Warning || previousPhase === TimerPhase.Danger
-  );
-}

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

@@ -1,99 +0,0 @@
-import { TimerPhase } from 'ontime-types';
-import { useEffect, useRef, useState } from 'react';
-
-import { endSoundSources, type EndSound } from './timer.sound';
-import { shouldPlayEndSound } from './timer.utils';
-
-/**
- * Plays a sound when the timer reaches its end
- *
- * Browsers reject playback until the document has been interacted with, and that permission
- * is lost on every page load. Since a timer screen is typically left unattended, we prime the
- * audio element on the first interaction and let the view prompt for one if it never comes.
- * Safari grants the permission per element, so priming has to call play() on this element from
- * inside the event handler, it is not enough to know that an interaction happened.
- */
-export function useTimerSound(phase: TimerPhase, sound: EndSound): boolean {
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const previousPhaseRef = useRef<TimerPhase | null>(null);
-  const [isArmed, setIsArmed] = useState(false);
-
-  const enabled = sound !== 'none';
-
-  // Create and clean up the audio element; changing sounds requires re-arming it in Safari.
-  useEffect(() => {
-    setIsArmed(false);
-
-    if (sound === 'none') {
-      return;
-    }
-
-    const audio = new Audio(endSoundSources[sound]);
-    audioRef.current = audio;
-
-    return () => {
-      audio.pause();
-      audioRef.current = null;
-    };
-  }, [sound]);
-
-  // Listen for user interaction until muted playback succeeds and arms the selected audio element.
-  useEffect(() => {
-    if (!enabled || isArmed) {
-      return;
-    }
-
-    const controller = new AbortController();
-    const prime = () => {
-      const audio = audioRef.current;
-      if (!audio) {
-        return;
-      }
-
-      const wasMuted = audio.muted;
-      audio.muted = true;
-      audio
-        .play()
-        .then(() => {
-          if (audioRef.current !== audio) {
-            return;
-          }
-          audio.pause();
-          audio.currentTime = 0;
-          setIsArmed(true);
-        })
-        .catch(() => {
-          // playback is still blocked, a later interaction will try again
-        })
-        .finally(() => {
-          audio.muted = wasMuted;
-        });
-    };
-
-    document.addEventListener('pointerdown', prime, { capture: true, signal: controller.signal });
-    document.addEventListener('keydown', prime, { capture: true, signal: controller.signal });
-
-    return () => {
-      controller.abort();
-    };
-  }, [enabled, isArmed]);
-
-  // Track phase transitions and play only when a running timer enters overtime.
-  useEffect(() => {
-    const previousPhase = previousPhaseRef.current;
-    previousPhaseRef.current = phase;
-
-    if (!enabled || !shouldPlayEndSound(previousPhase, phase)) {
-      return;
-    }
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    audio.currentTime = 0;
-    audio.play().catch(() => {
-      // the screen has not been interacted with, the view shows a prompt for it
-    });
-  }, [enabled, phase]);
-
-  return enabled && !isArmed;
-}

apps/electron/package.json

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

apps/resolver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getontime/resolver",
-  "version": "4.13.0",
+  "version": "4.12.0",
   "type": "module",
   "repository": "https://github.com/cpvalente/ontime",
   "types": "./dist/main.d.ts",
@@ -17,7 +17,7 @@
     "parser"
   ],
   "author": "",
-  "license": "ISC",
+  "license": "AGPL-3.0-only",
   "devDependencies": {
     "ontime-types": "workspace:^4.2.1",
     "tsdown": "^0.22.4",

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "4.13.0",
+  "version": "4.12.0",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",

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

@@ -90,4 +90,14 @@ describe('test parseDatabaseModel() edge cases', () => {
     // @ts-expect-error -- we know this is wrong, testing imports outside domain
     expect(() => parseDatabaseModel('some random dataset')).toThrow();
   });
+
+  it('creates the aux timer names when importing a project file which predates the feature', () => {
+    const oldProject = structuredClone(demoDb);
+    // @ts-expect-error -- simulating a project file saved before aux timer naming existed
+    delete oldProject.settings.auxTimerNames;
+
+    const { data } = parseDatabaseModel(oldProject);
+
+    expect(data.settings.auxTimerNames).toStrictEqual(['', '', '']);
+  });
 });

apps/server/src/api-data/db/migration/db.migration.v3.ts

@@ -74,7 +74,15 @@ export function migrateSettings(jsonData: object): (Settings & { serverPort: num
     const { serverPort, editorKey, operatorKey, timeFormat, language } = structuredClone(
       jsonData.settings,
     ) as old_Settings;
-    return { version: '4.0.0', serverPort, editorKey, operatorKey, timeFormat, language };
+    return {
+      version: '4.0.0',
+      serverPort,
+      editorKey,
+      operatorKey,
+      timeFormat,
+      language,
+      auxTimerNames: ['', '', ''],
+    };
   }
 }
 

apps/server/src/api-data/db/migration/db.migration.v4.ts

@@ -1,4 +1,5 @@
 import { DatabaseModel, Settings } from 'ontime-types';
+import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { is } from '../../../utils/is.js';
 
@@ -23,6 +24,7 @@ export function migrateServerPort(jsonData: Partial<DatabaseModel>): {
   const operatorKey = settings?.operatorKey;
   const timeFormat = settings?.timeFormat;
   const language = settings?.language;
+  const auxTimerNames = sanitiseAuxTimerNames(settings?.auxTimerNames);
   const version = '4.5.0';
   db.settings = {
     version,
@@ -30,6 +32,7 @@ export function migrateServerPort(jsonData: Partial<DatabaseModel>): {
     operatorKey,
     timeFormat,
     language,
+    auxTimerNames,
     app: 'ontime',
   } as Settings;
   return { db, serverPort: settings?.serverPort };

apps/server/src/api-data/db/migration/migration.test.ts

@@ -184,6 +184,7 @@ describe('v3 to v4', () => {
       operatorKey: null,
       timeFormat: '24',
       language: 'en',
+      auxTimerNames: ['', '', ''],
     };
     const newSettings = v3.migrateSettings(oldDb);
     expect(newSettings).toEqual(expectSettings);

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

@@ -1,7 +1,5 @@
-import { deepEqual } from 'fast-equals';
 import {
   EndAction,
-  OntimeEntry,
   OntimeEvent,
   OntimeGroup,
   OntimeMilestone,
@@ -10,21 +8,13 @@ import {
   TimerType,
   Trigger,
 } from 'ontime-types';
-import {
-  MILLIS_PER_HOUR,
-  MILLIS_PER_MINUTE,
-  createDelay,
-  createEvent,
-  createGroup,
-  createMilestone,
-} from 'ontime-utils';
+import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, createEvent } from 'ontime-utils';
 import { assertType } from 'vitest';
 
 import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } from '../__mocks__/rundown.mocks.js';
 import { parseRundown } from '../rundown.parser.js';
 import {
   calculateDayOffset,
-  cloneEntryData,
   deleteById,
   doesInvalidateMetadata,
   getIntegerAndFraction,
@@ -725,68 +715,3 @@ describe('eventDurationMatchGroupTarget()', () => {
     expect(result).toStrictEqual(null);
   });
 });
-
-describe('cloneEntryData()', () => {
-  const trigger: Trigger = {
-    id: 'trigger-1',
-    title: 'Go on air',
-    trigger: TimerLifeCycle.onStart,
-    automationId: 'automation-1',
-  };
-
-  // the real factories, so these are complete entries exactly as the rundown holds them
-  const entries: [string, OntimeEntry][] = [
-    ['event', createEvent({ custom: { sponsor: 'a value' }, triggers: [trigger] }, 'cue-1') as OntimeEvent],
-    ['group', createGroup({ id: 'group-1', entries: ['a', 'b'], custom: { sponsor: 'a value' } })],
-    ['milestone', createMilestone({ id: 'milestone-1', custom: { sponsor: 'a value' } })],
-    ['delay', createDelay({ id: 'delay-1', duration: 10 })],
-  ];
-
-  /**
-   * Fails if any nested object or array in the clone is the same reference as the source,
-   * so a field added later that needs a copy of its own is caught here without the clone
-   * having to enumerate fields.
-   */
-  function expectNoSharedReferences(clone: unknown, source: unknown, path: string) {
-    if (typeof source !== 'object' || source === null) return;
-    expect(clone, `${path} is shared with the source`).not.toBe(source);
-    const cloneRecord = clone as Record<string, unknown>;
-    const sourceRecord = source as Record<string, unknown>;
-    for (const key of Object.keys(sourceRecord)) {
-      expectNoSharedReferences(cloneRecord[key], sourceRecord[key], `${path}.${key}`);
-    }
-  }
-
-  /** the two halves of the structuredClone contract: same value, no shared references */
-  it.each(entries)('clones a %s to the same value structuredClone would produce', (_type, entry) => {
-    expect(cloneEntryData(entry)).toStrictEqual(structuredClone(entry));
-  });
-
-  it.each(entries)('shares no nested object or array with the source %s', (_type, entry) => {
-    expectNoSharedReferences(cloneEntryData(entry), entry, 'entry');
-  });
-
-  /**
-   * Regression: normalising an absent container to an empty one makes deepEqual report a
-   * change on every comparison, which would have the runtime re-broadcast and re-save the
-   * restore point on every tick. See PR #2178.
-   */
-  it.each([
-    ['event', makeOntimeEvent({ id: 'partial' })],
-    ['group', makeOntimeGroup({ id: 'partial', entries: undefined })],
-  ])('gives a partial %s exactly the keys structuredClone would, so it stays deep-equal', (_type, entry) => {
-    const clone = cloneEntryData(entry);
-    // asserting on keys, not values: `toBeUndefined()` cannot tell an absent key from an own
-    // key holding undefined, and it is key presence that decides the deepEqual below
-    expect(Object.keys(clone).sort()).toEqual(Object.keys(structuredClone(entry)).sort());
-    // this is the comparison runtime.service.ts uses to decide whether to re-broadcast an
-    // entry; if the clone gains a key, every tick looks like a change
-    expect(deepEqual(clone, entry)).toBe(true);
-  });
-
-  it('throws on an entry type it does not know how to clone', () => {
-    expect(() => cloneEntryData({ id: 'x', type: 'unknown' } as unknown as OntimeEvent)).toThrow(
-      'Unsupported entry type for cloning',
-    );
-  });
-});

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

@@ -27,7 +27,6 @@ import {
   isPlayableEvent,
 } from 'ontime-types';
 import { addToRundown, createGroup, customFieldLabelToKey, getInsertAfterId, insertAtIndex } from 'ontime-utils';
-import type { DeepReadonly } from 'ts-essentials';
 
 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
 import { consoleError } from '../../utils/console.js';
@@ -35,7 +34,6 @@ import { ProcessedRundownMetadata, makeRundownMetadata } from './rundown.parser.
 import type { RundownMetadata } from './rundown.types.js';
 import {
   applyPatchToEntry,
-  cloneRundown,
   cloneSimpleRundownEntry,
   deleteById,
   doesInvalidateMetadata,
@@ -45,14 +43,9 @@ import {
 } from './rundown.utils.js';
 
 /**
- * The currently loaded rundown in cache.
- *
- * Reassigned - never mutated in place - when a different rundown is loaded: the persistence
- * layer stores this object by reference, so repurposing it for another rundown would rewrite
- * the previously loaded rundown's stored record. Mutating it in place while it represents the
- * same rundown (ie. from commit) is intended, and is what keeps the stored record current.
+ * The currently loaded rundown in cache
  */
-let cachedRundown: Rundown = {
+const cachedRundown: Rundown = {
   id: '',
   title: '',
   order: [],
@@ -86,16 +79,9 @@ export const getRundownMetadata = (): Readonly<RundownMetadata> => rundownMetada
 export const getProjectCustomFields = (): Readonly<CustomFields> => projectCustomFields;
 export const getEntryWithId = (entryId: EntryId): OntimeEntry | undefined => cachedRundown.entries[entryId];
 
-/**
- * @param R the type callers see for `rundown` - a plain, mutable `Rundown` when the
- * transaction was opened with `mutableRundown: true`, otherwise a `DeepReadonly<Rundown>`
- * so that accidentally mutating an entry (or an order array) on a non-mutable transaction
- * - which would silently corrupt the live cache without going through commit() - is a
- * compile-time error instead of a runtime bug.
- */
-type Transaction<R> = {
+type Transaction = {
   customFields: CustomFields;
-  rundown: R;
+  rundown: Rundown;
 
   commit: (shouldProcess?: boolean) => Promise<{
     rundown: Readonly<Rundown>;
@@ -116,17 +102,11 @@ type TransactionOptions = {
   rundownId?: string;
 };
 
-export function createTransaction(options: TransactionOptions & { mutableRundown: true }): Transaction<Rundown>;
-export function createTransaction(
-  options: TransactionOptions & { mutableRundown?: false },
-): Transaction<DeepReadonly<Rundown>>;
-export function createTransaction(
-  options: TransactionOptions,
-): Transaction<Rundown> | Transaction<DeepReadonly<Rundown>> {
+export function createTransaction(options: TransactionOptions): Transaction {
   const targetId = options.rundownId ?? cachedRundown.id;
   const isLoaded = targetId === cachedRundown.id;
   const sourceRundown: Rundown = isLoaded ? cachedRundown : (getDataProvider().getRundown(targetId) as Rundown);
-  const rundown = options.mutableRundown ? cloneRundown(sourceRundown) : sourceRundown;
+  const rundown = options.mutableRundown ? structuredClone(sourceRundown) : sourceRundown;
   const customFields = options.mutableCustomFields ? structuredClone(projectCustomFields) : projectCustomFields;
 
   /**
@@ -727,25 +707,21 @@ export const customFieldMutation = {
  * Expose function to add an initial rundown to the system
  */
 export function init(initialRundown: Readonly<Rundown>, initialCustomFields: Readonly<CustomFields>) {
-  const rundown = cloneRundown(initialRundown);
+  const rundown = structuredClone(initialRundown);
   const customFields = structuredClone(initialCustomFields);
   const processedData = processRundown(rundown, customFields, { mutate: true });
 
+  // update the cache values
+  cachedRundown.id = rundown.id;
+  cachedRundown.title = rundown.title;
   projectCustomFields = customFields;
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we are not interested in the iteration data
   const { previousEvent, latestEvent, previousEntry, entries, order, ...metadata } = processedData;
-
-  // a fresh object, so that the record already stored for a previously loaded rundown keeps
-  // pointing at that rundown's data - see the note on cachedRundown
-  cachedRundown = {
-    id: rundown.id,
-    title: rundown.title,
-    entries,
-    order,
-    flatOrder: metadata.flatEntryOrder,
-    revision: rundown.revision,
-  };
+  cachedRundown.entries = entries;
+  cachedRundown.order = order;
+  cachedRundown.flatOrder = metadata.flatEntryOrder;
+  cachedRundown.revision = rundown.revision;
   rundownMetadata = metadata;
 
   // defer writing to the database

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

@@ -33,7 +33,7 @@ import {
 import { makeNewRundown } from '../../models/dataModel.js';
 import type { ErrorEmitter } from '../../utils/parserUtils.js';
 import { RundownMetadata } from './rundown.types.js';
-import { calculateDayOffset, cleanupCustomFields, cloneEntryData } from './rundown.utils.js';
+import { calculateDayOffset, cleanupCustomFields } from './rundown.utils.js';
 
 /**
  * Parse a rundowns object along with the project custom fields
@@ -234,7 +234,7 @@ export function makeRundownMetadata(customFields: CustomFields, options?: { muta
   };
 
   function process<T extends OntimeEntry>(entry: T, childOfGroup: EntryId | null): T {
-    return processEntry(rundownMeta, customFields, mutate ? entry : cloneEntryData(entry), childOfGroup);
+    return processEntry(rundownMeta, customFields, mutate ? entry : structuredClone(entry), childOfGroup);
   }
 
   function getMetadata(): ProcessedRundownMetadata {

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

@@ -39,7 +39,6 @@ import {
 import { parseRundown } from './rundown.parser.js';
 import type { RundownMetadata } from './rundown.types.js';
 import {
-  cloneRundown,
   generateEvent,
   getFirstInsertId,
   getIntegerAndFraction,
@@ -627,7 +626,7 @@ export async function editCustomField(
     // ... reassign references in the background rundowns
     for (const rundownId of Object.keys(projectRundowns)) {
       if (rundownId !== rundown.id) {
-        const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
+        const backgroundRundown = structuredClone(projectRundowns[rundownId]);
         customFieldMutation.renameUsages(backgroundRundown, oldKey, newKey);
         await updateBackgroundRundown(rundownId, backgroundRundown);
       }
@@ -667,7 +666,7 @@ export async function deleteCustomField(key: CustomFieldKey, projectRundowns: Pr
   // remove references in the background rundowns
   for (const rundownId of Object.keys(projectRundowns)) {
     if (rundownId !== rundown.id) {
-      const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
+      const backgroundRundown = structuredClone(projectRundowns[rundownId]);
       customFieldMutation.removeUsages(backgroundRundown, key);
       await updateBackgroundRundown(rundownId, backgroundRundown);
     }
@@ -847,7 +846,7 @@ export async function duplicateExistingRundown(id: string) {
   const dataProvider = getDataProvider();
   const rundown = dataProvider.getRundown(id);
 
-  const duplicatedRundown: Rundown = cloneRundown(rundown);
+  const duplicatedRundown: Rundown = structuredClone(rundown);
   duplicatedRundown.id = generateId();
   duplicatedRundown.title = `Copy of ${rundown.title}`;
   duplicatedRundown.revision = 0;

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

@@ -329,7 +329,7 @@ export function mergeRundownPreservingFields(
     const structure = isOntimeGroup(incomingEntry)
       ? { entries: incomingEntry.entries }
       : { parent: incomingEntry.parent };
-    entries[id] = cloneEntryData({ ...merged, ...structure });
+    entries[id] = structuredClone({ ...merged, ...structure });
   }
 
   return {
@@ -499,61 +499,6 @@ export function cloneSimpleRundownEntry(entry: OntimeEntry, newId: EntryId): Ont
   throw new Error(`Unsupported entry type for cloning: ${entry}`);
 }
 
-/**
- * Fast, shape-aware clone of a single entry, preserving its identity (id, revision, etc).
- * Drop-in replacement for `structuredClone(entry)`
- */
-export function cloneEntryData<T extends OntimeEntry>(entry: T): T {
-  switch (entry.type) {
-    case SupportedEntry.Event: {
-      const clone: OntimeEvent = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      if (clone.triggers) clone.triggers = clone.triggers.map((trigger) => ({ ...trigger }));
-      return clone as T;
-    }
-    case SupportedEntry.Group: {
-      const clone: OntimeGroup = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      if (clone.entries) clone.entries = clone.entries.slice();
-      return clone as T;
-    }
-    case SupportedEntry.Milestone: {
-      const clone: OntimeMilestone = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      return clone as T;
-    }
-    case SupportedEntry.Delay:
-      return { ...entry } as T;
-    default: {
-      // exhaustiveness guard: a new member of `SupportedEntry` is named in the error here
-      const unhandled: never = entry;
-      throw new Error(`Unsupported entry type for cloning: ${(unhandled as OntimeEntry).type}`);
-    }
-  }
-}
-
-/**
- * Fast, shape-aware clone of a whole rundown.
- * Drop-in replacement for `structuredClone(rundown)`: every entry (and its nested
- * `custom` / `triggers` / `entries` containers) gets its own copy, so callers can mutate
- * the result freely without touching the source - same contract as structuredClone,
- * at a fraction of the cost since we skip the generic serialization algorithm.
- */
-export function cloneRundown(rundown: Readonly<Rundown>): Rundown {
-  const entries: RundownEntries = {};
-  for (const id in rundown.entries) {
-    entries[id] = cloneEntryData(rundown.entries[id]);
-  }
-  return {
-    id: rundown.id,
-    title: rundown.title,
-    revision: rundown.revision,
-    order: rundown.order.slice(),
-    flatOrder: rundown.flatOrder.slice(),
-    entries,
-  };
-}
-
 /**
  * Utility for calculating if the current events should have a day offset
  * @param current the current event under test

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

@@ -16,6 +16,36 @@ describe('parseSettings()', () => {
       operatorKey: null,
       timeFormat: '24',
       language: 'en',
+      auxTimerNames: ['', '', ''],
     });
   });
+
+  it('carries custom aux timer names through and pads to a length-3 array', () => {
+    const result = parseSettings({
+      settings: { version: '1', auxTimerNames: ['Speaker'] } as unknown as Settings,
+    });
+    expect(result.auxTimerNames).toStrictEqual(['Speaker', '', '']);
+  });
+
+  it('falls back to defaults when aux timer names are missing or malformed', () => {
+    const result = parseSettings({
+      settings: { version: '1', auxTimerNames: 'not-an-array' } as unknown as Settings,
+    });
+    expect(result.auxTimerNames).toStrictEqual(['', '', '']);
+  });
+
+  it('creates the aux timer names for project files made before the feature existed', () => {
+    const oldSettings = {
+      version: '4.5.0',
+      editorKey: null,
+      operatorKey: null,
+      timeFormat: '24',
+      language: 'en',
+    };
+
+    const result = parseSettings({ settings: oldSettings as Settings });
+
+    expect(result.auxTimerNames).toStrictEqual(['', '', '']);
+    expect(result).toMatchObject({ timeFormat: '24', language: 'en' });
+  });
 });

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

@@ -1,4 +1,5 @@
 import { DatabaseModel, Settings } from 'ontime-types';
+import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { getPartialProject } from '../../models/dataModel.js';
 
@@ -22,5 +23,7 @@ export function parseSettings(data: Partial<DatabaseModel>): Settings {
     operatorKey: data.settings.operatorKey ?? defaultSettings.operatorKey,
     timeFormat: data.settings.timeFormat ?? defaultSettings.timeFormat,
     language: data.settings.language ?? defaultSettings.language,
+    // older project files predate this property
+    auxTimerNames: sanitiseAuxTimerNames(data.settings.auxTimerNames),
   };
 }

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

@@ -9,6 +9,7 @@ import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
 import { portManager } from '../../classes/port-manager/PortManager.js';
 import * as appState from '../../services/app-state-service/AppStateService.js';
+import { auxTimerService } from '../../services/aux-timer-service/AuxTimerService.js';
 import { validateSettings, validateWelcomeDialog, validateServerPort } from './settings.validation.js';
 
 export const router: Router = express.Router();
@@ -41,6 +42,10 @@ router.post('/', validateSettings, async (req: Request, res: Response<Settings |
 
     if (!deepEqual(data, settings)) {
       await getDataProvider().setSettings(data);
+      // keep the runtime aux timers in sync so consumers get the new names live
+      if (!deepEqual(data.auxTimerNames, settings.auxTimerNames)) {
+        auxTimerService.loadNames(data.auxTimerNames);
+      }
       sendRefetch(RefetchKey.Settings);
     }
 

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

@@ -1,4 +1,5 @@
 import { body } from 'express-validator';
+import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { requestValidationFunction } from '../validation-utils/validationFunction.js';
 
@@ -27,6 +28,7 @@ export const validateSettings = [
   pinValidator('operatorKey'),
   body('timeFormat').isString().isIn(['12', '24']).withMessage('Time format can only be "12" or "24"'),
   body('language').isString().trim().notEmpty(),
+  body('auxTimerNames').isArray().withMessage('auxTimerNames must be an array').customSanitizer(sanitiseAuxTimerNames),
 
   requestValidationFunction,
 ];

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

@@ -464,8 +464,9 @@ export async function upload(sheetId: string, options: ImportMap) {
     sheetOrder.forEach((entryId, index) => {
       const isGroupEnd = entryId.startsWith('group-end-');
       const id = isGroupEnd ? entryId.split('group-end-')[1] : entryId;
-      // cellRequestFromEvent only reads the entry to build a cell request, no clone is needed
-      const entry = isGroupEnd ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup) : rundown.entries[id];
+      const entry = isGroupEnd
+        ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup)
+        : structuredClone(rundown.entries[id]);
       updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
     });
   } catch (e) {

apps/server/src/app.ts

@@ -5,6 +5,7 @@ import cookieParser from 'cookie-parser';
 import cors from 'cors';
 import express from 'express';
 import { LogOrigin, SimpleDirection, SimplePlayback, runtimeStorePlaceholder } from 'ontime-types';
+import { sanitiseAuxTimerNames } from 'ontime-utils';
 import serverTiming from 'server-timing';
 
 import { oscServer } from './adapters/OscAdapter.js';
@@ -25,6 +26,7 @@ import { bodyParser } from './middleware/bodyParser.js';
 import { compressedStatic } from './middleware/staticGZip.js';
 import { ONTIME_VERSION } from './ONTIME_VERSION.js';
 import { getShowWelcomeDialog } from './services/app-state-service/AppStateService.js';
+import { auxTimerService } from './services/aux-timer-service/AuxTimerService.js';
 import * as messageService from './services/message-service/message.service.js';
 import { initialiseProject } from './services/project-service/ProjectService.js';
 import { restoreService } from './services/restore-service/restore.service.js';
@@ -203,6 +205,7 @@ export const startServer = async (): Promise<{ message: string; serverPort: numb
    * Module initialises the services and provides initial payload for the store
    */
   const state = getState();
+  const [auxName1, auxName2, auxName3] = sanitiseAuxTimerNames(getDataProvider().getSettings().auxTimerNames);
   eventStore.init({
     clock: state.clock,
     timer: state.timer,
@@ -218,22 +221,28 @@ export const startServer = async (): Promise<{ message: string; serverPort: numb
       current: timerConfig.auxTimerDefault,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
+      name: auxName1,
     },
     auxtimer2: {
       duration: timerConfig.auxTimerDefault,
       current: timerConfig.auxTimerDefault,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
+      name: auxName2,
     },
     auxtimer3: {
       duration: timerConfig.auxTimerDefault,
       current: timerConfig.auxTimerDefault,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
+      name: auxName3,
     },
     ping: 1,
   });
 
+  // AuxTimerService owns its own SimpleTimer instances, so the store above doesn't update them
+  auxTimerService.loadNames(getDataProvider().getSettings().auxTimerNames);
+
   // initialise message service
   messageService.init(eventStore.set, eventStore.get);
 

apps/server/src/classes/data-provider/DataProvider.ts

@@ -101,16 +101,8 @@ function getCustomFields(): Readonly<CustomFields> {
   return db.data.customFields;
 }
 
-/**
- * Stores a rundown, replacing any existing entry for the same key.
- * Takes ownership of `newData` and stores it by reference - the caller must not mutate it
- * afterward. Every call site either hands over a freshly-built object it never touches again,
- * or (for the loaded rundown) the cache's own long-lived object, which is already the single
- * source of truth for that data - aliasing it here costs nothing and avoids a second full
- * deep copy of the rundown on every commit.
- */
 async function setRundown(rundownKey: string, newData: Rundown): ReadonlyPromise<ProjectRundowns> {
-  db.data.rundowns[rundownKey] = newData;
+  db.data.rundowns[rundownKey] = structuredClone(newData);
   await persist();
   return db.data.rundowns;
 }

apps/server/src/classes/data-provider/DataProvider.utils.ts

@@ -4,17 +4,12 @@ import { DatabaseModel } from 'ontime-types';
  * Merges a partial ontime project into a given ontime project
  */
 export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseModel>): DatabaseModel {
-  // rundowns are merged separately below by reference (only the top-level map is copied,
-  // same as the other properties here) - deep-cloning them here would be wasted work,
-  // since a project's rundowns are by far the largest part of this object
-  const { rundowns: existingRundowns, ...existingRest } = existing;
-  const { rundowns: newRundowns = {}, ...newDataRest } = newData;
-
-  const deepExisting = structuredClone(existingRest);
-  const deepNewData = structuredClone(newDataRest);
+  const deepExisting = structuredClone(existing);
+  const deepNewData = structuredClone(newData);
 
   // destructure each property to simplify merging not provided ie: ...{} has no effect
   const {
+    rundowns = {},
     project = {},
     settings = {},
     viewSettings = {},
@@ -24,7 +19,7 @@ export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseMode
   } = deepNewData;
 
   return {
-    rundowns: { ...existingRundowns, ...newRundowns },
+    rundowns: { ...existing.rundowns, ...rundowns },
     project: { ...deepExisting.project, ...project },
     settings: { ...deepExisting.settings, ...settings },
     viewSettings: { ...deepExisting.viewSettings, ...viewSettings },

apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts

@@ -81,6 +81,7 @@ describe('safeMerge', () => {
       editorKey: null,
       timeFormat: baseDb.settings.timeFormat,
       language: 'pt',
+      auxTimerNames: baseDb.settings.auxTimerNames,
     });
   });
 

apps/server/src/classes/simple-timer/SimpleTimer.ts

@@ -6,6 +6,7 @@ export class SimpleTimer {
     current: 0,
     playback: SimplePlayback.Stop,
     direction: SimpleDirection.CountDown,
+    name: '',
   };
   private startedAt: number | null = null;
   private pausedAt: number | null = null;
@@ -23,9 +24,16 @@ export class SimpleTimer {
       current: 0,
       playback: SimplePlayback.Stop,
       direction: SimpleDirection.CountDown,
+      // the name is a persisted configuration, independent of the timer runtime
+      name: this.state.name,
     };
   }
 
+  public setName(name: string): SimpleTimerState {
+    this.state.name = name;
+    return this.state;
+  }
+
   /**
    * Sets the duration of the timer
    * @param time - time in milliseconds

apps/server/src/classes/simple-timer/__tests__/SimpleTimer.test.ts

@@ -16,6 +16,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Stop,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
     });
@@ -27,6 +28,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Start,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
     });
@@ -38,6 +40,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime - 100,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Start,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
 
@@ -58,6 +61,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime - 1500,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Pause,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
 
@@ -83,6 +87,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Stop,
+        name: '',
       };
       expect(newState).toStrictEqual(expected);
     });
@@ -97,6 +102,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       };
 
       newState = timer.update(100);
@@ -127,6 +133,7 @@ describe('SimpleTimer count-down', () => {
         current: 1000,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.update(100);
@@ -135,6 +142,7 @@ describe('SimpleTimer count-down', () => {
         current: initialTime + 100,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.update(500);
@@ -143,6 +151,7 @@ describe('SimpleTimer count-down', () => {
         current: 1500,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.setDirection(SimpleDirection.CountDown, 600);
@@ -151,6 +160,7 @@ describe('SimpleTimer count-down', () => {
         current: 1500,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.update(700);
@@ -159,6 +169,7 @@ describe('SimpleTimer count-down', () => {
         current: 1400,
         direction: SimpleDirection.CountDown,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.setDirection(SimpleDirection.CountUp, 700);
@@ -167,6 +178,7 @@ describe('SimpleTimer count-down', () => {
         current: 1400,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
 
       newState = timer.update(800);
@@ -175,6 +187,7 @@ describe('SimpleTimer count-down', () => {
         current: 1500,
         direction: SimpleDirection.CountUp,
         playback: SimplePlayback.Start,
+        name: '',
       });
     });
 

apps/server/src/models/dataModel.ts

@@ -30,6 +30,7 @@ const dbModel: DatabaseModel = {
     operatorKey: null,
     timeFormat: '24',
     language: 'en',
+    auxTimerNames: ['', '', ''],
   },
   viewSettings: {
     overrideStyles: false,

apps/server/src/models/demoProject.ts

@@ -29,6 +29,7 @@ export const demoDb: DatabaseModel = {
     operatorKey: null,
     timeFormat: '24',
     language: 'en',
+    auxTimerNames: ['', '', ''],
   },
   viewSettings: {
     dangerColor: '#ff7300',

apps/server/src/services/aux-timer-service/AuxTimerService.ts

@@ -1,4 +1,5 @@
 import { RuntimeStore, SimpleDirection, SimplePlayback } from 'ontime-types';
+import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { SimpleTimer } from '../../classes/simple-timer/SimpleTimer.js';
 import { timerConfig } from '../../setup/config.js';
@@ -24,6 +25,20 @@ export class AuxTimerService {
     this.getTime = getTime;
   }
 
+  /**
+   * Called at bootstrap and whenever the loaded project's settings change,
+   * so the running timers reflect the current project's aux timer names.
+   */
+  loadNames(names?: string[]) {
+    const [name1, name2, name3] = sanitiseAuxTimerNames(names);
+    const patch: AuxTimerStateUpdate = {
+      auxtimer1: this.aux1.setName(name1),
+      auxtimer2: this.aux2.setName(name2),
+      auxtimer3: this.aux3.setName(name3),
+    };
+    this.emit(patch);
+  }
+
   /**
    * Whether any of the aux timers are currently running
    */

apps/server/src/services/aux-timer-service/__tests__/AuxTimerService.test.ts

@@ -0,0 +1,53 @@
+import { RuntimeStore } from 'ontime-types';
+
+import { AuxTimerService } from '../AuxTimerService.js';
+
+describe('AuxTimerService', () => {
+  describe('loadNames()', () => {
+    it('applies the names to each aux timer and broadcasts them', () => {
+      const emit = vi.fn();
+      const service = new AuxTimerService(emit, () => 0);
+
+      service.loadNames(['Speaker', 'Break', 'Q&A']);
+
+      const patch = emit.mock.calls.at(-1)?.[0] as Partial<RuntimeStore>;
+      expect(patch.auxtimer1?.name).toBe('Speaker');
+      expect(patch.auxtimer2?.name).toBe('Break');
+      expect(patch.auxtimer3?.name).toBe('Q&A');
+    });
+
+    it('defaults missing names to an empty string', () => {
+      const emit = vi.fn();
+      const service = new AuxTimerService(emit, () => 0);
+
+      service.loadNames(['only-one']);
+
+      const patch = emit.mock.calls.at(-1)?.[0] as Partial<RuntimeStore>;
+      expect(patch.auxtimer1?.name).toBe('only-one');
+      expect(patch.auxtimer2?.name).toBe('');
+      expect(patch.auxtimer3?.name).toBe('');
+    });
+
+    it('handles names missing from a project file', () => {
+      const emit = vi.fn();
+      const service = new AuxTimerService(emit, () => 0);
+
+      expect(() => service.loadNames(undefined)).not.toThrow();
+
+      const patch = emit.mock.calls.at(-1)?.[0] as Partial<RuntimeStore>;
+      expect(patch.auxtimer1?.name).toBe('');
+      expect(patch.auxtimer2?.name).toBe('');
+      expect(patch.auxtimer3?.name).toBe('');
+    });
+
+    it('keeps the name on the timer through subsequent commands', () => {
+      const emit = vi.fn();
+      const service = new AuxTimerService(emit, () => 0);
+
+      service.loadNames(['Speaker', '', '']);
+      const started = service.start(1);
+
+      expect(started.name).toBe('Speaker');
+    });
+  });
+});

apps/server/src/services/project-service/ProjectService.ts

@@ -1,9 +1,10 @@
 import { copyFile } from 'fs/promises';
 import { join } from 'path';
 
-import { DatabaseModel, LogOrigin, ProjectFileListResponse } from 'ontime-types';
+import { DatabaseModel, LogOrigin, ProjectFileListResponse, RefetchKey } from 'ontime-types';
 import { getErrorMessage, getFirstRundown } from 'ontime-utils';
 
+import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
 import { parseCustomFields } from '../../api-data/custom-fields/customFields.parser.js';
 import { parseDatabaseModel } from '../../api-data/db/db.parser.js';
 import { getCurrentRundown } from '../../api-data/rundown/rundown.dao.js';
@@ -28,6 +29,7 @@ import {
   removeFileExtension,
 } from '../../utils/fileManagement.js';
 import { getLastLoaded, isLastLoadedProject, setLastLoaded } from '../app-state-service/AppStateService.js';
+import { auxTimerService } from '../aux-timer-service/AuxTimerService.js';
 import { runtimeService } from '../runtime-service/runtime.service.js';
 import {
   doesProjectExist,
@@ -88,12 +90,16 @@ async function loadProject(projectData: DatabaseModel, fileName: string, rundown
   // stop the runtime service
   runtimeService.stop();
 
+  // AuxTimerService holds its own state, independent of the loaded project, so it needs to be updated explicitly
+  auxTimerService.loadNames(projectData.settings.auxTimerNames);
+
   // load the rundown given by key otherwise load the first in the project
   const rundown =
     rundownId && rundownId in projectData.rundowns
       ? projectData.rundowns[rundownId]
       : getFirstRundown(projectData.rundowns);
 
+  // initialising the rundown with reload sends a refetch to the clients
   await initRundown(rundown, projectData.customFields, true);
 
   // persist the project selection
@@ -346,6 +352,12 @@ export async function patchCurrentProject(data: Partial<DatabaseModel>) {
   // we can pass some stuff straight to the data provider
   await getDataProvider().mergeIntoData(rest);
 
+  // AuxTimerService holds its own state, so a settings patch needs to be applied to it explicitly
+  if (rest.settings) {
+    auxTimerService.loadNames(getDataProvider().getSettings().auxTimerNames);
+    sendRefetch(RefetchKey.Settings);
+  }
+
   // the rundown depends on custom fields
   // so custom fields needs to be checked first
   if (customFields) {

apps/server/src/services/runtime-service/__tests__/runtime.utils.test.ts

@@ -1,226 +0,0 @@
-import { Offset, OffsetMode, Playback, TimerPhase, TimerState, TimerType } from 'ontime-types';
-
-import { makeOntimeEvent, makeRundown } from '../../../api-data/rundown/__mocks__/rundown.mocks.js';
-import {
-  findNextPlayableId,
-  findNextPlayableWithCue,
-  findPreviousPlayableId,
-  getEventAtIndex,
-  getShouldClockUpdate,
-  getShouldOffsetUpdate,
-  getShouldTimerUpdate,
-  isNewSecond,
-} from '../runtime.utils.js';
-
-describe('isNewSecond()', () => {
-  it('is false while the value moves within the same second', () => {
-    // count down rounds up, so both resolve to second 2
-    expect(isNewSecond(1500, 1200)).toBe(false);
-  });
-
-  it('is true once the value crosses a second boundary', () => {
-    expect(isNewSecond(1001, 1000)).toBe(true);
-  });
-
-  it('rounds according to the given direction', () => {
-    // 1200 -> ceil 2 / floor 1, 1800 -> ceil 2 / floor 1
-    expect(isNewSecond(1200, 1800, TimerType.CountDown)).toBe(false);
-    expect(isNewSecond(1200, 1800, TimerType.CountUp)).toBe(false);
-    // 1200 -> ceil 2 / floor 1, 2200 -> ceil 3 / floor 2
-    expect(isNewSecond(1200, 2200, TimerType.CountDown)).toBe(true);
-    expect(isNewSecond(1200, 2200, TimerType.CountUp)).toBe(true);
-  });
-
-  it('treats null and undefined as second zero', () => {
-    expect(isNewSecond(undefined, null)).toBe(false);
-    expect(isNewSecond(null, 0)).toBe(false);
-    expect(isNewSecond(undefined, 500)).toBe(true);
-  });
-});
-
-describe('getShouldClockUpdate()', () => {
-  it('is false within the same second and true across the boundary', () => {
-    expect(getShouldClockUpdate(1000, 1999)).toBe(false);
-    expect(getShouldClockUpdate(1000, 2000)).toBe(true);
-  });
-});
-
-describe('getShouldTimerUpdate()', () => {
-  const baseTimer: TimerState = {
-    addedTime: 0,
-    current: 10000,
-    duration: 10000,
-    elapsed: 0,
-    expectedFinish: 10000,
-    phase: TimerPhase.Default,
-    playback: Playback.Play,
-    secondaryTimer: null,
-    startedAt: 0,
-  };
-
-  it('always updates when there is no previous state', () => {
-    expect(getShouldTimerUpdate(undefined, baseTimer)).toBe(true);
-  });
-
-  it('does not update while the timer ticks within the same second', () => {
-    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, current: 9500 })).toBe(false);
-  });
-
-  it('updates when the timer crosses a second', () => {
-    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, current: 8999 })).toBe(true);
-  });
-
-  it('updates when the secondary timer crosses a second', () => {
-    const previous = { ...baseTimer, secondaryTimer: 2000 };
-    // counting down rounds up, so 1999 is still second 2
-    expect(getShouldTimerUpdate(previous, { ...previous, secondaryTimer: 1999 })).toBe(false);
-    expect(getShouldTimerUpdate(previous, { ...previous, secondaryTimer: 1000 })).toBe(true);
-  });
-
-  it.each([
-    ['addedTime', { addedTime: 1 }],
-    ['duration', { duration: 1 }],
-    ['phase', { phase: TimerPhase.Warning }],
-    ['playback', { playback: Playback.Pause }],
-    ['startedAt', { startedAt: 1 }],
-  ])('updates immediately when %s changes', (_label, patch) => {
-    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, ...patch })).toBe(true);
-  });
-
-  it.each([
-    ['elapsed', { elapsed: 1 }],
-    ['expectedFinish', { expectedFinish: 1 }],
-  ])('does not update on %s alone, since it is derived', (_label, patch) => {
-    expect(getShouldTimerUpdate(baseTimer, { ...baseTimer, ...patch })).toBe(false);
-  });
-});
-
-describe('getShouldOffsetUpdate()', () => {
-  const baseOffset: Offset = {
-    absolute: 0,
-    relative: 0,
-    mode: OffsetMode.Absolute,
-    expectedGroupEnd: null,
-    expectedRundownEnd: null,
-    expectedFlagStart: null,
-  };
-
-  it('always updates when there is no previous state', () => {
-    expect(getShouldOffsetUpdate(undefined, baseOffset, false)).toBe(true);
-  });
-
-  it('updates on a mode change even when no dependency ticked', () => {
-    expect(getShouldOffsetUpdate(baseOffset, { ...baseOffset, mode: OffsetMode.Relative }, false)).toBe(true);
-  });
-
-  it('holds back value changes until a dependency ticks', () => {
-    const next = { ...baseOffset, absolute: 1000 };
-    expect(getShouldOffsetUpdate(baseOffset, next, false)).toBe(false);
-    expect(getShouldOffsetUpdate(baseOffset, next, true)).toBe(true);
-  });
-
-  it('does not update when a dependency ticked but nothing changed', () => {
-    expect(getShouldOffsetUpdate(baseOffset, { ...baseOffset }, true)).toBe(false);
-  });
-});
-
-describe('findPreviousPlayableId()', () => {
-  const order = ['1', '2', '3'];
-
-  it('returns undefined when there is nothing to play', () => {
-    expect(findPreviousPlayableId([])).toBeUndefined();
-  });
-
-  it('returns the first event when nothing is loaded', () => {
-    expect(findPreviousPlayableId(order)).toBe('1');
-  });
-
-  it('returns the preceding event', () => {
-    expect(findPreviousPlayableId(order, '3')).toBe('2');
-  });
-
-  it('stays on the first event when already at the top', () => {
-    expect(findPreviousPlayableId(order, '1')).toBe('1');
-  });
-
-  it('falls back to the first event when the loaded id is unknown', () => {
-    expect(findPreviousPlayableId(order, 'not-in-rundown')).toBe('1');
-  });
-});
-
-describe('findNextPlayableId()', () => {
-  const order = ['1', '2', '3'];
-
-  it('returns undefined when there is nothing to play', () => {
-    expect(findNextPlayableId([])).toBeUndefined();
-  });
-
-  it('returns the first event when nothing is loaded', () => {
-    expect(findNextPlayableId(order)).toBe('1');
-  });
-
-  it('returns the following event', () => {
-    expect(findNextPlayableId(order, '1')).toBe('2');
-  });
-
-  it('wraps to the first event from the last', () => {
-    expect(findNextPlayableId(order, '3')).toBe('1');
-  });
-
-  it('falls back to the first event when the loaded id is unknown', () => {
-    expect(findNextPlayableId(order, 'not-in-rundown')).toBe('1');
-  });
-});
-
-describe('findNextPlayableWithCue()', () => {
-  const rundown = makeRundown({
-    order: ['1', '2', '3', '4'],
-    entries: {
-      '1': makeOntimeEvent({ id: '1', cue: 'a' }),
-      '2': makeOntimeEvent({ id: '2', cue: 'b' }),
-      '3': makeOntimeEvent({ id: '3', cue: 'b', skip: true }),
-      '4': makeOntimeEvent({ id: '4', cue: 'b' }),
-    },
-  });
-  const order = ['1', '2', '3', '4'];
-
-  it('finds the next event with the given cue', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'b')?.id).toBe('2');
-  });
-
-  it('skips events which are not playable', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'b', 2)?.id).toBe('4');
-  });
-
-  it('wraps around to the start of the rundown', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'a', 2)?.id).toBe('1');
-  });
-
-  it('excludes the current event unless allowCurrent is set', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'b', 1)?.id).toBe('4');
-    expect(findNextPlayableWithCue(rundown, order, 'b', 1, true)?.id).toBe('2');
-  });
-
-  it('returns undefined when no event carries the cue', () => {
-    expect(findNextPlayableWithCue(rundown, order, 'missing')).toBeUndefined();
-  });
-});
-
-describe('getEventAtIndex()', () => {
-  const rundown = makeRundown({
-    order: ['1', '2'],
-    entries: {
-      '1': makeOntimeEvent({ id: '1' }),
-      '2': makeOntimeEvent({ id: '2' }),
-    },
-  });
-
-  it('returns the event at the given index', () => {
-    expect(getEventAtIndex(rundown, ['1', '2'], 1)?.id).toBe('2');
-  });
-
-  it('returns undefined when the index is out of range', () => {
-    expect(getEventAtIndex(rundown, ['1', '2'], 5)).toBeUndefined();
-    expect(getEventAtIndex(rundown, [], 0)).toBeUndefined();
-  });
-});

apps/server/src/services/runtime-service/runtime.service.ts

@@ -20,7 +20,6 @@ import { triggerAutomations } from '../../api-data/automation/automation.service
 import { triggerReportEntry } from '../../api-data/report/report.service.js';
 import { getCurrentRundown, getEntryWithId, getRundownMetadata } from '../../api-data/rundown/rundown.dao.js';
 import { RundownMetadata } from '../../api-data/rundown/rundown.types.js';
-import { cloneEntryData } from '../../api-data/rundown/rundown.utils.js';
 import { logger } from '../../classes/Logger.js';
 import { timerConfig } from '../../setup/config.js';
 import { eventStore } from '../../stores/EventStore.js';
@@ -755,7 +754,7 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
       }
       // at this point we know that either the id or the contents has changed
       batch.add(key, currentEntry as RuntimeStore[K]); // we know that there is the necessary overlap in the types to cast this
-      RuntimeService.previousState[key] = currentEntry ? cloneEntryData(currentEntry) : null;
+      RuntimeService.previousState[key] = structuredClone(currentEntry);
       return true;
     }
 

docs/agent-guides/code-quality.md

@@ -36,10 +36,6 @@ Remove comments that:
 
 Update adjacent comments with code. Stale comments are defects.
 
-Add a short comment immediately above every React `useEffect` describing the external synchronization or lifecycle
-responsibility it owns. Explain non-obvious reasons or constraints when they matter; for files with multiple effects, a
-brief responsibility label is useful even when the mechanics are straightforward.
-
 ## Naming and types
 
 - Prefer Ontime terms over vague `data`, `result`, `item`.

e2e/tests/features/209-rundown-shortcuts.spec.ts

@@ -222,57 +222,15 @@ test('Delete event', async ({ page }) => {
   await expect(page.getByRole('button', { name: 'Create Group' })).toBeVisible();
 });
 
-test('Finder searches the rundown and reveals a result', async ({ page }) => {
+test('Find in rundown', async ({ page }) => {
   await page.goto('/rundown');
-  await page.getByRole('button', { name: 'Edit' }).click();
+  await expect(page.getByTestId('panel-rundown')).toBeVisible();
 
-  // clear rundown
-  await page.getByRole('button', { name: 'Rundown menu' }).click();
-  await page.getByRole('menuitem', { name: 'Clear all' }).click();
-  await page.getByRole('button', { name: 'Delete all' }).click();
-  await expect(page.getByTestId('rundown-event')).toHaveCount(0);
-
-  // two events, where the one we are looking for is identified only by its note
-  await page.getByRole('button', { name: 'Create Event' }).click();
-  await expect(page.getByTestId('rundown-event')).toHaveCount(1);
-  await page.getByTestId('entry-1').click();
-  await page.getByTestId('entry__title').press('Escape');
-  await page.getByTestId('rundown-event').locator('div').filter({ hasText: '1' }).press('Alt+E');
-  await expect(page.getByTestId('rundown-event')).toHaveCount(2);
-
-  await page.getByTestId('entry-1').getByTestId('entry__title').fill('opening');
-  await page.getByTestId('entry-1').getByTestId('entry__title').press('Enter');
-  await page.getByTestId('entry-2').getByTestId('entry__title').fill('closing');
-  await page.getByTestId('entry-2').getByTestId('entry__title').press('Enter');
-
-  await page.getByTestId('entry-2').click();
-  await page.getByLabel('Note', { exact: true }).fill('remember the zebrafish');
-  await page.getByLabel('Note', { exact: true }).press('Tab');
-
-  // the shortcut has to work from a focused field, which is where it is usually reached for
-  await page.getByTestId('entry-2').getByTestId('entry__title').click();
   await page.keyboard.press('ControlOrMeta+f');
-  await expect(page.getByPlaceholder('Search...')).toBeFocused();
+  await expect(page.getByPlaceholder('Search...')).toBeVisible();
 
-  // a bare query reaches the note, and the result names the field it matched
-  await page.getByPlaceholder('Search...').fill('zebrafish');
-  await expect(page.getByTestId('finder-result')).toHaveCount(1);
-  await expect(page.getByTestId('finder-result-match')).toContainText('Note');
-
-  // a badge scopes the search to one field, without putting syntax in the input
-  const titleFilter = page.getByTestId('finder-filters').getByRole('button', { name: 'Title', exact: true });
-  await titleFilter.click();
-  await expect(page.getByPlaceholder('Search...')).toHaveValue('zebrafish');
-  await expect(page.getByTestId('finder-result')).toHaveCount(0);
-
-  // pressing it again searches every field once more
-  await titleFilter.click();
-  await expect(page.getByTestId('finder-result')).toHaveCount(1);
-
-  // choosing a result closes the finder and selects the entry in the rundown
-  await page.getByPlaceholder('Search...').press('Enter');
+  await page.keyboard.press('Escape');
   await expect(page.getByPlaceholder('Search...')).toBeHidden();
-  await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toHaveAttribute('data-selected', 'true');
 });
 
 test('Open settings', async ({ page }) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "4.13.0",
+  "version": "4.12.0",
   "description": "Time keeping for live events",
   "keywords": [
     "ontime",

packages/types/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.13.0",
+  "version": "4.12.0",
   "name": "ontime-types",
   "type": "module",
   "main": "./src/index.ts",

packages/types/src/definitions/core/Settings.type.ts

@@ -6,4 +6,9 @@ export type Settings = {
   operatorKey: null | string;
   timeFormat: TimeFormat;
   language: string;
+  /**
+   * Custom names for the aux timers, one entry per aux timer in order (index 0 is aux timer 1).
+   * An empty string means the timer is unnamed and consumers show the default label
+   */
+  auxTimerNames: string[];
 };

packages/types/src/definitions/runtime/AuxTimer.type.ts

@@ -14,4 +14,6 @@ export type SimpleTimerState = {
   current: number;
   playback: SimplePlayback;
   direction: SimpleDirection;
+  /** Custom name for the aux timer. Empty string when unnamed */
+  name: string;
 };

packages/types/src/definitions/runtime/RuntimeStore.ts

@@ -53,18 +53,21 @@ export const runtimeStorePlaceholder: Readonly<RuntimeStore> = {
     direction: SimpleDirection.CountUp,
     duration: 0,
     playback: SimplePlayback.Stop,
+    name: '',
   },
   auxtimer2: {
     current: 0,
     direction: SimpleDirection.CountUp,
     duration: 0,
     playback: SimplePlayback.Stop,
+    name: '',
   },
   auxtimer3: {
     current: 0,
     direction: SimpleDirection.CountUp,
     duration: 0,
     playback: SimplePlayback.Stop,
+    name: '',
   },
   ping: 1,
 };

packages/utils/index.ts

@@ -99,6 +99,9 @@ export {
 
 export { isPlaybackActive } from './src/playback-utils/playbackstate.js';
 
+// aux timers
+export { auxTimerNameMaxLength, sanitiseAuxTimerNames } from './src/aux-timer-utils/auxTimerUtils.js';
+
 //Colour
 export {
   colourToHex,

packages/utils/src/aux-timer-utils/auxTimerUtils.test.ts

@@ -0,0 +1,30 @@
+import { auxTimerNameMaxLength, sanitiseAuxTimerNames } from './auxTimerUtils.js';
+
+describe('sanitiseAuxTimerNames()', () => {
+  it('generates the default value when given nothing', () => {
+    expect(sanitiseAuxTimerNames()).toStrictEqual(['', '', '']);
+  });
+
+  it('always returns exactly three entries', () => {
+    expect(sanitiseAuxTimerNames(['a', 'b', 'c', 'extra'])).toStrictEqual(['a', 'b', 'c']);
+  });
+
+  it('pads missing entries with an empty string', () => {
+    expect(sanitiseAuxTimerNames(['Speaker'])).toStrictEqual(['Speaker', '', '']);
+  });
+
+  it('trims whitespace', () => {
+    expect(sanitiseAuxTimerNames(['  Speaker  ', '', ''])).toStrictEqual(['Speaker', '', '']);
+  });
+
+  it('caps the name length', () => {
+    const tooLong = 'a'.repeat(auxTimerNameMaxLength + 10);
+    expect(sanitiseAuxTimerNames([tooLong])[0]).toHaveLength(auxTimerNameMaxLength);
+  });
+
+  it('falls back to defaults for malformed data', () => {
+    expect(sanitiseAuxTimerNames('not-an-array')).toStrictEqual(['', '', '']);
+    expect(sanitiseAuxTimerNames(null)).toStrictEqual(['', '', '']);
+    expect(sanitiseAuxTimerNames([42, {}, undefined])).toStrictEqual(['', '', '']);
+  });
+});

packages/utils/src/aux-timer-utils/auxTimerUtils.ts

@@ -0,0 +1,16 @@
+/** Maximum length of a user given aux timer name */
+export const auxTimerNameMaxLength = 30;
+
+function sanitiseAuxTimerName(value: unknown): string {
+  return typeof value === 'string' ? value.trim().slice(0, auxTimerNameMaxLength) : '';
+}
+
+/**
+ * Ontime has three aux timers. Given whatever was found on disk or in a request body,
+ * returns a name for each of them, so callers never need to deal with a missing
+ * or malformed auxTimerNames (eg. a project file saved before this feature existed).
+ */
+export function sanitiseAuxTimerNames(names?: unknown): [string, string, string] {
+  const source = Array.isArray(names) ? names : [];
+  return [sanitiseAuxTimerName(source[0]), sanitiseAuxTimerName(source[1]), sanitiseAuxTimerName(source[2])];
+}

packages/utils/src/rundown-utils/rundownUtils.mock.ts

@@ -342,6 +342,7 @@ export const demoDb: DatabaseModel = {
     operatorKey: null,
     timeFormat: '24',
     language: 'en',
+    auxTimerNames: ['', '', ''],
   },
   viewSettings: {
     dangerColor: '#ff7300',