refactor: runtime service (#715)

* refactor: rename PlaybackService > RuntimeService

* refactor: stateful runtime service

* refactor: merge event loading

* refactor: roll is part of state mutation

apps/client/src/common/stores/runtime.ts

@@ -1,6 +1,6 @@
 import isEqual from 'react-fast-compare';
 import { Playback, RuntimeStore } from 'ontime-types';
-import { createWithEqualityFn, useStoreWithEqualityFn } from 'zustand/traditional'
+import { createWithEqualityFn, useStoreWithEqualityFn } from 'zustand/traditional';
 
 export const runtimeStorePlaceholder: RuntimeStore = {
   timer: {
@@ -12,7 +12,6 @@ export const runtimeStorePlaceholder: RuntimeStore = {
     startedAt: null,
     finishedAt: null,
     secondaryTimer: null,
-    selectedEventId: null,
     duration: null,
     timerType: null,
     endAction: null,
@@ -55,11 +54,12 @@ export const runtimeStorePlaceholder: RuntimeStore = {
 
 const deepCompare = <T>(a: T, b: T) => isEqual(a, b);
 
-export const runtime = createWithEqualityFn<RuntimeStore>(() => ({
-  ...runtimeStorePlaceholder,
-}), deepCompare);
+export const runtime = createWithEqualityFn<RuntimeStore>(
+  () => ({
+    ...runtimeStorePlaceholder,
+  }),
+  deepCompare,
+);
 
-
-export const useRuntimeStore = <T>(
-  selector: (state: RuntimeStore) => T,
-) => useStoreWithEqualityFn(runtime, selector, deepCompare);
+export const useRuntimeStore = <T>(selector: (state: RuntimeStore) => T) =>
+  useStoreWithEqualityFn(runtime, selector, deepCompare);

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

@@ -28,7 +28,6 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
   const isPlaying = playback === Playback.Play;
   const isPaused = playback === Playback.Pause;
   const isArmed = playback === Playback.Armed;
-  const isStopped = playback === Playback.Stop;
 
   const isFirst = selectedEventIndex === 0;
   const isLast = selectedEventIndex === numEvents - 1;
@@ -42,6 +41,7 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
   const disablePause = !playbackCan.pause;
   const disableRoll = !playbackCan.roll || noEvents;
   const disableStop = !playbackCan.stop;
+  const disableReload = !playbackCan.reload;
 
   const goModeText = selectedEventIndex === null || isArmed ? 'Start' : 'Next';
   const goModeAction = () => {
@@ -83,7 +83,7 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
           <IoTime />
         </TapButton>
         <Tooltip label='Reload event' openDelay={tooltipDelayMid}>
-          <TapButton onClick={setPlayback.reload} disabled={isStopped}>
+          <TapButton onClick={setPlayback.reload} disabled={disableReload}>
             <IoReload className={style.invertX} />
           </TapButton>
         </Tooltip>