diff --git a/apps/client/src/features/rundown/Rundown.tsx b/apps/client/src/features/rundown/Rundown.tsx index 27aa0ce22..ce77e8361 100644 --- a/apps/client/src/features/rundown/Rundown.tsx +++ b/apps/client/src/features/rundown/Rundown.tsx @@ -256,10 +256,12 @@ export default function Rundown({ data }: RundownProps) { return insertAtId(SupportedEvent.Event, cursor)} />; } - let lastEntry: PlayableEvent | undefined; // used by indicators - let thisEntry: PlayableEvent | undefined; - let previousEventId: string | undefined; - let thisId = previousEventId; + // last event is used to calculate relative timings + let lastEvent: PlayableEvent | undefined; // used by indicators + let thisEvent: PlayableEvent | undefined; + // 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) {
- {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]; - if (!event) { + const entry = rundown[entryId]; + 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; - lastEntry = thisEntry; + lastEvent = thisEvent; - if (isPlayableEvent(event)) { + if (isPlayableEvent(entry)) { // populate previous entry - if (isNewLatest(event.timeStart, event.timeEnd, lastEntry?.timeStart, lastEntry?.timeEnd)) { - thisEntry = event; + if (isNewLatest(entry.timeStart, entry.timeEnd, lastEvent?.timeStart, lastEvent?.timeEnd)) { + thisEvent = entry; } - thisId = eventId; } } const isFirst = index === 0; const isLast = index === order.length - 1; - const isLoaded = featureData?.selectedEventId === event.id; - const isNext = featureData?.nextEventId === event.id; - const hasCursor = event.id === cursor; + const isLoaded = featureData?.selectedEventId === entry.id; + const isNext = featureData?.nextEventId === entry.id; + const hasCursor = entry.id === cursor; if (isLoaded) { isPast = false; } return ( - - {isEditMode && (hasCursor || isFirst) && } + + {isEditMode && (hasCursor || isFirst) && }
- {isOntimeEvent(event) &&
{eventIndex}
} -
+ {isOntimeEvent(entry) &&
{eventIndex}
} +
- {isEditMode && (hasCursor || isLast) && } + {isEditMode && (hasCursor || isLast) && } ); })} diff --git a/apps/client/src/features/rundown/RundownEntry.tsx b/apps/client/src/features/rundown/RundownEntry.tsx index 163129916..5df99938c 100644 --- a/apps/client/src/features/rundown/RundownEntry.tsx +++ b/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;