chore: update tests

refactor: align import map to demo
2026-08-07 00:13:53 +00:00 · 2023-09-29 22:23:16 +02:00 · 2023-09-29 22:21:15 +02:00 · 2023-09-29 22:16:39 +02:00 · 2023-09-29 22:10:40 +02:00 · 2023-09-29 21:56:15 +02:00
127 changed files with 2712 additions and 1561 deletions
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "2.8.1-rc-table",
+  "version": "2.9.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.7.0",
@@ -6,6 +6,7 @@ import withData from './features/viewers/ViewWrapper';

 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
 const Cuesheet = lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
+const Operator = lazy(() => import('./features/operator/Operator'));

 const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
 const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
@@ -58,6 +59,9 @@ export default function AppRouter() {
        {/*/!* Lower cannot have fallback *!/*/}
        <Route path='/lower' element={<SLowerThird />} />

+        <Route path='/op' element={<Operator />} />
+        <Route path='/operator' element={<Operator />} />
+
        {/*/!* Protected Routes *!/*/}
        <Route path='/editor' element={<Editor />} />
        <Route path='/cuesheet' element={<Cuesheet />} />
@@ -2,18 +2,30 @@ import axios, { AxiosError } from 'axios';
 import { LogLevel } from 'ontime-types';
 import { generateId, millisToString } from 'ontime-utils';

+import { ontimeQueryClient } from '../queryClient';
 import { addLog } from '../stores/logger';
 import { nowInMillis } from '../utils/time';

-export function logAxiosError(prepend: string, error: unknown) {
-  let message;
+export function maybeAxiosError(error: unknown) {
  if (axios.isAxiosError(error)) {
    const statusText = (error as AxiosError).response?.statusText ?? '';
-    const data = (error as AxiosError).response?.data ?? '';
-    message = `${prepend} ${statusText}: ${data}`;
+    let data = (error as AxiosError).response?.data ?? '';
+    if (typeof data === 'object') {
+      // TODO: use error instead, when migrated
+      if ('message' in data) {
+        data = JSON.stringify(data.message);
+      } else {
+        data = JSON.stringify(data);
+      }
+    }
+    return `${statusText}: ${data}`;
  } else {
-    message = `${prepend}: ${error}`;
+    return error as string;
  }
+}
+
+export function logAxiosError(prepend: string, error: unknown) {
+  const message = `${prepend}: ${maybeAxiosError(error)}`;

  addLog({
    id: generateId(),
@@ -23,3 +35,16 @@ export function logAxiosError(prepend: string, error: unknown) {
    text: message,
  });
 }
+
+export async function invalidateAllCaches() {
+  await ontimeQueryClient.invalidateQueries([
+    'project',
+    'aliases',
+    'userFields',
+    'rundown',
+    'appinfo',
+    'oscSettings',
+    'appSettings',
+    'viewSettings',
+  ]);
+}
@@ -1,6 +1,7 @@
 import axios, { AxiosResponse } from 'axios';
 import {
  Alias,
+  DatabaseModel,
  OntimeRundown,
  OSCSettings,
  OscSubscription,
@@ -9,6 +10,7 @@ import {
  UserFields,
  ViewSettings,
 } from 'ontime-types';
+import { ExcelImportMap } from 'ontime-utils';

 import { apiRepoLatest } from '../../externals';
 import { InfoType } from '../models/Info';
@@ -146,17 +148,26 @@ export const downloadRundown = async () => {
  });
 };

+// TODO: should this be extracted to shared code?
+export type ProjectFileImportOptions = {
+  onlyRundown: boolean;
+};
+
 /**
 * @description HTTP request to upload events db
 * @return {Promise}
 */
-type UploadDataOptions = {
-  onlyRundown?: boolean;
-};
-export const uploadData = async (file: File, setProgress: (value: number) => void, options?: UploadDataOptions) => {
+export const uploadProjectFile = async (
+  file: File,
+  setProgress: (value: number) => void,
+  options?: Partial<ProjectFileImportOptions>,
+) => {
  const formData = new FormData();
  formData.append('userFile', file);
-  const onlyRundown = options?.onlyRundown || 'false';
+
+  const onlyRundown = Boolean(options?.onlyRundown);
+  console.log('debug here', onlyRundown, options);
+
  await axios
    .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
      headers: {
@@ -170,27 +181,43 @@ export const uploadData = async (file: File, setProgress: (value: number) => voi
    .then((response) => response.data.id);
 };

-type Backend = {
+/**
+ * @description Make patch changes to the objects in the db
+ * @return {Promise}
+ */
+export async function patchData(patchDb: Partial<DatabaseModel>) {
+  const response = await axios.patch(`${ontimeURL}/db`, patchDb);
+  return response;
+}
+
+type PostPreviewExcelResponse = {
  rundown: OntimeRundown;
  project: ProjectData;
  userFields: UserFields;
 };

-export async function postPreviewExcel(file: File, setProgress: (value: number) => void, options?: UploadDataOptions) {
+/**
+ * @description Make patch changes to the objects in the db
+ * @return {Promise} - returns parsed rundown and userfields
+ */
+export async function postPreviewExcel(file: File, setProgress: (value: number) => void, options?: ExcelImportMap) {
  const formData = new FormData();
  formData.append('userFile', file);
  formData.append('options', JSON.stringify(options));
-  console.log('appending options', options);

-  const response: AxiosResponse<Backend> = await axios.post(`${ontimeURL}/previewExcel`, formData, {
-    headers: {
-      'Content-Type': 'multipart/form-data',
+  const response: AxiosResponse<PostPreviewExcelResponse> = await axios.post(
+    `${ontimeURL}/preview-spreadsheet`,
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
+        setProgress(complete);
+      },
    },
-    onUploadProgress: (progressEvent) => {
-      const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
-      setProgress(complete);
-    },
-  });
+  );

  return response;
 }
@@ -0,0 +1,9 @@
+@use '../../../theme/v2Styles' as *;
+
+.delaySymbol {
+  svg {
+    font-size: 1.5rem;
+    color: $ontime-delay;
+    margin: 0 auto;
+  }
+}
@@ -0,0 +1,40 @@
+import { Tooltip } from '@chakra-ui/react';
+import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
+import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { millisToDelayString } from '../../utils/dateConfig';
+
+import style from './DelayIndicator.module.scss';
+
+interface DelayIndicatorProps {
+  delayValue?: number;
+}
+
+export default function DelayIndicator(props: DelayIndicatorProps) {
+  const { delayValue } = props;
+
+  if (typeof delayValue === 'number') {
+    if (delayValue < 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronDown />
+          </span>
+        </Tooltip>
+      );
+    }
+
+    if (delayValue > 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronUp />
+          </span>
+        </Tooltip>
+      );
+    }
+  }
+
+  return null;
+}
@@ -1,34 +0,0 @@
-import { UserFields } from 'ontime-types';
-
-import style from './PreviewColumn.module.scss';
-
-interface PreviewUserFieldProps {
-  userFields: UserFields;
-}
-
-export default function PreviewUserField({ userFields }: PreviewUserFieldProps) {
-  return (
-    <div className={style.previewTable}>
-      <span className={style.field}>user0</span>
-      <span className={style.value}>{userFields.user0}</span>
-      <span className={style.field}>user1</span>
-      <span className={style.value}>{userFields.user1}</span>
-      <span className={style.field}>user2</span>
-      <span className={style.value}>{userFields.user2}</span>
-      <span className={style.field}>user3</span>
-      <span className={style.value}>{userFields.user3}</span>
-      <span className={style.field}>user4</span>
-      <span className={style.value}>{userFields.user4}</span>
-      <span className={style.field}>user5</span>
-      <span className={style.value}>{userFields.user5}</span>
-      <span className={style.field}>user6</span>
-      <span className={style.value}>{userFields.user6}</span>
-      <span className={style.field}>user7</span>
-      <span className={style.value}>{userFields.user7}</span>
-      <span className={style.field}>user8</span>
-      <span className={style.value}>{userFields.user8}</span>
-      <span className={style.field}>user9</span>
-      <span className={style.value}>{userFields.user9}</span>
-    </div>
-  );
-}
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';

-import { TitleActions } from '../../../../features/event-editor/composite/EventEditorDataLeft';
+import { EditorUpdateFields } from '../../../../features/event-editor/EventEditor';

 import Swatch from './Swatch';

@@ -8,8 +8,8 @@ import style from './SwatchSelect.module.scss';

 interface ColourInputProps {
  value: string;
-  name: TitleActions;
-  handleChange: (newValue: TitleActions, name: string) => void;
+  name: EditorUpdateFields;
+  handleChange: (newValue: EditorUpdateFields, name: string) => void;
 }

 const colours = [
@@ -58,7 +58,7 @@ function NavigationMenu() {
  const handleMirror = () => toggleMirror();

  const showEditFormDrawer = () => {
-    searchParams.append('edit', 'true');
+    searchParams.set('edit', 'true');
    setSearchParams(searchParams);
  };

@@ -116,6 +116,10 @@ function NavigationMenu() {
              Cuesheet
              <IoArrowUp className={style.linkIcon} />
            </Link>
+            <Link to='/op' className={style.link} tabIndex={0}>
+              Operator
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
            <hr className={style.separator} />
            {navigatorConstants.map((route) => (
              <Link
@@ -8,10 +8,12 @@ import { tooltipDelayFast } from '../../../ontimeConfig';

 interface PlaybackIconProps {
  state: Playback;
+  skipTooltip?: boolean;
+  className?: string;
 }

 export default function PlaybackIcon(props: PlaybackIconProps) {
-  const { state } = props;
+  const { state, skipTooltip, className } = props;

  // if timer is Pause or Armed
  let label = 'Timer Paused';
@@ -28,9 +30,13 @@ export default function PlaybackIcon(props: PlaybackIconProps) {
    Icon = IoStop;
  }

+  if (skipTooltip) {
+    return <Icon className={className} />;
+  }
+
  return (
    <Tooltip openDelay={tooltipDelayFast} label={label} shouldWrapChildren>
-      <Icon />
+      <Icon className={className} />
    </Tooltip>
  );
 }
@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+
 import { ReactComponent as Emptyimage } from '@/assets/images/empty.svg';

 import style from './Empty.module.scss';
@@ -2,7 +2,7 @@
@use '../../../theme/ontimeColours' as *;

 .drawerContent {
-  background-color: $gray-1200;
+  background-color: $gray-1250;
 }

 .drawerHeader {
@@ -38,6 +38,12 @@
  gap: $element-inner-spacing;
 }

+.noHover {
+  &:hover {
+    background-color: inherit;
+  }
+}
+
 .title {
  font-size: $inner-section-text-size;
  display: block;
@@ -1,3 +1,5 @@
+import { UserFields } from 'ontime-types';
+
 import { ParamField } from './types';

 export const TIME_FORMAT_OPTION: ParamField = {
@@ -201,3 +203,61 @@ export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
    type: 'boolean',
  },
 ];
+
+export const getOperatorOptions = (userFields: UserFields): ParamField[] => {
+  return [
+    TIME_FORMAT_OPTION,
+    {
+      id: 'showseconds',
+      title: 'Show seconds',
+      description: 'Schedule shows hh:mm:ss',
+      type: 'boolean',
+    },
+    {
+      id: 'hidepast',
+      title: 'Hide Past Events',
+      description: 'Whether to events that have passed',
+      type: 'boolean',
+    },
+    {
+      id: 'main',
+      title: 'Main data field',
+      description: 'Field to be shown in the first line of text',
+      type: 'option',
+      values: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        presenter: 'Presenter',
+      },
+    },
+    {
+      id: 'secondary',
+      title: 'Secondary data field',
+      description: 'Field to be shown in the second line of text',
+      type: 'option',
+      values: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        presenter: 'Presenter',
+      },
+    },
+    {
+      id: 'subscribe',
+      title: 'Highlight Field',
+      description: 'Choose a field to highlight',
+      type: 'option',
+      values: {
+        user0: userFields.user0 || 'user0',
+        user1: userFields.user1 || 'user1',
+        user2: userFields.user2 || 'user2',
+        user3: userFields.user3 || 'user3',
+        user4: userFields.user4 || 'user4',
+        user5: userFields.user5 || 'user5',
+        user6: userFields.user6 || 'user6',
+        user7: userFields.user7 || 'user7',
+        user8: userFields.user8 || 'user8',
+        user9: userFields.user9 || 'user9',
+      },
+    },
+  ];
+};
@@ -0,0 +1,32 @@
+// roughly from https://github.com/juliencrn/usehooks-ts/blob/master/packages/usehooks-ts/src/useMediaQuery/useMediaQuery.ts
+
+import { useCallback, useEffect, useState } from 'react';
+
+function getMatches(query: string): boolean {
+  return window.matchMedia(query).matches;
+}
+
+// TODO: debounce handleChange
+export default function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+
+  const handleChange = useCallback(() => {
+    setMatches(getMatches(query));
+  }, [query]);
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Listen matchMedia
+    matchMedia.addEventListener('change', handleChange);
+
+    return () => {
+      matchMedia.removeEventListener('change', handleChange);
+    };
+  }, [handleChange, query]);
+
+  return matches;
+}
@@ -0,0 +1,63 @@
+import { MutableRefObject, useCallback, useEffect } from 'react';
+
+function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
+  componentRef: MutableRefObject<ComponentRef>,
+  scrollRef: MutableRefObject<ScrollRef>,
+  topOffset: number,
+) {
+  if (!componentRef.current || !scrollRef.current) {
+    return;
+  }
+
+  const componentRect = componentRef.current.getBoundingClientRect();
+  const scrollRect = scrollRef.current.getBoundingClientRect();
+  const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - topOffset;
+
+  scrollRef.current.scrollTo({ top, behavior: 'smooth' });
+}
+
+interface UseFollowComponentProps {
+  followRef: MutableRefObject<HTMLElement | null>;
+  scrollRef: MutableRefObject<HTMLElement | null>;
+  doFollow: boolean;
+  topOffset?: number;
+  setScrollFlag?: () => void;
+}
+
+export default function useFollowComponent(props: UseFollowComponentProps) {
+  const { followRef, scrollRef, doFollow, topOffset = 100, setScrollFlag } = props;
+
+  // when cursor moves, view should follow
+  useEffect(() => {
+    if (!doFollow) {
+      return;
+    }
+
+    if (followRef.current && scrollRef.current) {
+      // Use requestAnimationFrame to ensure the component is fully loaded
+      window.requestAnimationFrame(() => {
+        setScrollFlag?.();
+        scrollToComponent(
+          followRef as MutableRefObject<HTMLElement>,
+          scrollRef as MutableRefObject<HTMLElement>,
+          topOffset,
+        );
+      });
+    }
+
+    // eslint-disable-next-line -- the prompt seems incorrect
+  }, [followRef?.current, scrollRef?.current]);
+
+  const scrollToRefComponent = useCallback(
+    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
+      if (componentRef.current && containerRef.current) {
+        // @ts-expect-error -- we know this are not null
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        scrollToComponent(componentRef!, scrollRef!, offset);
+      }
+    },
+    [followRef, scrollRef, topOffset],
+  );
+
+  return scrollToRefComponent;
+}
@@ -42,7 +42,7 @@ export default function useFullscreen() {
        });
      } else if (element.webkitRequestFullscreen) {
        // iOS Safari fullscreen API is supported
-        element.webkitRequestFullscreen().catch(() => {
+        element.webkitRequestFullscreen?.().catch(() => {
          /* nothing to do */
        });
      }
@@ -55,7 +55,7 @@ export default function useFullscreen() {
        });
      } else if ((document as WebkitDocument).webkitExitFullscreen) {
        // iOS Safari fullscreen API is supported
-        (document as WebkitDocument).webkitExitFullscreen().catch(() => {
+        (document as WebkitDocument).webkitExitFullscreen?.().catch(() => {
          /* nothing to do */
        });
      }
@@ -13,6 +13,15 @@ export const useRundownEditor = () => {
  return useRuntimeStore(featureSelector, deepCompare);
 };

+export const useOperator = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    playback: state.playback,
+    selectedEventId: state.loaded.selectedEventId,
+  });
+
+  return useRuntimeStore(featureSelector, deepCompare);
+};
+
 export const useMessageControl = () => {
  const featureSelector = (state: RuntimeStore) => ({
    timerMessage: state.timerMessage,
@@ -70,7 +79,8 @@ export const setPlayback = {

 export const useInfoPanel = () => {
  const featureSelector = (state: RuntimeStore) => ({
-    titles: state.titles,
+    eventNow: state.eventNow,
+    eventNext: state.eventNext,
    playback: state.playback,
    selectedEventIndex: state.loaded.selectedEventIndex,
    numEvents: state.loaded.numEvents,
@@ -85,7 +95,7 @@ export const useCuesheet = () => {
    selectedEventId: state.loaded.selectedEventId,
    selectedEventIndex: state.loaded.selectedEventIndex,
    numEvents: state.loaded.numEvents,
-    titleNow: state.titles.titleNow,
+    titleNow: state.eventNow?.title || '',
  });

  return useRuntimeStore(featureSelector, deepCompare);
@@ -42,26 +42,10 @@ export const runtimeStorePlaceholder = {
    nextEventId: null,
    nextPublicEventId: null,
  },
-  titles: {
-    titleNow: null,
-    subtitleNow: null,
-    presenterNow: null,
-    noteNow: null,
-    titleNext: null,
-    subtitleNext: null,
-    presenterNext: null,
-    noteNext: null,
-  },
-  titlesPublic: {
-    titleNow: null,
-    subtitleNow: null,
-    presenterNow: null,
-    noteNow: null,
-    titleNext: null,
-    subtitleNext: null,
-    presenterNext: null,
-    noteNext: null,
-  },
+  eventNow: null,
+  eventNext: null,
+  publicEventNow: null,
+  publicEventNext: null,
 };

 export const runtime = createStore<RuntimeStore>(() => ({
@@ -0,0 +1,12 @@
+export function debounce(callback: () => void, wait: number) {
+  let timeout: NodeJS.Timeout | null;
+  return () => {
+    if (timeout) {
+      return;
+    }
+    timeout = setTimeout(() => {
+      timeout = null;
+      callback();
+    }, wait);
+  };
+}
@@ -0,0 +1,6 @@
+export function isMacOS() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.includes('macintosh') || userAgent.includes('mac os');
+}
+
+export const deviceAlt = isMacOS() ? '⌥' : 'Alt';
@@ -87,18 +87,6 @@ export const connectSocket = (preferredClientName?: string) => {
          runtime.setState(state);
          break;
        }
-        case 'ontime-titles': {
-          const state = runtime.getState();
-          state.titles = payload;
-          runtime.setState(state);
-          break;
-        }
-        case 'ontime-titlesPublic': {
-          const state = runtime.getState();
-          state.titlesPublic = payload;
-          runtime.setState(state);
-          break;
-        }
        case 'ontime-timerMessage': {
          const state = runtime.getState();
          state.timerMessage = payload;
@@ -3,7 +3,7 @@ import Color from 'color';
 type ColourCombination = {
  backgroundColor: string;
  color: string;
-}
+};

 /**
 * @description Selects text colour to maintain accessible contrast
@@ -19,11 +19,11 @@ export const getAccessibleColour = (bgColour: string): ColourCombination => {
      console.log(`Unable to parse colour: ${bgColour}`);
    }
  }
-  return { backgroundColor: '#000', color: "#fffffa" };
+  return { backgroundColor: '#000', color: '#fffffa' };
 };

 /**
 * @description Creates a list of classnames from array of css module conditions
 * @param classNames - css modules objects
 */
-export const cx = (classNames: any[]) => classNames.filter(Boolean).join(" ");
+export const cx = (classNames: any[]) => classNames.filter(Boolean).join(' ');
@@ -51,6 +51,7 @@ export const formatTime = (milliseconds: number | null, options?: FormatOptions,
    return '...';
  }
  const timeFormat = resolver();
-  const { showSeconds = false, format: formatString = 'hh:mm a' } = options || {};
+  const fallback = options?.showSeconds ? 'hh:mm:ss a' : 'hh:mm a';
+  const { showSeconds = false, format: formatString = fallback } = options || {};
  return timeFormat === '12' ? formatFromMillis(milliseconds, formatString) : millisToString(milliseconds, showSeconds);
 };
@@ -61,6 +61,11 @@ $table-header-font-size: calc(1rem - 3px);
 .eventRow {
  vertical-align: top;

+  &:hover {
+    outline: 1px solid $blue-700;
+    outline-offset: -1px;
+  }
+
  td {
    background-color: $gray-1250;
    border-radius: 2px;
@@ -113,14 +118,6 @@ $table-header-font-size: calc(1rem - 3px);
  }
 }

-.delaySymbol {
-  svg {
-    font-size: 1.5rem;
-    color: $ontime-delay;
-    margin: 0 auto;
-  }
-}
-
 .delayedTime {
  color: $ontime-delay-text;
  font-size: calc(1rem - 2px);
@@ -1,33 +1,20 @@
-import { MutableRefObject, useEffect, useRef } from 'react';
-import { Tooltip } from '@chakra-ui/react';
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import { horizontalListSortingStrategy, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { useRef } from 'react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';

+import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useLocalStorage } from '../../common/hooks/useLocalStorage';
-import { millisToDelayString } from '../../common/utils/dateConfig';
-import { getAccessibleColour } from '../../common/utils/styleUtils';
-import { tooltipDelayFast } from '../../ontimeConfig';

+import BlockRow from './cuesheet-table-elements/BlockRow';
+import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
+import DelayRow from './cuesheet-table-elements/DelayRow';
+import EventRow from './cuesheet-table-elements/EventRow';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
 import { useCuesheetSettings } from './store/CuesheetSettings';
-import { SortableCell } from './tableElements/SortableCell';
 import { initialColumnOrder } from './cuesheetCols';

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

-const pastOpacity = '0.2';
-
 interface CuesheetProps {
  data: OntimeRundown;
  columns: ColumnDef<OntimeRundownEntry>[];
@@ -46,6 +33,8 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
  const [columnSizing, setColumnSizing] = useLocalStorage('table-sizes', {});

  const selectedRef = useRef<HTMLTableRowElement | null>(null);
+  const tableContainerRef = useRef<HTMLDivElement | null>(null);
+  useFollowComponent({ followRef: selectedRef, scrollRef: tableContainerRef, doFollow: followSelected });

  const table = useReactTable({
    data,
@@ -63,78 +52,6 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
    onColumnSizingChange: setColumnSizing,
    getCoreRowModel: getCoreRowModel(),
  });
-  const tableContainerRef = useRef<HTMLDivElement>(null);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        delay: 100,
-        tolerance: 50,
-      },
-    }),
-    useSensor(TouchSensor, {
-      activationConstraint: {
-        delay: 100,
-        tolerance: 50,
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  // when selection moves, view should follow
-  useEffect(() => {
-    function scrollToComponent(
-      componentRef: MutableRefObject<HTMLTableRowElement>,
-      scrollRef: MutableRefObject<HTMLDivElement>,
-    ) {
-      const componentRect = componentRef.current.getBoundingClientRect();
-      const scrollRect = scrollRef.current.getBoundingClientRect();
-      const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - 100;
-      scrollRef.current.scrollTo({ top, behavior: 'smooth' });
-    }
-
-    if (!followSelected) {
-      return;
-    }
-
-    if (selectedRef.current && tableContainerRef.current) {
-      // Use requestAnimationFrame to ensure the component is fully loaded
-      window.requestAnimationFrame(() => {
-        scrollToComponent(
-          selectedRef as MutableRefObject<HTMLTableRowElement>,
-          tableContainerRef as MutableRefObject<HTMLDivElement>,
-        );
-      });
-    }
-    // eslint-disable-next-line -- the prompt seems incorrect, we need the refs
-  }, [selectedRef.current, tableContainerRef.current, followSelected]);
-
-  const handleOnDragEnd = (event: DragEndEvent) => {
-    const { delta, active, over } = event;
-
-    // cancel if delta y is greater than 200
-    if (delta.y > 200) return;
-    // cancel if we do not have an over id
-    if (over?.id == null) return;
-
-    // get index of from
-    const fromIndex = columnOrder.indexOf(active.id as string);
-
-    // get index of to
-    const toIndex = columnOrder.indexOf(over.id as string);
-
-    if (toIndex === -1) {
-      return;
-    }
-
-    const reorderedCols = [...columnOrder];
-    const reorderedItem = reorderedCols.splice(fromIndex, 1);
-    reorderedCols.splice(toIndex, 0, reorderedItem[0]);
-
-    saveColumnOrder(reorderedCols);
-  };

  const resetColumnOrder = () => {
    saveColumnOrder(initialColumnOrder);
@@ -148,6 +65,8 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
    setColumnSizing({});
  };

+  const headerGroups = table.getHeaderGroups;
+
  let eventIndex = 0;
  let isPast = Boolean(selectedId);

@@ -163,37 +82,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
      )}
      <div ref={tableContainerRef} className={style.cuesheetContainer}>
        <table className={style.cuesheet}>
-          <thead className={style.tableHeader}>
-            {table.getHeaderGroups().map((headerGroup) => {
-              const key = headerGroup.id;
-
-              return (
-                <DndContext key={key} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleOnDragEnd}>
-                  <tr key={headerGroup.id}>
-                    <th className={style.indexColumn}>
-                      <Tooltip label='Event Order' openDelay={tooltipDelayFast}>
-                        #
-                      </Tooltip>
-                    </th>
-                    <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
-                      {headerGroup.headers.map((header) => {
-                        const width = header.getSize();
-
-                        return (
-                          <SortableCell key={header.column.columnDef.id} header={header} style={{ width }}>
-                            {header.isPlaceholder
-                              ? null
-                              : flexRender(header.column.columnDef.header, header.getContext())}
-                          </SortableCell>
-                        );
-                      })}
-                    </SortableContext>
-                  </tr>
-                </DndContext>
-              );
-            })}
-          </thead>
-
+          <CuesheetHeader headerGroups={headerGroups} />
          <tbody>
            {table.getRowModel().rows.map((row) => {
              const key = row.original.id;
@@ -203,13 +92,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
              }

              if (isOntimeBlock(row.original)) {
-                const title = row.original.title;
-
-                return (
-                  <tr key={key} className={style.blockRow}>
-                    <td>{title}</td>
-                  </tr>
-                );
+                return <BlockRow key={key} title={row.original.title} />;
              }
              if (isOntimeDelay(row.original)) {
                const delayVal = row.original.duration;
@@ -218,12 +101,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                  return null;
                }

-                const delayTime = millisToDelayString(delayVal);
-                return (
-                  <tr key={key} className={style.delayRow}>
-                    <td>{delayTime}</td>
-                  </tr>
-                );
+                return <DelayRow key={key} duration={delayVal} />;
              }
              if (isOntimeEvent(row.original)) {
                eventIndex++;
@@ -236,25 +114,20 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                  return null;
                }

-                const bgFallback = 'transparent';
-                const bgColour = row.original.colour || bgFallback;
-                const textColour = bgColour === bgFallback ? undefined : getAccessibleColour(bgColour);
-                const isSkipped = row.original.skip;
-
                let rowBgColour: string | undefined;
-                if (row.original.id === selectedId) {
-                  rowBgColour = '#D20300'; // $red-700
+                if (isSelected) {
+                  rowBgColour = 'var(--cuesheet-running-bg-override, #D20300)'; // $red-700
                }
+
                return (
-                  <tr
+                  <EventRow
                    key={key}
-                    className={`${style.eventRow} ${isSkipped ? style.skip : ''}`}
-                    style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
-                    ref={isSelected ? selectedRef : undefined}
+                    eventIndex={eventIndex}
+                    isPast={isPast}
+                    selectedRef={isSelected ? selectedRef : undefined}
+                    skip={row.original.skip}
+                    colour={row.original.colour}
                  >
-                    <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour?.color }}>
-                      {eventIndex}
-                    </td>
                    {row.getVisibleCells().map((cell) => {
                      return (
                        <td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
@@ -262,7 +135,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                        </td>
                      );
                    })}
-                  </tr>
+                  </EventRow>
                );
              }

@@ -6,7 +6,11 @@ exports[`makeTable() > returns array of arrays with given fields 1`] = `
    "Ontime · Schedule Template",
  ],
  [
-    "Event Name",
+    "Project Title",
+    "",
+  ],
+  [
+    "Project Description",
    "",
  ],
  [
@@ -26,7 +26,7 @@ describe('parseField()', () => {
  });

  it('returns an empty string on undefined fields', () => {
-    expect(parseField('presenter', undefined)).toBe('');
+    expect(parseField('presenter')).toBe('');
  });

  describe('simply returns any other value in any other field', () => {
@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+import style from '../Cuesheet.module.scss';
+
+interface BlockRowProps {
+  title: string;
+}
+
+function BlockRow(props: BlockRowProps) {
+  const { title } = props;
+  return (
+    <tr className={style.blockRow}>
+      <td>{title}</td>
+    </tr>
+  );
+}
+
+export default memo(BlockRow);
@@ -0,0 +1,108 @@
+import { memo } from 'react';
+import { Tooltip } from '@chakra-ui/react';
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { horizontalListSortingStrategy, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { flexRender, HeaderGroup } from '@tanstack/react-table';
+import { OntimeRundownEntry } from 'ontime-types';
+
+import { useLocalStorage } from '../../../common/hooks/useLocalStorage';
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { initialColumnOrder } from '../cuesheetCols';
+
+import { SortableCell } from './SortableCell';
+
+import style from '../Cuesheet.module.scss';
+
+interface CuesheetHeaderProps {
+  headerGroups: () => HeaderGroup<OntimeRundownEntry>[];
+}
+
+function CuesheetHeader(props: CuesheetHeaderProps) {
+  const { headerGroups } = props;
+  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>('table-order', initialColumnOrder);
+
+  const handleOnDragEnd = (event: DragEndEvent) => {
+    const { delta, active, over } = event;
+
+    // cancel if delta y is greater than 200
+    if (delta.y > 200) return;
+    // cancel if we do not have an over id
+    if (over?.id == null) return;
+
+    // get index of from
+    const fromIndex = columnOrder.indexOf(active.id as string);
+
+    // get index of to
+    const toIndex = columnOrder.indexOf(over.id as string);
+
+    if (toIndex === -1) {
+      return;
+    }
+
+    const reorderedCols = [...columnOrder];
+    const reorderedItem = reorderedCols.splice(fromIndex, 1);
+    reorderedCols.splice(toIndex, 0, reorderedItem[0]);
+
+    saveColumnOrder(reorderedCols);
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 50,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 50,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  return (
+    <thead className={style.tableHeader}>
+      {headerGroups().map((headerGroup) => {
+        const key = headerGroup.id;
+
+        return (
+          <DndContext key={key} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleOnDragEnd}>
+            <tr key={headerGroup.id}>
+              <th className={style.indexColumn}>
+                <Tooltip label='Event Order' openDelay={tooltipDelayFast}>
+                  #
+                </Tooltip>
+              </th>
+              <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
+                {headerGroup.headers.map((header) => {
+                  const width = header.getSize();
+
+                  return (
+                    <SortableCell key={header.column.columnDef.id} header={header} style={{ width }}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </SortableCell>
+                  );
+                })}
+              </SortableContext>
+            </tr>
+          </DndContext>
+        );
+      })}
+    </thead>
+  );
+}
+
+export default memo(CuesheetHeader);
@@ -0,0 +1,6 @@
+interface CuesheetRowProps {
+  row: OntimeRundownEntry;
+  isSelected: boolean;
+}
+
+function CuesheetRow() {}
@@ -0,0 +1,22 @@
+import { memo } from 'react';
+
+import { millisToDelayString } from '../../../common/utils/dateConfig';
+
+import style from '../Cuesheet.module.scss';
+
+interface DelayRowProps {
+  duration: number;
+}
+
+function DelayRow(props: DelayRowProps) {
+  const { duration } = props;
+  const delayTime = millisToDelayString(duration);
+
+  return (
+    <tr className={style.delayRow}>
+      <td>{delayTime}</td>
+    </tr>
+  );
+}
+
+export default memo(DelayRow);
@@ -0,0 +1,67 @@
+import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
+
+import { getAccessibleColour } from '../../../common/utils/styleUtils';
+
+import style from '../Cuesheet.module.scss';
+
+const pastOpacity = '0.2';
+
+interface EventRowProps {
+  eventIndex: number;
+  isPast?: boolean;
+  selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
+  skip?: boolean;
+  colour?: string;
+}
+
+function EventRow(props: PropsWithChildren<EventRowProps>) {
+  const { children, eventIndex, isPast, selectedRef, skip, colour } = props;
+  const ownRef = useRef<HTMLTableRowElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const bgFallback = 'transparent';
+  const bgColour = colour || bgFallback;
+  const textColour = bgColour === bgFallback ? undefined : getAccessibleColour(bgColour);
+
+  useLayoutEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      {
+        root: null,
+        threshold: 0.01,
+      },
+    );
+
+    const handleRefCurrent = ownRef.current;
+    if (selectedRef) {
+      setIsVisible(true);
+    } else if (handleRefCurrent) {
+      observer.observe(handleRefCurrent);
+    }
+
+    return () => {
+      if (handleRefCurrent) {
+        observer.unobserve(handleRefCurrent);
+      }
+    };
+  }, [ownRef, selectedRef]);
+
+  return (
+    <tr
+      className={`${style.eventRow} ${skip ? style.skip : ''}`}
+      style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
+      ref={selectedRef ?? ownRef}
+    >
+      <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour?.color }}>
+        {eventIndex}
+      </td>
+      {isVisible ? children : null}
+    </tr>
+  );
+}
+
+export default memo(EventRow);
@@ -101,13 +101,13 @@ $active-colour: $gray-500;
  .actionIcon {
    cursor: pointer;

-    &:hover {
-      color: $active-colour;
-    }
-
    &.enabled {
      color: $active-indicator;
    }
+
+    &:hover {
+      color: $active-colour;
+    }
  }
 }

@@ -4,15 +4,14 @@ import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 import { IoLocate } from '@react-icons/all-files/io5/IoLocate';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 import { Playback, ProjectData } from 'ontime-types';
-import { formatDisplay } from 'ontime-utils';

+import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
 import useFullscreen from '../../../common/hooks/useFullscreen';
-import { useTimer } from '../../../common/hooks/useSocket';
 import useProjectData from '../../../common/hooks-query/useProjectData';
-import { formatTime } from '../../../common/utils/time';
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { useCuesheetSettings } from '../store/CuesheetSettings';
-import PlaybackIcon from '../tableElements/PlaybackIcon';
+
+import CuesheetTableHeaderTimers from './CuesheetTableHeaderTimers';

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

@@ -31,7 +30,6 @@ export default function CuesheetTableHeader({ handleCSVExport, featureData }: Cu
  const showSettings = useCuesheetSettings((state) => state.showSettings);
  const toggleSettings = useCuesheetSettings((state) => state.toggleSettings);
  const toggleFollow = useCuesheetSettings((state) => state.toggleFollow);
-  const timer = useTimer();
  const { isFullScreen, toggleFullScreen } = useFullscreen();
  const { data: project } = useProjectData();

@@ -47,14 +45,6 @@ export default function CuesheetTableHeader({ handleCSVExport, featureData }: Cu
        featureData.numEvents ? featureData.numEvents : '-'
      }`;

-  // prepare presentation variables
-  const isOvertime = (timer.current ?? 0) < 0;
-  const timerNow = timer.current == null ? '-' : `${isOvertime ? '-' : ''}${formatDisplay(timer.current)}`;
-  const timeNow = formatTime(timer.clock, {
-    showSeconds: true,
-    format: 'hh:mm:ss a',
-  });
-
  return (
    <div className={style.header}>
      <div className={style.event}>
@@ -65,14 +55,7 @@ export default function CuesheetTableHeader({ handleCSVExport, featureData }: Cu
        <div className={style.playbackLabel}>{selected}</div>
        <PlaybackIcon state={featureData.playback} />
      </div>
-      <div className={style.timer}>
-        <div className={style.timerLabel}>Running Timer</div>
-        <div className={style.value}>{timerNow}</div>
-      </div>
-      <div className={style.clock}>
-        <div className={style.clockLabel}>Time Now</div>
-        <div className={style.value}>{timeNow}</div>
-      </div>
+      <CuesheetTableHeaderTimers />
      <div className={style.headerActions}>
        <Tooltip openDelay={tooltipDelayFast} label='Toggle follow'>
          <span onClick={() => toggleFollow()} className={`${style.actionIcon} ${followSelected ? style.enabled : ''}`}>
@@ -0,0 +1,31 @@
+import { formatDisplay } from 'ontime-utils';
+
+import { useTimer } from '../../../common/hooks/useSocket';
+import { formatTime } from '../../../common/utils/time';
+
+import style from './CuesheetTableHeader.module.scss';
+
+export default function CuesheetTableHeaderTimers() {
+  const timer = useTimer();
+
+  // prepare presentation variables
+  const isOvertime = (timer.current ?? 0) < 0;
+  const timerNow = timer.current == null ? '-' : `${isOvertime ? '-' : ''}${formatDisplay(timer.current)}`;
+  const timeNow = formatTime(timer.clock, {
+    showSeconds: true,
+    format: 'hh:mm:ss a',
+  });
+
+  return (
+    <>
+      <div className={style.timer}>
+        <div className={style.timerLabel}>Running Timer</div>
+        <div className={style.value}>{timerNow}</div>
+      </div>
+      <div className={style.clock}>
+        <div className={style.clockLabel}>Time Now</div>
+        <div className={style.value}>{timeNow}</div>
+      </div>
+    </>
+  );
+}
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Button, Checkbox, Switch } from '@chakra-ui/react';
 import { Column } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
@@ -19,7 +20,7 @@ interface CuesheetTableSettingsProps {
  handleClearToggles: () => void;
 }

-export default function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
+function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
  const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props;
  const showPrevious = useCuesheetSettings((state) => state.showPrevious);
  const togglePreviousVisibility = useCuesheetSettings((state) => state.togglePreviousVisibility);
@@ -81,3 +82,5 @@ export default function CuesheetTableSettings(props: CuesheetTableSettingsProps)
    </div>
  );
 }
+
+export default memo(CuesheetTableSettings);
@@ -1,17 +1,13 @@
 import { useCallback } from 'react';
-import { Tooltip } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
-import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
-import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { OntimeEvent, OntimeRundownEntry, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';

-import { millisToDelayString } from '../../common/utils/dateConfig';
-import { tooltipDelayFast } from '../../ontimeConfig';
+import DelayIndicator from '../../common/components/delay-indicator/DelayIndicator';

+import EditableCell from './cuesheet-table-elements/EditableCell';
 import { useCuesheetSettings } from './store/CuesheetSettings';
-import EditableCell from './tableElements/EditableCell';

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

@@ -20,30 +16,6 @@ function makePublic(row: CellContext<OntimeRundownEntry, unknown>) {
  return cellValue ? <IoCheckmark className={style.check} /> : '';
 }

-function DelayIndicator(props: { delayValue: number }) {
-  const { delayValue } = props;
-  if (delayValue < 0) {
-    return (
-      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
-        <span className={style.delaySymbol}>
-          <IoChevronDown />
-        </span>
-      </Tooltip>
-    );
-  }
-
-  if (delayValue > 0) {
-    return (
-      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
-        <span className={style.delaySymbol}>
-          <IoChevronUp />
-        </span>
-      </Tooltip>
-    );
-  }
-  return null;
-}
-
 function MakeTimer({ getValue, row: { original } }: CellContext<OntimeRundownEntry, unknown>) {
  const showDelayedTimes = useCuesheetSettings((state) => state.showDelayedTimes);
  const cellValue = (getValue() as number | null) ?? 0;
@@ -144,7 +144,7 @@ $playback-width: 26rem;
 .eventEditor {
  border-radius: 8px 8px 0 0;
  background-color: $bg-container-l2;
-  box-shadow: rgba(0, 0, 0, 0.35) 0 3px 6px 6px;
+  box-shadow: $large-bottom-drawer-shadow;
  border-top: 1px solid $white-20;
  position: absolute;
  bottom: 0;
@@ -164,7 +164,7 @@ $playback-width: 26rem;
  }

  .header {
-    background-color: $gray-1200;
+    background-color: $gray-1250;
    padding: 0.5rem;
    border-left: 1px solid $white-10;
    border-radius: 0 8px 0 0;
@@ -2,16 +2,15 @@ import { useCallback } from 'react';
 import { Textarea } from '@chakra-ui/react';

 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
-
-import { TitleActions } from './EventEditorDataLeft';
+import { EditorUpdateFields } from '../EventEditor';

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

 interface CountedTextAreaProps {
-  field: TitleActions;
+  field: EditorUpdateFields;
  label: string;
  initialValue: string;
-  submitHandler: (field: TitleActions, value: string) => void;
+  submitHandler: (field: EditorUpdateFields, value: string) => void;
 }

 export default function CountedTextArea(props: CountedTextAreaProps) {
@@ -12,17 +12,17 @@ export default function Info() {
  const showNif = useEditorSettings((state) => state.eventSettings.showNif);

  const titlesNow = {
-    title: data.titles.titleNow || '',
-    subtitle: data.titles.subtitleNow || '',
-    presenter: data.titles.presenterNow || '',
-    note: data.titles.noteNow || '',
+    title: data.eventNow?.title || '',
+    subtitle: data.eventNow?.subtitle || '',
+    presenter: data.eventNow?.presenter || '',
+    note: data.eventNow?.note || '',
  };

  const titlesNext = {
-    title: data.titles.titleNext || '',
-    subtitle: data.titles.subtitleNext || '',
-    presenter: data.titles.presenterNext || '',
-    note: data.titles.noteNext || '',
+    title: data.eventNext?.title || '',
+    subtitle: data.eventNext?.subtitle || '',
+    presenter: data.eventNext?.presenter || '',
+    note: data.eventNext?.note || '',
  };

  const selected = !data.numEvents
@@ -107,6 +107,16 @@ $el-padding-with-compensation: 24px; // 16 + 8
  color: $error-red;
 }

+.success {
+  @include subsection;
+  color: $action-blue;
+}
+
+.feedbackSection {
+  justify-content: flex-start;
+
+}
+
 .buttonSection {
  margin-top: $section-spacing;
  display: flex;
@@ -117,6 +127,10 @@ $el-padding-with-compensation: 24px; // 16 + 8
  flex-grow: 1;
 }

+.vSpacer {
+  height: 2rem;
+}
+
 .shiftRight {
  align-self: flex-end;
 }
@@ -135,6 +149,12 @@ $el-padding-with-compensation: 24px; // 16 + 8
  grid-template-columns: auto 1fr;
 }

+.twoEqualColumn {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
 .padBottom {
  padding-bottom: $element-spacing;
 }
@@ -1,22 +0,0 @@
-@use '../../../theme/v2Styles' as *;
-@use '../../../theme/ontimeColours' as *;
-
-.header {
-  font-size: $inner-section-text-size;
-  color: $gray-500;
-  padding-left: 0.5rem;
-  margin: 0.5rem 0;
-  text-transform: uppercase;
-
-  display: flex;
-}
-
-.moreExpanded {
-  transform: scaleY(-1);
-  transition: transform $transition-time-feedback;
-}
-
-.moreCollapsed {
-  transform: scaleY(1);
-  transition: transform $transition-time-feedback;
-}
@@ -1,23 +0,0 @@
-import { PropsWithChildren, useState } from 'react';
-import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
-
-import style from './CollapsableSection.module.scss';
-
-interface CollapsableSectionProps {
-  title: string;
-}
-
-export default function CollapsableSection(props: PropsWithChildren<CollapsableSectionProps>) {
-  const { title, children } = props;
-  const [collapsed, setCollapsed] = useState(false);
-
-  return (
-    <>
-      <div className={style.title} onClick={() => setCollapsed((prev) => !prev)}>
-        {title}
-        <IoChevronUp className={collapsed ? style.moreCollapsed : style.moreExpanded} />
-      </div>
-      {!collapsed && children}
-    </>
-  );
-}
@@ -17,18 +17,25 @@ export default function UploadFile() {

  const clearFile = () => {
    setFile(null);
+    setErrors('');
  };

  const handleFile = (event: ChangeEvent<HTMLInputElement>) => {
-    const fileSelected = event?.target?.files?.[0];
-    if (!fileSelected) return;
+    setErrors('');

-    const validate = validateFile(fileSelected);
-    setErrors(validate.errors?.[0]);
+    const selectedFile = event?.target?.files?.[0];
+    if (!selectedFile) {
+      setFile(null);
+      return;
+    }

-    if (validate.isValid) {
-      setFile(fileSelected);
-    } else {
+    try {
+      validateFile(selectedFile);
+      setFile(selectedFile);
+    } catch (error) {
+      if (error instanceof Error) {
+        setErrors(error.message);
+      }
      setFile(null);
    }
  };
@@ -47,9 +54,11 @@ export default function UploadFile() {
        accept='.json, .xlsx'
        data-testid='file-input'
      />
-      <div className={style.uploadArea} onClick={handleClick}>
-        Click to upload Ontime project or xlsx file
-      </div>
+      {!file && (
+        <div className={style.uploadArea} onClick={handleClick}>
+          Click to upload Ontime project or xlsx file
+        </div>
+      )}
      {(file || errors) && (
        <UploadEntry file={file} errors={errors} progress={progress} success={success} handleClear={clearFile} />
      )}
@@ -10,34 +10,32 @@ import {
  ModalOverlay,
 } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
-import { OntimeRundown } from 'ontime-types';
+import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';
+import { defaultExcelImportMap, ExcelImportMap } from 'ontime-utils';

-import { RUNDOWN_TABLE } from '../../../common/api/apiConstants';
-import { postPreviewExcel, uploadData } from '../../../common/api/ontimeApi';
+import { invalidateAllCaches, maybeAxiosError } from '../../../common/api/apiUtils';
+import {
+  patchData,
+  postPreviewExcel,
+  ProjectFileImportOptions,
+  uploadProjectFile,
+} from '../../../common/api/ontimeApi';
 import { projectDataPlaceholder } from '../../../common/models/ProjectData';
 import { userFieldsPlaceholder } from '../../../common/models/UserFields';
-import { cx } from '../../../common/utils/styleUtils';

+import PreviewExcel from './preview/PreviewExcel';
 import ExcelFileOptions from './upload-options/ExcelFileOptions';
 import OntimeFileOptions from './upload-options/OntimeFileOptions';
 import UploadStepTracker from './upload-step/UploadStep';
-import ReviewFile from './ReviewExcel';
 import UploadFile from './UploadFile';
 import { useUploadModalContextStore } from './uploadModalContext';
-import { defaultExcelImportMap, ExcelImportMapKeys, isExcelFile, isOntimeFile } from './uploadUtils';
+import { isExcelFile, isOntimeFile } from './uploadUtils';

 import style from './UploadModal.module.scss';
+import { PROJECT_DATA, RUNDOWN_TABLE, USERFIELDS } from '../../../common/api/apiConstants';

 export type UploadStep = 'upload' | 'review';

-export interface OntimeInputOptions {
-  onlyImportRundown?: boolean;
-}
-
-export type ExcelInputOptions = {
-  [K in ExcelImportMapKeys]: string;
-};
-
 interface UploadModalProps {
  onClose: () => void;
  isOpen: boolean;
@@ -50,62 +48,76 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {

  const [uploadStep, setUploadStep] = useState<UploadStep>('upload');
  const [submitting, setSubmitting] = useState(false);
-  const [rundown, setRundown] = useState<OntimeRundown>([]);
-  const [userFields, setUserFields] = useState(userFieldsPlaceholder);
-  const [project, setProject] = useState(projectDataPlaceholder);
+  const [rundown, setRundown] = useState<OntimeRundown | null>(null);
+  const [userFields, setUserFields] = useState<UserFields | null>(null);
+  const [project, setProject] = useState<ProjectData | null>(null);

  const [errors, setErrors] = useState('');

-  const ontimeFileOptions = useRef<Partial<OntimeInputOptions>>({});
-  const excelFileOptions = useRef<Partial<ExcelInputOptions>>(defaultExcelImportMap);
+  const ontimeFileOptions = useRef<Partial<ProjectFileImportOptions>>({});
+  const excelFileOptions = useRef<ExcelImportMap>(defaultExcelImportMap);

+  /* if the modal re-opens, we want to restart all states */
  useEffect(() => {
    clear();
    setUploadStep('upload');
    setSubmitting(false);
-    setRundown([]);
-    setUserFields(userFieldsPlaceholder);
-    setProject(projectDataPlaceholder);
+    setRundown(null);
+    setUserFields(null);
+    setProject(null);
    setErrors('');
  }, [clear, isOpen]);

-  const handleParse = async () => {
+  /* uploads file to backend
+   * - in the case of excel, we get the preview
+   * - in the case of project file, this is end of line
+   **/
+  const handleUpload = async () => {
+    let doClose = false;
    if (file) {
      setSubmitting(true);
+      setErrors('');
      try {
        if (isOntimeFile(file)) {
-          await handleOntimeFile(file);
-          await queryClient.invalidateQueries(RUNDOWN_TABLE);
+          // TODO: we would also like to have preview for ontime project files
+          const options = ontimeFileOptions.current;
+          await handleOntimeFile(file, options);
+          doClose = true;
        } else if (isExcelFile(file)) {
-          await handleExcelFile(file);
+          const options = excelFileOptions.current;
+          await handleExcelFile(file, options);
+          await invalidateAllCaches();
        }
      } catch (error) {
-        setErrors(`Failed uploading file: ${error}`);
+        const message = maybeAxiosError(error);
+        setErrors(`Failed uploading file ${message}`);
      } finally {
        setSubmitting(false);
+        if (doClose) {
+          handleClose();
+        }
      }
    }

-    async function handleExcelFile(file: File) {
-      const options = excelFileOptions.current;
-      // TODO: option type should be central, to also be used by backend
+    // when we upload excel, we populate state with preview data
+    async function handleExcelFile(file: File, options: ExcelImportMap) {
      const response = await postPreviewExcel(file, setProgress, options);
      if (response.status === 200) {
        setRundown(response.data.rundown);
        setUserFields(response.data.userFields);
        setProject(response.data.project);
+        // in excel imports we have an extra review step
        setUploadStep('review');
      }
    }

-    async function handleOntimeFile(file: File) {
-      const options = {
-        onlyRundown: Boolean(ontimeFileOptions.current.onlyImportRundown),
-      };
-      await uploadData(file, setProgress, options);
+    // when we upload project files, no extra operations are done
+    async function handleOntimeFile(file: File, options: Partial<ProjectFileImportOptions>) {
+      await uploadProjectFile(file, setProgress, options);
    }
  };

+  // before closing the modal, we clear data from mutations
  const handleClose = () => {
    clear();
    setRundown([]);
@@ -115,36 +127,47 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
  };

  const handleFinalise = async () => {
-    if (file) {
+    // this step is currently only used for excel files, after preview
+    if (isExcel && rundown && userFields && project) {
+      let doClose = false;
      setSubmitting(true);
      try {
-        const options = {
-          //onlyRundown: overrideOptionRef.current?.checked || false,
-        };
-        await uploadData(file, setProgress, options);
-        handleClose();
+        await patchData({ rundown, userFields, project });
+        queryClient.setQueryData(RUNDOWN_TABLE, rundown);
+        queryClient.setQueryData(USERFIELDS, userFields);
+        queryClient.setQueryData(PROJECT_DATA, project);
+        await queryClient.invalidateQueries({
+          queryKey: [...RUNDOWN_TABLE, ...USERFIELDS, ...PROJECT_DATA],
+        });
+        doClose = true;
      } catch (error) {
-        console.error(error);
+        const message = maybeAxiosError(error);
+        setErrors(`Failed applying changes ${message}`);
      } finally {
-        await queryClient.invalidateQueries(RUNDOWN_TABLE);
        setSubmitting(false);
+        if (doClose) {
+          handleClose();
+        }
      }
    }
  };

+  const undoReview = () => {
+    setUploadStep('upload');
+    setErrors('');
+  };
+
  const isUpload = uploadStep === 'upload';
+  const isReview = uploadStep === 'review';
  const isExcel = isExcelFile(file);
  const isOntime = isOntimeFile(file);

-  const handleGoBack = isUpload ? undefined : () => setUploadStep('upload');
-  const handleSubmit = isUpload ? handleParse : handleFinalise;
-  const disableSubmit = isUpload && !file;
+  const handleGoBack = isUpload ? undefined : undoReview;
+  const handleSubmit = isUpload ? handleUpload : handleFinalise;
+  const disableSubmit = (isUpload && !file) || (isReview && rundown === null);
  const disableGoBack = isUpload;
  const submitText = isUpload ? 'Upload' : 'Finish';

-  const modalClasses = cx([style.modalWidthOverride, isExcel ? style.doExtend : null]);
-
-  console.log('debug', isExcel, modalClasses);
  return (
    <Modal
      onClose={handleClose}
@@ -165,33 +188,40 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
          {uploadStep === 'upload' ? (
            <>
              <UploadFile />
-              {errors && <div className={style.error}>{errors}</div>}
              {isOntime && <OntimeFileOptions optionsRef={ontimeFileOptions} />}
              {isExcel && <ExcelFileOptions optionsRef={excelFileOptions} />}
            </>
          ) : (
-            <ReviewFile rundown={rundown} project={project} userFields={userFields} />
+            <PreviewExcel
+              rundown={rundown ?? []}
+              project={project ?? projectDataPlaceholder}
+              userFields={userFields ?? userFieldsPlaceholder}
+            />
          )}
        </ModalBody>
-        <ModalFooter className={`${style.buttonSection} ${style.pad}`}>
-          <Button
-            onClick={handleGoBack}
-            isDisabled={disableGoBack || submitting}
-            variant='ontime-ghost-on-light'
-            size='sm'
-          >
-            Go Back
-          </Button>
-          <Button
-            onClick={handleSubmit}
-            isLoading={submitting}
-            isDisabled={disableSubmit}
-            variant='ontime-filled'
-            padding='0 2em'
-            size='sm'
-          >
-            {submitText}
-          </Button>
+        <ModalFooter>
+          <div className={style.feedbackSection}>{errors && <div className={style.error}>{errors}</div>}</div>
+
+          <div className={`${style.buttonSection} ${style.pad}`}>
+            <Button
+              onClick={handleGoBack}
+              isDisabled={disableGoBack || submitting}
+              variant='ontime-ghost-on-light'
+              size='sm'
+            >
+              Go Back
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              isLoading={submitting}
+              isDisabled={disableSubmit}
+              variant='ontime-filled'
+              padding='0 2em'
+              size='sm'
+            >
+              {submitText}
+            </Button>
+          </div>
        </ModalFooter>
      </ModalContent>
    </Modal>
@@ -1,4 +1,4 @@
-@use "../../../theme/_ontimeColours" as *;
+@use "../../../../theme/_ontimeColours" as *;

@mixin pad-item {
  padding-left: 0.5rem;
@@ -1,23 +1,24 @@
 import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';

-import PreviewProjectData from '../../../common/components/import-preview/PreviewProjectData';
-import PreviewRundown from '../../../common/components/import-preview/PreviewRundown';
+import PreviewProjectData from './PreviewProjectData';
+import PreviewRundown from './PreviewRundown';

-import style from '../Modal.module.scss';
+import style from '../../Modal.module.scss';

-interface ReviewFileProps {
+interface PreviewExcelProps {
  rundown: OntimeRundown;
  project: ProjectData;
  userFields: UserFields;
 }

-export default function ReviewFile(props: ReviewFileProps) {
+export default function PreviewExcel(props: PreviewExcelProps) {
  const { rundown, project, userFields } = props;

  return (
-    <div className={style.columnSection}>
+    <div className={`${style.column} ${style.noHover}`}>
      <div className={style.title}>Review Project Data</div>
      <PreviewProjectData project={project} />
+      <div className={style.vSpacer} />
      <div className={style.title}>Review Rundown</div>
      <PreviewRundown rundown={rundown} userFields={userFields} />
    </div>
@@ -1,8 +1,9 @@
-import { ReactNode } from 'react';
 import { isOntimeEvent, OntimeRundown, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';

-import { getAccessibleColour } from '../../utils/styleUtils';
+import { getAccessibleColour } from '../../../../common/utils/styleUtils';
+
+import Tag from './Tag';

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

@@ -78,37 +79,39 @@ export default function PreviewRundown({ rundown, userFields }: PreviewRundownPr
                const skip = booleanToText(event.skip);
                return (
                  <tr key={key}>
-                    <th>
+                    <td className={style.center}>
                      <Tag>{index + 1}</Tag>
-                    </th>
-                    <th>Event</th>
-                    <th>{event.cue}</th>
-                    <th>{event.title}</th>
-                    <th>{event.subtitle}</th>
-                    <th>{event.presenter}</th>
-                    <th>{event.note}</th>
-                    <th>{millisToString(event.timeStart)}</th>
-                    <th>{millisToString(event.timeEnd)}</th>
-                    <th>{millisToString(event.duration)}</th>
-                    <th>{isPublic && <Tag>{isPublic}</Tag>}</th>
-                    <th>{skip && <Tag>{skip}</Tag>}</th>
-                    <th style={{ ...colour }}>{event.colour}</th>
-                    <th>
+                    </td>
+                    <td className={style.center}>
+                      <Tag>Event</Tag>
+                    </td>
+                    <td className={style.nowrap}>{event.cue}</td>
+                    <td>{event.title}</td>
+                    <td>{event.subtitle}</td>
+                    <td>{event.presenter}</td>
+                    <td>{event.note}</td>
+                    <td>{millisToString(event.timeStart)}</td>
+                    <td>{millisToString(event.timeEnd)}</td>
+                    <td>{millisToString(event.duration)}</td>
+                    <td>{isPublic && <Tag>{isPublic}</Tag>}</td>
+                    <td>{skip && <Tag>{skip}</Tag>}</td>
+                    <td style={{ ...colour }}>{event.colour}</td>
+                    <td>
                      <Tag>{event.timerType}</Tag>
-                    </th>
-                    <th>
+                    </td>
+                    <td>
                      <Tag>{event.endAction}</Tag>
-                    </th>
-                    <th>{event.user0}</th>
-                    <th>{event.user1}</th>
-                    <th>{event.user2}</th>
-                    <th>{event.user3}</th>
-                    <th>{event.user4}</th>
-                    <th>{event.user5}</th>
-                    <th>{event.user6}</th>
-                    <th>{event.user7}</th>
-                    <th>{event.user8}</th>
-                    <th>{event.user9}</th>
+                    </td>
+                    <td>{event.user0}</td>
+                    <td>{event.user1}</td>
+                    <td>{event.user2}</td>
+                    <td>{event.user3}</td>
+                    <td>{event.user4}</td>
+                    <td>{event.user5}</td>
+                    <td>{event.user6}</td>
+                    <td>{event.user7}</td>
+                    <td>{event.user8}</td>
+                    <td>{event.user9}</td>
                  </tr>
                );
              }
@@ -120,7 +123,3 @@ export default function PreviewRundown({ rundown, userFields }: PreviewRundownPr
    </div>
  );
 }
-
-function Tag({ children }: { children: ReactNode }) {
-  return <span className={style.tag}>{children}</span>;
-}
@@ -1,4 +1,4 @@
-@use "../../../theme/_ontimeColours" as *;
+@use "../../../../theme/_ontimeColours" as *;

 .container {
  max-width: 100%;
@@ -39,17 +39,22 @@
 }

 .body {
-
  tr:nth-child(odd) {
    background-color: $gray-50;
  }
+
+  td {
+    text-align: left;
+    vertical-align: top;
+    padding: 0 0.5em;
+  }
+
+  .center {
+    text-align: center;
+  }
+
+  .nowrap {
+    white-space: nowrap;
+  }
 }

-.tag {
-  font-size: 10px;
-  background-color: $blue-500;
-  color: $pure-white;
-  border-radius: 2px;
-  padding: 0 0.25rem;
-  white-space: nowrap;
-}
@@ -0,0 +1,10 @@
+@use "../../../../theme/_ontimeColours" as *;
+
+.tag {
+  font-size: 10px;
+  background-color: $blue-500;
+  color: $pure-white;
+  border-radius: 2px;
+  padding: 0 0.25rem;
+  white-space: nowrap;
+}
@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+import style from './Tag.module.scss';
+
+export default function Tag({ children }: { children: ReactNode }) {
+  return <span className={style.tag}>{children}</span>;
+}
@@ -21,10 +21,10 @@ export default function UploadEntry(props: UploadEntryProps) {
  if (errors) {
    return (
      <div className={`${style.uploadedItem} ${style.error}`}>
+        <IoClose className={style.cancelUpload} onClick={handleClear} />
        <IoWarningOutline className={style.icon} />
        <span className={style.fileTitle}>{errors}</span>
        <span className={style.fileInfo}>Please try again</span>
-        <Progress className={style.fileProgress} value={progress} />
      </div>
    );
  }
@@ -1,21 +1,18 @@
 import { MutableRefObject } from 'react';
-import { Input } from '@chakra-ui/react';
-
-import ModalSplitInput from '../../ModalSplitInput';
+import { ExcelImportMap } from 'ontime-utils';

 import ImportMapTable, { type TableEntry } from './ImportMapTable';
-import { ExcelInputOptions } from '../UploadModal';

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

 interface ExcelFileOptionsProps {
-  optionsRef: MutableRefObject<ExcelInputOptions>;
+  optionsRef: MutableRefObject<ExcelImportMap>;
 }

 export default function ExcelFileOptions(props: ExcelFileOptionsProps) {
  const { optionsRef } = props;

-  const updateRef = <T extends keyof ExcelInputOptions>(field: T, value: ExcelInputOptions[T]) => {
+  const updateRef = <T extends keyof ExcelImportMap>(field: T, value: ExcelImportMap[T]) => {
    // avoid unnecessary changes
    if (optionsRef.current[field] !== value) {
      optionsRef.current = { ...optionsRef.current, [field]: value };
@@ -41,6 +38,7 @@ export default function ExcelFileOptions(props: ExcelFileOptionsProps) {

  const options: TableEntry[] = [
    { label: 'Is Public', title: 'isPublic', value: optionsRef.current.isPublic },
+    { label: 'Skip', title: 'skip', value: optionsRef.current.skip },
    { label: 'Timer Type', title: 'timerType', value: optionsRef.current.timerType },
    { label: 'End Action', title: 'endAction', value: optionsRef.current.endAction },
  ];
@@ -60,16 +58,16 @@ export default function ExcelFileOptions(props: ExcelFileOptionsProps) {

  return (
    <div className={style.uploadOptions}>
-      <div className={style.twoColumn}>
+      <div className={style.twoEqualColumn}>
        <ImportMapTable title='Import options' fields={worksheet} handleOnChange={updateRef} />
      </div>

-      <div className={style.twoColumn}>
+      <div className={style.twoEqualColumn}>
        <ImportMapTable title='Timings' fields={timings} handleOnChange={updateRef} />
        <ImportMapTable title='Options' fields={options} handleOnChange={updateRef} />
      </div>

-      <div className={style.twoColumn}>
+      <div className={style.twoEqualColumn}>
        <ImportMapTable title='Titles' fields={titles} handleOnChange={updateRef} />
        <ImportMapTable title='User Fields' fields={userFields} handleOnChange={updateRef} />
      </div>
@@ -3,20 +3,31 @@

 .importTable {
  margin: 0.5rem;
-  font-size: $inner-section-text-size;
  height: fit-content;

  thead {
    color: $gray-500;
    text-transform: uppercase;
+    width: 10em;
  }

  tr:hover {
    background-color: $gray-50;
  }
+
+  tbody {
+    td {
+      max-width: fit-content;
+    }
+  }
 }

 .label {
  display: inline-block;
+  min-width: 6em;
+  font-size: $inner-section-text-size;
+}
+
+.input {
  width: 100%;
 }
@@ -1,16 +1,14 @@
 import { Input } from '@chakra-ui/react';
-
-import { ExcelInputOptions } from '../UploadModal';
+import { ExcelImportMap } from 'ontime-utils';

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

-// TODO: make this generic
-export type TableEntry = { label: string; title: keyof ExcelInputOptions; value: string };
+export type TableEntry = { label: string; title: keyof ExcelImportMap; value: string };

 interface ImportMapTableProps {
  title: string;
  fields: TableEntry[];
-  handleOnChange: (field: keyof ExcelInputOptions, value: string) => void;
+  handleOnChange: (field: keyof ExcelImportMap, value: string) => void;
 }

 export default function ImportMapTable(props: ImportMapTableProps) {
@@ -18,17 +16,19 @@ export default function ImportMapTable(props: ImportMapTableProps) {

  return (
    <table className={style.importTable}>
-      <thead>{title}</thead>
+      <thead>
+        <tr>
+          <td colSpan={2}>{title}</td>
+        </tr>
+      </thead>
      <tbody>
        {fields.map((field) => {
          return (
            <tr key={field.title}>
-              <td>
-                <label className={style.label} htmlFor={field.title}>
-                  {field.title}
-                </label>
+              <td className={style.label}>
+                <label htmlFor={field.title}>{field.title}</label>
              </td>
-              <td>
+              <td className={style.input}>
                <Input
                  id={field.title}
                  size='xs'
@@ -1,35 +1,32 @@
 import { MutableRefObject } from 'react';
 import { Switch } from '@chakra-ui/react';

+import { ProjectFileImportOptions } from '../../../../common/api/ontimeApi';
 import ModalSplitInput from '../../ModalSplitInput';
-import { OntimeInputOptions } from '../UploadModal';

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

 interface OntimeFileOptionsProps {
-  optionsRef: MutableRefObject<OntimeInputOptions>;
+  optionsRef: MutableRefObject<Partial<ProjectFileImportOptions>>;
 }

 export default function OntimeFileOptions(props: OntimeFileOptionsProps) {
  const { optionsRef } = props;

-  const updateRef = <T extends keyof OntimeInputOptions>(field: T, value: OntimeInputOptions[T]) => {
+  const updateRef = <T extends keyof ProjectFileImportOptions>(field: T, value: ProjectFileImportOptions[T]) => {
    optionsRef.current = { ...optionsRef.current, [field]: value };
  };

  return (
    <div className={style.uploadOptions}>
      <span className={style.title}>Import options</span>
-      <ModalSplitInput
-        field=''
-        title='Only import rundown'
-        description='All other options, including application settings will be discarded'
-      >
+      <ModalSplitInput field='' title='Only import rundown' description='All other project options will be kept'>
        <Switch
          variant='ontime-on-light'
          onChange={(e) => {
-            updateRef('onlyImportRundown', e.target.checked);
+            updateRef('onlyRundown', e.target.checked);
          }}
+          defaultChecked={Boolean(optionsRef.current.onlyRundown)}
        />
      </ModalSplitInput>
    </div>
@@ -1,31 +1,24 @@
-type ValidationStatus = {
-  errors: string[];
-  isValid: boolean;
-};
-
-export function validateFile(file: File): ValidationStatus {
-  const status: ValidationStatus = { errors: [], isValid: true };
+export function validateFile(file: File) {
  if (!file) {
-    status.errors.push('No file to upload');
-    status.isValid = false;
+    throw new Error('No file to upload');
  }

-  // Limit file size to 1MB
-  if (file.size > 1000000) {
-    status.errors.push('File size limit (1MB) exceeded');
-    status.isValid = false;
+  // Limit file size of a project file to around 1MB
+  if (file.name.endsWith('.json') && file.size > 1_000_000) {
+    throw new Error('File size limit (1MB) exceeded');
+  }
+
+  // Limit file size of an excel file to around 10MB
+  if (file.name.endsWith('.xlsx') && file.size > 10_000_000) {
+    throw new Error('File size limit (10MB) exceeded');
  }

  // Check file extension
  if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.json')) {
-    status.errors.push('Unhandled file type');
-    status.isValid = false;
+    throw new Error('Unhandled file type');
  }
-  return status;
 }

-export type MaybeFile = null | 'ontime' | 'excel';
-
 export function isExcelFile(file: File | null) {
  return file?.name.endsWith('.xlsx');
 }
@@ -33,38 +26,3 @@ export function isExcelFile(file: File | null) {
 export function isOntimeFile(file: File | null) {
  return file?.name.endsWith('.json');
 }
-
-export type ExcelImportMapKeys = keyof typeof defaultExcelImportMap;
-
-export const defaultExcelImportMap = {
-  worksheet: 'ontime',
-  projectName: 'project name',
-  projectDescription: 'project description',
-  publicUrl: 'public url',
-  publicInfo: 'public info',
-  backstageUrl: 'backstage url',
-  backstageInfo: 'backstage info',
-  timeStart: 'start',
-  timeEnd: 'end',
-  duration: 'duration',
-  cue: 'cue',
-  title: 'title',
-  presenter: 'presenter',
-  subtitle: 'subtitle',
-  isPublic: 'public',
-  skip: 'skip',
-  note: 'note',
-  colour: 'colour',
-  endAction: 'end action',
-  timerType: 'timer type',
-  user0: 'user0',
-  user1: 'user1',
-  user2: 'user2',
-  user3: 'user3',
-  user4: 'user4',
-  user5: 'user5',
-  user6: 'user6',
-  user7: 'user7',
-  user8: 'user8',
-  user9: 'user9',
-};
@@ -0,0 +1,24 @@
+@use '../../../src/theme/v2Styles' as *;
+@use '../../../src/theme/ontimeColours' as *;
+
+.operatorContainer {
+  width: 100vw;
+  height: 100vh;
+
+  color: $ui-white;
+}
+
+.operatorEvents {
+  width: 100vw;
+  height: 100vh;
+  padding-top: 0.25rem;
+
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.spacer {
+  min-height: 95vh;
+}
@@ -0,0 +1,170 @@
+import { useEffect, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { isOntimeEvent, OntimeEvent, SupportedEvent, UserFields } from 'ontime-types';
+import { getFirstEvent, getLastEvent } from 'ontime-utils';
+
+import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
+import Empty from '../../common/components/state/Empty';
+import { getOperatorOptions } from '../../common/components/view-params-editor/constants';
+import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
+import useFollowComponent from '../../common/hooks/useFollowComponent';
+import { useOperator } from '../../common/hooks/useSocket';
+import useProjectData from '../../common/hooks-query/useProjectData';
+import useRundown from '../../common/hooks-query/useRundown';
+import useUserFields from '../../common/hooks-query/useUserFields';
+import { isStringBoolean } from '../../common/utils/viewUtils';
+
+import FollowButton from './follow-button/FollowButton';
+import OperatorBlock from './operator-block/OperatorBlock';
+import OperatorEvent from './operator-event/OperatorEvent';
+import StatusBar from './status-bar/StatusBar';
+
+import style from './Operator.module.scss';
+
+const selectedOffset = 50;
+
+type TitleFields = Pick<OntimeEvent, 'title' | 'subtitle' | 'presenter'>;
+export default function Operator() {
+  const { data, status } = useRundown();
+  const { data: userFields, status: userFieldsStatus } = useUserFields();
+  const { data: projectData, status: projectDataStatus } = useProjectData();
+
+  const featureData = useOperator();
+  const [searchParams] = useSearchParams();
+
+  const isAutomatedScroll = useRef(false);
+  const [lockAutoScroll, setLockAutoScroll] = useState(false);
+  const selectedRef = useRef<HTMLDivElement | null>(null);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const scrollToComponent = useFollowComponent({
+    followRef: selectedRef,
+    scrollRef: scrollRef,
+    doFollow: !lockAutoScroll,
+    topOffset: selectedOffset,
+    setScrollFlag: () => (isAutomatedScroll.current = true),
+  });
+
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime - Operator';
+  }, []);
+
+  // reset scroll if nothing is selected
+  useEffect(() => {
+    if (!featureData?.selectedEventId) {
+      if (!lockAutoScroll) {
+        scrollRef.current?.scrollTo(0, 0);
+      }
+    }
+  }, [featureData?.selectedEventId, lockAutoScroll, scrollRef]);
+
+  const handleOffset = () => {
+    if (featureData.selectedEventId) {
+      scrollToComponent();
+    }
+    setLockAutoScroll(false);
+  };
+
+  const handleScroll = () => {
+    // prevent considering automated scrolls as user scrolls
+    if (isAutomatedScroll.current) {
+      isAutomatedScroll.current = false;
+      return;
+    }
+
+    if (selectedRef?.current && scrollRef?.current) {
+      const selectedRect = selectedRef.current.getBoundingClientRect();
+      const scrollerRect = scrollRef.current.getBoundingClientRect();
+      if (selectedRect && scrollerRect) {
+        const distanceFromTop = selectedRect.top - scrollerRect.top;
+        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
+        setLockAutoScroll(hasScrolledOutOfThreshold);
+      }
+    }
+  };
+
+  const missingData = !data || !userFields || !projectData;
+  const isLoading = status === 'loading' || userFieldsStatus === 'loading' || projectDataStatus === 'loading';
+
+  if (missingData || isLoading) {
+    return <Empty text='Loading...' />;
+  }
+
+  // get fields which the user subscribed to
+  const subscribe = searchParams.get('subscribe') as keyof UserFields | null;
+  const main = searchParams.get('main') as keyof TitleFields | null;
+  const secondary = searchParams.get('secondary') as keyof TitleFields | null;
+  const subscribedAlias = subscribe ? userFields[subscribe] : '';
+  const showSeconds = isStringBoolean(searchParams.get('showseconds'));
+
+  const operatorOptions = getOperatorOptions(userFields);
+  let isPast = Boolean(featureData.selectedEventId);
+  const hidePast = isStringBoolean(searchParams.get('hidepast'));
+
+  const firstEvent = getFirstEvent(data);
+  const lastEvent = getLastEvent(data);
+
+  return (
+    <div className={style.operatorContainer}>
+      <NavigationMenu />
+      <ViewParamsEditor paramFields={operatorOptions} />
+
+      <StatusBar
+        projectTitle={projectData.title}
+        playback={featureData.playback}
+        selectedEventId={featureData.selectedEventId}
+        firstStart={firstEvent?.timeStart}
+        firstId={firstEvent?.id}
+        lastEnd={lastEvent?.timeEnd}
+        lastId={lastEvent?.id}
+      />
+
+      <div className={style.operatorEvents} onScroll={handleScroll} ref={scrollRef}>
+        {data.map((entry) => {
+          if (isOntimeEvent(entry)) {
+            const isSelected = featureData.selectedEventId === entry.id;
+            if (isSelected) {
+              isPast = false;
+            }
+
+            // hide past events (if setting) and skipped events
+            if ((hidePast && isPast) || entry.skip) {
+              return null;
+            }
+
+            const mainField = main ? entry?.[main] || entry.title : entry.title;
+            const secondaryField = secondary ? entry?.[secondary] || entry.subtitle : entry.subtitle;
+            const subscribedData = (subscribe ? entry?.[subscribe] : undefined) || '';
+
+            return (
+              <OperatorEvent
+                key={entry.id}
+                colour={entry.colour}
+                cue={entry.cue}
+                main={mainField}
+                secondary={secondaryField}
+                timeStart={entry.timeStart}
+                timeEnd={entry.timeEnd}
+                duration={entry.duration}
+                delay={entry.delay}
+                isSelected={isSelected}
+                subscribed={subscribedData}
+                subscribedAlias={subscribedAlias}
+                showSeconds={showSeconds}
+                isPast={isPast}
+                selectedRef={isSelected ? selectedRef : undefined}
+              />
+            );
+          }
+
+          if (entry.type === SupportedEvent.Block) {
+            return <OperatorBlock key={entry.id} title={entry.title} />;
+          }
+          return null;
+        })}
+        <div className={style.spacer} />
+      </div>
+      <FollowButton isVisible={lockAutoScroll} onClickHandler={handleOffset} />
+    </div>
+  );
+}
@@ -0,0 +1,38 @@
+@use '../../../../src/theme/ontimeColours' as *;
+@use '../../../../src/theme/v2Styles' as *;
+
+.followButton {
+  position: relative;
+  bottom: 12rem;
+  margin: 0 auto;
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 1rem;
+  background-color: $blue-700;
+  color: #fff;
+  font-size: 1rem;
+  border-radius: 99px;
+  transition: bottom 1s;
+
+  &:active {
+    transition: background-color $transition-time-action;
+    background-color: $blue-900;
+  }
+}
+
+.hidden {
+  transition: bottom 1s;
+  bottom: -50px;
+}
+
+// tablet
+@media (min-width: $min-tablet) {
+  .followButton {
+    font-size: 1.25rem;
+    gap: 1rem;
+    padding: 0.25rem 1rem;
+  }
+}
@@ -0,0 +1,23 @@
+import { IoLocate } from '@react-icons/all-files/io5/IoLocate';
+
+import { cx } from '../../../common/utils/styleUtils';
+
+import style from './FollowButton.module.scss';
+
+interface FollowButtonProps {
+  isVisible: boolean;
+  onClickHandler: () => void;
+}
+
+export default function FollowButton(props: FollowButtonProps) {
+  const { isVisible, onClickHandler } = props;
+
+  const classes = cx([style.followButton, !isVisible && style.hidden]);
+
+  return (
+    <button className={classes} onClick={onClickHandler} type='button'>
+      <IoLocate />
+      Follow
+    </button>
+  );
+}
@@ -0,0 +1,16 @@
+@use '../../../../src/theme/ontimeColours' as *;
+@use '../../../../src/theme/v2Styles' as *;
+
+.block {
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background-color: $gray-1350;
+  font-size: 1.25rem;
+}
+
+// tablet
+@media (min-width: $min-tablet) {
+  .block {
+    padding: 0.25rem 1rem;
+  }
+}
@@ -0,0 +1,13 @@
+import { memo } from 'react';
+
+import style from './OperatorBlock.module.scss';
+
+interface OperatorBlockProps {
+  title: string;
+}
+
+function OperatorBlock({ title }: OperatorBlockProps) {
+  return <div className={style.block}>{title}</div>;
+}
+
+export default memo(OperatorBlock);
@@ -0,0 +1,111 @@
+@use '../../../../src/theme/v2Styles' as *;
+@use '../../../../src/theme/ontimeColours' as *;
+@import '../Operator.module.scss';
+
+@mixin clock-size {
+  font-size: calc(1rem - 2px);
+  @media (min-width: $min-tablet) {
+    font-size: 1rem;
+  }
+}
+
+.event {
+  opacity: 1;
+  border-top: 1px solid $white-1;
+  padding-right: 0.5rem;
+  color: $white-90;
+  background-color: $gray-1300;
+
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1.25rem 1fr auto;
+  grid-template-rows: auto auto auto;
+  column-gap: 0.5rem;
+  grid-template-areas:
+  "binder main      schedule"
+  "binder secondary running"
+  "binder fields    fields";
+
+  &.subscribed {
+    background-color: $gray-1250;
+  }
+
+  &.running {
+    border-top: 1px solid $gray-1300;
+    background-color: var(--operator-running-bg-override, $red-700);
+  }
+
+  &.past {
+    border-top: 1px solid transparent;
+    opacity: 0.2;
+  }
+}
+
+.binder {
+  grid-area: binder;
+  color: $section-white;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  position: relative;
+  background-color: $gray-1050; // to override inline
+
+  .cue {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    width: 6em;
+
+    rotate: -90deg;
+    letter-spacing: 0.5px;
+  }
+}
+
+.mainField {
+  grid-area: main;
+  font-size: 1.5rem;
+  letter-spacing: 0.5px;
+  color: $ui-white;
+}
+
+.secondaryField {
+  grid-area: secondary;
+  font-size: 1.25rem;
+  letter-spacing: 0.5px;
+}
+
+.schedule {
+  @include clock-size;
+  grid-area: schedule;
+  justify-self: end;
+}
+
+.running {
+  @include clock-size;
+  grid-area: running;
+  justify-self: end;
+}
+
+.fields {
+  grid-area: fields;
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: $ui-black;
+  margin: 0.25rem 0;
+
+  .field {
+    font-weight: 600;
+    padding: 0 0.25rem;
+    background-color: var(--operator-highlight-override, $orange-600);
+    margin-right: 0.5rem;
+  }
+
+  .value {
+    color: $orange-500
+  }
+}
+
+.fields::after {
+  content: '\200b';
+}
@@ -0,0 +1,92 @@
+import { memo, RefObject } from 'react';
+
+import DelayIndicator from '../../../common/components/delay-indicator/DelayIndicator';
+import { useTimer } from '../../../common/hooks/useSocket';
+import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
+import { formatTime } from '../../../common/utils/time';
+
+import style from './OperatorEvent.module.scss';
+
+interface OperatorEventProps {
+  colour: string;
+  cue: string;
+  main: string;
+  secondary: string;
+  timeStart: number;
+  timeEnd: number;
+  duration: number;
+  delay?: number;
+  isSelected: boolean;
+  subscribed?: string;
+  subscribedAlias: string;
+  showSeconds: boolean;
+  isPast: boolean;
+  selectedRef?: RefObject<HTMLDivElement>;
+}
+
+// extract this to contain re-renders
+function RollingTime() {
+  const timer = useTimer();
+  return <>{formatTime(timer.current, { showSeconds: true, format: 'hh:mm:ss' })}</>;
+}
+
+function OperatorEvent(props: OperatorEventProps) {
+  const {
+    colour,
+    cue,
+    main,
+    secondary,
+    timeStart,
+    timeEnd,
+    duration,
+    delay,
+    isSelected,
+    subscribed,
+    subscribedAlias,
+    showSeconds,
+    isPast,
+    selectedRef,
+  } = props;
+
+  const start = formatTime(timeStart, { showSeconds });
+  const end = formatTime(timeEnd, { showSeconds });
+
+  const cueColours = colour && getAccessibleColour(colour);
+
+  const operatorClasses = cx([
+    style.event,
+    isSelected ? style.running : null,
+    subscribed ? style.subscribed : null,
+    isPast ? style.past : null,
+  ]);
+
+  return (
+    <div className={operatorClasses} ref={selectedRef}>
+      <div className={style.binder} style={{ ...cueColours }}>
+        <span className={style.cue}>{cue}</span>
+      </div>
+
+      <span className={style.mainField}>{main}</span>
+      <span className={style.schedule}>
+        {start} - {end}
+      </span>
+
+      <span className={style.secondaryField}>{secondary}</span>
+      <span className={style.running}>
+        <DelayIndicator delayValue={delay} />
+        {isSelected ? <RollingTime /> : formatTime(duration, { showSeconds: true, format: 'hh:mm:ss' })}
+      </span>
+
+      <div className={style.fields}>
+        {subscribed && (
+          <>
+            <span className={style.field}>{subscribedAlias}</span>
+            <span className={style.value}>{subscribed}</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default memo(OperatorEvent);
@@ -0,0 +1,105 @@
+@use '../../../../src/theme/ontimeColours' as *;
+@use '../../../../src/theme/v2Styles' as *;
+
+@mixin column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.statusBar {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  background-color: $gray-1350;
+  z-index: 2;
+
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid $white-10;
+  box-shadow: $large-top-drawer-shadow;
+
+  display: grid;
+  grid-template-areas:
+    "playback timer1B timer2B timer3B";
+  grid-template-columns: 1fr auto auto auto;
+  column-gap: 1.5rem;
+  align-items: center;
+}
+
+.playbackIcon {
+  grid-area: playback;
+  font-size: 2rem;
+  color: $gray-700;
+
+  &.active {
+    color: $ui-white;
+  }
+}
+
+.timeNow {
+  grid-area: timer1B;
+  @include column;
+}
+
+.elapsedTime {
+  grid-area: timer2B;
+  @include column;
+}
+
+.runningTime {
+  grid-area: timer3B;
+  @include column;
+}
+
+.title {
+  grid-area: title;
+  font-size: 1.25rem;
+  padding-left: 0.25rem;
+  display: none;
+  line-height: 1.25em;
+}
+
+.startTime {
+  grid-area: timer2A;
+  @include column;
+  display: none;
+}
+
+.endTime {
+  grid-area: timer3A;
+  @include column;
+  display: none;
+}
+
+.label {
+  font-size: 0.75rem;
+  color: $gray-700;
+}
+
+.timer {
+  letter-spacing: 0.5px;
+}
+
+// tablet
+@media (min-width: $min-tablet) {
+  .statusBar {
+    grid-template-areas:
+    "playback timer1B timer2A timer3A"
+    "title    title   timer2B timer3B";
+    row-gap: 0.25rem;
+    column-gap: 2rem;
+  }
+
+  .title {
+    display: block;
+  }
+
+  .startTime {
+    display: flex;
+  }
+
+  .endTime {
+    display: flex;
+  }
+}
@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import { Playback } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+
+import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
+import { useTimer } from '../../../common/hooks/useSocket';
+import { cx } from '../../../common/utils/styleUtils';
+import { formatTime } from '../../../common/utils/time';
+
+import styles from './StatusBar.module.scss';
+
+interface StatusBarProps {
+  projectTitle: string;
+  playback: Playback;
+  selectedEventId: string | null;
+  firstStart?: number;
+  firstId?: string;
+  lastEnd?: number;
+  lastId?: string;
+}
+
+export default function StatusBar(props: StatusBarProps) {
+  const { projectTitle, playback, selectedEventId, firstStart, firstId, lastEnd, lastId } = props;
+
+  const timer = useTimer();
+
+  const getTimeStart = () => {
+    if (firstStart === undefined) {
+      return '...';
+    }
+
+    if (selectedEventId) {
+      if (firstId === selectedEventId) {
+        return millisToString(timer.expectedFinish);
+      }
+    }
+    return millisToString(firstStart);
+  };
+
+  const getTimeEnd = () => {
+    if (lastEnd === undefined) {
+      return '...';
+    }
+
+    if (selectedEventId) {
+      if (lastId === selectedEventId) {
+        return millisToString(timer.expectedFinish);
+      }
+    }
+    return millisToString(lastEnd);
+  };
+
+  // use user defined format
+  const timeNow = formatTime(timer.clock, {
+    showSeconds: true,
+  });
+
+  const runningTime = millisToString(timer.current);
+  const elapsedTime = millisToString(timer.elapsed);
+
+  const PlaybackIconComponent = useMemo(() => {
+    const isPlaying = playback === Playback.Play || playback === Playback.Roll;
+    const classes = cx([styles.playbackIcon, isPlaying ? styles.active : null]);
+    return <PlaybackIcon state={playback} skipTooltip className={classes} />;
+  }, [playback]);
+
+  return (
+    <div className={styles.statusBar}>
+      {PlaybackIconComponent}
+      <div className={styles.timeNow}>
+        <span className={styles.label}>Time now</span>
+        <span className={styles.timer}>{timeNow}</span>
+      </div>
+      <div className={styles.elapsedTime}>
+        <span className={styles.label}>Elapsed time</span>
+        <span className={styles.timer}>{elapsedTime}</span>
+      </div>
+      <div className={styles.runningTime}>
+        <span className={styles.label}>Running timer</span>
+        <span className={styles.timer}>{runningTime}</span>
+      </div>
+
+      <span className={styles.title}>{projectTitle}</span>
+      <div className={styles.startTime}>
+        <span className={styles.label}>Scheduled start</span>
+        <span className={styles.timer}>{getTimeStart()}</span>
+      </div>
+      <div className={styles.endTime}>
+        <span className={styles.label}>Scheduled end</span>
+        <span className={styles.timer}>{getTimeEnd()}</span>
+      </div>
+    </div>
+  );
+}
@@ -1,10 +1,11 @@
-import { Fragment, lazy, MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { closestCenter, DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { OntimeRundown, Playback, SupportedEvent } from 'ontime-types';
 import { getFirst, getNext, getPrevious } from 'ontime-utils';

 import { useEventAction } from '../../common/hooks/useEventAction';
+import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { AppMode, useAppMode } from '../../common/stores/appModeStore';
 import { useEditorSettings } from '../../common/stores/editorSettings';
@@ -41,6 +42,7 @@ export default function Rundown(props: RundownProps) {
  const moveCursorTo = useAppMode((state) => state.setCursor);
  const cursorRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
+  useFollowComponent({ followRef: cursorRef, scrollRef: scrollRef, doFollow: true });

  // DND KIT
  const sensors = useSensors(useSensor(PointerSensor));
@@ -153,28 +155,6 @@ export default function Rundown(props: RundownProps) {
    };
  }, [handleKeyPress]);

-  // when cursor moves, view should follow
-  useEffect(() => {
-    function scrollToComponent(
-      componentRef: MutableRefObject<HTMLDivElement>,
-      scrollRef: MutableRefObject<HTMLDivElement>,
-    ) {
-      const componentRect = componentRef.current.getBoundingClientRect();
-      const scrollRect = scrollRef.current.getBoundingClientRect();
-      const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - 100;
-      scrollRef.current.scrollTo({ top, behavior: 'smooth' });
-    }
-
-    if (cursorRef.current && scrollRef.current) {
-      // Use requestAnimationFrame to ensure the component is fully loaded
-      window.requestAnimationFrame(() => {
-        scrollToComponent(cursorRef as MutableRefObject<HTMLDivElement>, scrollRef as MutableRefObject<HTMLDivElement>);
-      });
-    }
-
-    // eslint-disable-next-line -- the prompt seems incorrect
-  }, [cursorRef?.current, scrollRef]);
-
  useEffect(() => {
    // in run mode, we follow selection
    if (!viewFollowsCursor || !featureData?.selectedEventId) {
@@ -7,7 +7,7 @@ $block-binder-width: 2rem;
 $block-clearance: 0.5rem;
 $block-border-radius: 0.5rem;
 $block-text-color: $gray-50;
-$block-bg: $gray-1200;
+$block-bg: $gray-1250;
 $block-bg2: $gray-1050; // for delay and blocks
 $block-box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px 2px;
 $secondary-block-height: 2.5rem;
@@ -128,6 +128,9 @@ $skip-opacity: 0.1;

 .eventTitle {
  grid-area: title;
+  overflow: hidden;
+  max-height: calc(2.5em + 2px);
+  line-height: 1.25em;
 }

 .eventActions {
@@ -147,7 +147,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
            <span>
              <IoPeople
                className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`}
-                data-isPublic={isPublic}
+                data-ispublic={isPublic}
              />
            </span>
          </Tooltip>
@@ -5,6 +5,7 @@ import { SupportedEvent } from 'ontime-types';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { useEditorSettings } from '../../../common/stores/editorSettings';
 import { useEmitLog } from '../../../common/stores/logger';
+import { deviceAlt } from '../../../common/utils/deviceUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';

 import style from './QuickAddBlock.module.scss';
@@ -82,7 +83,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
            className={style.quickBtn}
            data-testid='quick-add-event'
          >
-            Event {showKbd && <span className={style.keyboard}>Alt + E</span>}
+            Event {showKbd && <span className={style.keyboard}>{`${deviceAlt} + E`}</span>}
          </Button>
        </Tooltip>
        <Tooltip label='Add Delay' openDelay={tooltipDelayMid}>
@@ -94,7 +95,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
            className={style.quickBtn}
            data-testid='quick-add-delay'
          >
-            Delay {showKbd && <span className={style.keyboard}>Alt + D</span>}
+            Delay {showKbd && <span className={style.keyboard}>{`${deviceAlt} + D`}</span>}
          </Button>
        </Tooltip>
        <Tooltip label='Add Block' openDelay={tooltipDelayMid}>
@@ -106,7 +107,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
            className={style.quickBtn}
            data-testid='quick-add-block'
          >
-            Block {showKbd && <span className={style.keyboard}>Alt + B</span>}
+            Block {showKbd && <span className={style.keyboard}>{`${deviceAlt} + B`}</span>}
          </Button>
        </Tooltip>
      </div>
@@ -1,6 +1,5 @@
 /* eslint-disable react/display-name */
 import { ComponentType, useMemo } from 'react';
-import { TitleBlock } from 'ontime-types';
 import { useStore } from 'zustand';

 import useProjectData from '../../common/hooks-query/useProjectData';
@@ -9,8 +8,6 @@ import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { runtime } from '../../common/stores/runtime';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';

-export type TitleManager = TitleBlock & { showNow: boolean; showNext: boolean };
-
 const withData = <P extends object>(Component: ComponentType<P>) => {
  return (props: Partial<P>) => {
    // persisted app state
@@ -30,44 +27,22 @@ const withData = <P extends object>(Component: ComponentType<P>) => {

    // websocket data
    const data = useStore(runtime);
-    const { timer, titles, titlesPublic, publicMessage, timerMessage, lowerMessage, playback, onAir } = data;
-    const publicSelectedId = data.loaded.selectedPublicEventId;
-    const selectedId = data.loaded.selectedEventId;
-    const nextId = data.loaded.nextEventId;
-
-    /********************************************/
-    /***  + titleManager                      ***/
-    /***  WRAP INFORMATION RELATED TO TITLES  ***/
-    /***  ----------------------------------  ***/
-    /********************************************/
-    // is there a now field?
-    let showNow = true;
-    if (!titles.titleNow && !titles.subtitleNow && !titles.presenterNow) showNow = false;
-
-    // is there a next field?
-    let showNext = true;
-    if (!titles.titleNext && !titles.subtitleNext && !titles.presenterNext) showNext = false;
-
-    const titleManager: TitleManager = { ...titles, showNow: showNow, showNext: showNext };
-
-    /********************************************/
-    /***  + publicTitleManager               ***/
-    /***  WRAP INFORMATION RELATED TO TITLES  ***/
-    /***  ----------------------------------  ***/
-    /********************************************/
-    // is there a now field?
-    let showPublicNow = true;
-    if (!titlesPublic.titleNow && !titlesPublic.subtitleNow && !titlesPublic.presenterNow) showPublicNow = false;
-
-    // is there a next field?
-    let showPublicNext = true;
-    if (!titlesPublic.titleNext && !titlesPublic.subtitleNext && !titlesPublic.presenterNext) showPublicNext = false;
-
-    const publicTitleManager: TitleManager = {
-      ...titlesPublic,
-      showNow: showPublicNow,
-      showNext: showPublicNext,
-    };
+    const {
+      timer,
+      publicMessage,
+      timerMessage,
+      lowerMessage,
+      playback,
+      onAir,
+      eventNext,
+      publicEventNext,
+      publicEventNow,
+      eventNow,
+      loaded,
+    } = data;
+    const publicSelectedId = loaded.selectedPublicEventId;
+    const selectedId = loaded.selectedEventId;
+    const nextId = loaded.nextEventId;

    /******************************************/
    /***  + TimeManagerType                     ***/
@@ -75,9 +50,6 @@ const withData = <P extends object>(Component: ComponentType<P>) => {
    /***  --------------------------------  ***/
    /******************************************/

-    // inject info:
-    // is timer finished
-    // get clock string
    const TimeManagerType = {
      ...timer,
      playback,
@@ -95,8 +67,10 @@ const withData = <P extends object>(Component: ComponentType<P>) => {
        pres={timerMessage}
        publ={publicMessage}
        lower={lowerMessage}
-        title={titleManager}
-        publicTitle={publicTitleManager}
+        eventNow={eventNow}
+        publicEventNow={publicEventNow}
+        eventNext={eventNext}
+        publicEventNext={publicEventNext}
        time={TimeManagerType}
        events={publicEvents}
        backstageEvents={rundownData}
@@ -18,7 +18,6 @@ import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { formatTime } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import { titleVariants } from '../common/animation';
-import { TitleManager } from '../ViewWrapper';

 import './Backstage.scss';

@@ -30,7 +29,8 @@ const formatOptions = {
 interface BackstageProps {
  isMirrored: boolean;
  publ: Message;
-  title: TitleManager;
+  eventNow: OntimeEvent | null;
+  eventNext: OntimeEvent | null;
  time: TimeManagerType;
  backstageEvents: OntimeEvent[];
  selectedId: string | null;
@@ -39,7 +39,7 @@ interface BackstageProps {
 }

 export default function Backstage(props: BackstageProps) {
-  const { isMirrored, publ, title, time, backstageEvents, selectedId, general, viewSettings } = props;
+  const { isMirrored, publ, eventNow, eventNext, time, backstageEvents, selectedId, general, viewSettings } = props;
  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
  const { getLocalizedString } = useTranslation();
  const [blinkClass, setBlinkClass] = useState(false);
@@ -110,7 +110,7 @@ export default function Backstage(props: BackstageProps) {

      <div className='now-container'>
        <AnimatePresence>
-          {title.showNow && (
+          {eventNow && (
            <motion.div
              className={`event now ${blinkClass ? 'blink' : ''}`}
              key='now'
@@ -121,9 +121,9 @@ export default function Backstage(props: BackstageProps) {
            >
              <TitleCard
                label='now'
-                title={title.titleNow}
-                subtitle={title.subtitleNow}
-                presenter={title.presenterNow}
+                title={eventNow.title}
+                subtitle={eventNow.subtitle}
+                presenter={eventNow.presenter}
              />
              <div className='timer-group'>
                <div className='aux-timers'>
@@ -144,7 +144,7 @@ export default function Backstage(props: BackstageProps) {
        </AnimatePresence>

        <AnimatePresence>
-          {title.showNext && (
+          {eventNext && (
            <motion.div
              className='event next'
              key='next'
@@ -155,9 +155,9 @@ export default function Backstage(props: BackstageProps) {
            >
              <TitleCard
                label='next'
-                title={title.titleNext}
-                subtitle={title.subtitleNext}
-                presenter={title.presenterNext}
+                title={eventNext.title}
+                subtitle={eventNext.subtitle}
+                presenter={eventNext.presenter}
              />
            </motion.div>
          )}
@@ -5,7 +5,6 @@ import { Message } from 'ontime-types';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import { LOWER_THIRDS_OPTIONS } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { TitleManager } from '../ViewWrapper';

 import { LowerOptions } from './LowerWrapper';

@@ -13,12 +12,14 @@ import './LowerLines.scss';

 interface LowerLinesProps {
  lower: Message;
-  title: TitleManager;
+  heading: string;
+  subheading: string;
  options: LowerOptions;
+  doShow: boolean;
 }

 export default function LowerLines(props: LowerLinesProps) {
-  const { lower, title, options } = props;
+  const { lower, heading, subheading, options, doShow } = props;
  const [showLower, setShowLower] = useState(true);

  // Unmount if fadeOut
@@ -36,8 +37,8 @@ export default function LowerLines(props: LowerLinesProps) {
  }, [options.fadeOut, options.transitionIn]);

  useEffect(() => {
-    setShowLower(title.showNow);
-  }, [title.showNow]);
+    setShowLower(doShow);
+  }, [doShow]);

  // Format messages
  const showLowerMessage = lower.text !== '' && lower.visible;
@@ -146,14 +147,14 @@ export default function LowerLines(props: LowerLinesProps) {
          >
            <motion.div className='title-container' variants={titleContainerVariants}>
              <motion.div className='title' variants={titleVariants}>
-                {title.titleNow}
+                {heading}
              </motion.div>
              <div className='title-decor' />
            </motion.div>
            <motion.div className='subtitle-container' variants={subtitleContainerVariants}>
              <div className='sub-decor' />
              <motion.div className='subtitle' variants={subtitleVariants}>
-                {title.presenterNow}
+                {subheading}
              </motion.div>
            </motion.div>
          </motion.div>
@@ -1,11 +1,10 @@
 import { memo, useEffect, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import { useSearchParams } from 'react-router-dom';
-import { Message, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ViewSettings } from 'ontime-types';

 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { TitleManager } from '../ViewWrapper';

 import LowerLines from './LowerLines';

@@ -17,33 +16,26 @@ export type LowerOptions = {
  keyColour?: string;
  fadeOut: number;
 };
+
 interface LowerProps {
-  title: TitleManager;
+  eventNow: OntimeEvent | null;
  lower: Message;
  viewSettings: ViewSettings;
 }

 // prevent triggering animation without a content change
 const areEqual = (prevProps: LowerProps, nextProps: LowerProps) => {
-  return isEqual(prevProps.title, nextProps.title) && isEqual(prevProps.lower, nextProps.lower);
+  return isEqual(prevProps.eventNow?.title, nextProps.eventNow?.title) && isEqual(prevProps.lower, nextProps.lower);
 };

 const Lower = (props: LowerProps) => {
-  const { title, lower, viewSettings } = props;
+  const { eventNow, lower, viewSettings } = props;
  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
  const [searchParams] = useSearchParams();
-  const [titles, setTitles] = useState<TitleManager>({
-    titleNow: '',
-    titleNext: '',
-    subtitleNow: '',
-    subtitleNext: '',
-    presenterNow: '',
-    presenterNext: '',
-    noteNow: '',
-    noteNext: '',
-    showNow: false,
-    showNext: false,
-  });
+
+  const [heading, setHeading] = useState('');
+  const [subheading, setSubheading] = useState('');
+  const [showLower, setShowLower] = useState(false);

  // Set window title
  useEffect(() => {
@@ -54,28 +46,32 @@ const Lower = (props: LowerProps) => {
  useEffect(() => {
    // clear titles if necessary
    // will trigger an animation out in the component
-    let timeout: NodeJS.Timeout | null = null;
-    if (
-      title?.titleNow !== titles?.titleNow ||
-      title?.subtitleNow !== titles?.subtitleNow ||
-      title?.presenterNow !== titles?.presenterNow
-    ) {
-      setTitles((t) => ({ ...t, showNow: false }));
+    let timeout: NodeJS.Timeout;

-      const transitionTime = 2000;
+    const haveTitlesChanged = eventNow?.title !== heading || eventNow?.presenter !== subheading;
+    const areTitlesEmpty = !eventNow?.title && !eventNow?.presenter;

+    // we have new titles
+    if (haveTitlesChanged && !areTitlesEmpty) {
+      // show lower
+      setHeading(eventNow?.title ?? '');
+      setSubheading(eventNow?.presenter ?? '');
+      setShowLower(true);
+
+      // schedule transition out
+      const transitionTime = 5000;
      timeout = setTimeout(() => {
-        setTitles(title);
+        setShowLower(false);
      }, transitionTime);
    }

    return () => {
-      if (timeout != null) {
+      if (timeout) {
        clearTimeout(timeout);
      }
    };
    // eslint-disable-next-line -- we do this to keep animations
-  }, [title.titleNow, title.subtitleNow, title.presenterNow]);
+  }, [eventNow?.title, eventNow?.presenter]);

  // defer rendering until we load stylesheets
  if (!shouldRender) {
@@ -135,7 +131,7 @@ const Lower = (props: LowerProps) => {
    }
  }

-  return <LowerLines lower={lower} title={titles} options={options} />;
+  return <LowerLines lower={lower} heading={heading} subheading={subheading} options={options} doShow={showLower} />;
 };

 export default memo(Lower, areEqual);
@@ -16,7 +16,6 @@ import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { formatTime } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import { titleVariants } from '../common/animation';
-import { TitleManager } from '../ViewWrapper';

 import './Public.scss';

@@ -28,7 +27,8 @@ const formatOptions = {
 interface BackstageProps {
  isMirrored: boolean;
  publ: Message;
-  publicTitle: TitleManager;
+  publicEventNow: OntimeEvent | null;
+  publicEventNext: OntimeEvent | null;
  time: TimeManagerType;
  events: OntimeEvent[];
  publicSelectedId: string | null;
@@ -37,7 +37,8 @@ interface BackstageProps {
 }

 export default function Public(props: BackstageProps) {
-  const { isMirrored, publ, publicTitle, time, events, publicSelectedId, general, viewSettings } = props;
+  const { isMirrored, publ, publicEventNow, publicEventNext, time, events, publicSelectedId, general, viewSettings } =
+    props;
  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
  const { getLocalizedString } = useTranslation();

@@ -68,7 +69,7 @@ export default function Public(props: BackstageProps) {

      <div className='now-container'>
        <AnimatePresence>
-          {publicTitle.showNow && (
+          {publicEventNow && (
            <motion.div
              className='event now'
              key='now'
@@ -79,16 +80,16 @@ export default function Public(props: BackstageProps) {
            >
              <TitleCard
                label='now'
-                title={publicTitle.titleNow}
-                subtitle={publicTitle.subtitleNow}
-                presenter={publicTitle.presenterNow}
+                title={publicEventNow.title}
+                subtitle={publicEventNow.subtitle}
+                presenter={publicEventNow.presenter}
              />
            </motion.div>
          )}
        </AnimatePresence>

        <AnimatePresence>
-          {publicTitle.showNext && (
+          {publicEventNext && (
            <motion.div
              className='event next'
              key='next'
@@ -99,9 +100,9 @@ export default function Public(props: BackstageProps) {
            >
              <TitleCard
                label='next'
-                title={publicTitle.titleNext}
-                subtitle={publicTitle.subtitleNext}
-                presenter={publicTitle.presenterNext}
+                title={publicEventNext.title}
+                subtitle={publicEventNext.subtitle}
+                presenter={publicEventNext.presenter}
              />
            </motion.div>
          )}
@@ -13,7 +13,6 @@ import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { secondsInMillis } from '../../../common/utils/dateConfig';
 import { formatTime } from '../../../common/utils/time';
-import { TitleManager } from '../ViewWrapper';

 import { type ScheduleEvent, formatEventList, trimRundown } from './studioClock.utils';

@@ -26,7 +25,7 @@ const formatOptions = {

 interface StudioClockProps {
  isMirrored: boolean;
-  title: TitleManager;
+  eventNext: OntimeEvent | null;
  time: TimeManagerType;
  backstageEvents: OntimeRundown;
  selectedId: string | null;
@@ -36,7 +35,7 @@ interface StudioClockProps {
 }

 export default function StudioClock(props: StudioClockProps) {
-  const { isMirrored, title, time, backstageEvents, selectedId, nextId, onAir, viewSettings } = props;
+  const { isMirrored, eventNext, time, backstageEvents, selectedId, nextId, onAir, viewSettings } = props;

  // deferring rendering seems to affect styling (font and useFitText)
  useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
@@ -87,7 +86,7 @@ export default function StudioClock(props: StudioClockProps) {
          className='next-title'
          style={{ fontSize: titleFontSize, height: '10vh', width: '100%', maxWidth: '75%' }}
        >
-          {title.titleNext}
+          {eventNext?.title ?? ''}
        </div>
        <div className={isNegative ? 'next-countdown' : 'next-countdown next-countdown--overtime'}>
          {selectedId !== null && formatDisplay(time.current)}
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
+import { OntimeEvent, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';

 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
@@ -13,7 +13,6 @@ import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { formatTime } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import { formatTimerDisplay, getTimerByType } from '../common/viewerUtils';
-import { TitleManager } from '../ViewWrapper';

 import './Timer.scss';

@@ -41,13 +40,14 @@ const titleVariants = {
 interface TimerProps {
  isMirrored: boolean;
  pres: TimerMessage;
-  title: TitleManager;
+  eventNow: OntimeEvent | null;
+  eventNext: OntimeEvent | null;
  time: TimeManagerType;
  viewSettings: ViewSettings;
 }

 export default function Timer(props: TimerProps) {
-  const { isMirrored, pres, title, time, viewSettings } = props;
+  const { isMirrored, pres, eventNow, eventNext, time, viewSettings } = props;
  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
  const { getLocalizedString } = useTranslation();

@@ -138,7 +138,7 @@ export default function Timer(props: TimerProps) {
      />

      <AnimatePresence>
-        {title.showNow && !finished && (
+        {eventNow && !finished && (
          <motion.div
            className='event now'
            key='now'
@@ -147,13 +147,13 @@ export default function Timer(props: TimerProps) {
            animate='visible'
            exit='exit'
          >
-            <TitleCard label='now' title={title.titleNow} subtitle={title.subtitleNow} presenter={title.presenterNow} />
+            <TitleCard label='now' title={eventNow.title} subtitle={eventNow.subtitle} presenter={eventNow.presenter} />
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence>
-        {title.showNext && (
+        {eventNext && (
          <motion.div
            className='event next'
            key='next'
@@ -164,9 +164,9 @@ export default function Timer(props: TimerProps) {
          >
            <TitleCard
              label='next'
-              title={title.titleNext}
-              subtitle={title.subtitleNext}
-              presenter={title.presenterNext}
+              title={eventNext.title}
+              subtitle={eventNext.subtitle}
+              presenter={eventNext.presenter}
            />
          </motion.div>
        )}
@@ -8,6 +8,7 @@ $white-10: rgba(255, 255, 255, 0.10);
 $white-13: rgba(255, 255, 255, 0.13);
 $white-20: rgba(255, 255, 255, 0.20);
 $white-60: rgba(255, 255, 255, 0.60);
+$white-90: rgba(255, 255, 255, 0.90);

 $black-10: rgba(0, 0, 0, 0.10);

@@ -24,8 +25,8 @@ $gray-900: #4c4c4c;
 $gray-1000: #404040;
 $gray-1050: #303030;
 $gray-1100: #2d2d2d;
-$gray-1250: #262626;
-$gray-1200: #202020;
+$gray-1200: #262626;
+$gray-1250: #202020;
 $gray-1300: #1a1a1a;
 $gray-1350: #101010;
 $pure-white: #fff;
@@ -36,6 +36,8 @@ $bg-container-onlight: $gray-100;

 $box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
 $box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
+$large-bottom-drawer-shadow: rgba(0, 0, 0, 0.35) 0 3px 6px 6px;
+$large-top-drawer-shadow: rgba(0, 0, 0, 0.35) 0 1px 6px 3px;

 $modal-note-color: $gray-700;

@@ -54,6 +56,9 @@ $section-white: $ui-white;
 $inner-section-text-size: calc(1rem - 2px);
 $text-body-size: calc(1rem - 1px);

+// media queries
+$min-tablet: 500px;
+
 .blink {
  animation: blink $blinking-time linear infinite;
 }
@@ -62,4 +67,4 @@ $text-body-size: calc(1rem - 1px);
  50% {
    opacity: 20%;
  }
-}
+}
@@ -27,7 +27,7 @@ export const ontimeButtonOutlined = {
  },
  _active: {
    backgroundColor: '#2d2d2d', // $gray-1100
-    borderColor: '#202020', // $gray-12000
+    borderColor: '#202020', // $gray-1250
  },
 };

@@ -43,7 +43,7 @@ export const ontimeButtonSubtle = {
  },
  _active: {
    backgroundColor: '#2d2d2d', // $gray-1100
-    borderColor: '#202020', // $gray-12000
+    borderColor: '#202020', // $gray-1250
  },
 };

@@ -1,9 +1,9 @@
 export const ontimeBlockRadio = {
  control: {
-    borderColor: '#262626', // $gray-1250
-    backgroundColor: '#262626', // $gray-1250
+    borderColor: '#262626', // $gray-1200
+    backgroundColor: '#262626', // $gray-1200
    _checked: {
-      borderColor: '#262626', // $gray-1250
+      borderColor: '#262626', // $gray-1200
      color: '#3182ce', // $action-blue
      backgroundColor: '#3182ce', // $action-blue
    },
@@ -1,6 +1,6 @@
 const commonStyles = {
  fontWeight: '400',
-  backgroundColor: '#262626', // $gray-1250
+  backgroundColor: '#262626', // $gray-1200
  color: '#e2e2e2', // $gray-200
  border: '1px solid transparent',
  _hover: {
@@ -1,6 +1,6 @@
 {
  "name": "ontime",
-  "version": "2.8.1-rc-table",
+  "version": "2.9.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "2.8.1-rc-table",
+  "version": "2.9.0",
  "exports": "./src/index.js",
  "dependencies": {
    "body-parser": "^1.20.0",
@@ -15,7 +15,7 @@
    "lowdb": "^5.0.5",
    "multer": "^1.4.5-lts.1",
    "node-osc": "^8.0.10",
-    "node-xlsx": "^0.21.0",
+    "node-xlsx": "^0.23.0",
    "ontime-utils": "workspace:*",
    "passport": "^0.6.0",
    "passport-local": "~1.0.0",
@@ -2,7 +2,16 @@
 * Class Event Provider is a mediator for handling the local db
 * and adds logic specific to ontime data
 */
-import { ProjectData, OntimeRundown, ViewSettings } from 'ontime-types';
+import {
+  ProjectData,
+  OntimeRundown,
+  ViewSettings,
+  DatabaseModel,
+  OSCSettings,
+  UserFields,
+  Alias,
+  Settings,
+} from 'ontime-types';

 import { data, db } from '../../modules/loadDb.js';
 import { safeMerge } from './DataProvider.utils.js';
@@ -45,7 +54,7 @@ export class DataProvider {
    return data.settings;
  }

-  static async setSettings(newData) {
+  static async setSettings(newData: Settings) {
    data.settings = { ...newData };
    await this.persist();
  }
@@ -58,7 +67,7 @@ export class DataProvider {
    return data.aliases;
  }

-  static async setAliases(newData) {
+  static async setAliases(newData: Alias[]) {
    data.aliases = newData;
    await this.persist();
  }
@@ -76,12 +85,12 @@ export class DataProvider {
    await this.persist();
  }

-  static async setUserFields(newData) {
+  static async setUserFields(newData: UserFields) {
    data.userFields = { ...newData };
    await this.persist();
  }

-  static async setOsc(newData) {
+  static async setOsc(newData: OSCSettings) {
    data.osc = { ...newData };
    await this.persist();
  }
@@ -95,7 +104,7 @@ export class DataProvider {
    await db.write();
  }

-  static async mergeIntoData(newData) {
+  static async mergeIntoData(newData: Partial<DatabaseModel>) {
    const mergedData = safeMerge(data, newData);
    data.project = mergedData.project;
    data.settings = mergedData.settings;
@@ -1,10 +1,12 @@
+import { DatabaseModel } from 'ontime-types';
+
 /**
 * Merges two data objects
 * @param {object} existing
 * @param {object} newData
 */
-export function safeMerge(existing, newData) {
-  const { rundown, project, settings, viewSettings, osc, http, aliases, userFields } = newData || {};
+export function safeMerge(existing: DatabaseModel, newData: Partial<DatabaseModel>) {
+  const { rundown, project, settings, viewSettings, osc, aliases, userFields } = newData || {};
  return {
    ...existing,
    rundown: rundown ?? existing.rundown,
@@ -32,6 +34,5 @@ export function safeMerge(existing, newData) {
          : {}),
      },
    },
-    http: { ...existing.http, ...http },
  };
 }
@@ -42,11 +42,6 @@ describe('safeMerge', () => {
        onFinish: [],
      },
    },
-    http: {
-      enabled: true,
-      user: null,
-      pwd: null,
-    },
  };

  it('returns existing data if new data is not provided', () => {
@@ -188,19 +183,6 @@ describe('safeMerge', () => {
          onFinish: [],
        },
      },
-      http: {
-        user: null,
-        pwd: null,
-        messages: {
-          onLoad: [],
-          onStart: [],
-          onUpdate: [],
-          onPause: [],
-          onStop: [],
-          onFinish: [],
-        },
-        enabled: true,
-      },
    };

    const newData = {
@@ -1,4 +1,4 @@
-import { Loaded, OntimeEvent, SupportedEvent, TitleBlock } from 'ontime-types';
+import { Loaded, OntimeEvent, SupportedEvent } from 'ontime-types';

 import { DataProvider } from '../data-provider/DataProvider.js';
 import { getRollTimers } from '../../services/rollUtils.js';
@@ -10,10 +10,11 @@ let instance;
 * Manages business logic around loading events
 */
 export class EventLoader {
-  loadedEvent: OntimeEvent | null;
  loaded: Loaded;
-  titles: TitleBlock;
-  titlesPublic: TitleBlock;
+  eventNow: OntimeEvent | null;
+  publicEventNow: OntimeEvent | null;
+  eventNext: OntimeEvent | null;
+  publicEventNext: OntimeEvent | null;

  constructor() {
    if (instance) {
@@ -56,7 +57,7 @@ export class EventLoader {
  }

  /**
-   * returns an event given its index
+   * returns an event given its index after filtering for OntimeEvents
   * @param {number} eventIndex
   * @return {OntimeEvent | undefined}
   */
@@ -65,16 +66,6 @@ export class EventLoader {
    return timedEvents?.[eventIndex];
  }

-  /**
-   * returns an event given its index
-   * @param {number} eventIndex
-   * @return {object | undefined}
-   */
-  static getPlayableAtIndex(eventIndex) {
-    const timedEvents = EventLoader.getPlayableEvents();
-    return timedEvents?.[eventIndex];
-  }
-
  /**
   * returns an event given its id
   * @param {string} eventId
@@ -167,16 +158,18 @@ export class EventLoader {
      timeNow,
    );

-    this.loadedEvent = currentEvent;
+    // load events
+    this.eventNow = currentEvent;
+    this.publicEventNow = currentPublicEvent;
+    this.eventNext = nextEvent;
+    this.publicEventNext = nextPublicEvent;
+
+    // loaded data summary
    this.loaded.selectedEventIndex = nowIndex;
    this.loaded.selectedEventId = currentEvent?.id || null;
    this.loaded.numEvents = timedEvents.length;
-
-    // titles
-    this._loadThisTitles(currentEvent, 'now-private');
-    this._loadThisTitles(currentPublicEvent, 'now-public');
-    this._loadThisTitles(nextEvent, 'next-private');
-    this._loadThisTitles(nextPublicEvent, 'next-public');
+    this.loaded.nextEventId = nextEvent.id;
+    this.loaded.nextPublicEventId = nextPublicEvent.id;

    return { currentEvent, nextEvent, timeToNext };
  }
@@ -187,10 +180,11 @@ export class EventLoader {
   */
  getLoaded() {
    return {
-      loadedEvent: this.loadedEvent,
      loaded: this.loaded,
-      titles: this.titles,
-      titlesPublic: this.titlesPublic,
+      eventNow: this.eventNow,
+      publicEventNow: this.publicEventNow,
+      eventNext: this.eventNext,
+      publicEventNext: this.publicEventNext,
    };
  }

@@ -206,7 +200,10 @@ export class EventLoader {
   * Resets instance state
   */
  reset(emit = true) {
-    this.loadedEvent = null;
+    this.eventNow = null;
+    this.publicEventNow = null;
+    this.eventNext = null;
+    this.publicEventNext = null;
    this.loaded = {
      selectedEventIndex: null,
      selectedEventId: null,
@@ -215,26 +212,6 @@ export class EventLoader {
      nextPublicEventId: null,
      numEvents: EventLoader.getPlayableEvents().length,
    };
-    this.titles = {
-      titleNow: null,
-      subtitleNow: null,
-      presenterNow: null,
-      noteNow: null,
-      titleNext: null,
-      subtitleNext: null,
-      presenterNext: null,
-      noteNext: null,
-    };
-    this.titlesPublic = {
-      titleNow: null,
-      subtitleNow: null,
-      presenterNow: null,
-      noteNow: null,
-      titleNext: null,
-      subtitleNext: null,
-      presenterNext: null,
-      noteNext: null,
-    };

    // workaround for socket not being ready in constructor
    if (emit) {
@@ -255,13 +232,12 @@ export class EventLoader {
    const playableEvents = EventLoader.getPlayableEvents();

    // we know some stuff now
-    this.loadedEvent = event;
    this.loaded.selectedEventIndex = eventIndex;
    this.loaded.selectedEventId = event.id;
    this.loaded.numEvents = timedEvents.length;
-    // this.nextEventId = playableEvents[eventIndex + 1].id;
-    this._loadTitlesNow(event, playableEvents);
-    this._loadTitlesNext(playableEvents);
+    this.eventNow = event;
+    this._loadEventNow(event, playableEvents);
+    this._loadEventNext(playableEvents);

    this._loadEvent();

@@ -274,29 +250,28 @@ export class EventLoader {
  private _loadEvent() {
    eventStore.batchSet({
      loaded: this.loaded,
-      titles: this.titles,
-      titlesPublic: this.titlesPublic,
+      eventNow: this.eventNow,
+      publicEventNow: this.publicEventNow,
+      eventNext: this.eventNext,
+      publicEventNext: this.publicEventNext,
    });
  }

  /**
-   * @description loads given title (now)
+   * @description loads currently running events
   * @private
   * @param {object} event
   * @param {array} rundown
   */
-  private _loadTitlesNow(event, rundown) {
-    // private title is always current
+  private _loadEventNow(event, rundown) {
+    this.eventNow = event;
+
    // check if current is also public
    if (event.isPublic) {
-      this._loadThisTitles(event, 'now');
+      this.publicEventNow = event;
    } else {
-      this._loadThisTitles(event, 'now-private');
-
      // assume there is no public event
-      this.titlesPublic.titleNow = null;
-      this.titlesPublic.subtitleNow = null;
-      this.titlesPublic.presenterNow = null;
+      this.publicEventNow = null;
      this.loaded.selectedPublicEventId = null;

      // if there is nothing before, return
@@ -305,7 +280,8 @@ export class EventLoader {
      // iterate backwards to find it
      for (let i = this.loaded.selectedEventIndex; i >= 0; i--) {
        if (rundown[i].isPublic) {
-          this._loadThisTitles(rundown[i], 'now-public');
+          this.publicEventNow = rundown[i];
+          this.loaded.selectedPublicEventId = rundown[i].id;
          break;
        }
      }
@@ -313,180 +289,44 @@ export class EventLoader {
  }

  /**
-   * @description look for next titles to load
+   * @description look for next events
   * @private
   */
-  private _loadTitlesNext(rundown) {
-    // maybe there is nothing to load
-    if (this.loaded.selectedEventIndex === null) return;
-
-    // assume there is no next event
-    this.titles.titleNext = null;
-    this.titles.subtitleNext = null;
-    this.titles.presenterNext = null;
-    this.titles.noteNext = null;
+  private _loadEventNext(rundown) {
+    // assume there are no next events
+    this.eventNext = null;
+    this.publicEventNext = null;
    this.loaded.nextEventId = null;
-
-    this.titlesPublic.titleNext = null;
-    this.titlesPublic.subtitleNext = null;
-    this.titlesPublic.presenterNext = null;
    this.loaded.nextPublicEventId = null;

+    if (this.loaded.selectedEventIndex === null) return;
+
    const numEvents = rundown.length;

    if (this.loaded.selectedEventIndex < numEvents - 1) {
      let nextPublic = false;
-      let nextPrivate = false;
+      let nextProduction = false;

      for (let i = this.loaded.selectedEventIndex + 1; i < numEvents; i++) {
        // if we have not set private
-        if (!nextPrivate) {
-          this._loadThisTitles(rundown[i], 'next-private');
-          nextPrivate = true;
+        if (!nextProduction) {
+          this.eventNext = rundown[i];
+          this.loaded.nextEventId = rundown[i].id;
+          nextProduction = true;
        }

        // if event is public
        if (rundown[i].isPublic) {
-          this._loadThisTitles(rundown[i], 'next-public');
+          this.publicEventNext = rundown[i];
+          this.loaded.nextPublicEventId = rundown[i].id;
          nextPublic = true;
        }

        // Stop if both are set
-        if (nextPublic && nextPrivate) break;
+        if (nextPublic && nextProduction) break;
      }
    }
  }
-
-  /**
-   * @description loads given title
-   * @param event
-   * @param type
-   * @private
-   */
-  private _loadThisTitles(event, type) {
-    if (type === 'now') {
-      if (event === null) {
-        // public
-        this.titlesPublic.titleNow = null;
-        this.titlesPublic.subtitleNow = null;
-        this.titlesPublic.presenterNow = null;
-        this.titlesPublic.noteNow = null;
-        this.loaded.selectedPublicEventId = null;
-
-        // private
-        this.titles.titleNow = null;
-        this.titles.subtitleNow = null;
-        this.titles.presenterNow = null;
-        this.titles.noteNow = null;
-        this.loaded.selectedEventId = null;
-      } else {
-        // public
-        this.titlesPublic.titleNow = event.title;
-        this.titlesPublic.subtitleNow = event.subtitle;
-        this.titlesPublic.presenterNow = event.presenter;
-        this.titlesPublic.noteNow = event.note;
-        this.loaded.selectedPublicEventId = event.id;
-
-        // private
-        this.titles.titleNow = event.title;
-        this.titles.subtitleNow = event.subtitle;
-        this.titles.presenterNow = event.presenter;
-        this.titles.noteNow = event.note;
-        this.loaded.selectedEventId = event.id;
-      }
-    } else if (type === 'now-public') {
-      if (event === null) {
-        this.titlesPublic.titleNow = null;
-        this.titlesPublic.subtitleNow = null;
-        this.titlesPublic.presenterNow = null;
-        this.titlesPublic.noteNow = null;
-        this.loaded.selectedPublicEventId = null;
-      } else {
-        this.titlesPublic.titleNow = event.title;
-        this.titlesPublic.subtitleNow = event.subtitle;
-        this.titlesPublic.presenterNow = event.presenter;
-        this.titlesPublic.noteNow = event.note;
-        this.loaded.selectedPublicEventId = event.id;
-      }
-    } else if (type === 'now-private') {
-      if (event === null) {
-        this.titles.titleNow = null;
-        this.titles.subtitleNow = null;
-        this.titles.presenterNow = null;
-        this.titles.noteNow = null;
-        this.loaded.selectedEventId = null;
-      } else {
-        this.titles.titleNow = event.title;
-        this.titles.subtitleNow = event.subtitle;
-        this.titles.presenterNow = event.presenter;
-        this.titles.noteNow = event.note;
-        this.loaded.selectedEventId = event.id;
-      }
-    }
-
-    // next, load to both public and private
-    else if (type === 'next') {
-      if (event === null) {
-        // public
-        this.titlesPublic.titleNext = null;
-        this.titlesPublic.subtitleNext = null;
-        this.titlesPublic.presenterNext = null;
-        this.titlesPublic.noteNext = null;
-        this.loaded.nextPublicEventId = null;
-
-        // private
-        this.titles.titleNext = null;
-        this.titles.subtitleNext = null;
-        this.titles.presenterNext = null;
-        this.titles.noteNext = null;
-        this.loaded.nextEventId = null;
-      } else {
-        // public
-        this.titlesPublic.titleNext = event.title;
-        this.titlesPublic.subtitleNext = event.subtitle;
-        this.titlesPublic.presenterNext = event.presenter;
-        this.titlesPublic.noteNext = event.note;
-        this.loaded.nextPublicEventId = event.id;
-
-        // private
-        this.titles.titleNext = event.title;
-        this.titles.subtitleNext = event.subtitle;
-        this.titles.presenterNext = event.presenter;
-        this.titles.noteNext = event.note;
-        this.loaded.nextEventId = event.id;
-      }
-    } else if (type === 'next-public') {
-      if (event === null) {
-        this.titlesPublic.titleNext = null;
-        this.titlesPublic.subtitleNext = null;
-        this.titlesPublic.presenterNext = null;
-        this.titlesPublic.noteNext = null;
-        this.loaded.nextPublicEventId = null;
-      } else {
-        this.titlesPublic.titleNext = event.title;
-        this.titlesPublic.subtitleNext = event.subtitle;
-        this.titlesPublic.presenterNext = event.presenter;
-        this.titlesPublic.noteNext = event.note;
-        this.loaded.nextPublicEventId = event.id;
-      }
-    } else if (type === 'next-private') {
-      if (event === null) {
-        this.titles.titleNext = null;
-        this.titles.subtitleNext = null;
-        this.titles.presenterNext = null;
-        this.titles.noteNext = null;
-        this.loaded.nextEventId = null;
-      } else {
-        this.titles.titleNext = event.title;
-        this.titles.subtitleNext = event.subtitle;
-        this.titles.presenterNext = event.presenter;
-        this.titles.noteNext = event.note;
-        this.loaded.nextEventId = event.id;
-      }
-    } else {
-      throw new Error(`Unhandled title type: ${type}`);
-    }
-  }
 }

 export const eventLoader = new EventLoader();
@@ -1,4 +1,4 @@
-import { Alias, LogOrigin, ProjectData } from 'ontime-types';
+import { Alias, DatabaseModel, LogOrigin, ProjectData } from 'ontime-types';

 import { RequestHandler } from 'express';
 import fs from 'fs';
@@ -7,13 +7,15 @@ import { networkInterfaces } from 'os';
 import { fileHandler } from '../utils/parser.js';
 import { DataProvider } from '../classes/data-provider/DataProvider.js';
 import { failEmptyObjects, failIsNotArray } from '../utils/routerUtils.js';
-import { mergeObject } from '../utils/parserUtils.js';
 import { PlaybackService } from '../services/PlaybackService.js';
 import { eventStore } from '../stores/EventStore.js';
 import { isDocker, resolveDbPath } from '../setup.js';
 import { oscIntegration } from '../services/integration-service/OscIntegration.js';
 import { logger } from '../classes/Logger.js';
-import { deleteAllEvents, forceReset } from '../services/rundown-service/RundownService.js';
+import { deleteAllEvents, notifyChanges } from '../services/rundown-service/RundownService.js';
+import { deepmerge } from 'ontime-utils';
+import { runtimeCacheStore } from '../stores/cachingStore.js';
+import { delayedRundownCacheKey } from '../services/rundown-service/delayedRundown.utils.js';

 // Create controller for GET request to '/ontime/poll'
 // Returns data for current state
@@ -43,61 +45,43 @@ export const dbDownload = async (req, res) => {
  });
 };

-async function justUploadAndParse(file, req, res, options) {
+// TODO: docs
+// TODO: cleanup usage
+/**
+ * Parses a file and returns the result objects
+ * @param file
+ * @param _req
+ * @param _res
+ * @param options
+ */
+async function parseFile(file, _req, _res, options) {
  if (!fs.existsSync(file)) {
-    res.status(500).send({ message: 'Upload failed' });
-    return;
-  }
-
-  const result = await fileHandler(file);
-
-  if ('error' in result && result.error) {
-    throw new Error(result.message);
-  } else if ('data' in result && result.message === 'success') {
-    return result.data;
-  } else {
-    throw new Error('Failed parsing, no data');
+    throw new Error('Upload failed');
  }
+  const result = await fileHandler(file, options);
+  return result.data;
 }

 /**
- * handles file upload
+ * parse an uploaded file and apply its parsed objects
 * @param file
 * @param req
 * @param res
 * @param [options]
 * @returns {Promise<void>}
 */
-const uploadAndParse = async (file, req, res, options) => {
-  if (!fs.existsSync(file)) {
-    res.status(500).send({ message: 'Upload failed' });
-    return;
-  }
+const parseAndApply = async (file, _req, res, options) => {
+  const result = await parseFile(file, _req, res, options);

-  try {
-    const result = await fileHandler(file);
+  PlaybackService.stop();

-    if ('error' in result && result.error) {
-      res.status(400).send({ message: result.message });
-    } else if ('data' in result && result.message === 'success') {
-      PlaybackService.stop();
-      // explicitly write objects
-      if (typeof result !== 'undefined') {
-        const newRundown = result.data.rundown || [];
-        if (options?.onlyRundown === 'true') {
-          await DataProvider.setRundown(newRundown);
-        } else {
-          await DataProvider.mergeIntoData(result.data);
-        }
-      }
-      forceReset();
-      res.sendStatus(200);
-    } else {
-      res.status(400).send({ message: 'Failed parsing, no data' });
-    }
-  } catch (error) {
-    res.status(400).send({ message: `Failed parsing ${error}` });
+  const newRundown = result.rundown || [];
+  if (options?.onlyRundown === 'true') {
+    await DataProvider.setRundown(newRundown);
+  } else {
+    await DataProvider.mergeIntoData(result);
  }
+  notifyChanges({ timer: true, external: true, reset: true });
 };

 /**
@@ -186,7 +170,7 @@ export const postUserFields = async (req, res) => {
  }
  try {
    const persistedData = DataProvider.getUserFields();
-    const newData = mergeObject(persistedData, req.body);
+    const newData = deepmerge(persistedData, req.body);
    await DataProvider.setUserFields(newData);
    res.status(200).send(newData);
  } catch (error) {
@@ -226,7 +210,7 @@ export const postSettings = async (req, res) => {
    const operatorKey = extractPin(req.body?.operatorKey, settings.operatorKey);

    if (isDocker && req.body?.serverPort) {
-      return res.status(403).json({ message: `Can't change port when running inside docker` });
+      return res.status(403).json({ message: 'Can`t change port when running inside docker' });
    }
    const serverPort = parseInt(req.body?.serverPort ?? settings.serverPort, 10);

@@ -336,27 +320,38 @@ export const postOSC = async (req, res) => {
  }
 };

-// Create controller for POST request to '/ontime/previewExcel'
-// Returns -
-export async function previewExcel(req, res) {
-  if (!req.file) {
-    res.status(400).send({ message: 'File not found' });
+export async function patchPartialProjectFile(req, res) {
+  if (failEmptyObjects(req.body, res)) {
    return;
  }
-  const options = req.query;
-  const options2 = JSON.parse(req.body.options);
-  console.log(options2);
-  const file = req.file.path;
+
  try {
-    const data = await justUploadAndParse(file, req, res, options);
-    res.status(200).send(data);
+    const patchDb: Partial<DatabaseModel> = {
+      project: req.body?.project,
+      settings: req.body?.settings,
+      viewSettings: req.body?.viewSettings,
+      osc: req.body?.osc,
+      aliases: req.body?.aliases,
+      userFields: req.body?.userFields,
+      rundown: req.body?.rundown,
+    };
+
+    await DataProvider.mergeIntoData(patchDb);
+    if (patchDb.rundown !== undefined) {
+      // it is likely cheaper to invalidate cache than to calculate diff
+      PlaybackService.stop();
+      runtimeCacheStore.invalidate(delayedRundownCacheKey);
+      notifyChanges({ external: true, reset: true });
+    }
+    res.status(200).send();
  } catch (error) {
-    res.status(500).send(error);
+    res.status(400).send(error);
  }
 }

-// Create controller for POST request to '/ontime/db'
-// Returns -
+/**
+ * uploads and parses a given file
+ */
 export const dbUpload = async (req, res) => {
  if (!req.file) {
    res.status(400).send({ message: 'File not found' });
@@ -364,10 +359,39 @@ export const dbUpload = async (req, res) => {
  }
  const options = req.query;
  const file = req.file.path;
-  await uploadAndParse(file, req, res, options);
+  try {
+    await parseAndApply(file, req, res, options);
+    res.status(200).send();
+  } catch (error) {
+    res.status(400).send({ message: `Failed parsing ${error}` });
+  }
 };

-// Create controller for POST request to '/ontime/new'
+/**
+ * uploads and parses an excel file
+ * @returns parsed result
+ */
+export async function previewExcel(req, res) {
+  if (!req.file) {
+    res.status(400).send({ message: 'File not found' });
+    return;
+  }
+
+  try {
+    const options = JSON.parse(req.body.options);
+    const file = req.file.path;
+    const data = await parseFile(file, req, res, options);
+    res.status(200).send(data);
+  } catch (error) {
+    res.status(500).send({ message: error.toString() });
+  }
+}
+
+/**
+ * Meant to create a new project file, it will clear only fields which are specific to a project
+ * @param req
+ * @param res
+ */
 export const postNew: RequestHandler = async (req, res) => {
  try {
    const newProjectData: ProjectData = {
@@ -118,3 +118,18 @@ export const validateOscSubscription = [
    next();
  },
 ];
+
+export const validatePatchProjectFile = [
+  body('rundown').isArray().optional({ nullable: false }),
+  body('project').isObject().optional({ nullable: false }),
+  body('settings').isObject().optional({ nullable: false }),
+  body('viewSettings').isObject().optional({ nullable: false }),
+  body('aliases').isArray().optional({ nullable: false }),
+  body('userFields').isObject().optional({ nullable: false }),
+  body('osc').isObject().optional({ nullable: false }),
+  (req, res, next) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
+    next();
+  },
+];
@@ -1,18 +1,23 @@
 :root {
-  --background-color-override: #ececec;
-  --color-override: #101010;
-  --secondary-color-override: #404040;
-  --accent-color-override: #fa5656;
-  --label-color-override: #6c6c6c;
-  --timer-color-override: #202020;
-  --card-background-color-override: #fff;
-  --card-background-color-blink-override: #339e4e;
-  --font-family-override: "Open Sans";
-  --font-family-bold-override: "Arial Black";
-  --timer-progress-bg-override: #fff;
-  --timer-progress-override: #202020;
+    --background-color-override: #ececec;
+    --color-override: #101010;
+    --secondary-color-override: #404040;
+    --accent-color-override: #fa5656;
+    --label-color-override: #6c6c6c;
+    --timer-color-override: #202020;
+    --card-background-color-override: #fff;
+    --card-background-color-blink-override: #339e4e;
+    --font-family-override: "Open Sans";
+    --font-family-bold-override: "Arial Black";
+    --timer-progress-bg-override: #fff;
+    --timer-progress-override: #202020;
+
+    --cuesheet-running-bg-override: #D20300;
+
+    --operator-running-bg-override: #D20300;
+    --operator-highlight-override: #FFAB33;
 }

 .timer {
-  color: black !important;
+    color: black !important;
 }
@@ -42,7 +42,7 @@ const parseDb = async (fileToRead, adapterToUse) => {
    adapterToUse.data = dbModel;
  }

-  return parseJson(adapterToUse.data, true);
+  return parseJson(adapterToUse.data);
 };

 /**
@@ -9,6 +9,7 @@ import {
  getSettings,
  getUserFields,
  getViewSettings,
+  patchPartialProjectFile,
  poll,
  postAliases,
  postNew,
@@ -24,6 +25,7 @@ import {
  validateAliases,
  validateOSC,
  validateOscSubscription,
+  validatePatchProjectFile,
  validateSettings,
  validateUserFields,
  viewValidator,
@@ -41,8 +43,11 @@ router.get('/db', dbDownload);
 // create route between controller and '/ontime/db' endpoint
 router.post('/db', uploadFile, dbUpload);

-// create route between controller and '/ontime/db' endpoint
-router.post('/previewExcel', uploadFile, previewExcel);
+// create route between controller and '/ontime/excel' endpoint
+router.patch('/db', validatePatchProjectFile, patchPartialProjectFile);
+
+// create route between controller and '/ontime/preview-spreadsheet' endpoint
+router.post('/preview-spreadsheet', uploadFile, previewExcel);

 // create route between controller and '/ontime/settings' endpoint
 router.get('/settings', getSettings);
@@ -35,7 +35,6 @@ import { clock } from '../Clock.js';
 */
 export function forceReset() {
  eventLoader.reset();
-  sendRefetch();
  runtimeCacheStore.invalidate(delayedRundownCacheKey);
 }

@@ -116,8 +115,8 @@ export function updateTimer(affectedIds?: string[]) {

  if (safeOption) {
    eventLoader.reset();
-    const { loadedEvent } = eventLoader.loadById(runningEventId) || {};
-    eventTimer.hotReload(loadedEvent);
+    const { eventNow } = eventLoader.loadById(runningEventId) || {};
+    eventTimer.hotReload(eventNow);
    return true;
  }

@@ -133,9 +132,9 @@ export function updateTimer(affectedIds?: string[]) {
        eventTimer.roll(currentEvent, nextEvent);
      }
    } else {
-      const { loadedEvent } = eventLoader.loadById(runningEventId) || {};
-      if (loadedEvent) {
-        eventTimer.hotReload(loadedEvent);
+      const { eventNow } = eventLoader.loadById(runningEventId) || {};
+      if (eventNow) {
+        eventTimer.hotReload(eventNow);
      } else {
        eventTimer.stop();
      }
@@ -144,8 +143,8 @@ export function updateTimer(affectedIds?: string[]) {
  }

  if (isNext) {
-    const { loadedEvent } = eventLoader.loadById(runningEventId) || {};
-    eventTimer.hotReload(loadedEvent);
+    const { eventNow } = eventLoader.loadById(runningEventId) || {};
+    eventTimer.hotReload(eventNow);
    return true;
  }
  return false;
@@ -192,30 +191,22 @@ export async function addEvent(eventData: Partial<OntimeEvent> | Partial<OntimeD
  // modify rundown
  await cachedAdd(insertIndex, newEvent as OntimeEvent | OntimeDelay | OntimeBlock);

-  // notify timer service of changed events
-  updateTimer([id]);
+  notifyChanges({ timer: [id], external: true });

  // notify event loader that rundown size has changed
  updateChangeNumEvents();

-  // advice socket subscribers of change
-  sendRefetch();
-
  return newEvent;
 }

 export async function editEvent(eventData: Partial<OntimeEvent> | Partial<OntimeBlock> | Partial<OntimeDelay>) {
  if (eventData.type === SupportedEvent.Event && eventData?.cue === '') {
-    throw new Error(`Cue value invalid`);
+    throw new Error('Cue value invalid');
  }

  const newEvent = await cachedEdit(eventData.id, eventData);

-  // notify timer service of changed events
-  updateTimer([newEvent.id]);
-
-  // advice socket subscribers of change
-  sendRefetch();
+  notifyChanges({ timer: [newEvent.id], external: true });

  return newEvent;
 }
@@ -228,14 +219,9 @@ export async function editEvent(eventData: Partial<OntimeEvent> | Partial<Ontime
 export async function deleteEvent(eventId) {
  await cachedDelete(eventId);

-  // notify timer service of changed events
-  updateTimer([eventId]);
-
+  notifyChanges({ timer: [eventId], external: true });
  // notify event loader that rundown size has changed
  updateChangeNumEvents();
-
-  // advice socket subscribers of change
-  sendRefetch();
 }

 /**
@@ -245,9 +231,7 @@ export async function deleteEvent(eventId) {
 export async function deleteAllEvents() {
  await cachedClear();

-  // notify timer service of changed events
-  updateTimer();
-  forceReset();
+  notifyChanges({ timer: true, external: true, reset: true });
 }

 /**
@@ -260,22 +244,15 @@ export async function deleteAllEvents() {
 export async function reorderEvent(eventId: string, from: number, to: number) {
  const reorderedItem = await cachedReorder(eventId, from, to);

-  // notify timer service of changed events
-  updateTimer();
+  notifyChanges({ timer: true, external: true });

-  // advice socket subscribers of change
-  sendRefetch();
  return reorderedItem;
 }

 export async function applyDelay(eventId: string) {
  await cachedApplyDelay(eventId);

-  // notify timer service of changed events
-  updateTimer();
-
-  // advice socket subscribers of change
-  sendRefetch();
+  notifyChanges({ timer: true, external: true });
 }

 /**
@@ -287,11 +264,7 @@ export async function applyDelay(eventId: string) {
 export async function swapEvents(from: string, to: string) {
  await cachedSwap(from, to);

-  // notify timer service of changed events
-  updateTimer();
-
-  // advice socket subscribers of change
-  sendRefetch();
+  notifyChanges({ timer: true, external: true });
 }

 /**
@@ -301,3 +274,26 @@ export async function swapEvents(from: string, to: string) {
 function updateChangeNumEvents() {
  eventLoader.updateNumEvents();
 }
+
+/**
+ * Notify services of changes in the rundown
+ */
+export function notifyChanges(options: { timer?: boolean | string[]; external?: boolean; reset?: boolean }) {
+  if (options.timer) {
+    // notify timer service of changed events
+    if (Array.isArray(options.timer)) {
+      updateTimer(options.timer);
+    }
+    updateTimer();
+  }
+
+  if (options.reset) {
+    // force rundown to be recalculated
+    forceReset();
+  }
+
+  if (options.external) {
+    // advice socket subscribers of change
+    sendRefetch();
+  }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
cv	1b867b0dbc	chore: update tests	2023-09-29 22:23:16 +02:00
cv	34b79e7699	chore: update tests	2023-09-29 22:21:15 +02:00
cv	4498a04a34	refactor: align import map to demo	2023-09-29 22:16:39 +02:00
cv	d9df866308	refactor: enforce integers in numbers	2023-09-29 22:10:40 +02:00
cv	8146d88765	refactor: force refetch after mutation	2023-09-29 21:56:15 +02:00
cv	d5cb2735ec	Merge remote-tracking branch 'origin/master' into excel-import	2023-09-29 21:53:13 +02:00
cv	9b12afe2a6	refactor: align import map to demo	2023-09-29 21:40:22 +02:00
cv	e10c0e8c97	refactor: typescript improvements	2023-09-29 21:39:50 +02:00
cv	4e9d9fc075	refactor: parse time fields	2023-09-29 21:12:40 +02:00
cv	45ece13d04	refactor: g-sheet time is object	2023-09-29 21:12:27 +02:00
cv	e5e5798272	refactor: update type	2023-09-29 21:12:01 +02:00
cv	cf7f6bdbf7	feat: resolve times on excel import, refs #508	2023-09-29 20:19:29 +02:00
cv	a0d4f40bec	refactor: small cleanups and type improvement	2023-09-28 08:15:54 +02:00
cv	ba5ef6668d	refactor: parse import fields	2023-09-28 08:15:24 +02:00
cv	9fc04f2fd1	chore: create feature endpoints	2023-09-27 15:09:48 +02:00
cv	13d72dd1a4	style: small presentation tweaks	2023-09-27 15:08:14 +02:00
cv	30905757f3	chore: increase size limits on uploads	2023-09-27 14:31:14 +02:00
cv	e09a7d99f0	refactor: handle unexpected data types	2023-09-27 12:16:39 +02:00
cv	52ca04e063	chore: create import map utilities	2023-09-27 12:15:50 +02:00
cv	b8188c7485	chore: add external deepmerge utility	2023-09-27 12:14:04 +02:00
cv	85172ae8d7	temp: handle inconsistent errors from server	2023-09-27 09:56:24 +02:00
cv	cb871a8c26	refactor: simplify handling of notification	2023-09-27 09:55:18 +02:00
cv	88a853c158	refactor: convert to typescript	2023-09-17 20:55:23 +02:00
cv	99cd9bf0b7	refactor: simplify handling axios errors	2023-09-17 20:49:02 +02:00
cv	29fd145bd9	wip: create upload UI components	2023-09-17 20:48:27 +02:00
Carlos Valente	e2aabe3646	chore: version bump (#528 )	2023-09-17 15:04:55 +02:00
cv	f6440a503f	chore: upgrade deps	2023-09-17 13:16:46 +02:00
Carlos Valente	7545f6f7d0	refactor: clarify description import (#526 )	2023-09-16 15:24:23 +02:00
cv	aa0d4103b1	style: tweaks on components	2023-09-16 14:09:49 +02:00
cv	12b051dadb	refactor: rename utilities file	2023-09-16 14:09:17 +02:00
Carlos Valente	958c68b6f6	style hover (#525 ) * refactor: render if in view * style: add hover indicator on row	2023-09-16 13:49:12 +02:00
Carlos Valente	a0c5375376	refactor: project data (#523 )	2023-09-15 17:33:30 +02:00
Carlos Valente	9708f0bfc6	refactor: pass events instead of derived data to titles (#493 ) * refactor: pass events instead of derived data to titles	2023-09-14 22:30:23 +02:00
Carlos Valente	13eca98133	refactor: recompose and memoise (#522 )	2023-09-14 21:06:48 +02:00
Carlos Valente	126e31403e	style tweaks (#524 ) * style: allow 2 rows in block title * fix: accidental change to next and progress bar	2023-09-13 21:51:24 +02:00
Carlos Valente	53beea2768	refactor: prevent calling undefined (#521 )	2023-09-13 21:24:49 +02:00
Carlos Valente	0bb09dd039	fix: sanitise cue import (#519 ) * fix: sanitise cue import	2023-09-11 21:06:32 +02:00
Carlos Valente	93fb48ea1c	feat: operator view (#440 ) * feat: operator view * chore: smoke test operator * refactor: small improvements from deepsource --------- Co-authored-by: arihanv <arihanvaranasi@gmail.com> Co-authored-by: arihanv <63890951+arihanv@users.noreply.github.com>	2023-09-11 21:03:11 +02:00
Carlos Valente	1de3e01216	style: localise labels to user device (#509 )	2023-09-03 09:13:56 +02:00