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-15 04:13:47 +00:00 · 2024-04-13 10:06:46 +02:00
parent debdbd1c5a
commit 55d1aca9b6
640 changed files with 26702 additions and 21623 deletions
@@ -1,5 +1,3 @@
-@use '../../../theme/v2Styles' as *;
-
 .inputItems {
  display: grid;
  grid-template-columns: 1fr auto;
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { IconButton, Input } from '@chakra-ui/react';
 import { IoEye } from '@react-icons/all-files/io5/IoEye';
 import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline';
@@ -22,9 +23,22 @@ interface InputRowProps {
 export default function InputRow(props: InputRowProps) {
  const { label, placeholder, text, visible, actionHandler, changeHandler, className, readonly } = props;

-  const handleInputChange = (newValue: string) => {
-    changeHandler(newValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const cursorPositionRef = useRef(0);
+
+  // sync cursor position with text
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.selectionStart = cursorPositionRef.current;
+      inputRef.current.selectionEnd = cursorPositionRef.current;
+    }
+  }, [text]);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    cursorPositionRef.current = event.target.selectionStart ?? 0;
+    changeHandler(event.target.value);
  };
+
  const classes = cx([style.inputRow, className]);

  return (
@@ -32,12 +46,13 @@ export default function InputRow(props: InputRowProps) {
      <label className={`${style.label} ${visible ? style.active : ''}`}>{label}</label>
      <div className={style.inputItems}>
        <Input
+          ref={inputRef}
          size='sm'
          variant='ontime-filled'
          readOnly={readonly}
          disabled={readonly}
          value={text}
-          onChange={(event) => handleInputChange(event.target.value)}
+          onChange={handleInputChange}
          placeholder={placeholder}
        />
        {readonly ? (
@@ -1,29 +1,12 @@
-@use '../../../theme/v2Styles' as *;
-
 .messageContainer {
  display: flex;
  flex-direction: column;
  gap: $section-spacing;
 }

-.onAirSection {
-  display: flex;
-  flex-direction: column;
-  gap: $element-spacing;
-}
-
 .buttonSection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: $element-spacing;
  margin-top: -0.5rem;
 }
-
-.label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-
-  &.active {
-    color: $action-text-color;
-  }
-}
@@ -1,89 +1,79 @@
 import { Button } from '@chakra-ui/react';
 import { IoEye } from '@react-icons/all-files/io5/IoEye';
 import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline';
-import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
-import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
 import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
 import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline';

 import { setMessage, useMessageControl } from '../../../common/hooks/useSocket';
+import { enDash } from '../../../common/utils/styleUtils';

 import InputRow from './InputRow';

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

-export default function MessageControl() {
-  const data = useMessageControl();
+const noop = () => undefined;

+export default function MessageControl() {
+  const message = useMessageControl();
+  const blink = message.timer.blink;
+  const blackout = message.timer.blackout;
  return (
    <div className={style.messageContainer}>
      <InputRow
        label='Public / Backstage screen message'
        placeholder='Shown in public and backstage screens'
-        text={data.publicMessage.text || ''}
-        visible={data.publicMessage.visible || false}
+        text={message.public.text || ''}
+        visible={message.public.visible || false}
        changeHandler={(newValue) => setMessage.publicText(newValue)}
-        actionHandler={() => setMessage.publicVisible(!data.publicMessage.visible)}
+        actionHandler={() => setMessage.publicVisible(!message.public.visible)}
      />
      <InputRow
        label='Lower third message'
        placeholder='Shown in lower third'
-        text={data.lowerMessage.text || ''}
-        visible={data.lowerMessage.visible || false}
+        text={message.lower.text || ''}
+        visible={message.lower.visible || false}
        changeHandler={(newValue) => setMessage.lowerText(newValue)}
-        actionHandler={() => setMessage.lowerVisible(!data.lowerMessage.visible)}
+        actionHandler={() => setMessage.lowerVisible(!message.lower.visible)}
      />
      <InputRow
        label='Timer'
        placeholder='Message shown in stage timer'
-        text={data.timerMessage.text || ''}
-        visible={data.timerMessage.visible || false}
-        changeHandler={(newValue) => setMessage.presenterText(newValue)}
-        actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)}
+        text={message.timer.text || ''}
+        visible={message.timer.visible || false}
+        changeHandler={(newValue) => setMessage.timerText(newValue)}
+        actionHandler={() => setMessage.timerVisible(!message.timer.visible)}
      />
      <div className={style.buttonSection}>
        <Button
          size='sm'
-          className={`${data.timerMessage.timerBlink ? style.blink : ''}`}
-          variant={data.timerMessage.timerBlink ? 'ontime-filled' : 'ontime-subtle'}
-          leftIcon={data.timerMessage.timerBlink ? <IoSunny size='1rem' /> : <IoSunnyOutline size='1rem' />}
-          onClick={() => setMessage.timerBlink(!data.timerMessage.timerBlink)}
+          className={`${blink ? style.blink : ''}`}
+          variant={blink ? 'ontime-filled' : 'ontime-subtle'}
+          leftIcon={blink ? <IoSunny size='1rem' /> : <IoSunnyOutline size='1rem' />}
+          onClick={() => setMessage.timerBlink(!blink)}
          data-testid='toggle timer blink'
        >
-          Blink message
+          Blink
        </Button>
        <Button
          size='sm'
          className={style.blackoutButton}
-          variant={data.timerMessage.timerBlackout ? 'ontime-filled' : 'ontime-subtle'}
-          leftIcon={data.timerMessage.timerBlackout ? <IoEye size='1rem' /> : <IoEyeOffOutline size='1rem' />}
-          onClick={() => setMessage.timerBlackout(!data.timerMessage.timerBlackout)}
+          variant={blackout ? 'ontime-filled' : 'ontime-subtle'}
+          leftIcon={blackout ? <IoEye size='1rem' /> : <IoEyeOffOutline size='1rem' />}
+          onClick={() => setMessage.timerBlackout(!blackout)}
          data-testid='toggle timer blackout'
        >
          Blackout screen
        </Button>
      </div>
      <InputRow
-        label='External Message'
-        placeholder='-'
+        label='External Message (read only)'
+        placeholder={enDash}
        readonly
-        text={data.externalMessage.text || ''}
-        visible={data.externalMessage.visible || false}
-        changeHandler={() => undefined}
-        actionHandler={() => undefined}
+        text={message.external.text || ''}
+        visible={message.external.visible || false}
+        changeHandler={noop}
+        actionHandler={noop}
      />
-      <div className={style.onAirSection}>
-        <label className={style.label}>Toggle On Air state</label>
-        <Button
-          size='sm'
-          variant={data.onAir ? 'ontime-filled' : 'ontime-subtle'}
-          leftIcon={data.onAir ? <IoMicSharp size='24px' /> : <IoMicOffOutline size='24px' />}
-          onClick={() => setMessage.onAir(!data.onAir)}
-          data-testid='toggle on air'
-        >
-          {data?.onAir ? 'Ontime is On Air' : 'Ontime is Off Air'}
-        </Button>
-      </div>
    </div>
  );
 }
@@ -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>;
+}