diff --git a/apps/client/src/common/utils/auxTimerUtils.ts b/apps/client/src/common/utils/auxTimerUtils.ts index ba4ccd77f..2bb6409ff 100644 --- a/apps/client/src/common/utils/auxTimerUtils.ts +++ b/apps/client/src/common/utils/auxTimerUtils.ts @@ -2,3 +2,9 @@ export function getAuxTimerLabel(name: string | undefined, fallback: string): st 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}`; +} diff --git a/apps/client/src/features/control/message/TimerPreview.tsx b/apps/client/src/features/control/message/TimerPreview.tsx index 063ceb954..62c7e6709 100644 --- a/apps/client/src/features/control/message/TimerPreview.tsx +++ b/apps/client/src/features/control/message/TimerPreview.tsx @@ -5,25 +5,23 @@ import { LuArrowDownToLine } from 'react-icons/lu'; import { CornerWithPip } from '../../../common/components/editor-utils/EditorUtils'; import Tooltip from '../../../common/components/tooltip/Tooltip'; import useViewSettings from '../../../common/hooks-query/useViewSettings'; -import { useAuxTimersName, useMessagePreview } from '../../../common/hooks/useSocket'; -import { getAuxTimerLabel } from '../../../common/utils/auxTimerUtils'; +import { useMessagePreview } from '../../../common/hooks/useSocket'; 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 = { + 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 auxName = useAuxTimersName(); - - const secondarySourceLabels: Record = { - aux1: getAuxTimerLabel(auxName.aux1, 'Aux 1'), - aux2: getAuxTimerLabel(auxName.aux2, 'Aux 2'), - aux3: getAuxTimerLabel(auxName.aux3, 'Aux 3'), - secondary: 'Secondary message', - }; const main = (() => { if (showTimerMessage) return 'Message'; diff --git a/apps/client/src/features/control/message/TimerViewControl.tsx b/apps/client/src/features/control/message/TimerViewControl.tsx index 70bd252f8..a561d47b4 100644 --- a/apps/client/src/features/control/message/TimerViewControl.tsx +++ b/apps/client/src/features/control/message/TimerViewControl.tsx @@ -4,8 +4,7 @@ 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 { setMessage, useAuxTimersName, useTimerViewControl } from '../../../common/hooks/useSocket'; -import { getAuxTimerLabel } from '../../../common/utils/auxTimerUtils'; +import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket'; import TimerPreview from './TimerPreview'; import style from './TimerViewControl.module.scss'; @@ -44,7 +43,6 @@ export default function TimerControlsPreview() { function SecondarySourceControl() { const { secondarySource } = useTimerViewControl(); - const auxName = useAuxTimersName(); const [value, setValue] = useState('aux1'); // sync secondary source with external changes @@ -67,9 +65,9 @@ function SecondarySourceControl() {