feat: allow naming aux timers

Adds custom, persisted names for the three aux timers, editable in the
editor settings and surfaced everywhere an aux title is shown.

- Persist `auxTimerNames` on the Settings object (default empty, falls
  back to the stock "Aux N" label when unset). Reuses the existing
  settings pipeline: validation sanitises to a fixed-length trimmed
  array, the parser normalises loaded/legacy data, and migrations carry
  the field forward.
- New "Aux timers" settings section to name each timer, plus a shortcut
  button next to the aux timers in the playback control that jumps
  straight to it.
- Resolve names via a shared getAuxTimerLabel helper in the aux timer
  control, Studio view, secondary-source selector and preview, and the
  automation action labels.

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

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * Resolves the display label for an aux timer.
+ * Falls back to the provided default when no custom name is set.
+ * @param names - the auxTimerNames array from settings (indexed 0-based)
+ * @param index - 1-based aux timer index (1, 2, 3)
+ * @param fallback - label to use when no custom name is set
+ */
+export function getAuxTimerLabel(names: string[] | undefined, index: number, fallback: string): string {
+  const custom = names?.[index - 1]?.trim();
+  return custom ? custom : fallback;
+}

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

@@ -4,6 +4,8 @@ import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form'
 
 import Input from '../../../../common/components/input/input/Input';
 import Select from '../../../../common/components/select/Select';
+import useSettings from '../../../../common/hooks-query/useSettings';
+import { getAuxTimerLabel } from '../../../../common/utils/auxTimerUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 import TemplateInput from './template-input/TemplateInput';
 
@@ -34,12 +36,15 @@ export default function OntimeActionForm({
   watch,
 }: PropsWithChildren<OntimeActionFormProps>) {
   const [selectedAction, setSelectedAction] = useState<string>(value);
+  const { data: settings } = useSettings();
 
   const handleSetAction = (value: OntimeActionKey) => {
     setValue(`outputs.${index}.action`, value, { shouldDirty: true });
     setSelectedAction(value);
   };
 
+  const auxLabel = (auxIndex: number) => getAuxTimerLabel(settings.auxTimerNames, auxIndex, `Aux ${auxIndex}`);
+
   return (
     <div className={style.actionSection}>
       <label>
@@ -51,21 +56,21 @@ export default function OntimeActionForm({
           }}
           value={watch(`outputs.${index}.action`)}
           options={[
-            { value: 'aux1-pause', label: 'Aux 1: pause' },
+            { value: 'aux1-pause', label: `${auxLabel(1)}: pause` },
-            { value: 'aux2-pause', label: 'Aux 2: pause' },
+            { value: 'aux2-pause', label: `${auxLabel(2)}: pause` },
-            { value: 'aux3-pause', label: 'Aux 3: pause' },
+            { value: 'aux3-pause', label: `${auxLabel(3)}: pause` },
 
-            { value: 'aux1-start', label: 'Aux 1: start' },
+            { value: 'aux1-start', label: `${auxLabel(1)}: start` },
-            { value: 'aux2-start', label: 'Aux 2: start' },
+            { value: 'aux2-start', label: `${auxLabel(2)}: start` },
-            { value: 'aux3-start', label: 'Aux 3: start' },
+            { value: 'aux3-start', label: `${auxLabel(3)}: start` },
 
-            { value: 'aux1-stop', label: 'Aux 1: stop' },
+            { value: 'aux1-stop', label: `${auxLabel(1)}: stop` },
-            { value: 'aux2-stop', label: 'Aux 2: stop' },
+            { value: 'aux2-stop', label: `${auxLabel(2)}: stop` },
-            { value: 'aux3-stop', label: 'Aux 3: stop' },
+            { value: 'aux3-stop', label: `${auxLabel(3)}: stop` },
 
-            { value: 'aux1-set', label: 'Aux 1: set' },
+            { value: 'aux1-set', label: `${auxLabel(1)}: set` },
-            { value: 'aux2-set', label: 'Aux 2: set' },
+            { value: 'aux2-set', label: `${auxLabel(2)}: set` },
-            { value: 'aux3-set', label: 'Aux 3: set' },
+            { value: 'aux3-set', label: `${auxLabel(3)}: set` },
 
             { value: 'playback-start', label: 'Playback: start' },
             { value: 'playback-stop', label: 'Playback: stop' },

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

@@ -0,0 +1,91 @@
+import { Settings } from 'ontime-types';
+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';
+
+const auxTimerIndexes = [1, 2, 3];
+
+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,
+    },
+  });
+
+  // update form if we get new data from server
+  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>
+            {auxTimerIndexes.map((index) => (
+              <Panel.ListItem key={index}>
+                <Panel.Field title={`Aux timer ${index}`} description={`Custom name for aux timer ${index}`} />
+                <Input maxLength={30} placeholder={`Aux ${index}`} {...register(`auxTimerNames.${index - 1}`)} />
+              </Panel.ListItem>
+            ))}
+          </Panel.ListGroup>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}

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

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

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

