cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-02 04:49:05 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: implement multiple aux timers

Browse Source
This commit is contained in:
Carlos Valente
2025-06-24 07:20:53 +02:00
committed by Carlos Valente
parent d1c58712ae
commit bf8ed8d017
33 changed files with 748 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/studio/StudioTimers.tsx
+27 -21
View File
@@ -1,6 +1,7 @@
import { OntimeEvent, Playback, Runtime, TimerPhase, TimerState, ViewSettings } from 'ontime-types';
import { millisToString } from 'ontime-utils';
import { useAuxTimersTime } from '../../common/hooks/useSocket';
import { cx } from '../../common/utils/styleUtils';
import { useTranslation } from '../../translation/TranslationProvider';
import { getTimerColour } from '../utils/presentation.utils';
@@ -14,7 +15,6 @@ interface StudioTimersProps {
time: TimerState;
eventNow: OntimeEvent | null;
eventNext: OntimeEvent | null;
auxTimer: number;
timerMessage: string;
secondaryMessage: string;
viewSettings: ViewSettings;
@@ -25,7 +25,6 @@ export default function StudioTimers({
time,
eventNow,
eventNext,
auxTimer,
timerMessage,
secondaryMessage,
viewSettings,
@@ -35,7 +34,6 @@ export default function StudioTimers({
const schedule = getFormattedScheduleTimes(runtime);
const event = getFormattedEventData(eventNow, time);
const eventNextTitle = eventNext?.title || '-';
const formattedAuxTimer = millisToString(auxTimer);
const formattedTimerMessage = timerMessage || '-';
const formattedSecondaryMessage = secondaryMessage || '-';
@@ -110,24 +108,7 @@ export default function StudioTimers({
</div>
</div>
<div className='card' id='card-aux'>
<div className='card__row'>
<div>
<div className='label'>Aux 1</div>
<div className='extra'>{formattedAuxTimer}</div>
</div>
<div>
<div className='label center'>Aux 2</div>
<div className='extra center'>NOT YET</div>
</div>
<div>
<div className='label right'>Aux 3</div>
<div className='extra right'>NOT YET</div>
</div>
</div>
</div>
<StudioTimersAux />
<div className='card' id='card-timer-message'>
<div>
@@ -145,3 +126,28 @@ export default function StudioTimers({
</div>
);
}
function StudioTimersAux() {
const auxTimer = useAuxTimersTime();
return (
<div className='card' id='card-aux'>
<div className='card__row'>
<div>
<div className='label'>Aux 1</div>
<div className='extra'>{millisToString(auxTimer.aux1)}</div>
</div>
<div>
<div className='label center'>Aux 2</div>
<div className='extra center'>{millisToString(auxTimer.aux2)}</div>
</div>
<div>
<div className='label right'>Aux 3</div>
<div className='extra right'>{millisToString(auxTimer.aux3)}</div>
</div>
</div>
</div>
);
}