fix(PrompterView): prevent jumping/scrolling to undesired positions (Sofie-Automation#1615)

* fix(EAV-693): prevent jumping when script is continued as an infinite into another part

* fix(EAV-693): freeze prompter content during scrollTo

this prevents from restoring scroll anchors during pending animations, which led to the content stopping at an undesired position

* refactor(EAV-693): improve context typing

Author: ianshade

packages/webui/src/client/ui/Prompter/PrompterView.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import React, { createContext, PropsWithChildren, ReactNode, useRef } from 'react'
 import _ from 'underscore'
 import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
 import ClassNames from 'classnames'
@@ -39,6 +39,9 @@ import { MeteorCall } from '../../lib/meteorApi.js'
 
 const DEFAULT_UPDATE_THROTTLE = 250 //ms
 const PIECE_MISSING_UPDATE_THROTTLE = 2000 //ms
+const FROZEN_UPDATE_THROTTLE = 50 //ms
+
+const PIECE_CONTINUATION_CLASS = 'continuation'
 
 interface PrompterConfig {
 	mirror?: boolean
@@ -120,7 +123,24 @@ function asArray<T>(value: T | T[] | null): T[] {
 	}
 }
 
+interface PrompterStore {
+	isFrozen: boolean
+}
+
+type PrompterStoreRef = React.MutableRefObject<PrompterStore>
+
+const PrompterStoreContext = createContext<PrompterStoreRef | null>(null)
+
+export function PrompterStoreProvider({ children }: { children: ReactNode }): JSX.Element {
+	const storeRef = useRef<PrompterStore>({ isFrozen: false })
+
+	return <PrompterStoreContext.Provider value={storeRef}>{children}</PrompterStoreContext.Provider>
+}
+
 export class PrompterViewContent extends React.Component<Translated<IProps & ITrackedProps>, IState> {
+	static contextType = PrompterStoreContext
+	declare context: PrompterStoreRef
+
 	autoScrollPreviousPartInstanceId: PartInstanceId | null = null
 
 	configOptions: PrompterConfig
@@ -263,6 +283,9 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 	componentWillUnmount(): void {
 		documentTitle.set(null)
 
+		this._lastAnimation?.stop()
+		this.context.current.isFrozen = false
+
 		const themeColor = document.head.querySelector('meta[name="theme-color"]')
 		if (themeColor) {
 			themeColor.setAttribute('content', themeColor.getAttribute('data-content') || '#ffffff')
@@ -300,7 +323,9 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 		this.autoScrollPreviousPartInstanceId = playlist.currentPartInfo?.partInstanceId ?? null
 		if (playlist.currentPartInfo === null) return
 
-		this.scrollToPartInstance(playlist.currentPartInfo.partInstanceId)
+		// scrolls to a part instance, but only if it isn't showing a continuation of an infinite script piece
+		// those should not be scrolled to, because they are handled by restoreScrollAnchor
+		this.scrollToPartInstanceIfNotContinuation(playlist.currentPartInfo.partInstanceId)
 	}
 	private calculateScrollPosition() {
 		let pixelMargin = this.calculateMarginPosition()
@@ -335,9 +360,11 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 		}))
 	}
 