@@ -17,6 +17,7 @@ const staticOptions = [
     secondary: [
       { id: 'settings__data', label: 'Project data' },
       { id: 'settings__general', label: 'General settings' },
+      { id: 'settings__aux-timers', label: 'Aux timers' },
       { id: 'settings__view', label: 'View settings' },
       { id: 'settings__custom-views', label: 'Custom views' },
       { id: 'settings__mcp', label: 'MCP Server' },

apps/client/src/features/control/message/TimerPreview.tsx

@@ -4,24 +4,27 @@ import { LuArrowDownToLine } from 'react-icons/lu';
 
 import { CornerWithPip } from '../../../common/components/editor-utils/EditorUtils';
 import Tooltip from '../../../common/components/tooltip/Tooltip';
+import useSettings from '../../../common/hooks-query/useSettings';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { useMessagePreview } from '../../../common/hooks/useSocket';
+import { getAuxTimerLabel } from '../../../common/utils/auxTimerUtils';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
 import PipRoot from '../../../views/editor/pip-timer/PipRoot';
 
 import style from './TimerPreview.module.scss';
 
-const secondarySourceLabels: Record<string, string> = {
-  aux1: 'Aux 1',
-  aux2: 'Aux 2',
-  aux3: 'Aux 3',
-  secondary: 'Secondary message',
-};
-
 export default function TimerPreview() {
   const { blink, blackout, countToEnd, phase, secondarySource, showTimerMessage, timerType } = useMessagePreview();
   const { data } = useViewSettings();
+  const { data: settings } = useSettings();
+
+  const secondarySourceLabels: Record<string, string> = {
+    aux1: getAuxTimerLabel(settings.auxTimerNames, 1, 'Aux 1'),
+    aux2: getAuxTimerLabel(settings.auxTimerNames, 2, 'Aux 2'),
+    aux3: getAuxTimerLabel(settings.auxTimerNames, 3, 'Aux 3'),
+    secondary: 'Secondary message',
+  };
 
   const main = (() => {
     if (showTimerMessage) return 'Message';

apps/client/src/features/control/message/TimerViewControl.tsx

@@ -4,7 +4,9 @@ import { useEffect, useState } from 'react';
 import Button from '../../../common/components/buttons/Button';
 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import Select from '../../../common/components/select/Select';
+import useSettings from '../../../common/hooks-query/useSettings';
 import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
+import { getAuxTimerLabel } from '../../../common/utils/auxTimerUtils';
 import TimerPreview from './TimerPreview';
 
 import style from './TimerViewControl.module.scss';
@@ -43,6 +45,7 @@ export default function TimerControlsPreview() {
 
 function SecondarySourceControl() {
   const { secondarySource } = useTimerViewControl();
+  const { data: settings } = useSettings();
   const [value, setValue] = useState<SecondarySource>('aux1');
 
   // sync secondary source with external changes
@@ -65,9 +68,9 @@ function SecondarySourceControl() {
       <Select
         value={value}
         options={[
-          { value: 'aux1', label: 'Aux 1' },
+          { value: 'aux1', label: getAuxTimerLabel(settings.auxTimerNames, 1, 'Aux 1') },
-          { value: 'aux2', label: 'Aux 2' },
+          { value: 'aux2', label: getAuxTimerLabel(settings.auxTimerNames, 2, 'Aux 2') },
-          { value: 'aux3', label: 'Aux 3' },
+          { value: 'aux3', label: getAuxTimerLabel(settings.auxTimerNames, 3, 'Aux 3') },
           { value: 'secondary', label: 'Secondary message' },
         ]}
         onValueChange={(value: SecondarySource | null) => {

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

@@ -3,6 +3,15 @@
   margin: 0 auto;
 }
 
+.auxHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 1rem;
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+}
+
 .auxTimers {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

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

@@ -1,4 +1,9 @@
+import { IoSettingsOutline } from 'react-icons/io5';
+
+import IconButton from '../../../common/components/buttons/IconButton';
+import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { usePlaybackControl } from '../../../common/hooks/useSocket';
+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 +13,7 @@ import style from './PlaybackControl.module.scss';
 
 export default function PlaybackControl() {
   const data = usePlaybackControl();
+  const { setLocation } = useAppSettingsNavigation();
 
   return (
     <div className={style.mainContainer}>
@@ -20,6 +26,22 @@ export default function PlaybackControl() {
         selectedEventIndex={data.selectedEventIndex}
         timerPhase={data.timerPhase}
       />
+      <div className={style.auxHeader}>
+        <span>Aux timers</span>
+        <Tooltip
+          text='Name aux timers'
+          render={
+            <IconButton
+              size='small'
+              variant='subtle'
+              aria-label='Name aux timers'
+              onClick={() => setLocation('settings__aux-timers')}
+            />
+          }
+        >
+          <IoSettingsOutline />
+        </Tooltip>
+      </div>
       <div className={style.auxTimers}>
         <AuxTimer index={1} />
         <AuxTimer index={2} />

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

@@ -3,7 +3,9 @@ import { millisToString, parseUserTime } from 'ontime-utils';
 import { IoArrowDown, IoArrowUp, IoPause, IoPlay, IoStop } from 'react-icons/io5';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import useSettings from '../../../../common/hooks-query/useSettings';
 import { setAuxTimer, useAuxTimerControl, useAuxTimerTime } from '../../../../common/hooks/useSocket';
+import { getAuxTimerLabel } from '../../../../common/utils/auxTimerUtils';
 import TapButton from '../tap-button/TapButton';
 
 import style from './AuxTimer.module.scss';
@@ -14,9 +16,12 @@ interface AuxTimerProps {
 
 export function AuxTimer({ index }: AuxTimerProps) {
   const { playback, direction } = useAuxTimerControl(index);
+  const { data: settings } = useSettings();
 
   const { stop, setDirection } = setAuxTimer;
 
+  const label = getAuxTimerLabel(settings.auxTimerNames, index, `Aux Timer ${index}`);
+
   const toggleDirection = () => {
     const newDirection = direction === SimpleDirection.CountDown ? SimpleDirection.CountUp : SimpleDirection.CountDown;
     setDirection(index, newDirection);
@@ -27,10 +32,10 @@ export function AuxTimer({ index }: AuxTimerProps) {
 
   return (
     <label className={style.label}>
-      Aux Timer {index}
+      {label}
       <div className={style.controls}>
         <div className={style.input}>
-          <AuxTimerInput index={index} isActive={isActive} />
+          <AuxTimerInput index={index} isActive={isActive} placeholder={label} />
           <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 +55,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 +76,7 @@ function AuxTimerInput({ index, isActive }: AuxTimerInputProps) {
   }
 
   return (
-    <TimeInput submitHandler={handleTimeUpdate} name={`aux${index}`} time={newTimeInMs} placeholder={`Aux ${index}`} />
+    <TimeInput submitHandler={handleTimeUpdate} name={`aux${index}`} time={newTimeInMs} placeholder={placeholder} />
   );
 }
 

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

@@ -49,7 +49,7 @@ function Studio({ customFields, projectData, isMirrored, settings, viewSettings
 
       <div className={cx(['studio-contents', hideCards && 'studio-contents--onecol'])}>
         <StudioClock hideCards={hideCards} />
-        {!hideCards && <StudioTimers viewSettings={viewSettings} />}
+        {!hideCards && <StudioTimers viewSettings={viewSettings} auxTimerNames={settings?.auxTimerNames} />}
       </div>
     </div>
   );

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

@@ -2,6 +2,7 @@ import { Playback, TimerPhase, ViewSettings } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import { 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';
@@ -14,9 +15,10 @@ import './StudioTimers.scss';
 
 interface StudioTimersProps {
   viewSettings: ViewSettings;
+  auxTimerNames?: string[];
 }
 
-export default function StudioTimers({ viewSettings }: StudioTimersProps) {
+export default function StudioTimers({ viewSettings, auxTimerNames }: StudioTimersProps) {
   const { getLocalizedString } = useTranslation();
   const { mainSource } = useStudioOptions();
   const { eventNow, eventNext, message, time, offset, rundown, expectedRundownEnd } = useStudioTimersSocket();
@@ -100,7 +102,7 @@ export default function StudioTimers({ viewSettings }: StudioTimersProps) {
         </div>
       </div>
 
-      <StudioTimersAux />
+      <StudioTimersAux auxTimerNames={auxTimerNames} />
 
       <div className='card' id='card-timer-message'>
         <div>
@@ -119,24 +121,24 @@ export default function StudioTimers({ viewSettings }: StudioTimersProps) {
   );
 }
 
-function StudioTimersAux() {
+function StudioTimersAux({ auxTimerNames }: { auxTimerNames?: string[] }) {
   const auxTimer = useAuxTimersTime();
 
   return (
     <div className='card' id='card-aux'>
       <div className='card__row'>
         <div>
-          <div className='label'>Aux 1</div>
+          <div className='label'>{getAuxTimerLabel(auxTimerNames, 1, 'Aux 1')}</div>
           <div className='extra'>{millisToString(auxTimer.aux1)}</div>
         </div>
 
         <div>
-          <div className='label center'>Aux 2</div>
+          <div className='label center'>{getAuxTimerLabel(auxTimerNames, 2, '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(auxTimerNames, 3, 'Aux 3')}</div>
           <div className='extra right'>{millisToString(auxTimer.aux3)}</div>
         </div>
       </div>

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

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

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

@@ -23,6 +23,7 @@ export function migrateServerPort(jsonData: Partial<DatabaseModel>): {
   const operatorKey = settings?.operatorKey;
   const timeFormat = settings?.timeFormat;
   const language = settings?.language;
+  const auxTimerNames = settings?.auxTimerNames ?? ['', '', ''];
   const version = '4.5.0';
   db.settings = {
     version,
@@ -30,6 +31,7 @@ export function migrateServerPort(jsonData: Partial<DatabaseModel>): {
     operatorKey,
     timeFormat,
     language,
+    auxTimerNames,
     app: 'ontime',
   } as Settings;
   return { db, serverPort: settings?.serverPort };

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

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

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

@@ -16,6 +16,21 @@ describe('parseSettings()', () => {
       operatorKey: null,
       timeFormat: '24',
       language: 'en',
+      auxTimerNames: ['', '', ''],
     });
   });
+
+  it('carries custom aux timer names through and normalises 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(['', '', '']);
+  });
 });

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

@@ -22,5 +22,18 @@ 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,
+    auxTimerNames: sanitiseAuxTimerNames(data.settings.auxTimerNames, defaultSettings.auxTimerNames),
   };
 }
+
+/**
+ * Ensures the aux timer names are a fixed-length array of strings
+ * regardless of what is found in the file
+ */
+function sanitiseAuxTimerNames(maybeNames: unknown, fallback: string[]): string[] {
+  const source = Array.isArray(maybeNames) ? maybeNames : [];
+  return fallback.map((defaultName, index) => {
+    const value = source[index];
+    return typeof value === 'string' ? value : defaultName;
+  });
+}

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

@@ -27,6 +27,14 @@ 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((value: unknown) => {
+      // normalise to a fixed-length array of trimmed strings
+      const source = Array.isArray(value) ? value : [];
+      return [0, 1, 2].map((index) => (typeof source[index] === 'string' ? source[index].trim() : ''));
+    }),
 
   requestValidationFunction,
 ];

apps/server/src/models/dataModel.ts

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

apps/server/src/models/demoProject.ts

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

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

@@ -6,4 +6,6 @@ export type Settings = {
   operatorKey: null | string;
   timeFormat: TimeFormat;
   language: string;
+  /** Custom names for the aux timers, indexed by aux timer (1, 2, 3). Empty string falls back to the default label */
+  auxTimerNames: string[];
 };

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

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