v2 lazy rundown (#317)

* chore: update related deps

* refactor: memoise entrypoints

* refactor: store selectors

* refactor: improve component performance

* chore: remove unused dependencies

* refactor: improve component dnd

apps/client/src/features/control/message/MessageControlExport.jsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Box } from '@chakra-ui/react';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
@@ -8,9 +9,9 @@ import MessageControl from './MessageControl';
 
 import style from '../../editors/Editor.module.scss';
 
-export default function MessageControlExport() {
+const MessageControlExport = () => {
   return (
-    <Box className={style.messages} data-testid="panel-messages-control">
+    <Box className={style.messages} data-testid='panel-messages-control'>
       <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'messagecontrol')} />
       <div className={style.content}>
         <ErrorBoundary>
@@ -19,4 +20,6 @@ export default function MessageControlExport() {
       </div>
     </Box>
   );
-}
+};
+
+export default memo(MessageControlExport);

apps/client/src/features/control/playback/TimerControlExport.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Box } from '@chakra-ui/react';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
@@ -8,7 +9,7 @@ import PlaybackControl from './PlaybackControl';
 
 import style from '../../editors/Editor.module.scss';
 
-export default function TimerControlExport() {
+const TimerControlExport = () => {
   return (
     <Box className={style.playback} data-testid='panel-timer-control'>
       <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timercontrol')} />
@@ -19,4 +20,6 @@ export default function TimerControlExport() {
       </div>
     </Box>
   );
-}
+};
+
+export default memo(TimerControlExport);

apps/client/src/features/event-editor/EventEditorExport.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Box, IconButton } from '@chakra-ui/react';
 import { FiX } from '@react-icons/all-files/fi/FiX';
 
@@ -16,7 +17,7 @@ const closeBtnStyle = {
   _hover: { bg: '#ebedf0', color: '#333' },
 };
 
-export default function InfoExport() {
+const EventEditorExport = () => {
   const { openId, removeOpenEvent } = useEventEditorStore();
 
   return (
@@ -31,4 +32,7 @@ export default function InfoExport() {
       </ErrorBoundary>
     </Box>
   );
-}
+};
+
+export default memo(EventEditorExport);
+

apps/client/src/features/info/InfoExport.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Box } from '@chakra-ui/react';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
@@ -8,9 +9,9 @@ import Info from './Info';
 
 import style from '../editors/Editor.module.scss';
 
-export default function InfoExport() {
+const InfoExport = () => {
   return (
-    <Box className={style.info} data-testid="panel-info">
+    <Box className={style.info} data-testid='panel-info'>
       <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'info')} />
       <div className={style.content}>
         <ErrorBoundary>
@@ -20,3 +21,5 @@ export default function InfoExport() {
     </Box>
   );
 }
+
+export default memo(InfoExport)

apps/client/src/features/menu/RundownMenu.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext } from 'react';
+import { memo, useCallback } from 'react';
 import { Button, HStack, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Switch } from '@chakra-ui/react';
 import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
 import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
@@ -6,36 +6,32 @@ import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
 import { SupportedEvent } from 'ontime-types';
 
-import { CursorContext } from '../../common/context/CursorContext';
 import { useEventAction } from '../../common/hooks/useEventAction';
