update API - part 1 (#709)

* api: `test-ontime` -> `version`

* api: `ontime-poll` -> `poll`

* api: `start-next` -> `startnext`

* api: `start-next` ->  `startnext`

---------

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

apps/client/src/features/control/message/MessageControl.tsx

@@ -11,41 +11,42 @@ import InputRow from './InputRow';
 import style from './MessageControl.module.scss';
 
 export default function MessageControl() {
-  const data = useMessageControl();
-
+  const message = useMessageControl();
+  const blink = message.timer.blink;
+  const blackout = message.timer.blackout;
   return (
     <div className={style.messageContainer}>
       <InputRow
         label='Public / Backstage screen message'
         placeholder='Shown in public and backstage screens'
-        text={data.publicMessage.text || ''}
-        visible={data.publicMessage.visible || false}
+        text={message.public.text || ''}
+        visible={message.public.visible || false}
         changeHandler={(newValue) => setMessage.publicText(newValue)}
-        actionHandler={() => setMessage.publicVisible(!data.publicMessage.visible)}
+        actionHandler={() => setMessage.publicVisible(!message.public.visible)}
       />
       <InputRow
         label='Lower third message'
         placeholder='Shown in lower third'
-        text={data.lowerMessage.text || ''}
-        visible={data.lowerMessage.visible || false}
+        text={message.lower.text || ''}
+        visible={message.lower.visible || false}
         changeHandler={(newValue) => setMessage.lowerText(newValue)}
-        actionHandler={() => setMessage.lowerVisible(!data.lowerMessage.visible)}
+        actionHandler={() => setMessage.lowerVisible(!message.lower.visible)}
       />
       <InputRow
         label='Timer'
         placeholder='Message shown in stage timer'
-        text={data.timerMessage.text || ''}
-        visible={data.timerMessage.visible || false}
-        changeHandler={(newValue) => setMessage.presenterText(newValue)}
-        actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)}
+        text={message.timer.text || ''}
+        visible={message.timer.visible || false}
+        changeHandler={(newValue) => setMessage.timerText(newValue)}
+        actionHandler={() => setMessage.timerVisible(!message.timer.visible)}
       />
       <div className={style.buttonSection}>
         <Button
           size='sm'
-          className={`${data.timerMessage.timerBlink ? style.blink : ''}`}
-          variant={data.timerMessage.timerBlink ? 'ontime-filled' : 'ontime-subtle'}
-          leftIcon={data.timerMessage.timerBlink ? <IoSunny size='1rem' /> : <IoSunnyOutline size='1rem' />}
-          onClick={() => setMessage.timerBlink(!data.timerMessage.timerBlink)}
+          className={`${blink ? style.blink : ''}`}
+          variant={blink ? 'ontime-filled' : 'ontime-subtle'}
+          leftIcon={blink ? <IoSunny size='1rem' /> : <IoSunnyOutline size='1rem' />}
+          onClick={() => setMessage.timerBlink(!blink)}
           data-testid='toggle timer blink'
         >
           Blink message
@@ -53,9 +54,9 @@ export default function MessageControl() {
         <Button
           size='sm'
           className={style.blackoutButton}
-          variant={data.timerMessage.timerBlackout ? 'ontime-filled' : 'ontime-subtle'}
-          leftIcon={data.timerMessage.timerBlackout ? <IoEye size='1rem' /> : <IoEyeOffOutline size='1rem' />}
-          onClick={() => setMessage.timerBlackout(!data.timerMessage.timerBlackout)}
+          variant={blackout ? 'ontime-filled' : 'ontime-subtle'}
+          leftIcon={blackout ? <IoEye size='1rem' /> : <IoEyeOffOutline size='1rem' />}
+          onClick={() => setMessage.timerBlackout(!blackout)}
           data-testid='toggle timer blackout'
         >
           Blackout screen
@@ -65,8 +66,8 @@ export default function MessageControl() {
         label='External Message'
         placeholder='-'
         readonly
-        text={data.externalMessage.text || ''}
-        visible={data.externalMessage.visible || false}
+        text={message.external.text || ''}
+        visible={message.external.visible || false}
         changeHandler={() => undefined}
         actionHandler={() => undefined}
       />

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -55,20 +55,8 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
     }, [rundownData]);
 
     // websocket data
-    const {
-      timer,
-      publicMessage,
-      timerMessage,
-      lowerMessage,
-      externalMessage,
-      playback,
-      onAir,
-      eventNext,
-      publicEventNext,
-      publicEventNow,
-      eventNow,
-      loaded,
-    } = useStore(runtime);
+    const { timer, message, playback, onAir, eventNext, publicEventNext, publicEventNow, eventNow, loaded } =
+      useStore(runtime);
     const publicSelectedId = loaded.selectedPublicEventId;
     const selectedId = loaded.selectedEventId;
     const nextId = loaded.nextEventId;
@@ -93,10 +81,10 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
       <Component
         {...props}
         isMirrored={isMirrored}
-        pres={timerMessage}
-        publ={publicMessage}
-        lower={lowerMessage}
-        external={externalMessage}
+        pres={message.timer}
+        publ={message.public}
+        lower={message.lower}
+        external={message.external}
         eventNow={eventNow}
         publicEventNow={publicEventNow}
         eventNext={eventNext}

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -141,8 +141,8 @@ export default function MinimalTimer(props: MinimalTimerProps) {
   const showProgress = time.playback !== Playback.Stop;
   const showWarning = (time.current ?? 1) < (time.timeWarning ?? 0);
   const showDanger = (time.current ?? 1) < (time.timeDanger ?? 0);
-  const showBlinking = pres.timerBlink;
-  const showBlackout = pres.timerBlackout;
+  const showBlinking = pres.blink;
+  const showBlackout = pres.blackout;
 
   const timerColor = userOptions.textColour
     ? userOptions.textColour

apps/client/src/features/viewers/timer/Timer.tsx

@@ -102,8 +102,8 @@ export default function Timer(props: TimerProps) {
   const showFinished = finished && (time.timerType !== TimerType.Clock || showEndMessage);
   const showWarning = (time.current ?? 1) < (eventNow?.timeWarning ?? 0);
   const showDanger = (time.current ?? 1) < (eventNow?.timeDanger ?? 0);
-  const showBlinking = pres.timerBlink;
-  const showBlackout = pres.timerBlackout;
+  const showBlinking = pres.blink;
+  const showBlackout = pres.blackout;
   const showClock = time.timerType !== TimerType.Clock;
   const showExternal = external.visible && external.text;