feat: Cache part offset

Author: PeterC89

packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx

@@ -149,8 +149,8 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		intersectionObserver: IntersectionObserver | undefined
 		mountedTime = 0
 		nextPartOffset = 0
-		liveLineRefreshFrame: number | undefined
-		pendingLiveLineRefreshEvent: TimingEvent | undefined
+		cachedLivePartOffsetRef: PartInstanceId | null = null
+		cachedLivePartOffset = 0
 
 		constructor(props: IProps & ITrackedResolvedSegmentProps) {
 			super(props)
@@ -253,6 +253,8 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 			}
 			// segment is stopping from being live
 			if (this.state.isLiveSegment === true && isLiveSegment === false) {
+				this.cachedLivePartOffsetRef = null
+				this.cachedLivePartOffset = 0
 				this.setState({ isLiveSegment: false }, () => {
 					if (Settings.autoRewindLeavingSegment) {
 						this.onRewindSegment()
@@ -355,12 +357,9 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 				if (typeof this.props.onSegmentScroll === 'function') this.props.onSegmentScroll()
 			}
 
+			this.cachedLivePartOffsetRef = null
+			this.cachedLivePartOffset = 0
 			this.stopLive()
-			if (this.liveLineRefreshFrame !== undefined) {
-				window.cancelAnimationFrame(this.liveLineRefreshFrame)
-				this.liveLineRefreshFrame = undefined
-				this.pendingLiveLineRefreshEvent = undefined
-			}
 			RundownViewEventBus.off(RundownViewEvents.REWIND_SEGMENTS, this.onRewindSegment)
 			RundownViewEventBus.off(RundownViewEvents.GO_TO_PART, this.onGoToPart)
 			RundownViewEventBus.off(RundownViewEvents.GO_TO_PART_INSTANCE, this.onGoToPartInstance)
@@ -498,21 +497,21 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 			}
 		}
 
-		private flushAirLineRefresh = () => {
-			this.liveLineRefreshFrame = undefined
-			const event = this.pendingLiveLineRefreshEvent
-			this.pendingLiveLineRefreshEvent = undefined
-			if (event) this.applyAirLineRefresh(event)
-		}
 
 		private applyAirLineRefresh = (e: TimingEvent) => {
 			this.setState((state) => {
 				if (state.isLiveSegment && state.currentLivePart) {
 					const currentLivePartInstance = state.currentLivePart.instance
 
-					const partOffset =
-						(this.context.durations?.partDisplayStartsAt?.[getPartInstanceTimingId(currentLivePartInstance)] || 0) -
-						(this.context.durations?.partDisplayStartsAt?.[getPartInstanceTimingId(this.props.parts[0]?.instance)] || 0)
+					// Cache the offset when the live part changes to shield it from future part updates
+					let partOffset = this.cachedLivePartOffset
+					if (this.cachedLivePartOffsetRef !== currentLivePartInstance._id) {
+						partOffset =
+							(this.context.durations?.partDisplayStartsAt?.[getPartInstanceTimingId(currentLivePartInstance)] || 0) -
+							(this.context.durations?.partDisplayStartsAt?.[getPartInstanceTimingId(this.props.parts[0]?.instance)] || 0)
+						this.cachedLivePartOffsetRef = currentLivePartInstance._id
+						this.cachedLivePartOffset = partOffset
+					}
 
 					let isExpectedToPlay = !!currentLivePartInstance.timings?.plannedStartedPlayback
 					const lastTake = currentLivePartInstance.timings?.take
@@ -549,9 +548,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 
 		onAirLineRefresh = (e: TimingEvent) => {
-			this.pendingLiveLineRefreshEvent = e
-			if (this.liveLineRefreshFrame !== undefined) return
-			this.liveLineRefreshFrame = window.requestAnimationFrame(this.flushAirLineRefresh)
+			this.applyAirLineRefresh(e)
 		}
 
 		visibleChanged = (entries: IntersectionObserverEntry[]) => {