fix(webui): More fixes [copilot]

Author: PeterC89

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

@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import type { PartInvalidReason } from '@sofie-automation/corelib/dist/dataModel/Part'
 import { type IPreviewPopUpSession, PreviewPopUpContext } from '../../PreviewPopUp/PreviewPopUpContext.js'
 
@@ -39,6 +39,15 @@ export function InvalidPartCover({ className, invalidReason }: Readonly<IProps>)
 		}
 	}
 
+	useEffect(() => {
+		return () => {
+			if (previewSession.current) {
+				previewSession.current.close()
+				previewSession.current = null
+			}
+		}
+	}, [])
+
 	return (
 		<div className={className} ref={element} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
 			{/* TODOD - add back hover with warnings */}

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

@@ -248,7 +248,8 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 		RundownViewEventBus.on(RundownViewEvents.SEGMENT_ZOOM_ON, this.onRundownEventSegmentZoomOn)
 		RundownViewEventBus.on(RundownViewEvents.SEGMENT_ZOOM_OFF, this.onRundownEventSegmentZoomOff)
 
-		setTimeout(() => {
+		this.showEntireSegmentTimeout = setTimeout(() => {
+			this.showEntireSegmentTimeout = undefined
 			// TODO: This doesn't actually handle having new parts added/removed, which should cause the segment to re-scale!
 			if (this.props.onShowEntireSegment) {
 				this.props.onShowEntireSegment(undefined)
@@ -258,6 +259,10 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 
 	componentWillUnmount(): void {
 		super.componentWillUnmount?.()
+		if (this.showEntireSegmentTimeout) {
+			clearTimeout(this.showEntireSegmentTimeout)
+			this.showEntireSegmentTimeout = undefined
+		}
 		clearTimeout(this.highlightTimeout)
 		if (this.segmentBlock) {
 			this.segmentBlock.removeEventListener('wheel', this.onTimelineWheel, { capture: true })
@@ -285,6 +290,7 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 	}
 
 	private highlightTimeout: NodeJS.Timeout | undefined
+	private showEntireSegmentTimeout: NodeJS.Timeout | undefined
 
 	private onHighlight = (e: HighlightEvent) => {
 		if (e.segmentId === this.props.segment._id && !e.partId && !e.pieceId) {

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

@@ -144,6 +144,8 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 
 		isVisible: boolean
 		visibilityChangeTimeout: NodeJS.Timeout | undefined
+		initialShowEntireSegmentTimeout: NodeJS.Timeout | undefined
+		initialShowEntireSegmentRaf: number | undefined
 		rundownCurrentPartInstanceId: PartInstanceId | null = null
 		timelineDiv: HTMLDivElement | null = null
 		intersectionObserver: IntersectionObserver | undefined
@@ -194,8 +196,10 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 			RundownViewEventBus.on(RundownViewEvents.GO_TO_PART, this.onGoToPart)
 			RundownViewEventBus.on(RundownViewEvents.GO_TO_PART_INSTANCE, this.onGoToPartInstance)
 			// Delay is to ensure UI has settled before checking:
-			setTimeout(() => {
-				window.requestAnimationFrame(() => {
+			this.initialShowEntireSegmentTimeout = setTimeout(() => {
+				this.initialShowEntireSegmentTimeout = undefined
+				this.initialShowEntireSegmentRaf = window.requestAnimationFrame(() => {
+					this.initialShowEntireSegmentRaf = undefined
 					this.mountedTime = Date.now()
 					if (this.state.isLiveSegment && this.props.followLiveSegments && !this.isVisible) {
 						scrollToSegment(this.props.segmentId, true).catch((error) => {
@@ -353,6 +357,15 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 				if (typeof this.props.onSegmentScroll === 'function') this.props.onSegmentScroll()
 			}
 
+			if (this.initialShowEntireSegmentTimeout) {
+				clearTimeout(this.initialShowEntireSegmentTimeout)
+				this.initialShowEntireSegmentTimeout = undefined
+			}
+			if (this.initialShowEntireSegmentRaf !== undefined) {
+				window.cancelAnimationFrame(this.initialShowEntireSegmentRaf)
+				this.initialShowEntireSegmentRaf = undefined
+			}
+
 			if (this.visibilityChangeTimeout) {
 				clearTimeout(this.visibilityChangeTimeout)
 				this.visibilityChangeTimeout = undefined

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

@@ -166,6 +166,14 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
 	useEffect(() => {
 		return () => {
 			clearTimeout(highlightTimeout.current)
+			if (animFrameHandle.current !== undefined) {
+				cancelAnimationFrame(animFrameHandle.current)
+				animFrameHandle.current = undefined
+			}
+			if (previewSession.current) {
+				previewSession.current.close()
+				previewSession.current = null
+			}
 		}
 	}, [])
 

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

@@ -442,6 +442,10 @@ export class TimelineGrid extends React.Component<ITimelineGridProps> {
 	}
 
 	componentWillUnmount(): void {
+		if (typeof this.scheduledRepaint === 'number') {
+			window.cancelAnimationFrame(this.scheduledRepaint)
+			this.scheduledRepaint = null
+		}
 		if (this._resizeObserver) this._resizeObserver.disconnect()
 		window.removeEventListener(RundownTiming.Events.timeupdateLowResolution, this.onTimeupdate)
 		window.removeEventListener(RundownTiming.Events.timeupdateHighResolution, this.onTimeupdate)