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-27 09:59:08 +00:00 · 2024-04-13 10:06:46 +02:00
parent debdbd1c5a
commit 55d1aca9b6
640 changed files with 26702 additions and 21623 deletions
@@ -1,10 +1,8 @@
 import { useCallback } from 'react';
-import { GetRundownCached, OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';
-import { calculateDuration, getCueCandidate } from 'ontime-utils';
+import { MaybeNumber, OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';

-import { RUNDOWN } from '../../common/api/apiConstants';
 import { useEventAction } from '../../common/hooks/useEventAction';
-import { ontimeQueryClient } from '../../common/queryClient';
+import useMemoisedFn from '../../common/hooks/useMemoisedFn';
 import { useAppMode } from '../../common/stores/appModeStore';
 import { useEditorSettings } from '../../common/stores/editorSettings';
 import { useEmitLog } from '../../common/stores/logger';
@@ -13,59 +11,70 @@ import { cloneEvent } from '../../common/utils/eventsManager';
 import BlockBlock from './block-block/BlockBlock';
 import DelayBlock from './delay-block/DelayBlock';
 import EventBlock from './event-block/EventBlock';
+import { useEventSelection } from './useEventSelection';

-export type EventItemActions = 'set-cursor' | 'event' | 'delay' | 'block' | 'delete' | 'clone' | 'update' | 'swap';
+export type EventItemActions =
+  | 'set-cursor'
+  | 'event'
+  | 'event-before'
+  | 'delay'
+  | 'delay-before'
+  | 'block'
+  | 'block-before'
+  | 'delete'
+  | 'clone'
+  | 'update'
+  | 'swap';

 interface RundownEntryProps {
  type: SupportedEvent;
  isPast: boolean;
-  isFirstEvent: boolean;
  data: OntimeRundownEntry;
-  selected: boolean;
+  loaded: boolean;
+  eventIndex: number;
  hasCursor: boolean;
-  next: boolean;
-  previousEnd: number;
+  isNext: boolean;
+  previousStart: MaybeNumber;
+  previousEnd: MaybeNumber;
  previousEventId?: string;
  playback?: Playback; // we only care about this if this event is playing
  isRolling: boolean; // we need to know even if not related to this event
-  disableEdit: boolean; // we disable edit when the window is extracted
 }

 export default function RundownEntry(props: RundownEntryProps) {
  const {
    isPast,
    data,
-    selected,
+    loaded,
    hasCursor,
-    next,
+    isNext,
+    previousStart,
    previousEnd,
    previousEventId,
    playback,
    isRolling,
-    disableEdit,
-    isFirstEvent,
+    eventIndex,
  } = props;
  const { emitError } = useEmitLog();
-  const { addEvent, updateEvent, deleteEvent, swapEvents } = useEventAction();
-
+  const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
  const cursor = useAppMode((state) => state.cursor);
  const setCursor = useAppMode((state) => state.setCursor);
-  const openId = useAppMode((state) => state.editId);
-  const setEditId = useAppMode((state) => state.setEditId);
-
-  const removeOpenEvent = useCallback(() => {
-    if (openId === data.id) {
-      setEditId(null);
-    }
-
-    if (cursor === data.id) {
-      setCursor(null);
-    }
-  }, [cursor, data.id, openId, setCursor, setEditId]);
+  const { selectedEvents, clearSelectedEvents } = useEventSelection();

  const eventSettings = useEditorSettings((state) => state.eventSettings);
  const defaultPublic = eventSettings.defaultPublic;
-  const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
+  const linkPrevious = eventSettings.linkPrevious;
+
+  const removeOpenEvent = useCallback(() => {
+    if (selectedEvents.has(data.id)) {
+      clearSelectedEvents();
+    }
+
+    // clear cursor if we are deleting the event that is currently selected
+    if (cursor === data.id) {
+      setCursor(null);
+    }
+  }, [selectedEvents, data.id, cursor, clearSelectedEvents, setCursor]);

  // Create / delete new events
  type FieldValue = {
@@ -73,128 +82,116 @@ export default function RundownEntry(props: RundownEntryProps) {
    value: unknown;
  };

-  // we assume the data is not changing in the lifecycle of this component
-  // changes to the data would make rundown re-render, also re-rendering this component
-  const actionHandler = useCallback(
-    (action: EventItemActions, payload?: number | FieldValue) => {
-      switch (action) {
-        case 'event': {
-          const newEvent = { type: SupportedEvent.Event };
-          const options = {
-            startTimeIsLastEnd,
-            defaultPublic,
-            lastEventId: previousEventId,
-            after: data.id,
-          };
-          addEvent(newEvent, options);
-          break;
-        }
-        case 'delay': {
-          addEvent({ type: SupportedEvent.Delay }, { after: data.id });
-          break;
-        }
-        case 'block': {
-          addEvent({ type: SupportedEvent.Block }, { after: data.id });
-          break;
-        }
-        case 'swap': {
-          const { value } = payload as FieldValue;
-          swapEvents({ from: value as string, to: data.id });
-
-          break;
-        }
-        case 'delete': {
-          if (openId === data.id) {
-            removeOpenEvent();
-          }
-          deleteEvent(data.id);
-          break;
-        }
-        case 'clone': {
-          const newEvent = cloneEvent(data as OntimeEvent, data.id);
-          const rundown = ontimeQueryClient.getQueryData<GetRundownCached>(RUNDOWN)?.rundown ?? [];
-          newEvent.cue = getCueCandidate(rundown, data.id);
-          addEvent(newEvent);
-          break;
-        }
-        case 'update': {
-          // Handles and filters update requests
-          const { field, value } = payload as FieldValue;
-          const newData: Partial<OntimeEvent> = { id: data.id };
-
-          if (field === 'durationOverride' && data.type === SupportedEvent.Event) {
-            // duration defines timeEnd
-            newData.duration = value as number;
-            newData.timeEnd = data.timeStart + (value as number);
-            updateEvent(newData);
-          } else if (field === 'timeStart' && data.type === SupportedEvent.Event) {
-            newData.duration = calculateDuration(value as number, data.timeEnd);
-            newData.timeStart = value as number;
-            updateEvent(newData);
-          } else if (field === 'timeEnd' && data.type === SupportedEvent.Event) {
-            newData.duration = calculateDuration(data.timeStart, value as number);
-            newData.timeEnd = value as number;
-            updateEvent(newData);
-          } else if (field in data) {
-            // @ts-expect-error not sure how to type this
-            newData[field] = value;
-            updateEvent(newData);
-          } else {
-            emitError(`Unknown field: ${field}`);
-          }
-          break;
-        }
-        default:
-          throw new Error(`Unhandled event ${action}`);
+  const actionHandler = useMemoisedFn((action: EventItemActions, payload?: number | FieldValue) => {
+    switch (action) {
+      case 'event': {
+        const newEvent = { type: SupportedEvent.Event };
+        const options = {
+          after: data.id,
+          defaultPublic,
+          lastEventId: previousEventId,
+          linkPrevious,
+        };
+        return addEvent(newEvent, options);
      }
-    },
-    [
-      addEvent,
-      data,
-      defaultPublic,
-      deleteEvent,
-      emitError,
-      openId,
-      previousEventId,
-      removeOpenEvent,
-      startTimeIsLastEnd,
-      updateEvent,
-      swapEvents,
-    ],
-  );
+      case 'event-before': {
+        const newEvent = { type: SupportedEvent.Event };
+        const options = {
+          after: previousEventId,
+          defaultPublic,
+          linkPrevious,
+        };
+        return addEvent(newEvent, options);
+      }
+      case 'delay': {
+        return addEvent({ type: SupportedEvent.Delay }, { after: data.id });
+      }
+      case 'delay-before': {
+        return addEvent({ type: SupportedEvent.Delay }, { after: previousEventId });
+      }
+      case 'block': {
+        return addEvent({ type: SupportedEvent.Block }, { after: data.id });
+      }
+      case 'block-before': {
+        return addEvent({ type: SupportedEvent.Block }, { after: previousEventId });
+      }
+      case 'swap': {
+        const { value } = payload as FieldValue;
+        return swapEvents({ from: value as string, to: data.id });
+      }
+      case 'delete': {
+        if (selectedEvents.has(data.id)) {
+          removeOpenEvent();
+        }
+        return deleteEvent(data.id);
+      }
+      case 'clone': {
+        const newEvent = cloneEvent(data as OntimeEvent, data.id);
+        addEvent(newEvent, { after: data.id });
+        break;
+      }
+      case 'update': {
+        // Handles and filters update requests
+        const { field, value } = payload as FieldValue;
+        if (field === undefined || value === undefined) {
+          return;
+        }
+        const newData: Partial<OntimeEvent> = { id: data.id };
+
+        // if selected events are more than one
+        // we need to bulk edit
+        if (selectedEvents.size > 1) {
+          const changes: Partial<OntimeEvent> = { [field]: value };
+          batchUpdateEvents(changes, Array.from(selectedEvents));
+          return clearSelectedEvents();
+        }
+        if (field in data) {
+          // @ts-expect-error -- not sure how to type this
+          newData[field] = value;
+          return updateEvent(newData);
+        }
+
+        return emitError(`Unknown field: ${field}`);
+      }
+      default:
+        throw new Error(`Unhandled event ${action}`);
+    }
+  });

  if (data.type === SupportedEvent.Event) {
    return (
      <EventBlock
+        eventIndex={eventIndex}
        cue={data.cue}
        timeStart={data.timeStart}
        timeEnd={data.timeEnd}
        duration={data.duration}
+        timeStrategy={data.timeStrategy}
+        linkStart={data.linkStart}
        eventId={data.id}
        isPublic={data.isPublic}
        endAction={data.endAction}
        timerType={data.timerType}
        title={data.title}
        note={data.note}
-        delay={data.delay || 0}
+        delay={data.delay ?? 0}
+        previousStart={previousStart}
        previousEnd={previousEnd}
        colour={data.colour}
        isPast={isPast}
-        next={next}
+        isNext={isNext}
        skip={data.skip}
-        selected={selected}
+        loaded={loaded}
        hasCursor={hasCursor}
        playback={playback}
        isRolling={isRolling}
        actionHandler={actionHandler}
-        disableEdit={disableEdit}
-        isFirstEvent={isFirstEvent}
      />
    );
  } else if (data.type === SupportedEvent.Block) {
-    return <BlockBlock data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
+    return <BlockBlock data={data} hasCursor={hasCursor} onDelete={() => actionHandler('delete')} />;
  } else if (data.type === SupportedEvent.Delay) {
-    return <DelayBlock data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
+    return <DelayBlock data={data} hasCursor={hasCursor} />;
  }
  return null;
 }