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

Author: PeterC89

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContext.tsx

@@ -460,7 +460,7 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 			closeSession()
 			setPreviewSessionKey((prev) => prev + 1)
 
-			if (opts?.time) {
+			if (opts?.time !== undefined) {
 				setTime(opts.time)
 			} else {
 				setTime(null)
@@ -476,7 +476,10 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 			setPreviewContent(content)
 
 			const handle: IPreviewPopUpSession = {
-				close: closeSession,
+				close: () => {
+					if (currentHandle.current !== handle) return
+					closeSession()
+				},
 				update: (contents) => {
 					if (currentHandle.current !== handle) return
 					if (isDetachedHTMLElement(anchor)) {

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

@@ -69,7 +69,6 @@ interface IProps {
 	studio: UIStudio
 	part: PartUi
 	timeToPixelRatio: number
-	onCollapseOutputToggle?: (layer: IOutputLayerUi, event: any) => void
 	collapsedOutputs: {
 		[key: string]: boolean
 	}

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

@@ -285,6 +285,10 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 		RundownViewEventBus.off(RundownViewEvents.HIGHLIGHT, this.onHighlight)
 		RundownViewEventBus.off(RundownViewEvents.SEGMENT_ZOOM_ON, this.onRundownEventSegmentZoomOn)
 		RundownViewEventBus.off(RundownViewEvents.SEGMENT_ZOOM_OFF, this.onRundownEventSegmentZoomOff)
+
+		// Break any remaining references to detached DOM elements.
+		this.timeline = null
+		this.segmentBlock = null
 	}
 
 	private highlightTimeout: NodeJS.Timeout | undefined
@@ -766,7 +770,6 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 						liveLineHistorySize={this.props.liveLineHistorySize}
 						livePosition={this.props.livePosition}
 						onScroll={this.props.onScroll}
-						onCollapseOutputToggle={this.props.onCollapseOutputToggle}
 						onFollowLiveLine={this.props.onFollowLiveLine}
 						onContextMenu={this.props.onContextMenu}
 						onPieceClick={this.props.onPieceClick}
@@ -842,7 +845,6 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 				liveLineHistorySize={this.props.liveLineHistorySize}
 				livePosition={this.props.livePosition}
 				onScroll={this.props.onScroll}
-				onCollapseOutputToggle={this.props.onCollapseOutputToggle}
 				onFollowLiveLine={this.props.onFollowLiveLine}
 				onContextMenu={this.props.onContextMenu}
 				onPieceClick={this.props.onPieceClick}
@@ -873,6 +875,20 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 			.sort((a, b) => a._rank - b._rank)
 	}
 
+	private isOutputLayerCollapsible(outputLayer: IOutputLayerUi): boolean {
+		return outputLayer.sourceLayers !== undefined && outputLayer.sourceLayers.length > 1 && !outputLayer.isFlattened
+	}
+
+	private onOutputLayerLabelClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		const outputLayerId = e.currentTarget.dataset.outputId
+		if (!outputLayerId) return
+
+		const outputLayer = this.props.segment.outputLayers?.[outputLayerId]
+		if (!outputLayer || !this.isOutputLayerCollapsible(outputLayer)) return
+
+		this.props.onCollapseOutputToggle?.(outputLayer, e)
+	}
+
 	private renderOutputLayerControls(outputGroups: IOutputLayerUi[]) {
 		const showHiddenSourceLayers = getShowHiddenSourceLayers()
 
@@ -881,8 +897,7 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 				return null
 			}
 
-			const isCollapsible =
-				outputLayer.sourceLayers !== undefined && outputLayer.sourceLayers.length > 1 && !outputLayer.isFlattened
+			const isCollapsible = this.isOutputLayerCollapsible(outputLayer)
 			return (
 				<div
 					key={outputLayer._id}
@@ -898,7 +913,7 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 						className="segment-timeline__output-layer-control__label"
 						data-output-id={outputLayer._id}
 						tabIndex={0}
-						onClick={(e) => isCollapsible && this.props.onCollapseOutputToggle?.(outputLayer, e)}
+						onClick={this.onOutputLayerLabelClick}
 						role="presentation"
 					>
 						{outputLayer.name}