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-21 15:09:10 +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,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>
+  );
+}