V2 ws store (#310)

* Update TimerService.ts

* refactor: message service publishes to store

* refactor: several type improvements

* V2 ws store wss (#309)

* refactor: shared logging types

* refactor: simplify message service consumption

* refactor: create discrete logging system

* refactor: move socket.io > websocket

apps/client/src/features/control/playback/PlaybackButtons.tsx

@@ -5,24 +5,15 @@ import Transport from './Transport';
 
 interface PlaybackButtonsProps {
   playback: Playback;
-  selectedId: string | null;
   noEvents: boolean;
 }
 
 export default function PlaybackButtons(props: PlaybackButtonsProps) {
-  const { playback, selectedId, noEvents } = props;
+  const { playback, noEvents } = props;
   return (
     <>
-      <PlaybackDisplay
-        playback={playback}
-        selectedId={selectedId}
-        noEvents={noEvents}
-      />
-      <Transport
-        playback={playback}
-        selectedId={selectedId}
-        noEvents={noEvents}
-      />
+      <PlaybackDisplay playback={playback} noEvents={noEvents} />
+      <Transport playback={playback} noEvents={noEvents} />
     </>
   );
 };

apps/client/src/features/control/playback/PlaybackControl.tsx

@@ -8,19 +8,12 @@ import PlaybackTimer from './PlaybackTimer';
 import style from './PlaybackControl.module.scss';
 
 export default function PlaybackControl() {
-  const { data } = usePlaybackControl();
+  const data = usePlaybackControl();
 
   return (
     <div className={style.mainContainer}>
-      <PlaybackTimer
-        playback={data.playback as Playback}
-        selectedId={data.selectedEventId}
-      />
-      <PlaybackButtons
-        playback={data.playback}
-        selectedId={data.selectedEventId}
-        noEvents={data.numEvents < 1}
-      />
+      <PlaybackTimer playback={data.playback as Playback} />
+      <PlaybackButtons playback={data.playback} noEvents={data.numEvents < 1} />
     </div>
   );
 }

apps/client/src/features/control/playback/PlaybackDisplay.tsx

@@ -11,23 +11,23 @@ import style from './PlaybackControl.module.scss';
 
 interface PlaybackProps {
   playback: Playback;
-  selectedId: string | null;
   noEvents: boolean;
 }
 
 export default function PlaybackDisplay(props: PlaybackProps) {
-  const { playback, selectedId, noEvents } = props;
-  const isRolling = playback === 'roll';
-  const isPlaying = playback === 'play';
-  const isPaused = playback === 'pause';
-  const isArmed = playback === 'armed';
+  const { playback, noEvents } = props;
+  const isRolling = playback === Playback.Roll;
+  const isPlaying = playback === Playback.Play;
+  const isPaused = playback === Playback.Pause;
+  const isArmed = playback === Playback.Armed;
+  const isStopped = playback === Playback.Stop;
 
   return (
     <div className={style.playbackContainer}>
       <TapButton
         onClick={() => setPlayback.start()}
-        disabled={!selectedId || isRolling}
-        theme='play'
+        disabled={isStopped || isRolling}
+        theme={Playback.Play}
         active={isPlaying}
       >
         <IoPlay />
@@ -35,8 +35,8 @@ export default function PlaybackDisplay(props: PlaybackProps) {
 
       <TapButton
         onClick={() => setPlayback.pause()}
-        disabled={!selectedId || isRolling || isArmed}
-        theme='pause'
+        disabled={isStopped || isRolling || isArmed}
+        theme={Playback.Pause}
         active={isPaused}
       >
         <IoPause />
@@ -44,8 +44,8 @@ export default function PlaybackDisplay(props: PlaybackProps) {
 
       <TapButton
         onClick={() => setPlayback.roll()}
-        disabled={noEvents}
-        theme='roll'
+        disabled={!isStopped || noEvents}
+        theme={Playback.Roll}
         active={isRolling}
       >
         <IoTimeOutline />

apps/client/src/features/control/playback/PlaybackTimer.tsx

@@ -4,33 +4,33 @@ import { Playback } from 'ontime-types';
 import TimerDisplay from '../../../common/components/timer-display/TimerDisplay';
 import { setPlayback, useTimer } from '../../../common/hooks/useSocket';
 import { millisToMinutes } from '../../../common/utils/dateConfig';
-import { stringFromMillis } from '../../../common/utils/time';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import TapButton from './TapButton';
 
 import style from './PlaybackControl.module.scss';
+import { millisToString } from 'ontime-utils';
 
 interface PlaybackTimerProps {
   playback: Playback;
-  selectedId: string | null;
 }
 
 export default function PlaybackTimer(props: PlaybackTimerProps) {
-  const { playback, selectedId } = props;
-  const { data: timerData } = useTimer();
+  const { playback } = props;
+  const data = useTimer();
 
   // TODO: checkout typescript in utilities
-  const started = stringFromMillis(timerData?.startedAt, true);
-  const finish = stringFromMillis(timerData.expectedFinish, true);
-  const isRolling = playback === 'roll';
-  const isWaiting = timerData.secondaryTimer !== null && timerData.secondaryTimer > 0 && timerData.current === null;
-  const disableButtons = selectedId === null || isRolling;
-  const isOvertime = timerData.current !== null && timerData.current < 0;
-  const hasAddedTime = Boolean(timerData.addedTime);
+  const started = millisToString(data.timer.startedAt);
+  const finish = millisToString(data.timer.expectedFinish);
+  const isRolling = playback === Playback.Roll;
+  const isStopped = playback === Playback.Stop;
+  const isWaiting = data.timer.secondaryTimer !== null && data.timer.secondaryTimer > 0 && data.timer.current === null;
+  const disableButtons = isStopped || isRolling;
+  const isOvertime = data.timer.current !== null && data.timer.current < 0;
+  const hasAddedTime = Boolean(data.timer.addedTime);
 
   const rollLabel = isRolling ? 'Roll mode active' : '';
-  const addedTimeLabel = hasAddedTime ? `Added ${millisToMinutes(timerData.addedTime)} minutes` : '';
+  const addedTimeLabel = hasAddedTime ? `Added ${millisToMinutes(data.timer.addedTime)} minutes` : '';
 
   return (
     <div className={style.timeContainer}>
@@ -44,7 +44,7 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
         </Tooltip>
       </div>
       <div className={style.timer}>
-        <TimerDisplay time={isWaiting ? timerData.secondaryTimer : timerData.current} />
+        <TimerDisplay time={isWaiting ? data.timer.secondaryTimer : data.timer.current} />
       </div>
       {isWaiting ? (
         <div className={style.roll}>

apps/client/src/features/control/playback/Transport.tsx

@@ -14,46 +14,33 @@ import style from './PlaybackControl.module.scss';
 
 interface TransportProps {
   playback: Playback;
-  selectedId: string | null;
   noEvents: boolean;
 }
 
 export default function Transport(props: TransportProps) {
-  const { playback, selectedId, noEvents } = props;
-  const isRolling = playback === 'roll';
+  const { playback, noEvents } = props;
+  const isRolling = playback === Playback.Roll;
+  const isStopped = playback === Playback.Stop;
 
   return (
     <div className={style.playbackContainer}>
       <Tooltip label='Previous event' openDelay={tooltipDelayMid}>
-        <TapButton
-          onClick={() => setPlayback.previous()}
-          disabled={isRolling || noEvents}
-        >
+        <TapButton onClick={() => setPlayback.previous()} disabled={isRolling || noEvents}>
           <IoPlaySkipBack />
         </TapButton>
       </Tooltip>
       <Tooltip label='Next event' openDelay={tooltipDelayMid}>
-        <TapButton
-          onClick={() => setPlayback.next()}
-          disabled={isRolling || noEvents}
-        >
+        <TapButton onClick={() => setPlayback.next()} disabled={isRolling || noEvents}>
           <IoPlaySkipForward />
         </TapButton>
       </Tooltip>
       <Tooltip label='Reload event' openDelay={tooltipDelayMid}>
-        <TapButton
-          onClick={() => setPlayback.reload()}
-          disabled={!selectedId || isRolling}
-        >
+        <TapButton onClick={() => setPlayback.reload()} disabled={isStopped || isRolling}>
           <IoReload className={style.invertX} />
         </TapButton>
       </Tooltip>
       <Tooltip label='Unload Event' openDelay={tooltipDelayMid}>
-        <TapButton
-          onClick={() => setPlayback.stop()}
-          disabled={!selectedId && !isRolling}
-          theme='stop'
-        >
+        <TapButton onClick={() => setPlayback.stop()} disabled={isStopped && !isRolling} theme={Playback.Stop}>
           <IoStop />
         </TapButton>
       </Tooltip>