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

Author: PeterC89

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

@@ -440,6 +440,11 @@ export class ElementObserverManager {
 		this.resizeObserver = new ResizeObserver((entries) => {
 			entries.forEach((entry) => {
 				const element = entry.target as HTMLElement
+				if (!document.contains(element)) {
+					this.observedElements.delete(element)
+					this.resizeObserver.unobserve(element)
+					return
+				}
 				const callback = this.observedElements.get(element)
 				if (callback) {
 					callback()
@@ -478,6 +483,11 @@ export class ElementObserverManager {
 			})
 
 			targets.forEach((element) => {
+				if (!document.contains(element)) {
+					this.observedElements.delete(element)
+					this.resizeObserver.unobserve(element)
+					return
+				}
 				const callback = this.observedElements.get(element)
 				if (callback) callback()
 			})

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

@@ -25,7 +25,11 @@ import { useBlackBrowserTheme } from '../../../lib/useBlackBrowserTheme.js'
 import { useWakeLock } from './useWakeLock.js'
 import { useDebounce } from '../../../lib/lib.js'
 import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
-import { useSetDocumentClass, useSetDocumentDarkTheme } from '../../util/useSetDocumentClass.js'
+import {
+	useSetDocumentClass,
+	useSetDocumentDarkTheme,
+	useOwnedElementClassToggle,
+} from '../../util/useSetDocumentClass.js'
 import type { UIStudio } from '@sofie-automation/corelib/src/dataModel/Studio.js'
 import type { PartInstance } from '@sofie-automation/corelib/src/dataModel/PartInstance.js'
 import type { PieceExtended } from '@sofie-automation/corelib/src/dataModel/Piece.js'
@@ -145,21 +149,7 @@ export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Elem
 
 	useSetDocumentClass('dark', 'xdark', 'vertical-overflow-only')
 	useSetDocumentDarkTheme()
-
-	useEffect(() => {
-		const getContainerEl = () => document.querySelector('#render-target > .container-fluid')
-		const currentContainerEl = getContainerEl()
-		if (currentContainerEl instanceof HTMLElement && currentContainerEl.isConnected) {
-			currentContainerEl.classList.remove('header-clear')
-		}
-
-		return () => {
-			const cleanupContainerEl = getContainerEl()
-			if (cleanupContainerEl instanceof HTMLElement && cleanupContainerEl.isConnected) {
-				cleanupContainerEl.classList.add('header-clear')
-			}
-		}
-	}, [])
+	useOwnedElementClassToggle('#render-target > .container-fluid', 'header-clear')
 
 	const studio = useTracker(() => UIStudios.findOne(studioId), [studioId], undefined)
 

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

@@ -5,6 +5,10 @@ import type { Padding, Placement, VirtualElement } from '@popperjs/core'
 
 import './PreviewPopUp.scss'
 
+function isDetachedHTMLElementAnchor(anchor: HTMLElement | VirtualElement | null): anchor is HTMLElement {
+	return anchor instanceof HTMLElement && !anchor.isConnected
+}
+
 export const PreviewPopUp = React.forwardRef<
 	PreviewPopUpHandle,
 	React.PropsWithChildren<{
@@ -62,6 +66,7 @@ export const PreviewPopUp = React.forwardRef<
 			anchor?.getBoundingClientRect().y ?? 0
 		),
 	})
+	const anchorRef = useRef(anchor)
 	const anchorYRef = useRef(anchor?.getBoundingClientRect().y ?? 0)
 	const { styles, attributes, update } = usePopper(
 		trackMouse ? virtualElement.current : anchor,
@@ -76,12 +81,14 @@ export const PreviewPopUp = React.forwardRef<
 	}, [update])
 
 	useEffect(() => {
+		anchorRef.current = anchor
 		anchorYRef.current = anchor?.getBoundingClientRect().y ?? 0
 	}, [anchor])
 
 	useEffect(() => {
 		if (trackMouse) {
 			const listener = ({ clientX: x }: MouseEvent) => {
+				if (isDetachedHTMLElementAnchor(anchorRef.current)) return
 				virtualElement.current.getBoundingClientRect = generateGetBoundingClientRect(x, anchorYRef.current)
 				// If update is available, call it to reposition the popper:
 				if (updateRef.current) {
@@ -107,6 +114,7 @@ export const PreviewPopUp = React.forwardRef<
 	useImperativeHandle(ref, () => {
 		return {
 			update: () => {
+				if (isDetachedHTMLElementAnchor(anchorRef.current)) return
 				if (!updateRef.current) return
 				updateRef.current().catch(console.error)
 			},

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

@@ -395,6 +395,10 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 	const [t, setTime] = useState<number | null>(null)
 	const [previewSessionKey, setPreviewSessionKey] = useState(0)
 
+	const isDetachedHTMLElement = (anchor: HTMLElement | VirtualElement): boolean => {
+		return anchor instanceof HTMLElement && !anchor.isConnected
+	}
+
 	const closeSession = useCallback(() => {
 		const previousHandle = currentHandle.current
 		if (previousHandle) {
@@ -415,6 +419,16 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 
 	const context: IPreviewPopUpContext = {
 		requestPreview: (anchor, content, opts) => {
+			if (isDetachedHTMLElement(anchor)) {
+				closeSession()
+				const closedHandle: IPreviewPopUpSession = {
+					close: () => undefined,
+					update: () => undefined,
+					setPointerTime: () => undefined,
+				}
+				return closedHandle
+			}
+
 			closeSession()
 			setPreviewSessionKey((prev) => prev + 1)
 
@@ -437,13 +451,21 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 				close: closeSession,
 				update: (contents) => {
 					if (currentHandle.current !== handle) return
+					if (isDetachedHTMLElement(anchor)) {
+						closeSession()
+						return
+					}
 					if (contents) {
 						setPreviewContent(contents)
 					}
 					previewRef.current?.update()
 				},
 				setPointerTime: (t) => {
 					if (currentHandle.current !== handle) return
+					if (isDetachedHTMLElement(anchor)) {
+						closeSession()
+						return
+					}
 					setTime(t)
 				},
 			}

packages/webui/src/client/ui/util/useSetDocumentClass.ts

@@ -1,4 +1,5 @@
 import { useLayoutEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 /**
  * Adds the provided classes to `document.body` upon mount, and removes them when unmounted
@@ -23,3 +24,38 @@ export function useSetDocumentDarkTheme(): void {
 		}
 	}, [])
 }
+
+/**
+ * Removes a class from an element on mount and adds it back on unmount,
+ * but only if this hook instance removed it.
+ */
+export function useOwnedElementClassToggle(
+	selector: string,
+	className: string,
+	removeOnMount = true
+): void {
+	const removedByHookRef = useRef(false)
+
+	useEffect(() => {
+		const element = document.querySelector(selector)
+		if (element instanceof HTMLElement && element.isConnected && removeOnMount) {
+			removedByHookRef.current = element.classList.contains(className)
+			if (removedByHookRef.current) {
+				element.classList.remove(className)
+			}
+		}
+
+		return () => {
+			const cleanupElement = document.querySelector(selector)
+			if (
+				removedByHookRef.current &&
+				cleanupElement instanceof HTMLElement &&
+				cleanupElement.isConnected
+			) {
+				cleanupElement.classList.add(className)
+			}
+
+			removedByHookRef.current = false
+		}
+	}, [selector, className, removeOnMount])
+}