feat: implement multiple aux timers

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

@@ -1,12 +1,4 @@
-import {
-  MessageState,
-  OntimeEvent,
-  ProjectData,
-  Runtime,
-  Settings,
-  SimpleTimerState,
-  ViewSettings,
-} from 'ontime-types';
+import { MessageState, OntimeEvent, ProjectData, Runtime, Settings, ViewSettings } from 'ontime-types';
 
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
@@ -22,7 +14,6 @@ import StudioTimers from './StudioTimers';
 import './Studio.scss';
 
 interface StudioProps {
-  auxTimer: SimpleTimerState;
   eventNow: OntimeEvent | null;
   eventNext: OntimeEvent | null;
   general: ProjectData;
@@ -36,7 +27,6 @@ interface StudioProps {
 }
 
 export default function Studio({
-  auxTimer,
   eventNow,
   eventNext,
   general,
@@ -70,7 +60,6 @@ export default function Studio({
           <StudioTimers
             eventNow={eventNow}
             eventNext={eventNext}
-            auxTimer={auxTimer.current}
             timerMessage={message.timer.visible ? message.timer.text : ''}
             secondaryMessage={message.secondary}
             runtime={runtime}

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

@@ -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>
+  );
+}

apps/client/src/views/timer/Timer.tsx

@@ -1,18 +1,11 @@
-import {
-  CustomFields,
-  MessageState,
-  OntimeEvent,
-  ProjectData,
-  Settings,
-  SimpleTimerState,
-  ViewSettings,
-} from 'ontime-types';
+import { CustomFields, MessageState, OntimeEvent, ProjectData, Settings, ViewSettings } from 'ontime-types';
 
 import { FitText } from '../../common/components/fit-text/FitText';
 import MultiPartProgressBar from '../../common/components/multi-part-progress-bar/MultiPartProgressBar';
 import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
+import { useAuxTimersTime } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
 import { cx } from '../../common/utils/styleUtils';
@@ -38,7 +31,6 @@ import {
 import './Timer.scss';
 
 interface TimerProps {
-  auxTimer: SimpleTimerState;
   customFields: CustomFields;
   eventNext: OntimeEvent | null;
   eventNow: OntimeEvent | null;
@@ -51,8 +43,8 @@ interface TimerProps {
 }
 
 export default function Timer(props: TimerProps) {
-  const { auxTimer, customFields, eventNow, eventNext, general, isMirrored, message, settings, time, viewSettings } =
-    props;
+  const { customFields, eventNow, eventNext, general, isMirrored, message, settings, time, viewSettings } = props;
+  const auxTimer = useAuxTimersTime();
 
   const {
     hideClock,
@@ -104,9 +96,22 @@ export default function Timer(props: TimerProps) {
     removeLeadingZero: removeLeadingZeros,
   });
 
+  const currentAux = (() => {
+    if (message.timer.secondarySource === 'aux1') {
+      return auxTimer.aux1;
+    }
+    if (message.timer.secondarySource === 'aux2') {
+      return auxTimer.aux2;
+    }
+    if (message.timer.secondarySource === 'aux3') {
+      return auxTimer.aux3;
+    }
+    return null;
+  })();
+
   const secondaryContent = getSecondaryDisplay(
     message,
-    auxTimer.current,
+    currentAux,
     localisedMinutes,
     hideTimerSeconds,
     removeLeadingZeros,

apps/client/src/views/timer/timer.utils.ts

@@ -116,7 +116,11 @@ export function getSecondaryDisplay(
   if (hideSecondary) {
     return;
   }
-  if (message.timer.secondarySource === 'aux') {
+  if (
+    message.timer.secondarySource === 'aux1' ||
+    message.timer.secondarySource === 'aux2' ||
+    message.timer.secondarySource === 'aux3'
+  ) {
     return getFormattedTimer(currentAux, TimerType.CountDown, localisedMinutes, {
       removeSeconds,
       removeLeadingZero,