feat: allow naming aux timers

2026-08-26 17:39:58 +00:00 · 2026-08-25 21:45:58 +02:00
43 changed files with 482 additions and 194 deletions
@@ -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,
    };
  })();

@@ -6,4 +6,5 @@ export const ontimePlaceholderSettings: Settings = {
  operatorKey: null,
  timeFormat: '24',
  language: 'en',
+  auxTimerNames: ['', '', ''],
 };
@@ -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 };
+      }),
  };
 });
@@ -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}`;
+}
@@ -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>
+  );
+}
@@ -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>
@@ -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',
@@ -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;
@@ -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>
  );
 }
@@ -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 {
@@ -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} />
  );
 }

@@ -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>
@@ -195,25 +195,6 @@
    font-weight: 600;
  }

-  /* =================== SOUND PROMPT ===================*/
-  .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;
@@ -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 { showPrompt } = 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} />

-      {showPrompt && <EnableSoundPrompt />}
-
      <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />

      {!hideMessage && (
@@ -234,19 +227,3 @@ function TimerAutoTickingClock({ clockFormat }: { clockFormat: MaybeString }) {
    </div>
  );
 }
-
-/**
- * Nudges the user to interact with the screen so that the browser allows audio playback
- * Any interaction arms the sound, so this is a hint rather than a control
- * It is tied to mouse movement since that does not itself grant playback permission,
- * which keeps the hint off screen unless somebody is at the machine to act on it
- */
-function EnableSoundPrompt() {
-  const isUserActive = useFadeOutOnInactivity(true);
-
-  return (
-    <div className={cx(['sound-prompt', !isUserActive && 'sound-prompt--hidden'])} aria-live='polite'>
-      Tap the screen to enable sound
-    </div>
-  );
-}
@@ -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);
-  });
-});
@@ -76,14 +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: 'boolean',
-          defaultValue: false,
-        },
      ],
    },
    {
@@ -201,7 +193,6 @@ type TimerOptions = {
  freezeOvertime: boolean;
  freezeMessage: string;
  hidePhase: boolean;
-  endSound: boolean;
  font?: string;
  keyColour?: string;
  timerColour?: string;
@@ -236,7 +227,6 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
    freezeOvertime: isStringBoolean(getValue('freezeOvertime')),
    freezeMessage: getValue('freezeMessage') ?? '',
    hidePhase: isStringBoolean(getValue('hidePhase')),
-    endSound: isStringBoolean(getValue('endSound')),

    font: getValue('font') ?? undefined,
    keyColour: makeColourString(getValue('keyColour')),
@@ -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
-  );
-}
@@ -1,77 +0,0 @@
-import { TimerPhase } from 'ontime-types';
-import { useEffect, useRef, useState } from 'react';
-
-import buzzer from '../../assets/sounds/buzzer.mp3';
-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, enabled: boolean): { showPrompt: boolean } {
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const previousPhaseRef = useRef<TimerPhase | null>(null);
-  const [isArmed, setIsArmed] = useState(false);
-
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-
-    audioRef.current = new Audio(buzzer);
-
-    return () => {
-      audioRef.current?.pause();
-      audioRef.current = null;
-      setIsArmed(false);
-    };
-  }, [enabled]);
-
-  useEffect(() => {
-    if (!enabled || isArmed) {
-      return;
-    }
-
-    const controller = new AbortController();
-    const prime = () => {
-      audioRef.current
-        ?.play()
-        .then(() => {
-          if (!audioRef.current) return;
-          audioRef.current.pause();
-          audioRef.current.currentTime = 0;
-          setIsArmed(true);
-        })
-        .catch(() => {
-          // playback is still blocked, a later interaction will try again
-        });
-    };
-
-    document.addEventListener('pointerdown', prime, { capture: true, signal: controller.signal });
-    document.addEventListener('keydown', prime, { capture: true, signal: controller.signal });
-
-    return () => {
-      controller.abort();
-    };
-  }, [enabled, isArmed]);
-
-  useEffect(() => {
-    const previousPhase = previousPhaseRef.current;
-    previousPhaseRef.current = phase;
-
-    if (!enabled || !shouldPlayEndSound(previousPhase, phase)) {
-      return;
-    }
-
-    audioRef.current?.play().catch(() => {
-      // the screen has not been interacted with, the view shows a prompt for it
-    });
-  }, [enabled, phase]);
-
-  return { showPrompt: enabled && !isArmed };
-}
@@ -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(['', '', '']);
+  });
 });
@@ -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: ['', '', ''],
+    };
  }
 }

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

@@ -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,
 ];
@@ -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);

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

@@ -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
@@ -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: '',
      });
    });

@@ -30,6 +30,7 @@ const dbModel: DatabaseModel = {
    operatorKey: null,
    timeFormat: '24',
    language: 'en',
+    auxTimerNames: ['', '', ''],
  },
  viewSettings: {
    overrideStyles: false,
@@ -29,6 +29,7 @@ export const demoDb: DatabaseModel = {
    operatorKey: null,
    timeFormat: '24',
    language: 'en',
+    auxTimerNames: ['', '', ''],
  },
  viewSettings: {
    dangerColor: '#ff7300',
@@ -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
   */
@@ -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');
+    });
+  });
+});
@@ -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) {
@@ -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[];
 };
@@ -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;
 };
@@ -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,
 };
@@ -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,
@@ -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(['', '', '']);
+  });
+});
@@ -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])];
+}
@@ -342,6 +342,7 @@ export const demoDb: DatabaseModel = {
    operatorKey: null,
    timeFormat: '24',
    language: 'en',
+    auxTimerNames: ['', '', ''],
  },
  viewSettings: {
    dangerColor: '#ff7300',