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

Author: PeterC89

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

@@ -199,7 +199,7 @@ export function VirtualElement({
 						}
 					}
 				} else {
-						if (ref) {
+					if (ref) {
 						resizeObserverManager.unobserve(ref)
 						isCurrentlyObserving.current = false
 					}
@@ -463,6 +463,7 @@ export class ElementObserverManager {
 
 	public observe(element: HTMLElement, callback: () => void): void {
 		if (!element) return
+		if (!document.contains(element)) return
 
 		this.observedElements.set(element, callback)
 		this.resizeObserver.observe(element)
@@ -481,6 +482,13 @@ export class ElementObserverManager {
 
 		// 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) {
 			this.resizeObserver.disconnect()
 			return

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

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

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import type { PartId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import type { AdLibAction } from '@sofie-automation/corelib/dist/dataModel/AdlibAction'
 import type { AdLibPiece } from '@sofie-automation/corelib/dist/dataModel/AdLibPiece'
@@ -20,6 +20,7 @@ interface IProps {
 
 export const LinePartAdLibIndicator: React.FC<IProps> = function LinePartAdLibIndicator({ sourceLayers, partId }) {
 	const { t } = useTranslation()
+	const revealTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
 
 	const sourceLayerIds = useMemo(() => sourceLayers.map((sourceLayer) => sourceLayer._id), [sourceLayers])
 	const label = useMemo(() => sourceLayers[0]?.name ?? '', [sourceLayers])
@@ -64,13 +65,22 @@ export const LinePartAdLibIndicator: React.FC<IProps> = function LinePartAdLibIn
 		RundownViewEventBus.emit(RundownViewEvents.SHELF_STATE, {
 			state: true,
 		})
-		setTimeout(() => {
+		revealTimeoutRef.current = setTimeout(() => {
 			RundownViewEventBus.emit(RundownViewEvents.REVEAL_IN_SHELF, {
 				pieceId: pieceId,
 			})
 		}, 100)
 	}, [adLibPieces, adLibActions])
 
+	useEffect(() => {
+		return () => {
+			if (revealTimeoutRef.current) {
+				clearTimeout(revealTimeoutRef.current)
+				revealTimeoutRef.current = undefined
+			}
+		}
+	}, [])
+
 	return (
 		<StudioContext.Consumer>
 			{(studio) => {

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

@@ -65,7 +65,7 @@ export function LinePartIndicator({
 		return () => {
 			window.removeEventListener('mousedown', onClickAway)
 		}
-	}, [])
+	}, [onClickAway])
 
 	return (
 		<>

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

@@ -81,6 +81,7 @@ class VTSourceRendererBase extends CustomLayerItemRenderer<IProps & WithTranslat
 
 	private mountAuxiliaryNode(node: HTMLSpanElement | null, target: HTMLElement | null): void {
 		if (!node || !target) return
+		if (!document.contains(target)) return
 
 		if (node.parentElement !== target) {
 			this.removeAuxiliaryNode(node)
@@ -92,7 +93,15 @@ class VTSourceRendererBase extends CustomLayerItemRenderer<IProps & WithTranslat
 		if (!itemElement) return null
 
 		if (this.getItemDuration(true) === Number.POSITIVE_INFINITY) {
-			return itemElement.parentElement?.parentElement?.parentElement ?? null
+			const target = itemElement.parentElement?.parentElement?.parentElement ?? null
+			if (target && !document.contains(target)) {
+				return null
+			}
+			return target
+		}
+
+		if (!document.contains(itemElement)) {
+			return null
 		}
 
 		return itemElement
@@ -101,12 +110,19 @@ class VTSourceRendererBase extends CustomLayerItemRenderer<IProps & WithTranslat
 	private getCountdownTarget(itemElement: HTMLElement | null): HTMLElement | null {
 		if (!itemElement) return null
 
-
 		const liveLine =
 			itemElement.parentElement?.parentElement?.parentElement?.parentElement?.parentElement?.querySelector(
 				'.segment-timeline__liveline'
 			)
-		return liveLine instanceof HTMLElement ? liveLine : null
+		if (!(liveLine instanceof HTMLElement)) {
+			return null
+		}
+
+		if (!document.contains(liveLine)) {
+			return null
+		}
+
+		return liveLine
 	}
 
 	getItemLabelOffsetRight(): React.CSSProperties {

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

@@ -9,7 +9,7 @@ import {
 import { UIStateStorage } from '../../lib/UIStateStorage.js'
 import { SpeechSynthesiser } from '../../lib/speechSynthesis.js'
 import { getElementWidth } from '../../utils/dimensions.js'
-import { isMaintainingFocus, scrollToSegment, getHeaderHeight } from '../../lib/viewPort.js'
+import { isMaintainingFocus, scrollToSegment, getHeaderHeight, resetViewportScrollState } from '../../lib/viewPort.js'
 import { unprotectString } from '@sofie-automation/shared-lib/dist/lib/protectedString'
 import { equivalentArrays } from '@sofie-automation/shared-lib/dist/lib/lib'
 import { Settings } from '../../lib/Settings.js'
@@ -353,6 +353,13 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 				if (typeof this.props.onSegmentScroll === 'function') this.props.onSegmentScroll()
 			}
 
+			if (this.visibilityChangeTimeout) {
+				clearTimeout(this.visibilityChangeTimeout)
+				this.visibilityChangeTimeout = undefined
+			}
+
+			resetViewportScrollState()
+
 			this.stopLive()
 			RundownViewEventBus.off(RundownViewEvents.REWIND_SEGMENTS, this.onRewindSegment)
 			RundownViewEventBus.off(RundownViewEvents.GO_TO_PART, this.onGoToPart)