From 469d83dc0b8c6adbc14e15032db317183240a2bd Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 1 Aug 2026 07:25:18 +0000 Subject: [PATCH] fix: keep editor identifying timers by index, revert secondary-source labels - AuxTimer.tsx (editor playback control) now always shows the timer's index alongside its custom name, eg. "Aux 1: Speaker", instead of replacing the index entirely. Truncates to a single line with an ellipsis (and a title tooltip) so long names don't wrap and break the compact three-column layout. - Revert the secondary-source select and its preview label (TimerViewControl.tsx, TimerPreview.tsx) back to plain "Aux 1/2/3" - these identify a fixed technical source, not the timer's identity, so they should stay stable regardless of naming. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01WCZejVTzuAY3tHTE6nB3JH --- apps/client/src/common/utils/auxTimerUtils.ts | 6 ++++++ .../features/control/message/TimerPreview.tsx | 18 ++++++++---------- .../control/message/TimerViewControl.tsx | 10 ++++------ .../playback/aux-timer/AuxTimer.module.scss | 7 +++++++ .../control/playback/aux-timer/AuxTimer.tsx | 10 ++++++---- 5 files changed, 31 insertions(+), 20 deletions(-) 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() {