feat: many timers (#706)

* wip: create simple timer class

* refactor: service to manage extra timers

* wip:ui for controlling the extra timer

---------

Co-authored-by: arc-alex <ac@omnivox.dk>

apps/client/src/common/hooks/useSocket.ts

@@ -1,4 +1,4 @@
-import { RuntimeStore } from 'ontime-types';
+import { RuntimeStore, SimpleDirection, SimplePlayback } from 'ontime-types';
 
 import { useRuntimeStore } from '../stores/runtime';
 import { socketSendJson } from '../utils/socket';
@@ -92,6 +92,29 @@ export const useInfoPanel = () => {
   return useRuntimeStore(featureSelector);
 };
 
+export const useExtraTimerTime = () => {
+  const featureSelector = (state: RuntimeStore) => state.timer1.current;
+
+  return useRuntimeStore(featureSelector);
+};
+
+export const useExtraTimerControl = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    playback: state.timer1.playback,
+    direction: state.timer1.direction,
+  });
+
+  return useRuntimeStore(featureSelector);
+};
+
+export const setExtraTimer = {
+  start: () => socketSendJson('extratimer', SimplePlayback.Start),
+  pause: () => socketSendJson('extratimer', SimplePlayback.Pause),
+  stop: () => socketSendJson('extratimer', SimplePlayback.Stop),
+  setDirection: (direction: SimpleDirection) => socketSendJson('extratimer', { direction }),
+  setTime: (time: number) => socketSendJson('extratimer', { settime: time }),
+};
+
 export const useCuesheet = () => {
   const featureSelector = (state: RuntimeStore) => ({
     playback: state.timer.playback,

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

@@ -1,5 +1,5 @@
 import isEqual from 'react-fast-compare';
-import { Playback, RuntimeStore } from 'ontime-types';
+import { Playback, RuntimeStore, SimpleDirection, SimplePlayback } from 'ontime-types';
 import { createWithEqualityFn, useStoreWithEqualityFn } from 'zustand/traditional';
 
 export const runtimeStorePlaceholder: RuntimeStore = {
@@ -44,6 +44,12 @@ export const runtimeStorePlaceholder: RuntimeStore = {
   eventNext: null,
   publicEventNow: null,
   publicEventNext: null,
+  timer1: {
+    current: 0,
+    direction: SimpleDirection.CountUp,
+    duration: 0,
+    playback: SimplePlayback.Stop,
+  },
 };
 
 const deepCompare = <T>(a: T, b: T) => isEqual(a, b);