+import { useCursor } from '../../common/stores/cursorStore';
 
 import style from './RundownMenu.module.scss';
 
 const RundownMenu = () => {
-  const { isCursorLocked, toggleCursorLocked } = useContext(CursorContext);
+  const isCursorLocked = useCursor((state) => state.isCursorLocked);
+  const toggleCursorLocked = useCursor((state) => state.toggleCursorLocked);
+
   const { addEvent, deleteAllEvents } = useEventAction();
 
-  // TODO: re-write this with stable functions
-  type ActionTypes = SupportedEvent | 'delete-all';
-  const eventAction = useCallback(
-    (action: ActionTypes) => {
-      switch (action) {
-        case SupportedEvent.Event:
-          addEvent({ type: action });
-          break;
-        case SupportedEvent.Delay:
-          addEvent({ type: action });
-          break;
-        case SupportedEvent.Block:
-          addEvent({ type: action });
-          break;
-        case 'delete-all':
-          deleteAllEvents();
-          break;
-      }
-    },
-    [addEvent, deleteAllEvents],
-  );
+  const newEvent = useCallback(() => {
+    addEvent({ type: SupportedEvent.Event });
+  }, [addEvent]);
+
+  const newBlock = useCallback(() => {
+    addEvent({ type: SupportedEvent.Block });
+  }, [addEvent]);
+
+  const newDelay = useCallback(() => {
+    addEvent({ type: SupportedEvent.Delay });
+  }, [addEvent]);
+
+  const deleteAll = useCallback(() => {
+    deleteAllEvents();
+  }, [deleteAllEvents]);
 
   return (
     <HStack className={style.headerButtons}>
@@ -45,29 +41,24 @@ const RundownMenu = () => {
           onChange={(event) => toggleCursorLocked(event.target.checked)}
           variant='ontime'
         />
-        Lock cursor to current
+        Follow loaded event
       </label>
       <Menu isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
-        <MenuButton
-          as={Button}
-          leftIcon={<IoAdd />}
-          size='sm'
-          variant='ontime-subtle'
-        >
+        <MenuButton as={Button} leftIcon={<IoAdd />} size='sm' variant='ontime-subtle'>
           Event...
         </MenuButton>
         <MenuList>
-          <MenuItem icon={<IoAdd />} onClick={() => eventAction(SupportedEvent.Event)}>
+          <MenuItem icon={<IoAdd />} onClick={newEvent}>
             Add event at start
           </MenuItem>
-          <MenuItem icon={<IoTimerOutline />} onClick={() => eventAction(SupportedEvent.Delay)}>
+          <MenuItem icon={<IoTimerOutline />} onClick={newDelay}>
             Add delay at start
           </MenuItem>
-          <MenuItem icon={<FiMinusCircle />} onClick={() => eventAction(SupportedEvent.Block)}>
+          <MenuItem icon={<FiMinusCircle />} onClick={newBlock}>
             Add block at start
           </MenuItem>
           <MenuDivider />
-          <MenuItem icon={<FiTrash2 />} onClick={() => eventAction('delete-all')} color='#D20300'>
+          <MenuItem icon={<FiTrash2 />} onClick={deleteAll} color='#D20300'>
             Delete all events
           </MenuItem>
         </MenuList>

apps/client/src/features/modals/AppSettingsModal.jsx

@@ -37,7 +37,9 @@ export default function AppSettingsModal() {
   const [submitting, setSubmitting] = useState(false);
   const [hidePin, setHidePin] = useState(true);
 
-  const { eventSettings, setLocalEventSettings } = useLocalEvent();
+  const eventSettings = useLocalEvent((state) => state.eventSettings);
+  const setLocalEventSettings = useLocalEvent((state) => state.setLocalEventSettings);
+
   const [formSettings, setFormSettings] = useState(eventSettings);
 
   const [updateMessage, setUpdateMessage] = useState(<a>Using ontime version: {version}</a>);

apps/client/src/features/rundown/Rundown.module.scss

@@ -9,6 +9,7 @@
 }
 
 .list {
+  overflow-x: clip;
   display: flex;
   flex-direction: column;
 }

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

@@ -1,17 +1,16 @@
-import { createRef, Fragment, useCallback, useContext, useEffect } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
-import { Button } from '@chakra-ui/react';
-import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { 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, SupportedEvent } from 'ontime-types';
 
-import Empty from '../../common/components/state/Empty';
-import { CursorContext } from '../../common/context/CursorContext';
 import { useEventAction } from '../../common/hooks/useEventAction';
 import { useRundownEditor } from '../../common/hooks/useSocket';
+import { useCursor } from '../../common/stores/cursorStore';
 import { useLocalEvent } from '../../common/stores/localEvent';
 import { cloneEvent } from '../../common/utils/eventsManager';
 
 import QuickAddBlock from './quick-add-block/QuickAddBlock';
+import RundownEmpty from './RundownEmpty';
 import RundownEntry from './RundownEntry';
 
 import style from './Rundown.module.scss';
@@ -22,16 +21,24 @@ interface RundownProps {
 
 export default function Rundown(props: RundownProps) {
   const { entries } = props;
-  const data = useRundownEditor();
-  const { cursor, moveCursorUp, moveCursorDown, moveCursorTo, isCursorLocked } = useContext(CursorContext);
-  const { addEvent, reorderEvent } = useEventAction();
-  const cursorRef = createRef<HTMLDivElement>();
+  const [statefulEntries, setStatefulEntries] = useState(entries);
 
-  const { eventSettings } = useLocalEvent();
+  const featureData = useRundownEditor();
+  const { addEvent, reorderEvent } = useEventAction();
+  const eventSettings = useLocalEvent((state) => state.eventSettings);
   const defaultPublic = eventSettings.defaultPublic;
   const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
   const showQuickEntry = eventSettings.showQuickEntry;
 
+  // cursor
+  const cursor = useCursor((state) => state.cursor);
+  const isCursorLocked = useCursor((state) => state.isCursorLocked);
+  const moveCursorTo = useCursor((state) => state.moveCursorTo);
+  const cursorRef = useRef<HTMLDivElement>();
+
+  // DND KIT
+  const sensors = useSensors(useSensor(PointerSensor));
+
   const insertAtCursor = useCallback(
     (type: SupportedEvent | 'clone', cursor: number) => {
       if (cursor === -1) {
@@ -78,11 +85,11 @@ export default function Rundown(props: RundownProps) {
       if (event.altKey && (!event.ctrlKey || !event.shiftKey)) {
         switch (event.code) {
           case 'ArrowDown': {
-            if (cursor < entries.length - 1) moveCursorDown();
+            if (cursor < entries.length - 1) moveCursorTo(cursor + 1);
             break;
           }
           case 'ArrowUp': {
-            if (cursor > 0) moveCursorUp();
+            if (cursor > 0) moveCursorTo(cursor - 1);
             break;
           }
           case 'KeyE': {
@@ -112,25 +119,35 @@ export default function Rundown(props: RundownProps) {
         }
       }
     },
-    [cursor, entries.length, insertAtCursor, moveCursorDown, moveCursorUp],
+    [cursor, entries.length, insertAtCursor, moveCursorTo],
   );
 
+  // we copy the state from the store here
+  // to workaround async updates on the drag mutations
+  useEffect(() => {
+    if (entries) {
+      setStatefulEntries(entries);
+    }
+  }, [entries]);
+
+  // listen to keys
   useEffect(() => {
-    // attach the event listener
     document.addEventListener('keydown', handleKeyPress);
 
-    if (cursor > entries.length - 1) moveCursorTo(entries.length - 1);
-    if (entries.length > 0 && cursor === -1) moveCursorTo(0);
-
-    // remove the event listener
     return () => {
       document.removeEventListener('keydown', handleKeyPress);
     };
-  }, [handleKeyPress, cursor, entries, moveCursorTo]);
+  }, [handleKeyPress]);
 
   // when cursor moves, view should follow
   useEffect(() => {
-    if (cursorRef.current == null) return;
+    if (!cursorRef?.current) return;
+
+    // using start in block parameter causes jumpy behaviour
+    // could alternatively scroll using scrollTo and
+    // calculate position within a range
+    // if the item is near the top half, we are ok
+    // otherwise scroll difference
     cursorRef.current.scrollIntoView({
       behavior: 'smooth',
       block: 'nearest',
@@ -142,120 +159,105 @@ export default function Rundown(props: RundownProps) {
   // or cursor settings changed
   useEffect(() => {
     // and if we are locked
-    if (!isCursorLocked || !data?.selectedEventId) {
+    if (!isCursorLocked || !featureData?.selectedEventId) {
       return;
     }
 
     // move cursor
     let gotoIndex = -1;
     let found = false;
-    for (const e of entries) {
+    for (const entry of entries) {
       gotoIndex++;
-      if (e.id === data.selectedEventId) {
+      if (entry.id === featureData.selectedEventId) {
         found = true;
         break;
       }
     }
     if (found) {
-      // move cursor
       moveCursorTo(gotoIndex);
     }
-  }, [data?.selectedEventId, entries, isCursorLocked, moveCursorTo]);
+  }, [featureData?.selectedEventId, entries, isCursorLocked, moveCursorTo]);
 
-  const handleOnDragEnd = useCallback(
-    (result: DropResult) => {
-      // drop outside of area
-      if (!result?.destination) return;
+  const handleOnDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
 
-      // no change
-      if (result.destination.index === result.source.index) return;
-
-      // Call API
-      reorderEvent(result.draggableId, result.source.index, result.destination.index);
-    },
-    [reorderEvent],
-  );
+    if (over?.id) {
+      if (active.id !== over?.id) {
+        const fromIndex = active.data.current?.sortable.index;
+        const toIndex = over.data.current?.sortable.index;
+        // ugly hack to handle inconsistencies between dnd-kit and async store updates
+        setStatefulEntries((currentEntries) => {
+          return arrayMove(currentEntries, fromIndex, toIndex);
+        });
+        reorderEvent(String(active.id), fromIndex, toIndex);
+      }
+    }
+  };
 
   if (!entries.length) {
-    return (
-      <div className={style.alignCenter}>
-        <Empty text='No data yet' style={{ marginTop: '7vh' }} />
-        <Button
-          onClick={() => insertAtCursor(SupportedEvent.Event, -1)}
-          variant='ontime-filled'
-          className={style.spaceTop}
-          leftIcon={<IoAdd />}
-        >
-          Create Event
-        </Button>
-      </div>
-    );
+    return <RundownEmpty handleAddNew={() => insertAtCursor(SupportedEvent.Event, -1)} />;
   }
+
   let cumulativeDelay = 0;
-  let eventIndex = -1;
   let previousEnd = 0;
   let thisEnd = 0;
   let previousEventId: string | undefined;
+  let eventIndex = -1;
 
   return (
     <div className={style.eventContainer}>
-      <DragDropContext onDragEnd={handleOnDragEnd}>
-        <Droppable droppableId='eventlist'>
-          {(provided) => (
-            <div className={style.list} {...provided.droppableProps} ref={provided.innerRef}>
-              {entries.map((entry, index) => {
-                if (index === 0) {
-                  cumulativeDelay = 0;
-                  eventIndex = -1;
-                }
-                if (entry.type === 'delay' && entry.duration != null) {
-                  cumulativeDelay += entry.duration;
-                } else if (entry.type === 'block') {
-                  cumulativeDelay = 0;
-                } else if (entry.type === 'event') {
-                  eventIndex++;
-                  previousEnd = thisEnd;
-                  thisEnd = entry.timeEnd;
-                  previousEventId = entry.id;
-                }
-                const isLast = index === entries.length - 1;
-                const isSelected = data?.selectedEventId === entry.id;
-                const isNext = data?.nextEventId === entry.id;
+      <DndContext onDragEnd={handleOnDragEnd} sensors={sensors} collisionDetection={closestCenter}>
+        <SortableContext items={statefulEntries} strategy={verticalListSortingStrategy}>
+          <div className={style.list}>
+            {statefulEntries.map((entry, index) => {
+              if (index === 0) {
+                cumulativeDelay = 0;
+                eventIndex = -1;
+              }
+              if (entry.type === SupportedEvent.Delay && entry.duration !== null) {
+                cumulativeDelay += entry.duration;
+              } else if (entry.type === SupportedEvent.Block) {
+                cumulativeDelay = 0;
+              } else if (entry.type === SupportedEvent.Event) {
+                eventIndex++;
+                previousEnd = thisEnd;
+                thisEnd = entry.timeEnd;
+                previousEventId = entry.id;
+              }
+              const isLast = index === entries.length - 1;
+              const isSelected = featureData?.selectedEventId === entry.id;
+              const isNext = featureData?.nextEventId === entry.id;
 
-                return (
-                  <Fragment key={entry.id}>
-                    <div ref={cursor === index ? cursorRef : undefined}>
-                      <RundownEntry
-                        type={entry.type}
-                        index={index}
-                        eventIndex={eventIndex}
-                        data={entry}
-                        selected={isSelected}
-                        hasCursor={cursor === index}
-                        next={isNext}
-                        delay={cumulativeDelay}
-                        previousEnd={previousEnd}
-                        previousEventId={previousEventId}
-                        playback={isSelected ? data.playback || undefined : undefined}
-                      />
-                    </div>
-                    {((showQuickEntry && index === cursor) || isLast) && (
-                      <QuickAddBlock
-                        showKbd={index === cursor}
-                        eventId={entry.id}
-                        previousEventId={previousEventId}
-                        disableAddDelay={entry.type === 'delay'}
-                        disableAddBlock={entry.type === 'block'}
-                      />
-                    )}
-                  </Fragment>
-                );
-              })}
-              {provided.placeholder}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
+              return (
+                <div key={entry.id} ref={cursor === index ? cursorRef : undefined}>
+                  <RundownEntry
+                    type={entry.type}
+                    index={index}
+                    eventIndex={eventIndex}
+                    data={entry}
+                    selected={isSelected}
+                    hasCursor={cursor === index}
+                    next={isNext}
+                    delay={cumulativeDelay}
+                    previousEnd={previousEnd}
+                    previousEventId={previousEventId}
+                    playback={isSelected ? featureData.playback : undefined}
+                  />
+                  {((showQuickEntry && index === cursor) || isLast) && (
+                    <QuickAddBlock
+                      showKbd={false}
+                      eventId={entry.id}
+                      previousEventId={previousEventId}
+                      disableAddDelay={entry.type === 'delay'}
+                      disableAddBlock={entry.type === 'block'}
+                    />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </SortableContext>
+      </DndContext>
     </div>
   );
 }

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

@@ -0,0 +1,23 @@
+import { Button } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+
+import Empty from '../../common/components/state/Empty';
+
+import style from './Rundown.module.scss';
+
+interface RundownEmptyProps {
+  handleAddNew: () => void;
+}
+
+export default function RundownEmpty(props: RundownEmptyProps) {
+  const { handleAddNew } = props;
+
+  return (
+    <div className={style.alignCenter}>
+      <Empty text='No data yet' style={{ marginTop: '7vh' }} />
+      <Button onClick={handleAddNew} variant='ontime-filled' className={style.spaceTop} leftIcon={<IoAdd />}>
+        Create Event
+      </Button>
+    </div>
+  );
+}

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

@@ -1,7 +1,6 @@
-import { useCallback, useContext } from 'react';
+import { useCallback } from 'react';
 import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';
 
-import { CursorContext } from '../../common/context/CursorContext';
 import { useEventAction } from '../../common/hooks/useEventAction';
 import { useEventEditorStore } from '../../common/stores/eventEditor';
 import { useLocalEvent } from '../../common/stores/localEvent';
@@ -32,11 +31,12 @@ interface RundownEntryProps {
 export default function RundownEntry(props: RundownEntryProps) {
   const { index, eventIndex, data, selected, hasCursor, next, delay, previousEnd, previousEventId, playback } = props;
   const { emitError } = useEmitLog();
-  const { openId, removeOpenEvent } = useEventEditorStore();
   const { addEvent, updateEvent, deleteEvent } = useEventAction();
-  const { moveCursorTo } = useContext(CursorContext);
 
-  const { eventSettings } = useLocalEvent();
+  const openId = useEventEditorStore((state) => state.openId);
+  const removeOpenEvent = useEventEditorStore((state) => state.removeOpenEvent);
+
+  const eventSettings = useLocalEvent((state) => state.eventSettings);
   const defaultPublic = eventSettings.defaultPublic;
   const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
 
@@ -45,90 +45,73 @@ export default function RundownEntry(props: RundownEntryProps) {
     field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
     value: unknown;
   };
-  const actionHandler = useCallback(
-    (action: EventItemActions, payload?: number | FieldValue) => {
-      switch (action) {
-        case 'set-cursor': {
-          moveCursorTo(payload as number);
-          break;
-        }
-        case 'event': {
-          const newEvent = { type: SupportedEvent.Event };
-          const options = {
-            startTimeIsLastEnd,
-            defaultPublic,
-            lastEventId: previousEventId,
-            after: data.id,
-          };
-          addEvent(newEvent, options);
-          break;
-        }
-        case 'delay': {
-          addEvent({ type: SupportedEvent.Delay }, { after: data.id });
-          break;
-        }
-        case 'block': {
-          addEvent({ type: SupportedEvent.Block }, { after: data.id });
-          break;
-        }
-        case 'delete': {
-          if (openId === data.id) {
-            removeOpenEvent();
-          }
-          deleteEvent(data.id);
-          break;
-        }
-        case 'clone': {
-          const newEvent = cloneEvent(data as OntimeEvent, data.id);
-          addEvent(newEvent);
-          break;
-        }
-        case 'update': {
-          // Handles and filters update requests
-          const { field, value } = payload as FieldValue;
-          const newData: Partial<OntimeEvent> = { id: data.id };
 
-          if (field === 'durationOverride' && data.type === SupportedEvent.Event) {
-            // duration defines timeEnd
-            newData.duration = value as number;
-            newData.timeEnd = data.timeStart + (value as number);
-            updateEvent(newData);
-          } else if (field === 'timeStart' && data.type === SupportedEvent.Event) {
-            newData.duration = calculateDuration(value as number, data.timeEnd);
-            newData.timeStart = value as number;
-            updateEvent(newData);
-          } else if (field === 'timeEnd' && data.type === SupportedEvent.Event) {
-            newData.duration = calculateDuration(data.timeStart, value as number);
-            newData.timeEnd = value as number;
-            updateEvent(newData);
-          } else if (field in data) {
-            // @ts-expect-error not sure how to type this
-            newData[field] = value;
-            updateEvent(newData);
-          } else {
-            emitError(`Unknown field: ${field}`);
-          }
-          break;
-        }
-        default:
-          emitError(`Unknown action called: ${action}`);
-          break;
+  // we assume the data is not changing in the lifecycle of this component
+  // changes to the data would make rundown re-render, also re-rendering this component
+  const actionHandler = useCallback((action: EventItemActions, payload?: number | FieldValue) => {
+    switch (action) {
+      case 'event': {
+        const newEvent = { type: SupportedEvent.Event };
+        const options = {
+          startTimeIsLastEnd,
+          defaultPublic,
+          lastEventId: previousEventId,
+          after: data.id,
+        };
+        addEvent(newEvent, options);
+        break;
       }
-    },
-    [
-      addEvent,
-      data,
-      defaultPublic,
-      deleteEvent,
-      emitError,
-      moveCursorTo,
-      openId,
-      previousEventId,
-      removeOpenEvent,
-      startTimeIsLastEnd,
-      updateEvent,
-    ],
-  );
+      case 'delay': {
+        addEvent({ type: SupportedEvent.Delay }, { after: data.id });
+        break;
+      }
+      case 'block': {
+        addEvent({ type: SupportedEvent.Block }, { after: data.id });
+        break;
+      }
+      case 'delete': {
+        if (openId === data.id) {
+          removeOpenEvent();
+        }
+        deleteEvent(data.id);
+        break;
+      }
+      case 'clone': {
+        const newEvent = cloneEvent(data as OntimeEvent, data.id);
+        addEvent(newEvent);
+        break;
+      }
+      case 'update': {
+        // Handles and filters update requests
+        const { field, value } = payload as FieldValue;
+        const newData: Partial<OntimeEvent> = { id: data.id };
+
+        if (field === 'durationOverride' && data.type === SupportedEvent.Event) {
+          // duration defines timeEnd
+          newData.duration = value as number;
+          newData.timeEnd = data.timeStart + (value as number);
+          updateEvent(newData);
+        } else if (field === 'timeStart' && data.type === SupportedEvent.Event) {
+          newData.duration = calculateDuration(value as number, data.timeEnd);
+          newData.timeStart = value as number;
+          updateEvent(newData);
+        } else if (field === 'timeEnd' && data.type === SupportedEvent.Event) {
+          newData.duration = calculateDuration(data.timeStart, value as number);
+          newData.timeEnd = value as number;
+          updateEvent(newData);
+        } else if (field in data) {
+          // @ts-expect-error not sure how to type this
+          newData[field] = value;
+          updateEvent(newData);
+        } else {
+          emitError(`Unknown field: ${field}`);
+        }
+        break;
+      }
+      default:
+        throw new Error(`Unhandled event ${action}`);
+    }
+  }, []);
 
   if (data.type === SupportedEvent.Event) {
     return (
@@ -154,11 +137,9 @@ export default function RundownEntry(props: RundownEntryProps) {
       />
     );
   } else if (data.type === SupportedEvent.Block) {
-    // @ts-expect-error -- revise types here
-    return <BlockBlock index={index} data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
+    return <BlockBlock data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
   } else if (data.type === SupportedEvent.Delay) {
-    // @ts-expect-error -- revise types here
-    return <DelayBlock index={index} data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
+    return <DelayBlock data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
   }
   return null;
 }

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

@@ -1,25 +1,23 @@
+import { memo } from 'react';
 import { Box } from '@chakra-ui/react';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
-import { CursorProvider } from '../../common/context/CursorContext';
 import { handleLinks } from '../../common/utils/linkUtils';
 
 import RundownWrapper from './RundownWrapper';
 
 import style from '../editors/Editor.module.scss';
 
-export default function RundownExport() {
+const RundownExport = () => {
   return (
-    <CursorProvider>
-      <Box className={style.editor} data-testid='panel-rundown'>
-        <IoArrowUp
-          className={style.corner}
-          onClick={(event) => handleLinks(event, 'rundown')}
-        />
-        <ErrorBoundary>
-          <RundownWrapper />
-        </ErrorBoundary>
-      </Box>
-    </CursorProvider>
+    <Box className={style.editor} data-testid='panel-rundown'>
+      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'rundown')} />
+      <ErrorBoundary>
+        <RundownWrapper />
+      </ErrorBoundary>
+    </Box>
   );
-}
+};
+
+export default memo(RundownExport);

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

@@ -13,11 +13,7 @@ export default function RundownWrapper() {
     <>
       <RundownMenu />
       <div className={styles.content}>
-        {status === 'success' && data ? (
-          <Rundown entries={data} />
-        ) : (
-          <Empty text='Connecting to server' />
-        )}
+        {status === 'success' && data ? <Rundown entries={data} /> : <Empty text='Connecting to server' />}
       </div>
     </>
   );

apps/client/src/features/rundown/_blockMixins.scss

@@ -19,6 +19,7 @@ $block-cursor-color: $blue-400;
   font-family: $ontime-font-family;
   border-radius: $block-border-radius;
   margin: 4px 2px;
+  position: relative;
 }
 
 @mixin block-spacing() {

apps/client/src/features/rundown/block-block/BlockBlock.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
 import { OntimeBlock, OntimeEvent } from 'ontime-types';
 
@@ -10,43 +11,53 @@ import { EventItemActions } from '../RundownEntry';
 import style from './BlockBlock.module.scss';
 
 interface BlockBlockProps {
-  index: number;
   data: OntimeBlock;
   hasCursor: boolean;
-  actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent, value: unknown }) => void;
+  actionHandler: (
+    action: EventItemActions,
+    payload?:
+      | number
+      | {
+          field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
+          value: unknown;
+        },
+  ) => void;
 }
 
 export default function BlockBlock(props: BlockBlockProps) {
-  const { index, data, hasCursor, actionHandler } = props;
-  const onFocusRef = useRef<null | HTMLSpanElement>(null);
+  const { data, hasCursor, actionHandler } = props;
+  const handleRef = useRef<null | HTMLSpanElement>(null);
+
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: data.id,
+    animateLayoutChanges: () => false,
+  });
+
+  const dragStyle = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
 
   useEffect(() => {
     if (hasCursor) {
-      onFocusRef?.current?.focus();
+      handleRef?.current?.focus();
     }
-  }, [hasCursor])
+  }, [hasCursor]);
 
-  const blockClasses = cx([
-    style.block,
-    hasCursor ? style.hasCursor : null,
-  ]);
+  const blockClasses = cx([style.block, hasCursor ? style.hasCursor : null]);
 
   return (
-    <Draggable key={data.id} draggableId={data.id} index={index}>
-      {(provided) => (
-        <div className={blockClasses} {...provided.draggableProps} ref={provided.innerRef}>
-          <span className={style.drag} {...provided.dragHandleProps} ref={onFocusRef}>
-            <IoReorderTwo />
-          </span>
-          <BlockActionMenu
-            className={style.actionOverlay}
-            showAdd
-            showDelay
-            enableDelete
-            actionHandler={actionHandler}
-          />
-        </div>
-      )}
-    </Draggable>
+    <div className={blockClasses} ref={setNodeRef} style={dragStyle}>
+      <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
+        <IoReorderTwo />
+      </span>
+      <BlockActionMenu className={style.actionOverlay} showAdd showDelay enableDelete actionHandler={actionHandler} />
+    </div>
   );
 }

apps/client/src/features/rundown/delay-block/DelayBlock.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 import { Button, HStack } from '@chakra-ui/react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
 import { OntimeDelay, OntimeEvent } from 'ontime-types';
@@ -16,19 +17,42 @@ import style from './DelayBlock.module.scss';
 
 interface DelayBlockProps {
   data: OntimeDelay;
-  index: number;
   hasCursor: boolean;
-  actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent; value: unknown }) => void;
+  actionHandler: (
+    action: EventItemActions,
+    payload?:
+      | number
+      | {
+          field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
+          value: unknown;
+        },
+  ) => void;
 }
 
 export default function DelayBlock(props: DelayBlockProps) {
-  const { data, index, hasCursor, actionHandler } = props;
+  const { data, hasCursor, actionHandler } = props;
   const { applyDelay, updateEvent } = useEventAction();
-  const onFocusRef = useRef<null | HTMLSpanElement>(null);
+  const handleRef = useRef<null | HTMLSpanElement>(null);
+
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: data.id,
+    animateLayoutChanges: () => false,
+  });
+
+  const dragStyle = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
 
   useEffect(() => {
     if (hasCursor) {
-      onFocusRef?.current?.focus();
+      handleRef?.current?.focus();
     }
   }, [hasCursor]);
 
@@ -53,21 +77,17 @@ export default function DelayBlock(props: DelayBlockProps) {
   const delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
 
   return (
-    <Draggable key={data.id} draggableId={data.id} index={index}>
-      {(provided) => (
-        <div className={blockClasses} {...provided.draggableProps} ref={provided.innerRef}>
-          <span className={style.drag} {...provided.dragHandleProps} ref={onFocusRef}>
-            <IoReorderTwo />
-          </span>
-          <DelayInput value={delayValue} submitHandler={delaySubmitHandler} />
-          <HStack spacing='8px' className={style.actionOverlay}>
-            <Button onClick={applyDelayHandler} size='sm' leftIcon={<IoCheckmark />} variant='ontime-subtle-white'>
-              Apply delay
-            </Button>
-            <BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />
-          </HStack>
-        </div>
-      )}
-    </Draggable>
+    <div className={blockClasses} ref={setNodeRef} style={dragStyle}>
+      <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
+        <IoReorderTwo />
+      </span>
+      <DelayInput value={delayValue} submitHandler={delaySubmitHandler} />
+      <HStack spacing='8px' className={style.actionOverlay}>
+        <Button onClick={applyDelayHandler} size='sm' leftIcon={<IoCheckmark />} variant='ontime-subtle-white'>
+          Apply delay
+        </Button>
+        <BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />
+      </HStack>
+    </div>
   );
 }

apps/client/src/features/rundown/event-block/EventBlock.tsx

@@ -1,39 +1,18 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
-import { Editable, EditableInput, EditablePreview, Tooltip } from '@chakra-ui/react';
-import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
-import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
-import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
-import { IoPlayOutline } from '@react-icons/all-files/io5/IoPlayOutline';
-import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
-import { IoReload } from '@react-icons/all-files/io5/IoReload';
-import { IoRemoveCircle } from '@react-icons/all-files/io5/IoRemoveCircle';
-import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
-import { Playback } from 'ontime-types';
+import { OntimeEvent, Playback } from 'ontime-types';
 
-import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
-import { useEventAction } from '../../../common/hooks/useEventAction';
-import { setEventPlayback } from '../../../common/hooks/useSocket';
+import { useCursor } from '../../../common/stores/cursorStore';
 import { useEventEditorStore } from '../../../common/stores/eventEditor';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
-import { tooltipDelayMid } from '../../../ontimeConfig';
 import { EventItemActions } from '../RundownEntry';
 
-import BlockActionMenu from './composite/BlockActionMenu';
-import EventBlockProgressBar from './composite/EventBlockProgressBar';
-import EventBlockTimers from './composite/EventBlockTimers';
+import EventBlockInner from './EventBlockInner';
 
 import style from './EventBlock.module.scss';
 
-const blockBtnStyle = {
-  size: 'sm',
-};
-
-const tooltipProps = {
-  openDelay: tooltipDelayMid,
-};
-
 interface EventBlockProps {
   timeStart: number;
   timeEnd: number;
@@ -52,7 +31,15 @@ interface EventBlockProps {
   selected: boolean;
   hasCursor: boolean;
   playback?: Playback;
-  actionHandler: (action: EventItemActions, payload?: any) => void;
+  actionHandler: (
+    action: EventItemActions,
+    payload?:
+      | number
+      | {
+          field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
+          value: unknown;
+        },
+  ) => void;
 }
 
 export default function EventBlock(props: EventBlockProps) {
@@ -77,54 +64,61 @@ export default function EventBlock(props: EventBlockProps) {
     actionHandler,
   } = props;
 
-  const { openId, setOpenEvent, removeOpenEvent } = useEventEditorStore();
-  const { updateEvent } = useEventAction();
-  const [blockTitle, setBlockTitle] = useState<string>(title || '');
-  const onFocusRef = useRef<null | HTMLSpanElement>(null);
+  const moveCursorTo = useCursor((state) => state.moveCursorTo);
+  const handleRef = useRef<null | HTMLSpanElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const openId = useEventEditorStore((state) => state.openId);
+
+  const {
+    isDragging,
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: eventId,
+    animateLayoutChanges: () => false,
+  });
+
+  const dragStyle = {
+    zIndex: isDragging ? 2 : 'inherit',
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
 
   const binderColours = colour && getAccessibleColour(colour);
 
-  // Todo: could I re-render the item without causing a state change here?
-  // ?? use refs instead?
-  useEffect(() => {
-    setBlockTitle(title);
-  }, [title]);
-
   useEffect(() => {
     if (hasCursor) {
-      onFocusRef?.current?.focus();
+      handleRef?.current?.focus();
     }
   }, [hasCursor]);
 
-  const handleTitle = useCallback(
-    (text: string) => {
-      if (text === title) {
-        return;
-      }
+  useLayoutEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      {
+        root: null,
+        threshold: 1,
+      },
+    );
 
-      const cleanVal = text.trim();
-      setBlockTitle(cleanVal);
-
-      updateEvent({ id: eventId, title: cleanVal });
-    },
-    [title, updateEvent, eventId],
-  );
-
-  const toggleOpenEvent = useCallback(() => {
-    if (openId === eventId) {
-      removeOpenEvent();
-    } else {
-      setOpenEvent(eventId);
+    const handleRefCurrent = handleRef.current;
+    if (handleRefCurrent) {
+      observer.observe(handleRefCurrent);
     }
-  }, [eventId, openId, removeOpenEvent, setOpenEvent]);
 
-  const eventIsPlaying = selected && playback === Playback.Play;
-  const playBtnStyles = { _hover: {} };
-  if (!skip && eventIsPlaying) {
-    playBtnStyles._hover = { bg: '#c05621' };
-  } else if (!skip && !eventIsPlaying) {
-    playBtnStyles._hover = {};
-  }
+    return () => {
+      if (handleRefCurrent) {
+        observer.unobserve(handleRefCurrent);
+      }
+    };
+  }, [handleRef]);
 
   const blockClasses = cx([
     style.eventBlock,
@@ -134,118 +128,32 @@ export default function EventBlock(props: EventBlockProps) {
   ]);
 
   return (
-    <Draggable key={eventId} draggableId={eventId} index={index}>
-      {(provided) => (
-        <div className={blockClasses} {...provided.draggableProps} ref={provided.innerRef}>
-          <div
-            className={style.binder}
-            style={{ ...binderColours }}
-            tabIndex={-1}
-            onClick={() => actionHandler('set-cursor', index)}
-          >
-            <span className={style.drag} {...provided.dragHandleProps} ref={onFocusRef}>
-              <IoReorderTwo />
-            </span>
-            {eventIndex}
-          </div>
-          <div className={style.playbackActions}>
-            <TooltipActionBtn
-              variant='ontime-subtle-white'
-              aria-label='Skip event'
-              tooltip='Skip event'
-              icon={skip ? <IoRemoveCircle /> : <IoRemoveCircleOutline />}
-              {...tooltipProps}
-              {...blockBtnStyle}
-              clickHandler={() => actionHandler('update', { field: 'skip', value: !skip })}
-              tabIndex={-1}
-              disabled={selected}
-            />
-            <TooltipActionBtn
-              variant='ontime-subtle-white'
-              aria-label='Load event'
-              tooltip='Load event'
-              icon={<IoReload className={style.flip} />}
-              disabled={skip}
-              {...tooltipProps}
-              {...blockBtnStyle}
-              clickHandler={() => setEventPlayback.loadEvent(eventId)}
-              tabIndex={-1}
-            />
-            <TooltipActionBtn
-              variant='ontime-subtle-white'
-              aria-label='Start event'
-              tooltip='Start event'
-              icon={eventIsPlaying ? <IoPlay /> : <IoPlayOutline />}
-              disabled={skip}
-              {...tooltipProps}
-              {...blockBtnStyle}
-              clickHandler={() => setEventPlayback.startEvent(eventId)}
-              backgroundColor={eventIsPlaying ? '#58A151' : undefined}
-              _hover={{ backgroundColor: eventIsPlaying ? '#58A151' : undefined }}
-              tabIndex={-1}
-            />
-          </div>
-          <EventBlockTimers
-            timeStart={timeStart}
-            timeEnd={timeEnd}
-            duration={duration}
-            delay={delay}
-            actionHandler={actionHandler}
-            previousEnd={previousEnd}
-          />
-          <Editable
-            variant='ontime'
-            value={blockTitle}
-            className={`${style.eventTitle} ${!title ? style.noTitle : ''}`}
-            placeholder='Event title'
-            onChange={(value) => setBlockTitle(value)}
-            onSubmit={(value) => handleTitle(value)}
-          >
-            <EditablePreview className={style.preview} />
-            <EditableInput />
-          </Editable>
-          <div className={style.statusElements}>
-            <span className={style.eventNote}>{note}</span>
-            <div className={selected ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
-              <EventBlockProgressBar playback={playback} />
-            </div>
-            <div className={style.eventStatus} tabIndex={-1}>
-              <Tooltip label='Next event' isDisabled={!next} {...tooltipProps}>
-                <span>
-                  <IoPlaySkipForward className={`${style.statusIcon} ${next ? style.active : ''}`} />
-                </span>
-              </Tooltip>
-              <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
-                <span>
-                  <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : ''}`} />
-                </span>
-              </Tooltip>
-            </div>
-          </div>
-          <div className={style.eventActions}>
-            <TooltipActionBtn
-              {...blockBtnStyle}
-              variant='ontime-subtle-white'
-              size='sm'
-              icon={<IoOptions />}
-              clickHandler={toggleOpenEvent}
-              tooltip='Event options'
-              aria-label='Event options'
-              tabIndex={-1}
-              backgroundColor={openId === eventId ? '#2B5ABC' : undefined}
-              color={openId === eventId ? 'white' : '#f6f6f6'}
-            />
-            <BlockActionMenu
-              showAdd
-              showDelay
-              showBlock
-              showClone
-              enableDelete={!selected}
-              actionHandler={actionHandler}
-            />
-          </div>
-        </div>
+    <div className={blockClasses} ref={setNodeRef} style={dragStyle}>
+      <div className={style.binder} style={{ ...binderColours }} tabIndex={-1} onClick={() => moveCursorTo(index)}>
+        <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
+          <IoReorderTwo />
+        </span>
+        {eventIndex}
+      </div>
+      {isVisible && (
+        <EventBlockInner
+          isOpen={openId === eventId}
+          timeStart={timeStart}
+          timeEnd={timeEnd}
+          duration={duration}
+          eventId={eventId}
+          isPublic={isPublic}
+          title={title}
+          note={note}
+          delay={delay}
+          previousEnd={previousEnd}
+          next={next}
+          skip={skip}
+          selected={selected}
+          playback={playback}
+          actionHandler={actionHandler}
+        />
       )}
-    </Draggable>
+    </div>
   );
 }

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -0,0 +1,214 @@
+import { memo, useCallback, useEffect, useState } from 'react';
+import { Editable, EditableInput, EditablePreview, Tooltip } from '@chakra-ui/react';
+import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
+import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoPlayOutline } from '@react-icons/all-files/io5/IoPlayOutline';
+import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
+import { IoReload } from '@react-icons/all-files/io5/IoReload';
+import { IoRemoveCircle } from '@react-icons/all-files/io5/IoRemoveCircle';
+import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
+import { Playback } from 'ontime-types';
+
+import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
+import { useEventAction } from '../../../common/hooks/useEventAction';
+import { setEventPlayback } from '../../../common/hooks/useSocket';
+import { useEventEditorStore } from '../../../common/stores/eventEditor';
+import { tooltipDelayMid } from '../../../ontimeConfig';
+import { EventItemActions } from '../RundownEntry';
+
+import BlockActionMenu from './composite/BlockActionMenu';
+import EventBlockProgressBar from './composite/EventBlockProgressBar';
+import EventBlockTimers from './composite/EventBlockTimers';
+
+import style from './EventBlock.module.scss';
+
+const blockBtnStyle = {
+  size: 'sm',
+};
+
+const tooltipProps = {
+  openDelay: tooltipDelayMid,
+};
+
+interface EventBlockInnerProps {
+  isOpen: boolean;
+  timeStart: number;
+  timeEnd: number;
+  duration: number;
+  eventId: string;
+  isPublic: boolean;
+  title: string;
+  note: string;
+  delay: number;
+  previousEnd: number;
+  next: boolean;
+  skip: boolean;
+  selected: boolean;
+  playback?: Playback;
+  actionHandler: (action: EventItemActions, payload?: any) => void;
+}
+
+const EventBlockInner = (props: EventBlockInnerProps) => {
+  const {
+    isOpen,
+    timeStart,
+    timeEnd,
+    duration,
+    eventId,
+    isPublic = true,
+    title,
+    note,
+    delay,
+    previousEnd,
+    next,
+    skip = false,
+    selected,
+    playback,
+    actionHandler,
+  } = props;
+
+  const { updateEvent } = useEventAction();
+
+  const [blockTitle, setBlockTitle] = useState<string>(title || '');
+  const [renderInner, setRenderInner] = useState(false);
+  const setOpenEvent = useEventEditorStore((state) => state.setOpenEvent);
+  const removeOpenEvent = useEventEditorStore((state) => state.removeOpenEvent);
+
+  // Todo: could I re-render the item without causing a state change here?
+  // ?? use refs instead?
+
+  useEffect(() => {
+    setRenderInner(true);
+  }, []);
+
+  useEffect(() => {
+    setBlockTitle(title);
+  }, [title]);
+
+  const handleTitle = useCallback(
+    (text: string) => {
+      if (text === title) {
+        return;
+      }
+
+      const cleanVal = text.trim();
+      setBlockTitle(cleanVal);
+
+      updateEvent({ id: eventId, title: cleanVal });
+    },
+    [title, updateEvent, eventId],
+  );
+
+  const toggleOpenEvent = useCallback(() => {
+    if (isOpen) {
+      removeOpenEvent();
+    } else {
+      setOpenEvent(eventId);
+    }
+  }, [eventId, isOpen, removeOpenEvent, setOpenEvent]);
+
+  const eventIsPlaying = selected && playback === Playback.Play;
+  const playBtnStyles = { _hover: {} };
+  if (!skip && eventIsPlaying) {
+    playBtnStyles._hover = { bg: '#c05621' };
+  } else if (!skip && !eventIsPlaying) {
+    playBtnStyles._hover = {};
+  }
+
+  return !renderInner ? null : (
+    <>
+      <div className={style.playbackActions}>
+        <TooltipActionBtn
+          variant='ontime-subtle-white'
+          aria-label='Skip event'
+          tooltip='Skip event'
+          icon={skip ? <IoRemoveCircle /> : <IoRemoveCircleOutline />}
+          {...tooltipProps}
+          {...blockBtnStyle}
+          clickHandler={() => actionHandler('update', { field: 'skip', value: !skip })}
+          tabIndex={-1}
+          disabled={selected}
+        />
+        <TooltipActionBtn
+          variant='ontime-subtle-white'
+          aria-label='Load event'
+          tooltip='Load event'
+          icon={<IoReload className={style.flip} />}
+          disabled={skip}
+          {...tooltipProps}
+          {...blockBtnStyle}
+          clickHandler={() => setEventPlayback.loadEvent(eventId)}
+          tabIndex={-1}
+        />
+        <TooltipActionBtn
+          variant='ontime-subtle-white'
+          aria-label='Start event'
+          tooltip='Start event'
+          icon={eventIsPlaying ? <IoPlay /> : <IoPlayOutline />}
+          disabled={skip}
+          {...tooltipProps}
+          {...blockBtnStyle}
+          clickHandler={() => setEventPlayback.startEvent(eventId)}
+          backgroundColor={eventIsPlaying ? '#58A151' : undefined}
+          _hover={{ backgroundColor: eventIsPlaying ? '#58A151' : undefined }}
+          tabIndex={-1}
+        />
+      </div>
+      <EventBlockTimers
+        timeStart={timeStart}
+        timeEnd={timeEnd}
+        duration={duration}
+        delay={delay}
+        actionHandler={actionHandler}
+        previousEnd={previousEnd}
+      />
+      <Editable
+        variant='ontime'
+        value={blockTitle}
+        className={`${style.eventTitle} ${!title ? style.noTitle : ''}`}
+        placeholder='Event title'
+        onChange={(value) => setBlockTitle(value)}
+        onSubmit={(value) => handleTitle(value)}
+      >
+        <EditablePreview className={style.preview} />
+        <EditableInput />
+      </Editable>
+      <div className={style.statusElements}>
+        <span className={style.eventNote}>{note}</span>
+        <div className={selected ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
+          {selected && <EventBlockProgressBar playback={playback} />}
+        </div>
+        <div className={style.eventStatus} tabIndex={-1}>
+          <Tooltip label='Next event' isDisabled={!next} {...tooltipProps}>
+            <span>
+              <IoPlaySkipForward className={`${style.statusIcon} ${next ? style.active : ''}`} />
+            </span>
+          </Tooltip>
+          <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
+            <span>
+              <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : ''}`} />
+            </span>
+          </Tooltip>
+        </div>
+      </div>
+      <div className={style.eventActions}>
+        <TooltipActionBtn
+          {...blockBtnStyle}
+          variant='ontime-subtle-white'
+          size='sm'
+          icon={<IoOptions />}
+          clickHandler={toggleOpenEvent}
+          tooltip='Event options'
+          aria-label='Event options'
+          tabIndex={-1}
+          backgroundColor={isOpen ? '#2B5ABC' : undefined}
+          color={isOpen ? 'white' : '#f6f6f6'}
+        />
+        <BlockActionMenu showAdd showDelay showBlock showClone enableDelete={!selected} actionHandler={actionHandler} />
+      </div>
+    </>
+  );
+};
+
+export default memo(EventBlockInner);

apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx

@@ -25,7 +25,7 @@ export default function QuickAddBlock(props: QuickAddBlockProps) {
   const doStartTime = useRef<HTMLInputElement | null>(null);
   const doPublic = useRef<HTMLInputElement | null>(null);
 
-  const { eventSettings } = useLocalEvent();
+  const eventSettings = useLocalEvent((state) => state.eventSettings);
   const defaultPublic = eventSettings.defaultPublic;
   const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
 

apps/client/src/features/table/OntimeTable.jsx

@@ -148,7 +148,7 @@ export default function OntimeTable({ tableData, userFields, selectedId, handleU
       if (el) {
         el.scrollIntoView({
           behavior: 'smooth',
-          block: 'center',
+          block: 'start',
           inline: 'nearest',
         });
       }

apps/client/src/features/table/tableElements/SortableCell.jsx

@@ -13,22 +13,15 @@ export default function SortableCell({ column }) {
     id: column.id,
   });
 
-  // prevent scaling on drag
-  const cssTransform = {
-    ...transform,
-    scaleX: 1,
-    scaleY: 1,
-  }
-
   // build drag styles
   const dragStyle = {
-    transform: CSS.Transform.toString(cssTransform),
-    transition,
     ...style,
+    transform: CSS.Translate.toString(transform),
+    transition,
   };
 
   return (
-    <th {...restColumn} ref={setNodeRef} style={{...dragStyle}} className={isDragging ? styles.dragging: ''}>
+    <th {...restColumn} ref={setNodeRef} style={dragStyle} className={isDragging ? styles.dragging : ''}>
       <div {...attributes} {...listeners}>
         <Tooltip label={column.Header} openDelay={tooltipDelayFast}>
           {column.render('Header')}

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -12,7 +12,7 @@ export type TitleManager = TitleBlock & { showNow: boolean; showNext: boolean };
 const withData = (Component: ReactNode) => {
   return (props) => {
     // persisted app state
-    const { mirror: isMirrored } = useViewOptionsStore();
+    const isMirrored = useViewOptionsStore((state) => state.mirror);
 
     // HTTP API data
     const { data: eventsData } = useRundown();