V3 (#657)

* refactor: cleanup routes * style: smaller base font * chore: upgrade dependencies * chore: lock node version to electron * refactor: pass HTTP to integration controller (#652) * refactor: deprecate onair control * refactor: remove playback router * Several project files user folder (#617) * chore: automated screenshots (#667) * feat: app settings (#658) * refactor: remove deprecated event data (#674) * Studio clock (#663) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Feat: reorder events with alt+ctrl + arrow up/down (#645) * Warning and danger per event (#677) --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> * refactor: stabilise actionHandler (#683) Co-authored-by: Fabian Posenau <fabian@fphome.de> * improvement: hide seconds (#675) * wip: overview (#688) * fix: focus cursor (#695) * refactor: update lower third (#665) * Refactor/time formatting (#696) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * feat: multiple selection (#703) --------- Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Alex <ac@omnivox.dk> * fix: test - go to `Edit mode` befor tying to click `Event options` button (#708) * refactor: runtime service (#715) * fix: issue with loosing cursor position on message (#719) * remove info panel (#721) * Event editor continue (#722) * update API - part (#709) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * refactor: update timers (#729) * feat: many timers (#706) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * refactor: excel cleanup (#734) * refactor: allow import of blocks and skip import (#735) * Project manager (#697) * refactor: UI for linking events (#763) * upgraded pipeline actions (#777) * Over under (#771) * custom fields (#744) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Sheets settings (#774) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * style: tweaks to lower thirds (#785) * refactor: delays account for gaps (#784) * refactor: partial state updates (#780) * feat: generate crash report (#787) * Sheet use limited input device auth flow (#782) --------- Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Custom fields views (#789) * refactor: deprecate presenter and subtitle (#795) * refactor: organise API around resources (#798) --------- Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> * Time to end (#804) * Skip fixes (#805) * fix: onair derives from playback * Param nav (#822) --------- Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> * refactor: download files from interface (#831) * Quick options (#814) * End pause (#832) * chore: bump node version in docker (#834) * refactor: follow in run mode (#840) * fix: uncaught error in http integration (#837) * Apply project (#843) Co-authored-by: Matteo Gheza <matteo.gheza07@gmail.com> Co-authored-by: Ary <arylmoraesn@gmail.com> Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com> Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: Alex Rohleder <alexrohleder96@gmail.com> Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> Co-authored-by: Fabian Posenau <fabianpos99+github@gmail.com>
2026-08-16 04:43:35 +00:00 · 2024-04-13 10:06:46 +02:00
parent debdbd1c5a
commit 55d1aca9b6
640 changed files with 26702 additions and 21623 deletions
@@ -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>
  );
 }
