feat: Improve timeline rendering logic

Author: PeterC89

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

@@ -608,10 +608,11 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 	private timelineStyle(outputGroups: IOutputLayerUi[]) {
 		const showHiddenSourceLayers = getShowHiddenSourceLayers()
 		const budgetDuration = this.getSegmentBudgetDuration()
+		const scrollLeftPx = Math.round(this.convertTimeToPixels(this.props.scrollLeft))
 
 		return {
 			willChange: this.props.isLiveSegment ? 'transform' : 'none',
-			transform: 'translateX(-' + this.convertTimeToPixels(this.props.scrollLeft).toString() + 'px)',
+			transform: `translate3d(-${scrollLeftPx}px, 0, 0)`,
 			height: `calc(${outputGroups.reduce(
 				(mem, group) =>
 					mem +

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

@@ -149,6 +149,8 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		intersectionObserver: IntersectionObserver | undefined
 		mountedTime = 0
 		nextPartOffset = 0
+		liveLineRefreshFrame: number | undefined
+		pendingLiveLineRefreshEvent: TimingEvent | undefined
 
 		constructor(props: IProps & ITrackedResolvedSegmentProps) {
 			super(props)
@@ -354,6 +356,11 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 			}
 
 			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)
@@ -491,7 +498,14 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 			}
 		}
 
-		onAirLineRefresh = (e: TimingEvent) => {
+		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
@@ -534,6 +548,12 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 			})
 		}
 
+		onAirLineRefresh = (e: TimingEvent) => {
+			this.pendingLiveLineRefreshEvent = e
+			if (this.liveLineRefreshFrame !== undefined) return
+			this.liveLineRefreshFrame = window.requestAnimationFrame(this.flushAirLineRefresh)
+		}
+
 		visibleChanged = (entries: IntersectionObserverEntry[]) => {
 			// Add a small debounce to ensure UI has settled before checking
 			if (this.visibilityChangeTimeout) {