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-20 14:39:06 +00:00 · 2024-04-13 10:06:46 +02:00
parent debdbd1c5a
commit 55d1aca9b6
640 changed files with 26702 additions and 21623 deletions
@@ -0,0 +1,90 @@
+.eventEditor {
+  color: $label-gray;
+  max-height: 100%;
+  overflow-y: auto;
+  padding: 0.5rem;
+
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+}
+
+.content {
+  padding-right: 4px;
+  padding-bottom: 4rem;
+
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  overflow-y: auto;
+}
+
+.footer {
+  border-top: 1px solid $white-10;
+  padding-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.timeSettings {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.inputLabel {
+  display: block;
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+  margin-bottom: 0.25rem;
+  text-transform: capitalize;
+}
+
+.decorated {
+  color: var(--decorator-color, $ui-white);
+  background-color: var(--decorator-bg, $gray-1100);
+  width: fit-content;
+  padding: 0 0.5rem;
+  border-radius: 2px;
+}
+
+.delayLabel {
+  font-size: calc(1rem - 3px);
+  color: $ontime-delay-text;
+  margin-top: 0.25rem;
+
+  &::after {
+    content: '\200b';
+  }
+}
+
+.switchLabel {
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: max-content;
+  cursor: pointer;
+}
+
+.inline {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.splitTwo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 1.5rem;
+  row-gap: 1rem;
+}
@@ -0,0 +1,137 @@
+import { CSSProperties, useCallback, useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Button } from '@chakra-ui/react';
+import { CustomFieldLabel, isOntimeEvent, OntimeEvent } from 'ontime-types';
+
+import CopyTag from '../../../common/components/copy-tag/CopyTag';
+import { useEventAction } from '../../../common/hooks/useEventAction';
+import useCustomFields from '../../../common/hooks-query/useCustomFields';
+import useRundown from '../../../common/hooks-query/useRundown';
+import { getAccessibleColour } from '../../../common/utils/styleUtils';
+import { useEventSelection } from '../useEventSelection';
+
+import EventEditorTimes from './composite/EventEditorTimes';
+import EventEditorTitles from './composite/EventEditorTitles';
+import EventTextArea from './composite/EventTextArea';
+
+import style from './EventEditor.module.scss';
+
+export type EventEditorSubmitActions = keyof OntimeEvent;
+
+export type EditorUpdateFields = 'cue' | 'title' | 'note' | 'colour' | CustomFieldLabel;
+
+export default function EventEditor() {
+  const selectedEvents = useEventSelection((state) => state.selectedEvents);
+  const { data } = useRundown();
+  const { data: customFields } = useCustomFields();
+  const { order, rundown } = data;
+  const { updateEvent } = useEventAction();
+  const [_searchParams, setSearchParams] = useSearchParams();
+
+  const [event, setEvent] = useState<OntimeEvent | null>(null);
+
+  useEffect(() => {
+    if (order.length === 0) {
+      setEvent(null);
+      return;
+    }
+
+    const selectedEventId = order.find((eventId) => selectedEvents.has(eventId));
+    if (!selectedEventId) {
+      setEvent(null);
+      return;
+    }
+    const event = rundown[selectedEventId];
+
+    if (event && isOntimeEvent(event)) {
+      setEvent(event);
+    } else {
+      setEvent(null);
+    }
+  }, [order, rundown, selectedEvents]);
+
+  const handleSubmit = useCallback(
+    (field: EditorUpdateFields, value: string) => {
+      if (field.startsWith('custom-')) {
+        const fieldLabel = field.split('custom-')[1];
+        updateEvent({ id: event?.id, custom: { [fieldLabel]: { value } } });
+      } else {
+        updateEvent({ id: event?.id, [field]: value });
+      }
+    },
+    [event?.id, updateEvent],
+  );
+
+  const handleOpenCustomManager = () => {
+    setSearchParams({ settings: 'project_settings__custom' });
+  };
+
+  if (!event) {
+    return (
+      <div className={style.eventEditor} data-testid='editor-container'>
+        Select an event to edit
+      </div>
+    );
+  }
+
+  return (
+    <div className={style.eventEditor} data-testid='editor-container'>
+      <div className={style.content}>
+        <EventEditorTimes
+          key={`${event.id}-times`}
+          eventId={event.id}
+          timeStart={event.timeStart}
+          timeEnd={event.timeEnd}
+          duration={event.duration}
+          timeStrategy={event.timeStrategy}
+          linkStart={event.linkStart}
+          delay={event.delay ?? 0}
+          isPublic={event.isPublic}
+          endAction={event.endAction}
+          timerType={event.timerType}
+          timeWarning={event.timeWarning}
+          timeDanger={event.timeDanger}
+        />
+        <EventEditorTitles
+          key={`${event.id}-titles`}
+          eventId={event.id}
+          cue={event.cue}
+          title={event.title}
+          note={event.note}
+          colour={event.colour}
+          handleSubmit={handleSubmit}
+        />
+        <div className={style.column}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <span>Custom Fields</span>
+            <Button variant='ontime-subtle' size='sm' onClick={handleOpenCustomManager}>
+              Manage
+            </Button>
+          </div>
+          {Object.keys(customFields).map((label) => {
+            const key = `${event.id}-${label}`;
+            const fieldName = `custom-${label}`;
+            const initialValue = event.custom[label]?.value ?? '';
+            const { backgroundColor, color } = getAccessibleColour(customFields[label].colour);
+
+            return (
+              <EventTextArea
+                key={key}
+                field={fieldName}
+                label={label}
+                initialValue={initialValue}
+                submitHandler={handleSubmit}
+                className={style.decorated}
+                style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <div className={style.footer}>
+        <CopyTag label='OSC trigger by id'>{`/ontime/load/id "${event.id}"`}</CopyTag>
+        <CopyTag label='OSC trigger by cue'>{`/ontime/load/cue "${event.cue}"`}</CopyTag>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,146 @@
+import { memo } from 'react';
+import { Select, Switch } from '@chakra-ui/react';
+import { EndAction, MaybeString, TimerType, TimeStrategy } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+
+import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import { useEventAction } from '../../../../common/hooks/useEventAction';
+import { forgivingStringToMillis, millisToDelayString } from '../../../../common/utils/dateConfig';
+import TimeInputFlow from '../../time-input-flow/TimeInputFlow';
+
+import style from '../EventEditor.module.scss';
+
+interface EventEditorTimesProps {
+  eventId: string;
+  timeStart: number;
+  timeEnd: number;
+  duration: number;
+  timeStrategy: TimeStrategy;
+  linkStart: MaybeString;
+  delay: number;
+  isPublic: boolean;
+  endAction: EndAction;
+  timerType: TimerType;
+  timeWarning: number;
+  timeDanger: number;
+}
+
+type HandledActions = 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';
+
+const EventEditorTimes = (props: EventEditorTimesProps) => {
+  const {
+    eventId,
+    timeStart,
+    timeEnd,
+    duration,
+    timeStrategy,
+    linkStart,
+    delay,
+    isPublic,
+    endAction,
+    timerType,
+    timeWarning,
+    timeDanger,
+  } = props;
+  const { updateEvent } = useEventAction();
+
+  const handleSubmit = (field: HandledActions, value: string | boolean) => {
+    if (field === 'isPublic') {
+      updateEvent({ id: eventId, isPublic: !(value as boolean) });
+      return;
+    }
+
+    if (field === 'timeWarning' || field === 'timeDanger') {
+      const newTime = forgivingStringToMillis(value as string);
+      updateEvent({ id: eventId, [field]: newTime });
+      return;
+    }
+
+    if (field === 'timerType' || field === 'endAction') {
+      updateEvent({ id: eventId, [field]: value });
+      return;
+    }
+  };
+
+  const hasDelay = delay !== 0;
+  const delayLabel = hasDelay
+    ? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${millisToString(
+        timeStart + delay,
+      )} → ${millisToString(timeEnd + delay)}`
+    : '';
+
+  return (
+    <div className={style.column}>
+      <div>
+        <div className={style.inputLabel}>Event schedule</div>
+        <div className={style.inline}>
+          <TimeInputFlow
+            eventId={eventId}
+            timeStart={timeStart}
+            timeEnd={timeEnd}
+            duration={duration}
+            timeStrategy={timeStrategy}
+            linkStart={linkStart}
+            delay={delay}
+          />
+        </div>
+        <div className={style.delayLabel}>{delayLabel}</div>
+      </div>
+
+      <div className={style.splitTwo}>
+        <div>
+          <label className={style.inputLabel} htmlFor='timeWarning'>
+            Warning Time
+          </label>
+          <TimeInput name='timeWarning' submitHandler={handleSubmit} time={timeWarning} placeholder='Duration' />
+        </div>
+        <div>
+          <label className={style.inputLabel}>Timer Type</label>
+          <Select
+            size='sm'
+            name='timerType'
+            value={timerType}
+            onChange={(event) => handleSubmit('timerType', event.target.value)}
+            variant='ontime'
+          >
+            <option value={TimerType.CountDown}>Count down</option>
+            <option value={TimerType.CountUp}>Count up</option>
+            <option value={TimerType.TimeToEnd}>Time to end</option>
+            <option value={TimerType.Clock}>Clock</option>
+          </Select>
+        </div>
+        <div>
+          <label className={style.inputLabel} htmlFor='timeDanger'>
+            Danger Time
+          </label>
+          <TimeInput name='timeDanger' submitHandler={handleSubmit} time={timeDanger} placeholder='Duration' />
+        </div>
+        <div>
+          <label className={style.inputLabel}>End Action</label>
+          <Select
+            size='sm'
+            name='endAction'
+            value={endAction}
+            onChange={(event) => handleSubmit('endAction', event.target.value)}
+            variant='ontime'
+          >
+            <option value={EndAction.None}>None</option>
+            <option value={EndAction.Stop}>Stop</option>
+            <option value={EndAction.LoadNext}>Load Next</option>
+            <option value={EndAction.PlayNext}>Play Next</option>
+          </Select>
+        </div>
+      </div>
+
+      <div>
+        <span className={style.inputLabel}>Event Visibility</span>
+        <label className={style.switchLabel}>
+          <Switch size='md' isChecked={isPublic} onChange={() => handleSubmit('isPublic', isPublic)} variant='ontime' />
+          {isPublic ? 'Public' : 'Private'}
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default memo(EventEditorTimes);
@@ -0,0 +1,57 @@
+import { memo } from 'react';
+import { Input } from '@chakra-ui/react';
+import { sanitiseCue } from 'ontime-utils';
+
+import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
+import { type EditorUpdateFields } from '../EventEditor';
+
+import EventTextArea from './EventTextArea';
+import EventTextInput from './EventTextInput';
+
+import style from '../EventEditor.module.scss';
+
+interface EventEditorTitlesProps {
+  eventId: string;
+  cue: string;
+  title: string;
+  note: string;
+  colour: string;
+  handleSubmit: (field: EditorUpdateFields, value: string) => void;
+}
+
+const EventEditorTitles = (props: EventEditorTitlesProps) => {
+  const { eventId, cue, title, note, colour, handleSubmit } = props;
+
+  const cueSubmitHandler = (_field: string, newValue: string) => {
+    handleSubmit('cue', sanitiseCue(newValue));
+  };
+
+  return (
+    <div className={style.column}>
+      <div className={style.splitTwo}>
+        <div>
+          <label className={style.inputLabel} htmlFor='eventId'>
+            Event ID (read only)
+          </label>
+          <Input
+            id='eventId'
+            size='sm'
+            variant='ontime-filled'
+            data-testid='input-textfield'
+            value={eventId}
+            readOnly
+          />
+        </div>
+        <EventTextInput field='cue' label='Cue' initialValue={cue} submitHandler={cueSubmitHandler} maxLength={10} />
+      </div>
+      <div>
+        <label className={style.inputLabel}>Colour</label>
+        <SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
+      </div>
+      <EventTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
+      <EventTextArea field='note' label='Note' initialValue={note} submitHandler={handleSubmit} />
+    </div>
+  );
+};
+
+export default memo(EventEditorTitles);
@@ -0,0 +1,46 @@
+import { CSSProperties, useCallback } from 'react';
+
+import { AutoTextArea } from '../../../../common/components/input/auto-text-area/AutoTextArea';
+import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
+import { cx } from '../../../../common/utils/styleUtils';
+import { EditorUpdateFields } from '../EventEditor';
+
+import style from '../EventEditor.module.scss';
+
+interface CountedTextAreaProps {
+  className?: string;
+  field: EditorUpdateFields;
+  label: string;
+  initialValue: string;
+  style?: CSSProperties;
+  submitHandler: (field: EditorUpdateFields, value: string) => void;
+}
+
+export default function EventTextArea(props: CountedTextAreaProps) {
+  const { className, field, label, initialValue, style: givenStyles, submitHandler } = props;
+
+  const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
+
+  const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback);
+  const classes = cx([style.inputLabel, className]);
+
+  return (
+    <div>
+      <label className={classes} htmlFor={field} style={givenStyles}>
+        {label}
+      </label>
+      <AutoTextArea
+        id={field}
+        rows={1}
+        size='sm'
+        resize='none'
+        variant='ontime-filled'
+        data-testid='input-textarea'
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { Input, InputProps } from '@chakra-ui/react';
+
+import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
+import { EditorUpdateFields } from '../EventEditor';
+
+import style from '../EventEditor.module.scss';
+
+interface CountedTextInputProps extends InputProps {
+  field: EditorUpdateFields;
+  label: string;
+  initialValue: string;
+  submitHandler: (field: EditorUpdateFields, value: string) => void;
+}
+
+export default function EventTextInput(props: CountedTextInputProps) {
+  const { field, label, initialValue, submitHandler, maxLength } = props;
+
+  const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
+
+  const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, {
+    submitOnEnter: true,
+  });
+
+  return (
+    <div>
+      <label className={style.inputLabel} htmlFor={field}>
+        {label}
+      </label>
+      <Input
+        id={field}
+        size='sm'
+        variant='ontime-filled'
+        data-testid='input-textfield'
+        value={value}
+        maxLength={maxLength || 50}
+        onChange={onChange}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        autoComplete='off'
+      />
+    </div>
+  );
+}