@@ -0,0 +1,5 @@
+.extraRow {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 2rem;
+}
@@ -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} aspect='tight'>
+        {direction === SimpleDirection.CountDown && <IoArrowDown data-testid='aux-timer-direction' />}
+        {direction === SimpleDirection.CountUp && <IoArrowUp data-testid='aux-timer-direction' />}
+      </TapButton>
+
+      <TapButton
+        onClick={start}
+        theme={Playback.Play}
+        active={playback === SimplePlayback.Start}
+        disabled={!userCan.start}
+      >
+        <IoPlay data-testid='aux-timer-start' />
+      </TapButton>
+      <TapButton
+        onClick={pause}
+        theme={Playback.Pause}
+        active={playback === SimplePlayback.Pause}
+        disabled={!userCan.pause}
+      >
+        <IoPause data-testid='aux-timer-pause' />
+      </TapButton>
+      <TapButton onClick={stop} theme={Playback.Stop} disabled={!userCan.stop}>
+        <IoStop data-testid='aux-timer-stop' />
+      </TapButton>
+    </div>
+  );
+}
+
+function ExtraTimeInput() {
+  const time = useExtraTimerTime();
+  const { setDuration } = setExtraTimer;
+
+  const handleTimeUpdate = (_field: string, value: string) => {
+    const newTime = forgivingStringToMillis(value);
+    setDuration(newTime / 1000); //frontend api is seconds based;
+  };
+
+  return (
+    <TimeInput<'auxTimer'> submitHandler={handleTimeUpdate} name='auxTimer' time={time} placeholder='Aux Timer 1' />
+  );
+}
@@ -1,5 +1,3 @@
-@use '../../../../theme/v2Styles' as *;
-
 .buttonContainer {
  padding-top: $element-spacing;
  display: grid;
@@ -28,20 +28,21 @@ 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;
  const noEvents = numEvents === 0;

  const disableGo = isRolling || noEvents || (isLast && !isArmed);
-  const disablePrev = noEvents || isFirst;
+  const disableNext = isRolling || noEvents || isLast;
+  const disablePrev = isRolling || noEvents || isFirst;

  const playbackCan = validatePlayback(playback);
  const disableStart = !playbackCan.start;
  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 = () => {
@@ -73,7 +74,7 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
          </TapButton>
        </Tooltip>
        <Tooltip label='Next event' openDelay={tooltipDelayMid}>
-          <TapButton onClick={setPlayback.next} disabled={disableGo}>
+          <TapButton onClick={setPlayback.next} disabled={disableNext}>
            <IoPlaySkipForward />
          </TapButton>
        </Tooltip>
@@ -83,7 +84,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>
@@ -1,6 +1,3 @@
-@use '../../../../theme/v2Styles' as *;
-@use '../../../../theme/ontimeColours' as *;
-
 .timeContainer {
  display: grid;
  grid-template-areas:
@@ -12,12 +9,6 @@
  justify-items: start;
 }

-.timer {
-  grid-area: clk;
-  white-space: nowrap;
-  max-width: 18.75rem;
-}
-
 .indicators {
  grid-area: ind;
  width: 100%;
@@ -95,16 +86,17 @@
  grid-area: 2 / 2 / 2 / 4 ;
 }

+.tag {
+  color: $label-gray;
+  font-size: calc(1rem - 2px);
+  margin-right: 0.25rem;
+}
+
 .time {
  color: $section-white;
  font-size: $text-body-size;
 }

-.tag {
-  color: $label-gray;
-  font-size: 13px;
-}
-
 .rolltag {
  color: $ontime-roll;
  font-size: $text-body-size;
@@ -1,12 +1,11 @@
 import { Tooltip } from '@chakra-ui/react';
 import { Playback } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
+import { dayInMs, millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils';

-import TimerDisplay from '../../../../common/components/timer-display/TimerDisplay';
 import { setPlayback, useTimer } from '../../../../common/hooks/useSocket';
-import { millisToMinutes, millisToSeconds } from '../../../../common/utils/dateConfig';
 import { tooltipDelayMid } from '../../../../ontimeConfig';
 import TapButton from '../tap-button/TapButton';
+import TimerDisplay from '../timer-display/TimerDisplay';

 import style from './PlaybackTimer.module.scss';

@@ -18,9 +17,10 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
  const { playback } = props;
  const timer = useTimer();

-  // TODO: checkout typescript in utilities
  const started = millisToString(timer.startedAt);
-  const finish = millisToString(timer.expectedFinish);
+  const expectedFinish = timer.expectedFinish !== null ? timer.expectedFinish % dayInMs : null;
+  const finish = millisToString(expectedFinish);
+
  const isRolling = playback === Playback.Roll;
  const isStopped = playback === Playback.Stop;
  const isWaiting = timer.secondaryTimer !== null && timer.secondaryTimer > 0 && timer.current === null;
@@ -65,9 +65,7 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
          <div className={hasAddedTime ? style.indDelayActive : style.indDelay} />
        </Tooltip>
      </div>
-      <div className={style.timer}>
-        <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
-      </div>
+      <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
      {isWaiting ? (
        <div className={style.roll}>
          <span className={style.rolltag}>Roll: Countdown to start</span>
@@ -75,11 +73,11 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
      ) : (
        <>
          <div className={style.start}>
-            <span className={style.tag}>Started at </span>
+            <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.tag}>Expect end</span>
            <span className={style.time}>{finish}</span>
          </div>
        </>
@@ -1,6 +1,3 @@
-@use '../../../../theme/v2Styles' as *;
-@use '../../../../theme/ontimeColours' as *;
-
 $button-bg-gray: $gray-1050;
 $button-color-white: $gray-50;

@@ -82,6 +79,11 @@ $button-color-white: $gray-50;
  font-size: calc(1rem - 2px);
 }

+.tapButton.tight {
+  padding-inline: 0.5rem;
+  width: fit-content
+}
+
 .tapButton.fill {
  aspect-ratio: unset;
  height: 100%;
@@ -7,8 +7,7 @@ import style from './TapButton.module.scss';

 interface TapButtonProps {
  disabled?: boolean;
-  aspect?: 'normal' | 'square' | 'fill';
-  square?: boolean;
+  aspect?: 'normal' | 'square' | 'fill' | 'tight';
  free?: boolean;
  onClick: () => void;
  theme?: Playback | 'neutral';
@@ -0,0 +1,20 @@
+@use '../../../../theme/viewerDefs' as *;
+
+.timer {
+  grid-area: clk;
+  white-space: nowrap;
+  max-width: 18.75rem;
+  min-width: 5em;
+
+  font-family: var(--font-family-override, $viewer-font-family);
+  color: var(--timer-color-override, $timer-color);
+  line-height: 0.9em;
+  text-align: center;
+  letter-spacing: 0.1em;
+  font-weight: 600;
+  font-size: 3.5rem;
+  
+  &.finished {
+    color: $timer-finished-color;
+  }
+}
@@ -0,0 +1,28 @@
+import { MaybeNumber } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+
+import { cx, timerPlaceholder } from '../../../../common/utils/styleUtils';
+
+import style from './TimerDisplay.module.scss';
+
+interface TimerDisplayProps {
+  time: MaybeNumber;
+}
+
+/**
+ * Displays time in ms in formatted timetag
+ * Used in editor
+ */
+export default function TimerDisplay(props: TimerDisplayProps) {
+  const { time } = props;
+
+  if (time == null) {
+    return <div className={style.timer}>{timerPlaceholder}</div>;
+  }
+
+  const isNegative = time < 0;
+  const display = millisToString(Math.abs(time), { fallback: timerPlaceholder });
+  const classes = cx([style.timer, isNegative ? style.finished : null]);
+
+  return <div className={classes}>{display}</div>;
+}