-	scrollToPartInstance(partInstanceId: PartInstanceId): void {
+	scrollToPartInstanceIfNotContinuation(partInstanceId: PartInstanceId): void {
 		const scrollMargin = this.calculateScrollPosition()
-		const target = document.querySelector<HTMLElement>(`[data-part-instance-id="${partInstanceId}"]`)
+		const target = document.querySelector<HTMLElement>(
+			`[data-part-instance-id="${partInstanceId}"]:not(:has(+ div.${PIECE_CONTINUATION_CLASS}))`
+		)
 
 		if (!target) return
 
@@ -385,14 +412,14 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 	}
 	private animateScrollTo(scrollToPosition: number) {
 		this._lastAnimation?.stop()
+		this.context.current.isFrozen = true
 		this._lastAnimation = animate(window.scrollY, scrollToPosition, {
 			duration: 0.4,
 			ease: 'easeOut',
-			onUpdate: (latest: number) =>
-				window.scrollTo({
-					top: latest,
-					behavior: 'instant',
-				}),
+			onUpdate: (latest) => window.scrollTo({ top: latest, behavior: 'instant' }),
+			onComplete: () => {
+				this.context.current.isFrozen = false
+			},
 		})
 	}
 	listAnchorPositions(startY: number, endY: number, sortDirection = 1): [number, Element][] {
@@ -657,12 +684,14 @@ export function PrompterView(props: Readonly<IProps>): JSX.Element {
 	)
 
 	return (
-		<PrompterViewContentWithTranslation
-			{...props}
-			studio={studio}
-			rundownPlaylist={rundownPlaylist}
-			subsReady={allSubsReady}
-		/>
+		<PrompterStoreProvider>
+			<PrompterViewContentWithTranslation
+				{...props}
+				studio={studio}
+				rundownPlaylist={rundownPlaylist}
+				subsReady={allSubsReady}
+			/>
+		</PrompterStoreProvider>
 	)
 }
 
@@ -679,6 +708,7 @@ interface ScrollAnchor {
 	/** offset to use to scroll the anchor. null means "just scroll the anchor into view, best effort" */
 	offset: number | null
 	anchorId: string
+	continuationOfId?: string
 }
 type PrompterSnapshot = ScrollAnchor[] | null
 
@@ -737,6 +767,9 @@ const PrompterContent = withTranslation()(
 		Translated<PropsWithChildren<IPrompterProps> & IPrompterTrackedProps>,
 		{}
 	> {
+		static contextType = PrompterStoreContext
+		declare context: PrompterStoreRef
+
 		private _debounceUpdate: NodeJS.Timeout | undefined
 
 		constructor(props: Translated<PropsWithChildren<IPrompterProps> & IPrompterTrackedProps>) {
@@ -765,10 +798,9 @@ const PrompterContent = withTranslation()(
 		getScrollAnchors = (): ScrollAnchor[] => {
 			const readPosition = this.getReadPosition()
 
-			const useableTextAnchors: {
+			const useableTextAnchors: (ScrollAnchor & {
 				offset: number
-				anchorId: string
-			}[] = []
+			})[] = []
 			/** Maps anchorId -> offset */
 			const foundScrollAnchors: (ScrollAnchor & {
 				/** Positive number. How "good" the anchor is. The anchor with the lowest number will preferred later. */
@@ -790,29 +822,43 @@ const PrompterContent = withTranslation()(
 
 			// Gather anchors from any text blocks in view:
 
-			for (const textAnchor of document.querySelectorAll('.prompter .prompter-line:not(.empty)')) {
+			for (const textAnchor of document.querySelectorAll<HTMLElement>('.prompter .prompter-line:not(.empty)')) {
 				const { top, bottom } = textAnchor.getBoundingClientRect()
 
 				// Is the text block in view?
 				if (top <= readPosition && bottom > readPosition) {
-					useableTextAnchors.push({ anchorId: textAnchor.id, offset: top })
+					useableTextAnchors.push({
+						anchorId: textAnchor.id,
+						offset: top,
+						continuationOfId: textAnchor.dataset.liveContinuationOf,
+					})
 				}
 			}
 
 			// Also use scroll-anchors (Segment and Part names)
 
-			for (const scrollAnchor of document.querySelectorAll('.prompter .scroll-anchor')) {
+			for (const scrollAnchor of document.querySelectorAll<HTMLElement>('.prompter .scroll-anchor')) {
 				const { top, bottom } = scrollAnchor.getBoundingClientRect()
 
 				const distanceToReadPosition = Math.abs(top - readPosition)
 
 				if (top <= windowInnerHeight && bottom > 0) {
 					// If the anchor is in view, use the offset to keep it's position unchanged, relative to the viewport
-					foundScrollAnchors.push({ anchorId: scrollAnchor.id, distanceToReadPosition, offset: top })
+					foundScrollAnchors.push({
+						anchorId: scrollAnchor.id,
+						distanceToReadPosition,
+						offset: top,
+						continuationOfId: scrollAnchor.dataset.liveContinuationOf,
+					})
 				} else {
 					// If the anchor is not in view, set the offset to null, this will cause the view to
 					// jump so that the anchor will be in view.
-					foundScrollAnchors.push({ anchorId: scrollAnchor.id, distanceToReadPosition, offset: null })
+					foundScrollAnchors.push({
+						anchorId: scrollAnchor.id,
+						distanceToReadPosition,
+						offset: null,
+						continuationOfId: scrollAnchor.dataset.liveContinuationOf,
+					})
 				}
 			}
 
@@ -838,7 +884,19 @@ const PrompterContent = withTranslation()(
 
 			// Go through the anchors and use the first one that we find:
 			for (const scrollAnchor of scrollAnchors) {
-				const anchor = document.getElementById(scrollAnchor.anchorId)
+				// if there is a live continuation of this anchor (or anchor that this anchor continues), it should be prioritized over the actual anchor, which now likely is empty
+				let anchor = document.querySelector(
+					`[data-live-continuation-of="${scrollAnchor.continuationOfId || scrollAnchor.anchorId}"]`
+				)
+				// in case the anchor is already a continuation, but the script returned to its original part:
+				if (!anchor && scrollAnchor.continuationOfId) {
+					anchor = document.getElementById(scrollAnchor.continuationOfId)
+				}
+				// in case of a regular anchor:
+				if (!anchor && !scrollAnchor.continuationOfId) {
+					anchor = document.getElementById(scrollAnchor.anchorId)
+				}
+
 				if (!anchor) continue
 
 				const { top } = anchor.getBoundingClientRect()
@@ -874,7 +932,7 @@ const PrompterContent = withTranslation()(
 			logger.error(
 				`Read anchor could not be found after update: ${scrollAnchors
 					.slice(0, 10)
-					.map((sa) => `"${sa.anchorId}" (${sa.offset})`)
+					.map((sa) => `"${sa.anchorId}" (offset: ${sa.offset}, continuationOfId: ${sa.continuationOfId})`)
 					.join(', ')}`
 			)
 
@@ -959,6 +1017,15 @@ const PrompterContent = withTranslation()(
 			return false
 		}
 
+		forceUpdate(callback?: () => void): void {
+			if (this.context.current.isFrozen) {
+				clearTimeout(this._debounceUpdate)
+				this._debounceUpdate = setTimeout(() => this.forceUpdate(), FROZEN_UPDATE_THROTTLE)
+				return
+			}
+			super.forceUpdate(callback)
+		}
+
 		getSnapshotBeforeUpdate(): PrompterSnapshot {
 			return this.getScrollAnchors()
 		}
@@ -1006,48 +1073,83 @@ const PrompterContent = withTranslation()(
 						return
 					}
 
-					const firstPart = segment.parts[0]
-					const firstPartStatus = this.getPartStatus(prompterData, firstPart)
+					let pieceIdToHideScript: PieceId | undefined
+					const partStatuses = segment.parts.map((part) => this.getPartStatus(prompterData, part))
 
 					lines.push(
 						<div
 							id={`segment_${segment.id}`}
 							data-obj-id={segment.id}
 							key={'segment_' + segment.id}
-							className={ClassNames('prompter-segment', 'scroll-anchor', firstPartStatus)}
+							className={ClassNames('prompter-segment', 'scroll-anchor', partStatuses[0])}
 						>
 							{segment.title || 'N/A'}
 						</div>
 					)
 
 					hasInsertedScript = true
 
+					for (let i = 0; i < segment.parts.length; i++) {
+						const part = segment.parts[i]
+
+						const firstPiece = part.pieces[0]
+						if (
+							firstPiece &&
+							firstPiece.continuationOf &&
+							partStatuses[i] === 'live' &&
+							firstPiece.startPartId &&
+							segment.parts.find((part) => part.id === firstPiece.startPartId)
+						) {
+							// the i-th part is live and has taken over the infinite script from the start part,
+							// therefore we need to hide the script from the start part
+							pieceIdToHideScript = firstPiece.continuationOf
+							break
+						}
+					}
+
 					for (const part of segment.parts) {
+						const partStatus = this.getPartStatus(prompterData, part)
+						const firstPiece = part.pieces[0]
+						const continuesFromPart = firstPiece?.continuationOf && firstPiece.startPartId
 						lines.push(
 							<div
 								id={`part_${part.id}`}
 								data-obj-id={segment.id + '_' + part.id}
 								data-part-instance-id={part.partInstanceId}
+								data-live-continuation-of={
+									partStatus === 'live' && continuesFromPart ? `part_${continuesFromPart}` : undefined
+								}
 								key={'part_' + part.id}
-								className={ClassNames('prompter-part', 'scroll-anchor', this.getPartStatus(prompterData, part))}
+								className={ClassNames('prompter-part', 'scroll-anchor', partStatus)}
 							>
 								{part.title || 'N/A'}
 							</div>
 						)
 
 						for (const line of part.pieces) {
+							let text = line.text || ''
+							if (line.id === pieceIdToHideScript) {
+								text = ''
+							}
+							if (line.continuationOf && partStatus !== 'live') {
+								// if a continuation is not in a live part, it should not display its text
+								text = ''
+							}
 							lines.push(
 								<div
 									id={`line_${line.id}`}
 									data-obj-id={segment.id + '_' + part.id + '_' + line.id}
 									key={'line_' + part.id + '_' + segment.id + '_' + line.id}
-									className={ClassNames(
-										'prompter-line',
-										this.props.config.addBlankLine ? 'add-blank' : undefined,
-										!line.text ? 'empty' : undefined
-									)}
+									data-live-continuation-of={
+										partStatus === 'live' && line.continuationOf ? `line_${line.continuationOf}` : undefined
+									}
+									className={ClassNames('prompter-line', {
+										'add-blank': this.props.config.addBlankLine,
+										empty: !text,
+										[PIECE_CONTINUATION_CLASS]: line.continuationOf,
+									})}
 								>
-									{line.text || ''}
+									{text}
 								</div>
 							)
 						}

packages/webui/src/client/ui/Prompter/prompter.ts

@@ -56,6 +56,8 @@ export interface PrompterDataPart {
 export interface PrompterDataPiece {
 	id: PieceId
 	text: string
+	continuationOf?: PieceId
+	startPartId?: PartId | null
 }
 export interface PrompterData {
 	title: string
@@ -264,7 +266,16 @@ export namespace PrompterAPI {
 
 						const content = piece.content as ScriptContent
 						if (!content.fullScript) continue
-						if (piecesIncluded.indexOf(piece._id) >= 0) continue // piece already included in prompter script
+						if (piecesIncluded.indexOf(piece._id) >= 0) {
+							// piece already included in prompter script - mark it as a continuation
+							partData.pieces.push({
+								id: protectString(`${partData.id}_${piece._id}_continuation`),
+								text: content.fullScript,
+								continuationOf: piece._id,
+								startPartId: piece.startPartId,
+							})
+							continue
+						}
 
 						piecesIncluded.push(piece._id)
 						partData.pieces.push({