fix(webui): More fixes [copilot]

Author: PeterC89

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

@@ -76,6 +76,13 @@ export function VirtualElement({
 	const isTransitioning = useRef(false)
 
 	const isCurrentlyObserving = useRef(false)
+	const isMountedRef = useRef(true)
+
+	useEffect(() => {
+		return () => {
+			isMountedRef.current = false
+		}
+	}, [])
 
 	const styleObj = useMemo<React.CSSProperties>(
 		() => ({
@@ -91,11 +98,13 @@ export function VirtualElement({
 	)
 
 	const handleResize = useCallback(() => {
+		if (!isMountedRef.current) return
 		if (ref) {
 			// Show children during measurement
 			setIsShowingChildren(true)
 
 			requestAnimationFrame(() => {
+				if (!isMountedRef.current) return
 				const measurements = measureElement(ref, placeholderHeight)
 				if (measurements) {
 					setMeasurements(measurements)
@@ -296,6 +305,7 @@ export function VirtualElement({
 			}
 			idleCallback = window.requestIdleCallback(
 				() => {
+					if (!isMountedRef.current) return
 					// Measure the entire wrapper element instead of just the childRef
 					if (ref) {
 						const measurements = measureElement(ref, placeholderHeight)
@@ -495,6 +505,7 @@ export class ElementObserverManager {
 		this.observedElements.delete(element)
 		this.resizeObserver.unobserve(element)
 		this.pruneDetachedObservedElements()
+		this.mutationObserver.disconnect()
 
 		if (this.observedElements.size === 0) {
 			if (this.pendingReconnectFrame) {
@@ -511,7 +522,6 @@ export class ElementObserverManager {
 				this.pendingReconnectFrame = undefined
 
 				// MutationObserver has no per-element unobserve, so we reconnect once per frame.
-				this.mutationObserver.disconnect()
 				this.pruneDetachedObservedElements()
 
 				if (this.observedElements.size === 0) {
@@ -520,6 +530,7 @@ export class ElementObserverManager {
 				}
 
 				this.observedElements.forEach((_, el) => {
+					if (!document.contains(el)) return
 					this.mutationObserver.observe(el, {
 						childList: true,
 						subtree: true,

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

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

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

@@ -62,6 +62,7 @@ export const PreviewPopUp = React.forwardRef<
 			anchor?.getBoundingClientRect().y ?? 0
 		),
 	})
+	const anchorYRef = useRef(anchor?.getBoundingClientRect().y ?? 0)
 	const { styles, attributes, update } = usePopper(
 		trackMouse ? virtualElement.current : anchor,
 		popperEl,
@@ -74,13 +75,14 @@ export const PreviewPopUp = React.forwardRef<
 		updateRef.current = update
 	}, [update])
 
+	useEffect(() => {
+		anchorYRef.current = anchor?.getBoundingClientRect().y ?? 0
+	}, [anchor])
+
 	useEffect(() => {
 		if (trackMouse) {
 			const listener = ({ clientX: x }: MouseEvent) => {
-				virtualElement.current.getBoundingClientRect = generateGetBoundingClientRect(
-					x,
-					anchor?.getBoundingClientRect().y ?? 0
-				)
+				virtualElement.current.getBoundingClientRect = generateGetBoundingClientRect(x, anchorYRef.current)
 				// If update is available, call it to reposition the popper:
 				if (updateRef.current) {
 					updateRef.current().catch((e) => console.error(e))
@@ -92,7 +94,7 @@ export const PreviewPopUp = React.forwardRef<
 				document.removeEventListener('mousemove', listener)
 			}
 		}
-	}, [trackMouse, anchor])
+	}, [trackMouse])
 
 	useImperativeHandle(ref, () => {
 		return {

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

@@ -151,6 +151,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		intersectionObserver: IntersectionObserver | undefined
 		mountedTime = 0
 		nextPartOffset = 0
+		isUnmounted = false
 
 		constructor(props: IProps & ITrackedResolvedSegmentProps) {
 			super(props)
@@ -185,6 +186,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 
 		componentDidMount(): void {
+			this.isUnmounted = false
 			SpeechSynthesiser.init()
 
 			this.rundownCurrentPartInstanceId = this.props.playlist.currentPartInfo?.partInstanceId ?? null
@@ -353,6 +355,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 
 		componentWillUnmount(): void {
+			this.isUnmounted = true
 			if (this.intersectionObserver && this.state.isLiveSegment && this.props.followLiveSegments) {
 				if (typeof this.props.onSegmentScroll === 'function') this.props.onSegmentScroll()
 			}
@@ -512,6 +515,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 
 		onAirLineRefresh = (e: TimingEvent) => {
+			if (this.isUnmounted) return
 			this.setState((state) => {
 				if (state.isLiveSegment && state.currentLivePart) {
 					const currentLivePartInstance = state.currentLivePart.instance
@@ -555,12 +559,14 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 
 		visibleChanged = (entries: IntersectionObserverEntry[]) => {
+			if (this.isUnmounted) return
 			// Add a small debounce to ensure UI has settled before checking
 			if (this.visibilityChangeTimeout) {
 				clearTimeout(this.visibilityChangeTimeout)
 			}
 
 			this.visibilityChangeTimeout = setTimeout(() => {
+				if (this.isUnmounted) return
 				if (entries[0].intersectionRatio < 0.99 && !isMaintainingFocus() && Date.now() - this.mountedTime > 2000) {
 					if (typeof this.props.onSegmentScroll === 'function') this.props.onSegmentScroll()
 					this.isVisible = false