fix: previous eventid is any entry

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

@@ -256,10 +256,12 @@ export default function Rundown({ data }: RundownProps) {
     return <RundownEmpty handleAddNew={() => insertAtId(SupportedEvent.Event, cursor)} />;
   }
 
-  let lastEntry: PlayableEvent | undefined; // used by indicators
+  // last event is used to calculate relative timings
-  let thisEntry: PlayableEvent | undefined;
+  let lastEvent: PlayableEvent | undefined; // used by indicators
-  let previousEventId: string | undefined;
+  let thisEvent: PlayableEvent | undefined;
-  let thisId = previousEventId;
+  // previous entry is used to infer position in the rundown for new events
+  let previousEntryId: string | undefined;
+  let thisId = previousEntryId;
 
   let eventIndex = 0;
   // all events before the current selected are in the past
@@ -272,63 +274,64 @@ export default function Rundown({ data }: RundownProps) {
       <DndContext onDragEnd={handleOnDragEnd} sensors={sensors} collisionDetection={closestCenter}>
         <SortableContext items={statefulEntries} strategy={verticalListSortingStrategy}>
           <div className={style.list}>
-            {statefulEntries.map((eventId, index) => {
+            {statefulEntries.map((entryId, index) => {
               // we iterate through a stateful copy of order to make the operations smoother
               // this means that this can be out of sync with order until the useEffect runs
               // instead of writing all the logic guards, we simply short circuit rendering here
-              const event = rundown[eventId];
+              const entry = rundown[entryId];
-              if (!event) {
+              if (!entry) {
                 return null;
               }
               if (index === 0) {
                 eventIndex = 0;
               }
-              if (isOntimeEvent(event)) {
+              previousEntryId = thisId;
+              thisId = entryId;
+              if (isOntimeEvent(entry)) {
                 // event indexes are 1 based in frontend
                 eventIndex++;
-                previousEventId = thisId;
+                lastEvent = thisEvent;
-                lastEntry = thisEntry;
 
-                if (isPlayableEvent(event)) {
+                if (isPlayableEvent(entry)) {
                   // populate previous entry
-                  if (isNewLatest(event.timeStart, event.timeEnd, lastEntry?.timeStart, lastEntry?.timeEnd)) {
+                  if (isNewLatest(entry.timeStart, entry.timeEnd, lastEvent?.timeStart, lastEvent?.timeEnd)) {
-                    thisEntry = event;
+                    thisEvent = entry;
                   }
-                  thisId = eventId;
                 }
               }
               const isFirst = index === 0;
               const isLast = index === order.length - 1;
-              const isLoaded = featureData?.selectedEventId === event.id;
+              const isLoaded = featureData?.selectedEventId === entry.id;
-              const isNext = featureData?.nextEventId === event.id;
+              const isNext = featureData?.nextEventId === entry.id;
-              const hasCursor = event.id === cursor;
+              const hasCursor = entry.id === cursor;
               if (isLoaded) {
                 isPast = false;
               }
 
               return (
-                <Fragment key={event.id}>
+                <Fragment key={entry.id}>
-                  {isEditMode && (hasCursor || isFirst) && <QuickAddBlock previousEventId={previousEventId} />}
+                  {isEditMode && (hasCursor || isFirst) && <QuickAddBlock previousEventId={previousEntryId} />}
                   <div className={style.entryWrapper} data-testid={`entry-${eventIndex}`}>
-                    {isOntimeEvent(event) && <div className={style.entryIndex}>{eventIndex}</div>}
+                    {isOntimeEvent(entry) && <div className={style.entryIndex}>{eventIndex}</div>}
-                    <div className={style.entry} key={event.id} ref={hasCursor ? cursorRef : undefined}>
+                    <div className={style.entry} key={entry.id} ref={hasCursor ? cursorRef : undefined}>
                       <RundownEntry
-                        type={event.type}
+                        type={entry.type}
                         isPast={isPast}
                         eventIndex={eventIndex}
-                        data={event}
+                        data={entry}
                         loaded={isLoaded}
                         hasCursor={hasCursor}
                         isNext={isNext}
-                        previousStart={lastEntry?.timeStart}
+                        previousStart={lastEvent?.timeStart}
-                        previousEnd={lastEntry?.timeEnd}
+                        previousEnd={lastEvent?.timeEnd}
-                        previousEventId={previousEventId}
+                        previousEntryId={previousEntryId}
+                        previousEventId={lastEvent?.id}
                         playback={isLoaded ? featureData.playback : undefined}
                         isRolling={featureData.playback === Playback.Roll}
                       />
                     </div>
                   </div>
-                  {isEditMode && (hasCursor || isLast) && <QuickAddBlock previousEventId={event.id} />}
+                  {isEditMode && (hasCursor || isLast) && <QuickAddBlock previousEventId={entry.id} />}
                 </Fragment>
               );
             })}

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

@@ -34,6 +34,7 @@ interface RundownEntryProps {
   isNext: boolean;
   previousStart?: number;
   previousEnd?: number;
+  previousEntryId?: string;
   previousEventId?: string;
   playback?: Playback; // we only care about this if this event is playing
   isRolling: boolean; // we need to know even if not related to this event
@@ -48,6 +49,7 @@ export default function RundownEntry(props: RundownEntryProps) {
     isNext,
     previousStart,
     previousEnd,
+    previousEntryId,
     previousEventId,
     playback,
     isRolling,
@@ -84,7 +86,7 @@ export default function RundownEntry(props: RundownEntryProps) {
       case 'event-before': {
         const newEvent = { type: SupportedEvent.Event };
         const options = {
-          after: previousEventId,
+          after: previousEntryId,
         };
         return addEvent(newEvent, options);
       }
@@ -92,13 +94,13 @@ export default function RundownEntry(props: RundownEntryProps) {
         return addEvent({ type: SupportedEvent.Delay }, { after: data.id });
       }
       case 'delay-before': {
-        return addEvent({ type: SupportedEvent.Delay }, { after: previousEventId });
+        return addEvent({ type: SupportedEvent.Delay }, { after: previousEntryId });
       }
       case 'block': {
         return addEvent({ type: SupportedEvent.Block }, { after: data.id });
       }
       case 'block-before': {
-        return addEvent({ type: SupportedEvent.Block }, { after: previousEventId });
+        return addEvent({ type: SupportedEvent.Block }, { after: previousEntryId });
       }
       case 'swap': {
         const { value } = payload as FieldValue;