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/features/control/playback/PlaybackControl.tsx

@@ -2,6 +2,7 @@ import { Playback } from 'ontime-types';
 
 import { usePlaybackControl } from '../../../common/hooks/useSocket';
 
+import { ExtraTimer } from './extra-timer/ExtraTimer';
 import PlaybackButtons from './playback-buttons/PlaybackButtons';
 import PlaybackTimer from './playback-timer/PlaybackTimer';
 
@@ -18,6 +19,7 @@ export default function PlaybackControl() {
         numEvents={data.numEvents}
         selectedEventIndex={data.selectedEventIndex}
       />
+      <ExtraTimer />
     </div>
   );
 }

apps/client/src/features/control/playback/extra-timer/ExtraTimer.module.scss

@@ -0,0 +1,5 @@
+.extraRow {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 2rem;
+}

apps/client/src/features/control/playback/extra-timer/ExtraTimer.tsx

@@ -0,0 +1,74 @@
+import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import { Playback, SimpleDirection, SimplePlayback } from 'ontime-types';
+
+import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import { setExtraTimer, useExtraTimerControl, useExtraTimerTime } from '../../../../common/hooks/useSocket';
+import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
+import TapButton from '../tap-button/TapButton';
+
+import style from './ExtraTimer.module.scss';
+
+export function ExtraTimer() {
+  const { playback, direction } = useExtraTimerControl();
+
+  const { start, pause, stop, setDirection } = setExtraTimer;
+
+  const toggleDirection = () => {
+    const newDirection = direction === SimpleDirection.CountDown ? SimpleDirection.CountUp : SimpleDirection.CountDown;
+    setDirection(newDirection);
+  };
+
+  const userCan = {
+    start: playback !== SimplePlayback.Start,
+    pause: playback === SimplePlayback.Start,
+    stop: playback !== SimplePlayback.Stop,
+  };
+
+  return (
+    <div className={style.extraRow}>
+      <ExtraTimeInput />
+      <TapButton onClick={toggleDirection}>
+        {direction === SimpleDirection.CountDown && <IoArrowDown />}
+        {direction === SimpleDirection.CountUp && <IoArrowUp />}
+      </TapButton>
+
+      <TapButton
+        onClick={start}
+        theme={Playback.Play}
+        active={playback === SimplePlayback.Start}
+        disabled={!userCan.start}
+      >
+        <IoPlay />
+      </TapButton>
+      <TapButton
+        onClick={pause}
+        theme={Playback.Pause}
+        active={playback === SimplePlayback.Pause}
+        disabled={!userCan.pause}
+      >
+        <IoPause />
+      </TapButton>
+      <TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
+        <IoStop />
+      </TapButton>
+    </div>
+  );
+}
+
+function ExtraTimeInput() {
+  const time = useExtraTimerTime();
+  const { setTime } = setExtraTimer;
+
+  const handleTimeUpdate = (_field: string, value: string) => {
+    const newTime = forgivingStringToMillis(value);
+    setTime(newTime);
+  };
+
+  return (
+    <TimeInput<'extraTimer'> submitHandler={handleTimeUpdate} name='extraTimer' time={time} placeholder='Timer 1' />
+  );
+}

apps/client/src/features/control/playback/tap-button/TapButton.tsx

@@ -8,7 +8,6 @@ import style from './TapButton.module.scss';
 interface TapButtonProps {
   disabled?: boolean;
   aspect?: 'normal' | 'square' | 'fill';
-  square?: boolean;
   free?: boolean;
   onClick: () => void;
   theme?: Playback | 'neutral';

apps/client/src/features/editors/Editor.module.scss

@@ -1,7 +1,7 @@
 @use './EditorMixin' as editor;
 
 $menu-width: 2.75rem;
-$playback-width: 26rem;
+$playback-width: 30rem;
 
 .corner {
   @include editor.corner;