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

Author: PeterC89

packages/webui/src/client/lib/VirtualElement.tsx

@@ -413,6 +413,7 @@ export class ElementObserverManager {
 	private resizeObserver: ResizeObserver
 	private mutationObserver: MutationObserver
 	private observedElements: Map<HTMLElement, () => void>
+	private pendingReconnectFrame: number | undefined
 
 	private constructor() {
 		this.observedElements = new Map()
@@ -467,40 +468,58 @@ export class ElementObserverManager {
 
 		this.observedElements.set(element, callback)
 		this.resizeObserver.observe(element)
-		this.mutationObserver.observe(element, {
-			childList: true,
-			subtree: true,
-			attributes: true,
-			characterData: true,
-		})
+		if (!this.pendingReconnectFrame) {
+			this.mutationObserver.observe(element, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				characterData: true,
+			})
+		}
 	}
 
 	public unobserve(element: HTMLElement): void {
 		if (!element) return
 		this.observedElements.delete(element)
 		this.resizeObserver.unobserve(element)
 
-		// Disconnect and reconnect mutation observer to refresh the list of observed elements
-		this.mutationObserver.disconnect()
-		for (const observedElement of this.observedElements.keys()) {
-			if (!document.contains(observedElement)) {
-				this.observedElements.delete(observedElement)
-				this.resizeObserver.unobserve(observedElement)
-			}
-		}
-
 		if (this.observedElements.size === 0) {
+			if (this.pendingReconnectFrame) {
+				window.cancelAnimationFrame(this.pendingReconnectFrame)
+				this.pendingReconnectFrame = undefined
+			}
+			this.mutationObserver.disconnect()
 			this.resizeObserver.disconnect()
 			return
 		}
 
-		this.observedElements.forEach((_, el) => {
-			this.mutationObserver.observe(el, {
-				childList: true,
-				subtree: true,
-				attributes: true,
-				characterData: true,
+		if (!this.pendingReconnectFrame) {
+			this.pendingReconnectFrame = window.requestAnimationFrame(() => {
+				this.pendingReconnectFrame = undefined
+
+				// MutationObserver has no per-element unobserve, so we reconnect once per frame.
+				this.mutationObserver.disconnect()
+				for (const observedElement of this.observedElements.keys()) {
+					if (!document.contains(observedElement)) {
+						this.observedElements.delete(observedElement)
+						this.resizeObserver.unobserve(observedElement)
+					}
+				}
+
+				if (this.observedElements.size === 0) {
+					this.resizeObserver.disconnect()
+					return
+				}
+
+				this.observedElements.forEach((_, el) => {
+					this.mutationObserver.observe(el, {
+						childList: true,
+						subtree: true,
+						attributes: true,
+						characterData: true,
+					})
+				})
 			})
-		})
+		}
 	}
 }

packages/webui/src/client/ui/ClockView/CameraScreen/index.tsx

@@ -147,13 +147,18 @@ export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Elem
 	useSetDocumentDarkTheme()
 
 	useEffect(() => {
-		const getContainerEl = () => document.querySelector('#render-target > .container-fluid.header-clear')
+		const getContainerEl = () => document.querySelector('#render-target > .container-fluid')
 		const containerEl = getContainerEl()
-		if (containerEl) containerEl.classList.remove('header-clear')
+		if (containerEl instanceof HTMLElement) containerEl.classList.remove('header-clear')
 
 		return () => {
+			if (containerEl instanceof HTMLElement && containerEl.isConnected) {
+				containerEl.classList.add('header-clear')
+				return
+			}
+
 			const currentContainerEl = getContainerEl()
-			if (currentContainerEl && currentContainerEl === containerEl) {
+			if (currentContainerEl instanceof HTMLElement) {
 				currentContainerEl.classList.add('header-clear')
 			}
 		}

packages/webui/src/client/ui/SegmentList/LinePartMainPiece/LinePartMainPiece.tsx

@@ -1,5 +1,5 @@
 import { type EvsContent, SourceLayerType } from '@sofie-automation/blueprints-integration'
-import React, { useContext, useMemo, useRef, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 // TODO: Move to a shared lib file
 import type { PartId, PartInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import classNames from 'classnames'
@@ -162,6 +162,15 @@ export function LinePartMainPiece({
 		}
 	}
 
+	useEffect(() => {
+		return () => {
+			if (previewSession.current) {
+				previewSession.current.close()
+				previewSession.current = null
+			}
+		}
+	}, [])
+
 	const onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
 		if (e.pointerType !== 'mouse') {
 			return

packages/webui/src/client/ui/SegmentList/LinePartPieceIndicator/LinePartScriptPiece.tsx

@@ -1,5 +1,5 @@
 import { SourceLayerType } from '@sofie-automation/blueprints-integration'
-import { useContext, useMemo, useRef } from 'react'
+import { useContext, useEffect, useMemo, useRef } from 'react'
 import {
 	PreviewPopUpContext,
 	type IPreviewPopUpSession,
@@ -44,6 +44,15 @@ export function LinePartScriptPiece({ pieces }: IProps): JSX.Element {
 			})
 	}
 
+	useEffect(() => {
+		return () => {
+			if (previewSession.current) {
+				previewSession.current.close()
+				previewSession.current = null
+			}
+		}
+	}, [])
+
 	function onMouseLeave() {
 		if (previewSession.current) {
 			previewSession.current.close()

packages/webui/src/client/ui/SegmentList/LinePartSecondaryPiece/LinePartSecondaryPiece.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import React, { type CSSProperties, useCallback, useContext, useMemo, useRef } from 'react'
+import React, { type CSSProperties, useCallback, useContext, useEffect, useMemo, useRef } from 'react'
 import { useContentStatusForPieceInstance } from '../../SegmentTimeline/withMediaObjectStatus.js'
 import {
 	PreviewPopUpContext,
@@ -64,6 +64,15 @@ export const LinePartSecondaryPiece: React.FC<IProps> = React.memo(function Line
 			})
 	}
 
+	useEffect(() => {
+		return () => {
+			if (previewSession.current) {
+				previewSession.current.close()
+				previewSession.current = null
+			}
+		}
+	}, [])
+
 	const onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
 		if (e.pointerType !== 'mouse') {
 			return

packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartSecondaryPieces/StoryboardSecondaryPiece.tsx

@@ -1,4 +1,4 @@
-import { useImperativeHandle, useContext, useRef, useState, type RefObject } from 'react'
+import { useImperativeHandle, useContext, useEffect, useRef, useState, type RefObject } from 'react'
 import { type ISourceLayer, SourceLayerType } from '@sofie-automation/blueprints-integration'
 import { DefaultRenderer } from './Renderers/DefaultRenderer.js'
 import { assertNever } from '@sofie-automation/corelib/dist/lib'
@@ -129,6 +129,15 @@ export function StoryboardSecondaryPiece(props: IProps): JSX.Element {
 		if (onPointerEnterCallback) onPointerEnterCallback(e)
 	}
 
+	useEffect(() => {
+		return () => {
+			if (previewSession.current) {
+				previewSession.current.close()
+				previewSession.current = null
+			}
+		}
+	}, [])
+
 	const onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
 		setHovering(null)
 

packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnailInner.tsx

@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import type { ISourceLayer } from '@sofie-automation/blueprints-integration'
 import { getElementDocumentOffset, type OffsetPosition } from '../../../utils/positions.js'
 import { getElementHeight, getElementWidth } from '../../../utils/dimensions.js'
@@ -83,6 +83,15 @@ export function StoryboardPartThumbnailInner({
 			})
 	}
 
+	useEffect(() => {
+		return () => {
+			if (previewSession.current) {
+				previewSession.current.close()
+				previewSession.current = null
+			}
+		}
+	}, [])
+
 	const onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
 		if (e.pointerType !== 'mouse') {
 			return

packages/webui/src/client/ui/Shelf/Renderers/L3rdListItemRenderer.tsx

@@ -130,6 +130,15 @@ export const L3rdListItemRenderer: React.FunctionComponent<ILayerItemRendererPro
 		}
 	}
 
+	useEffect(() => {
+		return () => {
+			if (previewSession.current) {
+				previewSession.current.close()
+				previewSession.current = null
+			}
+		}
+	}, [])
+
 	const type = props.adLibListItem.isAction
 		? props.adLibListItem.isGlobal
 			? 'rundownBaselineAdLibAction'

packages/webui/src/client/ui/Shelf/Renderers/VTListItemRenderer.tsx

@@ -89,12 +89,25 @@ export const VTListItemRenderer: React.FunctionComponent<ILayerItemRendererProps
 		}
 	}
 
+	useEffect(() => {
+		return () => {
+			if (previewSession.current) {
+				previewSession.current.close()
+				previewSession.current = null
+			}
+		}
+	}, [])
+
 	const handleOnMouseMove = (e: React.MouseEvent) => {
 		if (itemIconPosition) {
 			const left = e.pageX - itemIconPosition.left
 			let unprocessedPercentage = left / itemIconPosition.width
 			if ((unprocessedPercentage > 1 || unprocessedPercentage < 0) && showMiniInspector) {
 				setShowMiniInspector(false)
+				if (previewSession.current) {
+					previewSession.current.close()
+					previewSession.current = null
+				}
 				return false
 			} else if (unprocessedPercentage >= 0 && unprocessedPercentage <= 1 && !showMiniInspector) {
 				setShowMiniInspector(true)