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-13 19:33:46 +00:00 · 2024-04-13 10:06:46 +02:00
parent debdbd1c5a
commit 55d1aca9b6
640 changed files with 26702 additions and 21623 deletions
@@ -4,6 +4,8 @@ import { Textarea, TextareaProps } from '@chakra-ui/react';
 import autosize from 'autosize/dist/autosize';

 export const AutoTextArea = (props: TextareaProps) => {
+  const { value } = props;
+
  const ref = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
@@ -12,7 +14,7 @@ export const AutoTextArea = (props: TextareaProps) => {
    return () => {
      autosize.destroy(node);
    };
-  }, []);
+  }, [value]);

  return (
    <Textarea
@@ -6,21 +6,24 @@ import style from './SwatchSelect.module.scss';

 interface SwatchProps {
  color: string;
-  onClick: (color: string) => void;
+  onClick?: (color: string) => void;
  isSelected?: boolean;
 }

 export default function Swatch(props: SwatchProps) {
  const { color, isSelected, onClick } = props;

-  const classes = cx([style.swatch, isSelected ? style.selected : null]);
+  const handleClick = () => {
+    onClick?.(color);
+  };
+  const classes = cx([style.swatch, isSelected ? style.selected : null, onClick ? style.selectable : null]);

  if (!color) {
    return (
-      <div className={`${classes} ${style.center}`} onClick={() => onClick('')}>
+      <div className={`${classes} ${style.center}`} onClick={handleClick}>
        <IoBan />
      </div>
    );
  }
-  return <div className={classes} style={{ backgroundColor: `${color}` }} onClick={() => onClick(color)} />;
+  return <div className={classes} style={{ backgroundColor: `${color}` }} onClick={handleClick} />;
 }
@@ -1,24 +1,27 @@
-
 .list {
  display: flex;
-  gap: 4px;
+  flex-wrap: wrap;
+  gap: 0.5rem
 }

 .swatch {
-  cursor: pointer;
-  aspect-ratio: 1;
  width: 2rem;
  height: 2rem;
-  border-radius: 16px;
-  border: 4px solid #262626;
+  aspect-ratio: 1;
+  border-radius: 99px;
+  border: 2px solid $gray-1200;

  &.selected {
-    border: 2px solid #578AF4;
+    border: 2px solid $blue-500;
+  }
+
+  &.selectable {
+    cursor: pointer;
  }
 }

 .center {
  display: grid;
  place-content: center;
-  color: #578AF4;
-}
+  color: $ui-white;
+}
@@ -1,15 +1,13 @@
 import { useCallback } from 'react';

