V2 monorepo (#285)

* refactor(project structure): UI * refactor(project structure): extract utilities * refactor(project structure): remove unused * refactor(project structure): electron * refactor(project structure): server refactor: migrate to vitest refactor: monorepo config * refactor: extract application menu * refactor: exit process * refactor: extract tray menu * chore: electron build * Added Seconds in studio clock #282 --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> --------- Co-authored-by: Fabian Posenau <fabian.p99@gmx.de> Co-authored-by: Fabian Posenau <fabian@fphome.de>
2026-08-18 05:34:09 +00:00 · 2023-02-14 22:02:15 +01:00
parent 3918758d32
commit de9a7a87fd
439 changed files with 11381 additions and 14294 deletions
@@ -0,0 +1,82 @@
+import { Tooltip } from '@chakra-ui/react';
+
+import TimerDisplay from '../../../common/components/timer-display/TimerDisplay';
+import { setPlayback, useTimer } from '../../../common/hooks/useSocket';
+import { Playback } from '../../../common/models/OntimeTypes';
+import { stringFromMillis } from '../../../common/utils/time';
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+import TapButton from './TapButton';
+
+import style from './PlaybackControl.module.scss';
+
+interface PlaybackTimerProps {
+  playback: Playback;
+  selectedId: string | null;
+}
+
+export default function PlaybackTimer(props: PlaybackTimerProps) {
+  const { playback, selectedId } = props;
+  const { data: timerData } = 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;
+
+  return (
+    <div className={style.timeContainer}>
+      <div className={style.indicators}>
+        <Tooltip label='Roll mode active'>
+          <div className={isRolling ? style.indRollActive : style.indRoll} />
+        </Tooltip>
+        <div className={isOvertime ? style.indNegativeActive : style.indNegative} />
+        <div className={style.indDelay} />
+      </div>
+      <div className={style.timer}>
+        <TimerDisplay time={isWaiting ? timerData.secondaryTimer : timerData.current} small />
+      </div>
+      {isWaiting ? (
+        <div className={style.roll}>
+          <span className={style.rolltag}>Roll: Countdown to start</span>
+        </div>
+      ) : (
+        <>
+          <div className={style.start}>
+            <span className={style.tag}>Started at </span>
+            <span className={style.time}>{started}</span>
+          </div>
+          <div className={style.finish}>
+            <span className={style.tag}>Finish at </span>
+            <span className={style.time}>{finish}</span>
+          </div>
+        </>
+      )}
+      <div className={style.btn}>
+        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
+          <TapButton onClick={() => setPlayback.delay(-1)} disabled={disableButtons} square>
+            -1
+          </TapButton>
+        </Tooltip>
+        <Tooltip label='Add 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
+          <TapButton onClick={() => setPlayback.delay(1)} disabled={disableButtons} square>
+            +1
+          </TapButton>
+        </Tooltip>
+        <Tooltip label='Remove 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
+          <TapButton onClick={() => setPlayback.delay(-5)} disabled={disableButtons} square>
+            -5
+          </TapButton>
+        </Tooltip>
+        <Tooltip label='Add 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
+          <TapButton onClick={() => setPlayback.delay(+5)} disabled={disableButtons} square>
+            +5
+          </TapButton>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}