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