fix(webui): Try and fix last popup preview leaks [copilot]

Author: PeterC89

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

@@ -60,11 +60,13 @@ export const PreviewPopUp = React.forwardRef<
 		}),
 		[padding]
 	)
+	const virtualPositionRef = useRef({
+		x: initialOffsetX ?? anchor?.getBoundingClientRect().x ?? 0,
+		y: anchor?.getBoundingClientRect().y ?? 0,
+	})
 	const virtualElement = useRef<VirtualElement>({
-		getBoundingClientRect: generateGetBoundingClientRect(
-			initialOffsetX ?? anchor?.getBoundingClientRect().x ?? 0,
-			anchor?.getBoundingClientRect().y ?? 0
-		),
+		getBoundingClientRect: () =>
+			generateVirtualBoundingClientRect(virtualPositionRef.current.x, virtualPositionRef.current.y),
 	})
 	const anchorRef = useRef(anchor)
 	const anchorYRef = useRef(anchor?.getBoundingClientRect().y ?? 0)
@@ -83,13 +85,17 @@ export const PreviewPopUp = React.forwardRef<
 	useEffect(() => {
 		anchorRef.current = anchor
 		anchorYRef.current = anchor?.getBoundingClientRect().y ?? 0
-	}, [anchor])
+		virtualPositionRef.current = {
+			x: initialOffsetX ?? anchor?.getBoundingClientRect().x ?? 0,
+			y: anchor?.getBoundingClientRect().y ?? 0,
+		}
+	}, [anchor, initialOffsetX])
 
 	useEffect(() => {
 		if (trackMouse) {
 			const listener = ({ clientX: x }: MouseEvent) => {
 				if (isDetachedHTMLElementAnchor(anchorRef.current)) return
-				virtualElement.current.getBoundingClientRect = generateGetBoundingClientRect(x, anchorYRef.current)
+				virtualPositionRef.current = { x, y: anchorYRef.current }
 				// If update is available, call it to reposition the popper:
 				if (updateRef.current) {
 					updateRef.current().catch((e) => console.error(e))
@@ -107,11 +113,7 @@ export const PreviewPopUp = React.forwardRef<
 		return () => {
 			anchorRef.current = null
 			anchorYRef.current = 0
-			// Clear the virtualElement completely to break closure references
-			if (virtualElement.current) {
-				virtualElement.current.getBoundingClientRect = generateGetBoundingClientRect(0, 0)
-				virtualElement.current = null as any
-			}
+			virtualPositionRef.current = { x: 0, y: 0 }
 			updateRef.current = null
 		}
 	}, [])
@@ -145,8 +147,8 @@ export type PreviewPopUpHandle = {
 	readonly update: () => void
 }
 
-function generateGetBoundingClientRect(x = 0, y = 0) {
-	return () => ({
+function generateVirtualBoundingClientRect(x = 0, y = 0) {
+	return {
 		width: 0,
 		height: 0,
 		x: x,
@@ -156,5 +158,5 @@ function generateGetBoundingClientRect(x = 0, y = 0) {
 		bottom: y,
 		left: x,
 		toJSON: () => '',
-	})
+	}
 }

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

@@ -379,6 +379,7 @@ export const PreviewPopUpContext = React.createContext<IPreviewPopUpContext>({
 })
 
 interface PreviewSession {
+	token: number
 	anchor: HTMLElement | VirtualElement
 	padding: Padding
 	placement: Placement
@@ -391,6 +392,7 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 	const currentHandle = useRef<IPreviewPopUpSession>()
 	const previewRef = useRef<PreviewPopUpHandle>(null)
 	const closeSessionRef = useRef<() => void>(() => undefined)
+	const sessionTokenRef = useRef(0)
 
 	const [previewSession, setPreviewSession] = useState<PreviewSession | null>(null)
 	const [previewContent, setPreviewContent] = useState<PreviewContentUI[] | null>(null)
@@ -402,6 +404,8 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 	}
 
 	const closeSession = useCallback(() => {
+		sessionTokenRef.current += 1
+
 		const previousHandle = currentHandle.current
 		if (previousHandle) {
 			currentHandle.current = undefined
@@ -425,11 +429,15 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 
 	useEffect(() => {
 		if (!previewSession) return
+		const token = previewSession.token
 		const anchor = previewSession.anchor
 		if (!(anchor instanceof HTMLElement)) return
 
 		let rafHandle: number | undefined
+		let disposed = false
 		const checkAnchorConnection = () => {
+			if (disposed) return
+			if (sessionTokenRef.current !== token) return
 			if (!anchor.isConnected) {
 				closeSessionRef.current()
 				return
@@ -440,6 +448,7 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 		rafHandle = window.requestAnimationFrame(checkAnchorConnection)
 
 		return () => {
+			disposed = true
 			if (rafHandle !== undefined) {
 				window.cancelAnimationFrame(rafHandle)
 			}
@@ -460,13 +469,15 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
 
 			closeSession()
 			setPreviewSessionKey((prev) => prev + 1)
+			const token = ++sessionTokenRef.current
 
 			if (opts?.time !== undefined) {
 				setTime(opts.time)
 			} else {
 				setTime(null)
 			}
 			setPreviewSession({
+				token,
 				anchor,
 				padding: opts?.padding ?? 0,
 				placement: opts?.placement ?? 'top',

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { relativeToSiteRootUrl } from '../../../url.js'
 
 interface IFramePreviewProps {
@@ -15,28 +15,24 @@ interface IFramePreviewProps {
 export function IFramePreview({ content }: IFramePreviewProps): React.ReactElement {
 	const iFrameElement = useRef<HTMLIFrameElement>(null)
 
-	const onLoadListener = useCallback(() => {
-		if (content.postMessage) {
-			// use * as URL reference to avoid cors when posting message with new reference:
-			iFrameElement.current?.contentWindow?.postMessage(content.postMessage, '*')
-		}
-	}, [content.postMessage, content.href])
-
 	useEffect(() => {
-		// Create a stable reference to the iframe element:
 		const currentIFrame = iFrameElement.current
 		if (!currentIFrame) return
-		currentIFrame.addEventListener('load', onLoadListener)
 
-		return () => currentIFrame.removeEventListener('load', onLoadListener)
-	}, [onLoadListener])
+		const postMessageToIFrame = () => {
+			if (content.postMessage) {
+				// use * as URL reference to avoid cors when posting message with new reference:
+				currentIFrame.contentWindow?.postMessage(content.postMessage, '*')
+			}
+		}
 
-	// Handle postMessage updates when iframe is already loaded
-	useEffect(() => {
-		if (content.postMessage && iFrameElement.current?.contentWindow) {
-			// use * as URL reference to avoid cors when posting message with new reference:
-			iFrameElement.current.contentWindow.postMessage(content.postMessage, '*')
+		currentIFrame.addEventListener('load', postMessageToIFrame)
+
+		if (currentIFrame.contentDocument?.readyState === 'complete') {
+			postMessageToIFrame()
 		}
+
+		return () => currentIFrame.removeEventListener('load', postMessageToIFrame)
 	}, [content.postMessage, content.href])
 
 	const style: Record<string, string | number> = {}

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import type { PartInvalidReason } from '@sofie-automation/corelib/dist/dataModel/Part'
 import { type IPreviewPopUpSession, PreviewPopUpContext } from '../../PreviewPopUp/PreviewPopUpContext.js'
 
@@ -12,12 +12,12 @@ interface IProps {
 }
 
 export function InvalidPartCover({ className, invalidReason }: Readonly<IProps>): JSX.Element {
-	const element = React.createRef<HTMLDivElement>()
+	const element = useRef<HTMLDivElement>(null)
 
 	const previewContext = useContext(PreviewPopUpContext)
 	const previewSession = useRef<IPreviewPopUpSession | null>(null)
 
-	function onMouseEnter(e: React.MouseEvent<HTMLDivElement>) {
+	function onMouseEnter() {
 		if (!element.current) {
 			return
 		}
@@ -28,7 +28,7 @@ export function InvalidPartCover({ className, invalidReason }: Readonly<IProps>)
 		}
 
 		if (invalidReason?.message && !previewSession.current) {
-			previewSession.current = previewContext.requestPreview(e.currentTarget, [
+			previewSession.current = previewContext.requestPreview(element.current, [
 				{
 					type: 'warning',
 					content: invalidReason.message,

packages/webui/src/client/ui/Shelf/DashboardPieceButton/usePreviewPopUpSession.ts

@@ -25,9 +25,11 @@ export function usePreviewPopUpSession(args: {
 } {
 	const previewSessionRef = useRef<IPreviewPopUpSession | null>(null)
 	const hoverTimeoutRef = useRef<number | null>(null)
+	const isMountedRef = useRef(true)
 
 	useEffect(() => {
 		return () => {
+			isMountedRef.current = false
 			if (hoverTimeoutRef.current) {
 				Meteor.clearTimeout(hoverTimeoutRef.current)
 				hoverTimeoutRef.current = null
@@ -48,6 +50,7 @@ export function usePreviewPopUpSession(args: {
 	const startHoverTimeout = useCallback(() => {
 		if (hoverTimeoutRef.current) Meteor.clearTimeout(hoverTimeoutRef.current)
 		hoverTimeoutRef.current = Meteor.setTimeout(() => {
+			if (!isMountedRef.current) return
 			if (previewSessionRef.current) {
 				previewSessionRef.current.close()
 				previewSessionRef.current = null