refactor: generalise event editor

apps/client/src/features/rundown/RundownExport.tsx

@@ -7,7 +7,7 @@ import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
 import { Corner } from '../editors/editor-utils/EditorUtils';
 
-import EventEditor from './event-editor/EventEditor';
+import RundownEventEditor from './event-editor/RundownEventEditor';
 import RundownWrapper from './RundownWrapper';
 
 import style from './RundownExport.module.scss';
@@ -33,7 +33,7 @@ const RundownExport = () => {
         {!hideSideBar && (
           <div className={style.side}>
             <ErrorBoundary>
-              <EventEditor />
+              <RundownEventEditor />
             </ErrorBoundary>
           </div>
         )}

apps/client/src/features/rundown/event-editor/CuesheetEventEditor.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { isOntimeEvent, OntimeEvent } from 'ontime-types';
+
+import useRundown from '../../../common/hooks-query/useRundown';
+
+import EventEditor from './EventEditor';
+
+import style from './EventEditor.module.scss';
+
+interface CuesheetEventEditorProps {
+  eventId: string;
+}
+
+export default function CuesheetEventEditor(props: CuesheetEventEditorProps) {
+  const { eventId } = props;
+  const { data } = useRundown();
+  const { order, rundown } = data;
+
+  const [event, setEvent] = useState<OntimeEvent | null>(null);
+
+  useEffect(() => {
+    if (order.length === 0) {
+      setEvent(null);
+      return;
+    }
+
+    const event = rundown[eventId];
+    if (event && isOntimeEvent(event)) {
+      setEvent(event);
+    } else {
+      setEvent(null);
+    }
+  }, [data, eventId, order, rundown]);
+
+  if (!event) {
+    return null;
+  }
+
+  return (
+    <div className={style.eventEditor} data-testid='editor-container'>
+      <EventEditor event={event} />
+    </div>
+  );
+}

apps/client/src/features/rundown/event-editor/RundownEventEditor.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { isOntimeEvent, OntimeEvent } from 'ontime-types';
+
+import useRundown from '../../../common/hooks-query/useRundown';
+import { useEventSelection } from '../useEventSelection';
+
+import { EventEditorFooter } from './composite/EventEditorFooter';
+import EventEditor from './EventEditor';
+import EventEditorEmpty from './EventEditorEmpty';
+
+import style from './EventEditor.module.scss';
+
+export default function RundownEventEditor() {
+  const selectedEvents = useEventSelection((state) => state.selectedEvents);
+  const { data } = useRundown();
+  const { order, rundown } = data;
+
+  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]);
+
+  if (!event) {
+    return <EventEditorEmpty />;
+  }
+
+  return (
+    <div className={style.eventEditor} data-testid='editor-container'>
+      <EventEditor event={event} />
+      <EventEditorFooter id={event.id} cue={event.cue} />
+    </div>
+  );
+}

apps/client/src/features/rundown/event-editor/composite/EventEditorFooter.module.scss

@@ -0,0 +1,7 @@
+.footer {
+  border-top: 1px solid $white-10;
+  padding-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}

apps/client/src/features/rundown/event-editor/composite/EventEditorFooter.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+
+import CopyTag from '../../../../common/components/copy-tag/CopyTag';
+
+import style from './EventEditorFooter.module.scss';
+
+interface EventEditorFooterProps {
+  id: string;
+  cue: string;
+}
+
+export const EventEditorFooter = memo(_EventEditorFooter);
+
+function _EventEditorFooter(props: EventEditorFooterProps) {
+  const { id, cue } = props;
+
+  const loadById = `/ontime/load/id "${id}"`;
+  const loadByCue = `/ontime/load/cue "${cue}"`;
+
+  return (
+    <div className={style.footer}>
+      <CopyTag copyValue={loadById} label='OSC trigger by ID'>
+        {loadById}
+      </CopyTag>
+      <CopyTag copyValue={loadByCue} label='OSC trigger by cue'>
+        {loadByCue}
+      </CopyTag>
+    </div>
+  );
+}