mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-13 19:33:46 +00:00
refactor: expose aux timer names via runtime store, index in automations
Addresses review feedback on the aux timer naming feature:
- Automation action labels now reference the timers by index
("Aux timer 1: start") rather than the custom names, keeping the
automation config stable regardless of naming.
- Expose the custom names through the consumer-facing runtime interface:
the aux timer objects broadcast over the websocket now carry a `name`
field. Names are seeded from the persisted settings at bootstrap and
kept in sync whenever the settings change, so every consumer (views and
integrations) reads them from the same runtime data.
- The client control and view consumers now read the name from the
runtime store instead of querying settings directly; the settings form
remains the persisted editing source.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WCZejVTzuAY3tHTE6nB3JH
This commit is contained in:
Claude
@@ -95,6 +95,14 @@ 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 useAuxTimerTime = (index: number) =>
|
||||
createSelector((state: RuntimeStore) => {
|
||||
if (index === 1) return state.auxtimer1.current;
|
||||
@@ -108,15 +116,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,
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
/**
|
||||
* 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 name - the aux timer's custom name (from the runtime store)
|
||||
* @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();
|
||||
export function getAuxTimerLabel(name: string | undefined, fallback: string): string {
|
||||
const custom = name?.trim();
|
||||
return custom ? custom : fallback;
|
||||
}
|
||||
|
||||
+12
-17
@@ -4,8 +4,6 @@ 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';
|
||||
|
||||
@@ -36,15 +34,12 @@ 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>
|
||||
@@ -56,21 +51,21 @@ export default function OntimeActionForm({
|
||||
}}
|
||||
value={watch(`outputs.${index}.action`)}
|
||||
options={[
|
||||
{ value: 'aux1-pause', label: `${auxLabel(1)}: pause` },
|
||||
{ value: 'aux2-pause', label: `${auxLabel(2)}: pause` },
|
||||
{ value: 'aux3-pause', label: `${auxLabel(3)}: pause` },
|
||||
{ value: 'aux1-pause', label: 'Aux timer 1: pause' },
|
||||
{ value: 'aux2-pause', label: 'Aux timer 2: pause' },
|
||||
{ value: 'aux3-pause', label: 'Aux timer 3: pause' },
|
||||
|
||||
{ value: 'aux1-start', label: `${auxLabel(1)}: start` },
|
||||
{ value: 'aux2-start', label: `${auxLabel(2)}: start` },
|
||||
{ value: 'aux3-start', label: `${auxLabel(3)}: start` },
|
||||
{ value: 'aux1-start', label: 'Aux timer 1: start' },
|
||||
{ value: 'aux2-start', label: 'Aux timer 2: start' },
|
||||
{ value: 'aux3-start', label: 'Aux timer 3: start' },
|
||||
|
||||
{ value: 'aux1-stop', label: `${auxLabel(1)}: stop` },
|
||||
{ value: 'aux2-stop', label: `${auxLabel(2)}: stop` },
|
||||
{ value: 'aux3-stop', label: `${auxLabel(3)}: stop` },
|
||||
{ value: 'aux1-stop', label: 'Aux timer 1: stop' },
|
||||
{ value: 'aux2-stop', label: 'Aux timer 2: stop' },
|
||||
{ value: 'aux3-stop', label: 'Aux timer 3: stop' },
|
||||
|
||||
{ value: 'aux1-set', label: `${auxLabel(1)}: set` },
|
||||
{ value: 'aux2-set', label: `${auxLabel(2)}: set` },
|
||||
{ value: 'aux3-set', label: `${auxLabel(3)}: set` },
|
||||
{ value: 'aux1-set', label: 'Aux timer 1: set' },
|
||||
{ value: 'aux2-set', label: 'Aux timer 2: set' },
|
||||
{ value: 'aux3-set', label: 'Aux timer 3: set' },
|
||||
|
||||
{ value: 'playback-start', label: 'Playback: start' },
|
||||
{ value: 'playback-stop', label: 'Playback: stop' },
|
||||
|
||||
@@ -4,9 +4,8 @@ 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 { useAuxTimersName, useMessagePreview } from '../../../common/hooks/useSocket';
|
||||
import { getAuxTimerLabel } from '../../../common/utils/auxTimerUtils';
|
||||
import { handleLinks } from '../../../common/utils/linkUtils';
|
||||
import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
|
||||
@@ -17,12 +16,12 @@ import style from './TimerPreview.module.scss';
|
||||
export default function TimerPreview() {
|
||||
const { blink, blackout, countToEnd, phase, secondarySource, showTimerMessage, timerType } = useMessagePreview();
|
||||
const { data } = useViewSettings();
|
||||
const { data: settings } = useSettings();
|
||||
const auxName = useAuxTimersName();
|
||||
|
||||
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'),
|
||||
aux1: getAuxTimerLabel(auxName.aux1, 'Aux 1'),
|
||||
aux2: getAuxTimerLabel(auxName.aux2, 'Aux 2'),
|
||||
aux3: getAuxTimerLabel(auxName.aux3, 'Aux 3'),
|
||||
secondary: 'Secondary message',
|
||||
};
|
||||
|
||||
|
||||
@@ -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 useSettings from '../../../common/hooks-query/useSettings';
|
||||
import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
|
||||
import { setMessage, useAuxTimersName, useTimerViewControl } from '../../../common/hooks/useSocket';
|
||||
import { getAuxTimerLabel } from '../../../common/utils/auxTimerUtils';
|
||||
import TimerPreview from './TimerPreview';
|
||||
|
||||
@@ -45,7 +44,7 @@ export default function TimerControlsPreview() {
|
||||
|
||||
function SecondarySourceControl() {
|
||||
const { secondarySource } = useTimerViewControl();
|
||||
const { data: settings } = useSettings();
|
||||
const auxName = useAuxTimersName();
|
||||
const [value, setValue] = useState<SecondarySource>('aux1');
|
||||
|
||||
// sync secondary source with external changes
|
||||
@@ -68,9 +67,9 @@ function SecondarySourceControl() {
|
||||
<Select
|
||||
value={value}
|
||||
options={[
|
||||
{ value: 'aux1', label: getAuxTimerLabel(settings.auxTimerNames, 1, 'Aux 1') },
|
||||
{ value: 'aux2', label: getAuxTimerLabel(settings.auxTimerNames, 2, 'Aux 2') },
|
||||
{ value: 'aux3', label: getAuxTimerLabel(settings.auxTimerNames, 3, 'Aux 3') },
|
||||
{ value: 'aux1', label: getAuxTimerLabel(auxName.aux1, 'Aux 1') },
|
||||
{ value: 'aux2', label: getAuxTimerLabel(auxName.aux2, 'Aux 2') },
|
||||
{ value: 'aux3', label: getAuxTimerLabel(auxName.aux3, 'Aux 3') },
|
||||
{ value: 'secondary', label: 'Secondary message' },
|
||||
]}
|
||||
onValueChange={(value: SecondarySource | null) => {
|
||||
|
||||
@@ -3,7 +3,6 @@ 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';
|
||||
@@ -15,12 +14,11 @@ interface AuxTimerProps {
|
||||
}
|
||||
|
||||
export function AuxTimer({ index }: AuxTimerProps) {
|
||||
const { playback, direction } = useAuxTimerControl(index);
|
||||
const { data: settings } = useSettings();
|
||||
const { playback, direction, name } = useAuxTimerControl(index);
|
||||
|
||||
const { stop, setDirection } = setAuxTimer;
|
||||
|
||||
const label = getAuxTimerLabel(settings.auxTimerNames, index, `Aux Timer ${index}`);
|
||||
const label = getAuxTimerLabel(name, `Aux Timer ${index}`);
|
||||
|
||||
const toggleDirection = () => {
|
||||
const newDirection = direction === SimpleDirection.CountDown ? SimpleDirection.CountUp : SimpleDirection.CountDown;
|
||||
|
||||
@@ -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} auxTimerNames={settings?.auxTimerNames} />}
|
||||
{!hideCards && <StudioTimers viewSettings={viewSettings} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
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';
|
||||
@@ -15,10 +15,9 @@ import './StudioTimers.scss';
|
||||
|
||||
interface StudioTimersProps {
|
||||
viewSettings: ViewSettings;
|
||||
auxTimerNames?: string[];
|
||||
}
|
||||
|
||||
export default function StudioTimers({ viewSettings, auxTimerNames }: StudioTimersProps) {
|
||||
export default function StudioTimers({ viewSettings }: StudioTimersProps) {
|
||||
const { getLocalizedString } = useTranslation();
|
||||
const { mainSource } = useStudioOptions();
|
||||
const { eventNow, eventNext, message, time, offset, rundown, expectedRundownEnd } = useStudioTimersSocket();
|
||||
@@ -102,7 +101,7 @@ export default function StudioTimers({ viewSettings, auxTimerNames }: StudioTime
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StudioTimersAux auxTimerNames={auxTimerNames} />
|
||||
<StudioTimersAux />
|
||||
|
||||
<div className='card' id='card-timer-message'>
|
||||
<div>
|
||||
@@ -121,24 +120,25 @@ export default function StudioTimers({ viewSettings, auxTimerNames }: StudioTime
|
||||
);
|
||||
}
|
||||
|
||||
function StudioTimersAux({ auxTimerNames }: { auxTimerNames?: string[] }) {
|
||||
function StudioTimersAux() {
|
||||
const auxTimer = useAuxTimersTime();
|
||||
const auxName = useAuxTimersName();
|
||||
|
||||
return (
|
||||
<div className='card' id='card-aux'>
|
||||
<div className='card__row'>
|
||||
<div>
|
||||
<div className='label'>{getAuxTimerLabel(auxTimerNames, 1, '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'>{getAuxTimerLabel(auxTimerNames, 2, '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'>{getAuxTimerLabel(auxTimerNames, 3, 'Aux 3')}</div>
|
||||
<div className='label right'>{getAuxTimerLabel(auxName.aux3, 'Aux 3')}</div>
|
||||
<div className='extra right'>{millisToString(auxTimer.aux3)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user