V2 styles part2 (#233)

* style: create tag to display network messages * style: create button style for playback * style: review style for QuickEntry * style: review style for Info panel * style: review style for Event blocks * style: review style for Message control panel * style: review style for Playback control * style: review application styles * style: review block styles * refactor: TapButton has active state * style: small style tweaks * refactor: type checks
2026-08-19 06:04:05 +00:00 · 2022-10-26 15:12:57 +02:00
parent 1b1aced296
commit 54442dc9a1
42 changed files with 611 additions and 405 deletions
@@ -0,0 +1,105 @@
+import { Tooltip } from '@chakra-ui/react';
+import TimerDisplay from 'common/components/countdown/TimerDisplay';
+
+import {
+  usePlaybackControlProvider,
+  useTimerProvider,
+} from '../../../common/hooks/useSocketProvider';
+import { Playstate } from '../../../common/models/OntimeTypes';
+import { millisToSeconds } from '../../../common/utils/dateConfig';
+import { stringFromMillis } from '../../../common/utils/time';
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+import TapButton from './TapButton';
+
+import style from './PlaybackControl.module.scss';
+
+interface PlaybackTimerProps {
+  playback: Playstate;
+  selectedId: string | null;
+}
+
+export default function PlaybackTimer(props: PlaybackTimerProps) {
+  const { playback, selectedId } = props;
+  const { setPlayback } = usePlaybackControlProvider();
+  const timerData = useTimerProvider();
+  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 ? millisToSeconds(timerData.secondaryTimer) : millisToSeconds(timerData.current)}
+          isNegative={isOvertime}
+          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(-5)}
+            disabled={disableButtons}
+            square>
+            -5
+          </TapButton>
+        </Tooltip>
+        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid}
+                 shouldWrapChildren={disableButtons}>
+          <TapButton
+            onClick={() => setPlayback.delay(-5)}
+            disabled={disableButtons}
+            square>
+            -1
+          </TapButton>
+        </Tooltip>
+        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid}
+                 shouldWrapChildren={disableButtons}>
+          <TapButton
+            onClick={() => setPlayback.delay(-5)}
+            disabled={disableButtons}
+            square>
+            1
+          </TapButton>
+        </Tooltip>
+        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid}
+                 shouldWrapChildren={disableButtons}>
+          <TapButton
+            onClick={() => setPlayback.delay(-5)}
+            disabled={disableButtons}
+            square>
+            5
+          </TapButton>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};