-import { EditorUpdateFields } from '../../../../features/event-editor/EventEditor';
-
 import Swatch from './Swatch';

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

 interface ColourInputProps {
  value: string;
-  name: EditorUpdateFields;
-  handleChange: (newValue: EditorUpdateFields, name: string) => void;
+  name: 'colour';
+  handleChange: (newValue: 'colour', name: string) => void;
 }

 const colours = [
@@ -1,5 +1,3 @@
-@use '../../../../theme/v2Styles' as *;
-
 $input-font-size: 15px;

 .delayInput {
@@ -21,6 +21,7 @@ export default function DelayInput(props: DelayInputProps) {
  // avoid wrong submit on cancel
  let ignoreChange = false;

+  // set internal value on duration change
  useEffect(() => {
    if (typeof duration === 'undefined') {
      return;
@@ -1,6 +1,3 @@
-@use "../../../../theme/_ontimeColours" as *;
-@use "../../../../theme/_v2Styles" as *;
-
 .swatch {
  width: 24px;
  height: 24px;
@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'react';
 import { Input, Textarea } from '@chakra-ui/react';

-import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
+import { EventEditorSubmitActions } from '../../../../features/rundown/event-editor/EventEditor';
 import { Size } from '../../../models/Util.type';

 import useReactiveTextInput from './useReactiveTextInput';
@@ -1,37 +1,4 @@
-@use "../../../../theme/v2Styles" as *;
-
-$input-font-size: 15px;
-$input-delayed-border-color: #E69056;
-
 .timeInput {
-  width: fit-content !important;
-
-  .inputLeft {
-    max-width: fit-content;
-  }
-
-  .inputLeft,
-  .inputButton {
-    aspect-ratio: 1;
-  }
-
-  .inputField {
-    font-size: $input-font-size;
    letter-spacing: 1px;
-    width: 7.5em;
-    padding: 0 0 0 2.6em;
-  }
-
-  .warn {
-    &::after {
-      content: "*";
-      color: $warning-orange;
-    }
-  }
-
-  &.delayed {
-    .inputField {
-      border: 1px solid $input-delayed-border-color;
-    }
-  }
+    width: 6.5em;
 }
@@ -1,42 +1,23 @@
-import { FocusEvent, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Input, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { Input } from '@chakra-ui/react';
 import { millisToString } from 'ontime-utils';

-import { tooltipDelayFast } from '../../../../ontimeConfig';
 import { useEmitLog } from '../../../stores/logger';
 import { forgivingStringToMillis } from '../../../utils/dateConfig';
 import { cx } from '../../../utils/styleUtils';
-import { TimeEntryField } from '../../../utils/timesManager';

 import style from './TimeInput.module.scss';
-
-interface TimeInputProps {
-  id?: TimeEntryField;
-  name: TimeEntryField;
-  submitHandler: (field: TimeEntryField, value: number) => void;
+interface TimeInputProps<T extends string> {
+  name: T;
+  submitHandler: (field: T, value: string) => void;
  time?: number;
-  delay?: number;
  placeholder: string;
-  previousEnd?: number;
-  tooltip?: string;
+  disabled?: boolean;
+  className?: string;
 }

-function ButtonInitial(name: TimeEntryField) {
-  if (name === 'timeStart') return 'S';
-  if (name === 'timeEnd') return 'E';
-  if (name === 'durationOverride') return 'D';
-  return '';
-}
-
-function ButtonTooltip(name: TimeEntryField, tooltip?: string) {
-  if (name === 'timeStart') return `Start${tooltip ? `: ${tooltip}` : ''}`;
-  if (name === 'timeEnd') return `End${tooltip ? `: ${tooltip}` : ''}`;
-  if (name === 'durationOverride') return `Duration${tooltip ? `: ${tooltip}` : ''}`;
-  return '';
-}
-
-export default function TimeInput(props: TimeInputProps) {
-  const { id, name, submitHandler, time = 0, delay = 0, placeholder, previousEnd = 0 } = props;
+export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
+  const { name, submitHandler, time = 0, placeholder, disabled, className } = props;
  const { emitError } = useEmitLog();
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [value, setValue] = useState<string>('');
@@ -72,32 +53,20 @@ export default function TimeInput(props: TimeInputProps) {
        return false;
      }

-      let newValMillis = 0;
-
-      // check for known aliases
-      if (newValue === 'p' || newValue === 'prev' || newValue === 'previous') {
-        // string to pass should be the time of the end before
-        if (previousEnd != null) {
-          newValMillis = previousEnd;
-        }
-      } else if (newValue.startsWith('+') || newValue.startsWith('p+') || newValue.startsWith('p +')) {
-        // string to pass should add to the end before
-        const val = newValue.substring(1);
-        newValMillis = previousEnd + forgivingStringToMillis(val);
-      } else {
-        // convert entered value to milliseconds
-        newValMillis = forgivingStringToMillis(newValue);
+      // we dont know the values in the rundown, escalate to handler
+      if (newValue.startsWith('p') || newValue.startsWith('+')) {
+        submitHandler(name, newValue);
      }

-      // check if time is different from before
-      if (newValMillis === time) return false;
-
-      // update entry
-      submitHandler(name, newValMillis);
+      const valueInMillis = forgivingStringToMillis(newValue);
+      if (valueInMillis === time) {
+        return false;
+      }

+      submitHandler(name, newValue);
      return true;
    },
-    [name, previousEnd, submitHandler, time],
+    [name, submitHandler, time],
  );

  /**
@@ -107,15 +76,11 @@ export default function TimeInput(props: TimeInputProps) {
  const validateAndSubmit = useCallback(
    (newValue: string) => {
      const success = handleSubmit(newValue);
-      if (success) {
-        const ms = forgivingStringToMillis(newValue);
-        const delayed = name === 'timeEnd' ? Math.max(0, ms + delay) : Math.max(0, ms + delay);
-        setValue(millisToString(delayed));
-      } else {
+      if (!success) {
        resetValue();
      }
    },
-    [delay, handleSubmit, name, resetValue],
+    [handleSubmit, resetValue],
  );

  /**
@@ -126,9 +91,6 @@ export default function TimeInput(props: TimeInputProps) {
    (event: KeyboardEvent<HTMLInputElement>) => {
      if (event.key === 'Enter') {
        inputRef.current?.blur();
-        validateAndSubmit((event.target as HTMLInputElement).value);
-      } else if (event.key === 'Tab') {
-        validateAndSubmit((event.target as HTMLInputElement).value);
      }
      if (event.key === 'Escape') {
        ignoreChange.current = true;
@@ -136,7 +98,7 @@ export default function TimeInput(props: TimeInputProps) {
        resetValue();
      }
    },
-    [resetValue, validateAndSubmit],
+    [resetValue],
  );

  const onBlurHandler = useCallback(
@@ -155,51 +117,26 @@ export default function TimeInput(props: TimeInputProps) {
    resetValue();
  }, [resetValue, time]);

-  const isDelayed = delay !== 0;
-  const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
-  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null]);
-
-  const TooltipLabel = useMemo(() => {
-    return ButtonTooltip(name, '');
-  }, [name]);
-
-  const ButtonText = useMemo(() => {
-    return ButtonInitial(name);
-  }, [name]);
+  const timeInputClasses = cx([style.timeInput, className]);

  return (
-    <InputGroup size='sm' className={inputClasses}>
-      <InputLeftElement className={style.inputLeft}>
-        <Tooltip label={TooltipLabel} openDelay={tooltipDelayFast} variant='ontime-ondark'>
-          <Button
-            size='sm'
-            variant='ontime-subtle-white'
-            className={buttonClasses}
-            tabIndex={-1}
-            border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
-            borderRight='1px solid transparent'
-            borderRadius='2px 0 0 2px'
-          >
-            {ButtonText}
-          </Button>
-        </Tooltip>
-      </InputLeftElement>
-      <Input
-        ref={inputRef}
-        id={id}
-        data-testid={`time-input-${name}`}
-        className={style.inputField}
-        type='text'
-        placeholder={placeholder}
-        variant='ontime-filled'
-        onFocus={handleFocus}
-        onChange={(event) => setValue(event.target.value)}
-        onBlur={onBlurHandler}
-        onKeyDown={onKeyDownHandler}
-        value={value}
-        maxLength={8}
-        autoComplete='off'
-      />
-    </InputGroup>
+    <Input
+      disabled={disabled}
+      size='sm'
+      ref={inputRef}
+      data-testid={`time-input-${name}`}
+      className={timeInputClasses}
+      fontSize='1rem'
+      type='text'
+      placeholder={placeholder}
+      variant='ontime-filled'
+      onFocus={handleFocus}
+      onChange={(event) => setValue(event.target.value)}
+      onBlur={onBlurHandler}
+      onKeyDown={onKeyDownHandler}
+      value={value}
+      maxLength={8}
+      autoComplete='off'
+    />
  );
 }
@@ -0,0 +1,12 @@
+$input-delayed-border-color: $ontime-delay-text;
+
+.timeInput {
+  border: 1px solid transparent;
+  &.delayed {
+    border: 1px solid $input-delayed-border-color;
+  }
+}
+
+.inputField {
+  max-width: 7.75em;
+}
@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react';
+import { InputGroup } from '@chakra-ui/react';
+
+import { cx } from '../../../utils/styleUtils';
+
+import TimeInput from './TimeInput';
+
+import style from './TimeInputWithButton.module.scss';
+
+interface TimeInputWithButtonProps<T extends string> {
+  name: T;
+  submitHandler: (field: T, value: string) => void;
+  time?: number;
+  hasDelay?: boolean;
+  disabled?: boolean;
+  placeholder: string;
+}
+
+export default function TimeInputWithButton<T extends string>(props: PropsWithChildren<TimeInputWithButtonProps<T>>) {
+  const { name, submitHandler, time, hasDelay, placeholder, disabled, children } = props;
+
+  const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]);
+
+  return (
+    <InputGroup size='sm' className={inputClasses} width='fit-content'>
+      <TimeInput<T>
+        name={name}
+        submitHandler={submitHandler}
+        time={time}
+        placeholder={placeholder}
+        className={style.inputField}
+        disabled={disabled}
+      />
+      {children}
+    </InputGroup>
+  );
+}