Merge branch 'fix-memory-leaks' into bbc-main-autonext

Author: PeterC89

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

@@ -356,6 +356,8 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 
 		componentWillUnmount(): void {
 			this.isUnmounted = true
+			this.timelineDiv = null
+			this.rundownCurrentPartInstanceId = null
 			if (this.intersectionObserver && this.state.isLiveSegment && this.props.followLiveSegments) {
 				if (typeof this.props.onSegmentScroll === 'function') this.props.onSegmentScroll()
 			}
@@ -380,6 +382,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 			RundownViewEventBus.off(RundownViewEvents.REWIND_SEGMENTS, this.onRewindSegment)
 			RundownViewEventBus.off(RundownViewEvents.GO_TO_PART, this.onGoToPart)
 			RundownViewEventBus.off(RundownViewEvents.GO_TO_PART_INSTANCE, this.onGoToPartInstance)
+			this.onWindowResize.cancel()
 			window.removeEventListener('resize', this.onWindowResize)
 		}
 
@@ -396,6 +399,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}, 250)
 
 		onTimeScaleChange = (timeScaleVal: number) => {
+			if (this.isUnmounted) return
 			if (Number.isFinite(timeScaleVal) && timeScaleVal > 0) {
 				this.setState((state) => ({
 					timeScale: timeScaleVal,
@@ -405,6 +409,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 
 		onCollapseOutputToggle = (outputLayer: IOutputLayerUi) => {
+			if (this.isUnmounted) return
 			const collapsedOutputs = { ...this.state.collapsedOutputs }
 			collapsedOutputs[outputLayer._id] =
 				outputLayer.isDefaultCollapsed && collapsedOutputs[outputLayer._id] === undefined
@@ -419,6 +424,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 		/** The user has scrolled scrollLeft seconds to the left in a child component */
 		onScroll = (scrollLeft: number) => {
+			if (this.isUnmounted) return
 			this.setState({
 				scrollLeft: Math.max(
 					0,
@@ -434,6 +440,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 
 		onRewindSegment = () => {
+			if (this.isUnmounted) return
 			if (!this.state.isLiveSegment) {
 				this.updateMaxTimeScale()
 					.then(() => {
@@ -448,6 +455,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 
 		onGoToPartInner = (part: PartUi, zoomInToFit?: boolean) => {
+			if (this.isUnmounted) return
 			this.setState((state) => {
 				const timelineWidth = this.timelineDiv instanceof HTMLElement ? getElementWidth(this.timelineDiv) : 0 // unsure if this is good default/substitute
 				let newScale: number | undefined