feat(ui): play a sound when the timer ends

Adds an opt-in "Play sound on timer end" option to the timer view, which
sounds the bundled buzzer when the timer transitions into overtime.

Browsers reject audio 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 this would fail silently, so the
audio element is primed on the first interaction with the page and the
view shows a hint while it is still blocked.

The hint is tied to mouse movement, which does not itself grant playback
permission, so it stays off screen unless somebody is at the machine to
act on it.

Off by default, and inert when off: no audio element is created and no
listeners are registered. The change is contained to the timer view.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Np5ZL4TnZSutqA1Lqzm5Gq

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

@@ -95,22 +95,6 @@ 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;
@@ -124,18 +108,15 @@ 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,5 +6,4 @@ export const ontimePlaceholderSettings: Settings = {
   operatorKey: null,
   timeFormat: '24',
   language: 'en',
-  auxTimerNames: ['', '', ''],
 };

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

@@ -13,7 +13,6 @@ type EditorSettingsStore = {
   defaultTimerType: TimerType;
   defaultEndAction: EndAction;
   inheritGroupColour: boolean;
-  auxTimersCollapsed: boolean;
   setDefaultDuration: (defaultDuration: string) => void;
   setLinkPrevious: (linkPrevious: boolean) => void;
   setInheritGroupColour: (inheritGroupColour: boolean) => void;
@@ -22,7 +21,6 @@ type EditorSettingsStore = {
   setDangerTime: (dangerTime: string) => void;
   setDefaultTimerType: (defaultTimerType: TimerType) => void;
   setDefaultEndAction: (defaultEndAction: EndAction) => void;
-  setAuxTimersCollapsed: (auxTimersCollapsed: boolean) => void;
 };
 
 export const editorSettingsDefaults = {
@@ -34,7 +32,6 @@ export const editorSettingsDefaults = {
   timerType: TimerType.CountDown,
   endAction: EndAction.None,
   inheritGroupColour: false,
-  auxTimersCollapsed: false,
 };
 
 enum EditorSettingsKeys {
@@ -46,7 +43,6 @@ 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) => {
@@ -71,10 +67,6 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
       EditorSettingsKeys.InheritGroupColour,
       editorSettingsDefaults.inheritGroupColour,
     ),
-    auxTimersCollapsed: booleanFromLocalStorage(
-      EditorSettingsKeys.AuxTimersCollapsed,
-      editorSettingsDefaults.auxTimersCollapsed,
-    ),
 
     setDefaultDuration: (defaultDuration) =>
       set(() => {
@@ -118,10 +110,5 @@ 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/auxTimerUtils.ts

@@ -1,10 +0,0 @@
-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/features/app-settings/panel/settings-panel/AuxTimerSettings.tsx

@@ -1,95 +0,0 @@
-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,7 +3,6 @@ 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';
@@ -13,7 +12,6 @@ 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);
@@ -28,9 +26,6 @@ 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,7 +24,6 @@ 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,34 +3,6 @@
   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,10 +1,4 @@
-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 { usePlaybackControl } from '../../../common/hooks/useSocket';
 import AddTime from './add-time/AddTime';
 import { AuxTimer } from './aux-timer/AuxTimer';
 import PlaybackButtons from './playback-buttons/PlaybackButtons';
@@ -14,9 +8,6 @@ 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}>
@@ -29,42 +20,11 @@ export default function PlaybackControl() {
         selectedEventIndex={data.selectedEventIndex}
         timerPhase={data.timerPhase}
       />
-      <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 className={style.auxTimers}>
+        <AuxTimer index={1} />
+        <AuxTimer index={2} />
+        <AuxTimer index={3} />
       </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,18 +1,8 @@
 .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,9 +3,7 @@ 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';
@@ -15,12 +13,10 @@ interface AuxTimerProps {
 }
 
 export function AuxTimer({ index }: AuxTimerProps) {
-  const { playback, direction, name } = useAuxTimerControl(index);
+  const { playback, direction } = 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);
@@ -31,12 +27,10 @@ export function AuxTimer({ index }: AuxTimerProps) {
 
   return (
     <label className={style.label}>
-      <Tooltip text={label} render={<span />} className={style.labelText}>
-        {label}
-      </Tooltip>
+      Aux Timer {index}
       <div className={style.controls}>
         <div className={style.input}>
-          <AuxTimerInput index={index} isActive={isActive} placeholder={`Aux ${index}`} />
+          <AuxTimerInput index={index} isActive={isActive} />
           <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}`} />}
@@ -56,10 +50,9 @@ export function AuxTimer({ index }: AuxTimerProps) {
 interface AuxTimerInputProps {
   index: number;
   isActive: boolean;
-  placeholder: string;
 }
 
-function AuxTimerInput({ index, isActive, placeholder }: AuxTimerInputProps) {
+function AuxTimerInput({ index, isActive }: AuxTimerInputProps) {
   const newTimeInMs = useAuxTimerTime(index);
   const { setDuration } = setAuxTimer;
 
@@ -77,7 +70,7 @@ function AuxTimerInput({ index, isActive, placeholder }: AuxTimerInputProps) {
   }
 
   return (
-    <TimeInput submitHandler={handleTimeUpdate} name={`aux${index}`} time={newTimeInMs} placeholder={placeholder} />
+    <TimeInput submitHandler={handleTimeUpdate} name={`aux${index}`} time={newTimeInMs} placeholder={`Aux ${index}`} />
   );
 }
 

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

@@ -1,8 +1,7 @@
 import { Playback, TimerPhase, ViewSettings } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
-import { useAuxTimersName, useAuxTimersTime, useStudioTimersSocket } from '../../common/hooks/useSocket';
-import { getAuxTimerLabel } from '../../common/utils/auxTimerUtils';
+import { useAuxTimersTime, useStudioTimersSocket } from '../../common/hooks/useSocket';
 import { getOffsetState } from '../../common/utils/offset';
 import { cx } from '../../common/utils/styleUtils';
 import { useTranslation } from '../../translation/TranslationProvider';
@@ -122,23 +121,22 @@ 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'>{getAuxTimerLabel(auxName.aux1, 'Aux 1')}</div>
+          <div className='label'>Aux 1</div>
           <div className='extra'>{millisToString(auxTimer.aux1)}</div>
         </div>
 
         <div>
-          <div className='label center'>{getAuxTimerLabel(auxName.aux2, 'Aux 2')}</div>
+          <div className='label center'>Aux 2</div>
           <div className='extra center'>{millisToString(auxTimer.aux2)}</div>
         </div>
 
         <div>
-          <div className='label right'>{getAuxTimerLabel(auxName.aux3, 'Aux 3')}</div>
+          <div className='label right'>Aux 3</div>
           <div className='extra right'>{millisToString(auxTimer.aux3)}</div>
         </div>
       </div>

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

@@ -195,6 +195,25 @@
     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;

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

@@ -8,6 +8,7 @@ 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';
@@ -30,6 +31,7 @@ import {
   getTotalTime,
 } from './timer.utils';
 import { TimerData, useTimerData } from './useTimerData';
+import { useTimerSound } from './useTimerSound';
 
 import './Timer.scss';
 
@@ -66,6 +68,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
     freezeOvertime,
     freezeMessage,
     hidePhase,
+    endSound,
     font,
     keyColour,
     timerColour,
@@ -75,6 +78,8 @@ 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);
@@ -156,6 +161,8 @@ 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 && (
@@ -227,3 +234,19 @@ 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>
+  );
+}

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

@@ -0,0 +1,34 @@
+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

@@ -76,6 +76,14 @@ 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,
+        },
       ],
     },
     {
@@ -193,6 +201,7 @@ type TimerOptions = {
   freezeOvertime: boolean;
   freezeMessage: string;
   hidePhase: boolean;
+  endSound: boolean;
   font?: string;
   keyColour?: string;
   timerColour?: string;
@@ -227,6 +236,7 @@ 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')),

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

@@ -189,3 +189,18 @@ 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

@@ -0,0 +1,77 @@
+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 };
+}

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

@@ -90,14 +90,4 @@ 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,15 +74,7 @@ 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,
-      auxTimerNames: ['', '', ''],
-    };
+    return { version: '4.0.0', serverPort, editorKey, operatorKey, timeFormat, language };
   }
 }
 

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

@@ -1,5 +1,4 @@
 import { DatabaseModel, Settings } from 'ontime-types';
-import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { is } from '../../../utils/is.js';
 
@@ -24,7 +23,6 @@ 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,
@@ -32,7 +30,6 @@ 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,7 +184,6 @@ 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/settings/__tests__/settings.parser.test.ts

@@ -16,36 +16,6 @@ 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,5 +1,4 @@
 import { DatabaseModel, Settings } from 'ontime-types';
-import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { getPartialProject } from '../../models/dataModel.js';
 
@@ -23,7 +22,5 @@ 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,7 +9,6 @@ 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();
@@ -42,10 +41,6 @@ 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,5 +1,4 @@
 import { body } from 'express-validator';
-import { sanitiseAuxTimerNames } from 'ontime-utils';
 
 import { requestValidationFunction } from '../validation-utils/validationFunction.js';
 
@@ -28,7 +27,6 @@ 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/app.ts

@@ -5,7 +5,6 @@ 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';
@@ -26,7 +25,6 @@ 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';
@@ -205,7 +203,6 @@ 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,
@@ -221,28 +218,22 @@ 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/__tests__/DataProvider.utils.test.ts

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

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

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

apps/server/src/models/dataModel.ts

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

apps/server/src/models/demoProject.ts

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

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

@@ -1,5 +1,4 @@
 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';
@@ -25,20 +24,6 @@ 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

@@ -1,53 +0,0 @@
-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,10 +1,9 @@
 import { copyFile } from 'fs/promises';
 import { join } from 'path';
 
-import { DatabaseModel, LogOrigin, ProjectFileListResponse, RefetchKey } from 'ontime-types';
+import { DatabaseModel, LogOrigin, ProjectFileListResponse } 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';
@@ -29,7 +28,6 @@ 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,
@@ -90,16 +88,12 @@ 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
@@ -352,12 +346,6 @@ 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) {

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

@@ -6,9 +6,4 @@ 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,6 +14,4 @@ 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,21 +53,18 @@ 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,9 +99,6 @@ 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

@@ -1,30 +0,0 @@
-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

@@ -1,16 +0,0 @@
-/** 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,7 +342,6 @@ export const demoDb: DatabaseModel = {
     operatorKey: null,
     timeFormat: '24',
     language: 'en',
-    auxTimerNames: ['', '', ''],
   },
   viewSettings: {
     dangerColor: '#ff7300',