fix: constant re-rendering and possible lost evenlisteners in hover

Author: olzzon

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

@@ -80,15 +80,18 @@ export const PreviewPopUp = React.forwardRef<
 					x,
 					anchor?.getBoundingClientRect().y ?? 0
 				)
-				if (update) update().catch((e) => console.error(e))
+				// If update is available, call it to reposition the popper:
+				if (updateRef.current) {
+					updateRef.current().catch((e) => console.error(e))
+				}
 			}
 			document.addEventListener('mousemove', listener)
 
 			return () => {
 				document.removeEventListener('mousemove', listener)
 			}
 		}
-	}, [update, anchor])
+	}, [trackMouse, anchor])
 
 	useImperativeHandle(ref, () => {
 		return {

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

@@ -20,15 +20,16 @@ export function IFramePreview({ content }: IFramePreviewProps): React.ReactEleme
 			const url = new URL(content.href)
 			iFrameElement.current?.contentWindow?.postMessage(content.postMessage, url.origin)
 		}
-	}, [])
+	}, [content.postMessage, content.href])
 
 	useEffect(() => {
-		if (!iFrameElement) return
+		// Create a stable reference to the iframe element:
+		const currentIFrame = iFrameElement.current
+		if (!currentIFrame) return
+		currentIFrame.addEventListener('load', onLoadListener)
 
-		iFrameElement.current?.addEventListener('load', onLoadListener)
-
-		return () => iFrameElement.current?.removeEventListener('load', onLoadListener)
-	}, [iFrameElement.current, onLoadListener])
+		return () => currentIFrame.removeEventListener('load', onLoadListener)
+	}, [onLoadListener])
 
 	const style: Record<string, string | number> = {}
 	if (content.dimensions) {

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

@@ -36,16 +36,18 @@ export function VTPreviewElement({ content, time }: VTPreviewProps): React.React
 	const studioContext = useContext(StudioContext)
 
 	useEffect(() => {
-		if (!videoElement.current) return
+		// Create a stable reference to the video element:
+		const currentVideoElement = videoElement.current
+		if (!currentVideoElement) return
 
 		setVideoElementPosition(
-			videoElement.current,
+			currentVideoElement,
 			time ?? 0,
 			content.itemDuration ?? 0,
 			content.seek ?? 0,
 			content.loop ?? false
 		)
-	}, [videoElement.current, time])
+	}, [time, content.itemDuration, content.seek, content.loop])
 
 	const itemDuration = content.itemDuration ?? 0
 	const offsetTimePosition = (time ?? 0) + (content.seek ?? 0)