refactor: allow secondary rundowns (#2086)

* refactor: allow secondary rundowns * ui: move dropdown * feat: follow loaded * ui: background edit warning ui: fix disable radio button * feat(ui): add loaded sufix in the rundown list * feat(ui): add direct link to background edit from rundown manager * fix: better fallback * fix: default to is isCurrentRundown for nav bar colour * chore: rename navigate to cuesheet --------- Co-authored-by: alex-arc <ac@omnivox.dk>
2026-08-21 06:59:09 +00:00 · 2026-06-07 13:33:38 +02:00
parent 199dea5df6
commit 0e6d6cd416
33 changed files with 949 additions and 515 deletions
@@ -1,7 +1,7 @@
 import { useTableNav } from '@table-nav/react';
 import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { OntimeEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
-import { ComponentProps, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
  ContextProp,
  ItemProps,
@@ -14,10 +14,8 @@ import {
 import EmptyPage from '../../../common/components/state/EmptyPage';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useFlatRundownWithMetadata } from '../../../common/hooks-query/useRundown';
-import { useSelectedEventId } from '../../../common/hooks/useSocket';
+import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
-import EditorTableSettings from '../../../features/rundown/rundown-table/EditorTableSettings';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
 import { AppMode } from '../../../ontimeConfig';
@@ -28,7 +26,7 @@ import EventRow from './cuesheet-table-elements/EventRow';
 import GroupRow from './cuesheet-table-elements/GroupRow';
 import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
 import TableMenu from './cuesheet-table-menu/TableMenu';
-import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
+import CuesheetTableHeaderToolbar from './cuesheet-table-settings/CuesheetTableHeaderToolbar';
 import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';

 import style from './CuesheetTable.module.scss';
@@ -36,30 +34,40 @@ import style from './CuesheetTable.module.scss';
 type CuesheetTableBaseProps = {
  columns: ColumnDef<ExtendedEntry>[];
  cuesheetMode: AppMode;
+  source: RundownSource;
+  insertElement?: ReactNode;
 };

 type EditorCuesheetTableProps = CuesheetTableBaseProps & {
  tableRoot: 'editor';
  setCuesheetMode?: undefined;
+  isCurrentRundown?: undefined;
 };

 type ViewCuesheetTableProps = CuesheetTableBaseProps & {
  tableRoot: 'cuesheet';
  setCuesheetMode: (mode: AppMode) => void;
+  isCurrentRundown?: boolean;
 };

 type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;

-export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCuesheetMode }: CuesheetTableProps) {
-  const { data, status } = useFlatRundownWithMetadata();
+export default function CuesheetTable({
+  columns,
+  cuesheetMode,
+  source,
+  tableRoot,
+  setCuesheetMode,
+  isCurrentRundown,
+  insertElement,
+}: CuesheetTableProps) {
+  const { flatRundown, status, selectedEventId } = source;
  const { updateEntry, updateTimer } = useEntryActionsContext();

  const useOptions = tableRoot === 'editor' ? usePersistedRundownOptions : usePersistedCuesheetOptions;
-  const showDelayedTimes = useOptions((state) => state.showDelayedTimes);
-  const hideTableSeconds = useOptions((state) => state.hideTableSeconds);
-  const hideIndexColumn = useOptions((state) => state.hideIndexColumn);
+  const optionsStore = useOptions();
+  const { showDelayedTimes, hideTableSeconds, hideIndexColumn } = optionsStore;

-  const selectedEventId = useSelectedEventId();
  const cursor = useEventSelection((state) => state.cursor);
  const setScrollHandler = useEventSelection((state) => state.setScrollHandler);

@@ -70,7 +78,7 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
    () => ({
      handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom = false) => {
        // check if value is the same
-        const event = data[rowIndex];
+        const event = flatRundown[rowIndex];

        if (!event) {
          return;
@@ -101,7 +109,7 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
        hideIndexColumn,
      },
    }),
-    [cuesheetMode, data, hideIndexColumn, hideTableSeconds, showDelayedTimes, updateEntry, updateTimer],
+    [cuesheetMode, flatRundown, hideIndexColumn, hideTableSeconds, showDelayedTimes, updateEntry, updateTimer],
  );

  const { columnOrder, resetColumnOrder } = useColumnOrder(columns, tableRoot);
@@ -109,7 +117,7 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
  const { columnVisibility, setColumnVisibility } = useColumnVisibility(tableRoot);

  const table = useReactTable({
-    data,
+    data: flatRundown,
    columns,
    columnResizeMode: 'onChange',
    state: {
@@ -137,13 +145,13 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
      return;
    }

-    const eventIndex = data.findIndex((event) => event.id === selectedEventId);
+    const eventIndex = flatRundown.findIndex((event) => event.id === selectedEventId);
    if (eventIndex === -1) {
      return;
    }

    virtuosoRef.current.scrollToIndex({ index: eventIndex, behavior: 'auto', align: 'start', offset: -50 });
-  }, [cuesheetMode, data, selectedEventId]);
+  }, [cuesheetMode, flatRundown, selectedEventId]);

  // Provide an imperative scroll handler for explicit jumps (finder/keyboard)
  useEffect(() => {
@@ -152,7 +160,7 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
        return;
      }

-      const eventIndex = data.findIndex((event) => event.id === entryId);
+      const eventIndex = flatRundown.findIndex((event) => event.id === entryId);
      if (eventIndex === -1) {
        return;
      }
@@ -165,7 +173,7 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
    return () => {
      setScrollHandler(null);
    };
-  }, [data, setScrollHandler]);
+  }, [flatRundown, setScrollHandler]);

  /**
   * To improve performance on resizing, we memoise the column sizes
@@ -217,7 +225,7 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
    });
  }, [cuesheetMode, hideIndexColumn, table]);

-  const isLoading = !data || status === 'pending';
+  const isLoading = !flatRundown || status === 'pending';

  if (isLoading) {
    return <EmptyPage text='Loading...' />;
@@ -225,26 +233,27 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue

  return (
    <>
-      {tableRoot === 'editor' ? (
-        <EditorTableSettings
-          columns={allLeafColumns}
-          handleResetResizing={resetColumnResizing}
-          handleResetReordering={resetColumnOrder}
-          handleClearToggles={setAllVisible}
-        />
-      ) : (
-        <CuesheetTableSettings
-          columns={allLeafColumns}
-          cuesheetMode={cuesheetMode}
-          setCuesheetMode={setCuesheetMode}
-          handleResetResizing={resetColumnResizing}
-          handleResetReordering={resetColumnOrder}
-          handleClearToggles={setAllVisible}
-        />
-      )}
+      <CuesheetTableHeaderToolbar
+        columns={allLeafColumns}
+        optionsStore={optionsStore}
+        handleResetResizing={resetColumnResizing}
+        handleResetReordering={resetColumnOrder}
+        handleClearToggles={setAllVisible}
+        insertElement={insertElement}
+        modeControls={
+          tableRoot === 'cuesheet'
+            ? {
+                cuesheetMode,
+                setCuesheetMode,
+                isCurrentRundown,
+              }
+            : undefined
+        }
+        showShare={tableRoot === 'cuesheet'}
+      />
      <TableVirtuoso
        ref={virtuosoRef}
-        data={data}
+        data={flatRundown}
        context={virtuosoContext}
        style={tableRoot === 'editor' ? { paddingLeft: '1rem' } : undefined}
        computeItemKey={computeItemKey}
@@ -30,15 +30,16 @@ function EditableImage({ initialValue, readOnly, updateValue }: EditableImagePro
    }
  };

+  if (!initialValue && readOnly) {
+    return null;
+  }
+
  if (!initialValue) {
    return (
      <Input
        variant='ghosted'
        className={style.imageInput}
        fluid
-        readOnly={readOnly}
-        // we disable the field to prevent receiving focus
-        disabled={readOnly}
        placeholder='Paste image URL'
        onBlur={(event) => handleUpdate(event.currentTarget.value)}
        onKeyDown={(event) => {
@@ -11,78 +11,92 @@ import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import PopoverContents from '../../../../common/components/popover/Popover';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
-import { cx } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
-import { CuesheetOptions, usePersistedCuesheetOptions } from '../../cuesheet.options';
 import { useCuesheetPermissions } from '../../useTablePermissions';
 import CuesheetShareModal from './CuesheetShareModal';

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

-interface CuesheetTableSettingsProps {
-  columns: Column<ExtendedEntry, unknown>[];
+type TableHeaderOptionsStore = {
+  hideTableSeconds: boolean;
+  hideIndexColumn: boolean;
+  showDelayedTimes: boolean;
+  hideDelays: boolean;
+  setOption: <K extends keyof TableHeaderOptionValues>(key: K, value: TableHeaderOptionValues[K]) => void;
+};
+
+type TableHeaderOptionValues = Pick<
+  TableHeaderOptionsStore,
+  'hideTableSeconds' | 'hideIndexColumn' | 'showDelayedTimes' | 'hideDelays'
+>;
+
+type TableModeControls = {
  cuesheetMode: AppMode;
  setCuesheetMode: (mode: AppMode) => void;
-  handleResetResizing: () => void;
-  handleResetReordering: () => void;
-  handleClearToggles: () => void;
-}
+  isCurrentRundown?: boolean;
+};

-export interface ViewSettingsProps {
-  optionsStore: CuesheetOptions;
-}
-
-export interface ColumnSettingsProps {
+interface CuesheetTableHeaderToolbarProps {
  columns: Column<ExtendedEntry, unknown>[];
+  optionsStore: TableHeaderOptionsStore;
  handleResetResizing: () => void;
  handleResetReordering: () => void;
  handleClearToggles: () => void;
+  insertElement?: ReactNode;
+  modeControls?: TableModeControls;
+  showShare?: boolean;
 }

-export default function CuesheetTableSettings({
+export default function CuesheetTableHeaderToolbar({
  columns,
-  cuesheetMode,
-  setCuesheetMode,
+  optionsStore,
  handleResetResizing,
  handleResetReordering,
  handleClearToggles,
-}: CuesheetTableSettingsProps) {
+  insertElement,
+  modeControls,
+  showShare = false,
+}: CuesheetTableHeaderToolbarProps) {
  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode);
  const canShare = useCuesheetPermissions((state) => state.canShare);
-  const options = usePersistedCuesheetOptions();

  const toggleCuesheetMode = (mode: AppMode[]) => {
-    // we need to stop user from deselecting a mode
    const newValue = mode.at(0);
-    if (!newValue) return;
-    setCuesheetMode(newValue);
+    if (!newValue || !modeControls) return;
+    modeControls.setCuesheetMode(newValue);
  };

+  const isBackground = !(modeControls?.isCurrentRundown ?? true);
+
  return (
-    <Toolbar.Root className={style.tableSettings}>
-      <ViewSettings optionsStore={options} />
+    <Toolbar.Root className={style.tableSettings} data-background-rundown={isBackground}>
+      <ViewSettings optionsStore={optionsStore} />
      <ColumnSettings
        columns={columns}
        handleResetResizing={handleResetResizing}
        handleResetReordering={handleResetReordering}
        handleClearToggles={handleClearToggles}
      />
-      {canChangeMode && (
-        <ToggleGroup
-          value={[cuesheetMode]}
-          onValueChange={toggleCuesheetMode}
-          className={cx([style.group, style.apart])}
-        >
-          <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
-            Run
-          </Toolbar.Button>
-          <Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton}>
-            Edit
-          </Toolbar.Button>
-        </ToggleGroup>
+      {modeControls && canChangeMode && (
+        <div className={style.apart}>
+          {insertElement}
+          <ToggleGroup
+            value={[modeControls.cuesheetMode]}
+            onValueChange={toggleCuesheetMode}
+            className={style.group}
+            disabled={!modeControls.isCurrentRundown}
+          >
+            <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
+              Run
+            </Toolbar.Button>
+            <Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton}>
+              Edit
+            </Toolbar.Button>
+          </ToggleGroup>
+        </div>
      )}

-      {canShare && (
+      {showShare && canShare && (
        <>
          <Editor.Separator orientation='vertical' />
          <CuesheetShareModal />
@@ -92,9 +106,18 @@ export default function CuesheetTableSettings({
  );
 }

-export function ViewSettings({ optionsStore }: ViewSettingsProps) {
-  const options = optionsStore;
+interface ViewSettingsProps {
+  optionsStore: TableHeaderOptionsStore;
+}

+interface ColumnSettingsProps {
+  columns: Column<ExtendedEntry, unknown>[];
+  handleResetResizing: () => void;
+  handleResetReordering: () => void;
+  handleClearToggles: () => void;
+}
+
+function ViewSettings({ optionsStore }: ViewSettingsProps) {
  return (
    <Popover.Root>
      <Popover.Trigger
@@ -115,15 +138,15 @@ export function ViewSettings({ optionsStore }: ViewSettingsProps) {
          <Editor.Label className={style.sectionTitle}>Element visibility</Editor.Label>
          <Editor.Label className={style.option}>
            <Checkbox
-              defaultChecked={options.hideTableSeconds}
-              onCheckedChange={(checked) => options.setOption('hideTableSeconds', checked)}
+              defaultChecked={optionsStore.hideTableSeconds}
+              onCheckedChange={(checked) => optionsStore.setOption('hideTableSeconds', checked)}
            />
            Hide seconds in table
          </Editor.Label>
          <Editor.Label className={style.option}>
            <Checkbox
-              defaultChecked={options.hideIndexColumn}
-              onCheckedChange={(checked) => options.setOption('hideIndexColumn', checked)}
+              defaultChecked={optionsStore.hideIndexColumn}
+              onCheckedChange={(checked) => optionsStore.setOption('hideIndexColumn', checked)}
            />
            Hide index column
          </Editor.Label>
@@ -133,15 +156,15 @@ export function ViewSettings({ optionsStore }: ViewSettingsProps) {
          <Editor.Label className={style.sectionTitle}>Table Behaviour</Editor.Label>
          <Editor.Label className={style.option}>
            <Checkbox
-              defaultChecked={options.showDelayedTimes}
-              onCheckedChange={(checked) => options.setOption('showDelayedTimes', checked)}
+              defaultChecked={optionsStore.showDelayedTimes}
+              onCheckedChange={(checked) => optionsStore.setOption('showDelayedTimes', checked)}
            />
            Show delayed times
          </Editor.Label>
          <Editor.Label className={style.option}>
            <Checkbox
-              defaultChecked={options.hideDelays}
-              onCheckedChange={(checked) => options.setOption('hideDelays', checked)}
+              defaultChecked={optionsStore.hideDelays}
+              onCheckedChange={(checked) => optionsStore.setOption('hideDelays', checked)}
            />
            Hide delay entries
          </Editor.Label>
@@ -151,7 +174,7 @@ export function ViewSettings({ optionsStore }: ViewSettingsProps) {
  );
 }

-export function ColumnSettings({
+function ColumnSettings({
  columns,
  handleResetResizing,
  handleResetReordering,
@@ -177,6 +200,7 @@ export function ColumnSettings({
          {columns.map((column) => {
            const columnHeader = column.columnDef.header;
            const visible = column.getIsVisible();
+
            return (
              <Editor.Label key={`${column.id}-${visible}`} className={style.option}>
                <Checkbox defaultChecked={visible} onCheckedChange={column.toggleVisibility} />
@@ -8,6 +8,24 @@
  gap: 1rem;
  font-size: $inner-section-text-size;
  border-radius: 3px 3px 0 0;
+
+  transition: background-color 0.2s ease-in-out;
+
+  &[data-background-rundown='true'] {
+    background-color: rgba($ontime-color, 0.5);
+
+    .apart::before {
+      content: 'BACKGROUND EDIT';
+      color: $ui-white;
+      animation: blinker 2s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes blinker {
+  50% {
+    color: transparent;
+  }
 }

 .sectionTitle {
@@ -43,6 +61,9 @@

 .apart {
  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }

 /** styles should match RundownHeader.module.scss */
@@ -70,12 +91,17 @@
  font-size: calc(1rem - 2px);
  font-weight: 600;

+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
  &:focus-visible {
    background: transparent;
    outline: 1px solid $blue-500;
  }

-  &:hover:not(:disabled):not(:active) {
+  &:hover:not([data-disabled]):not(:active) {
    background: $gray-1000;
  }

@@ -87,7 +113,7 @@
    background: $blue-700;
    color: $ui-white;

-    &:hover:not(:disabled):not(:active) {
+    &:hover:not([data-disabled]):not(:active) {
      background: $blue-600;
    }
  }