Merge pull request #1249 from nrkno/fix/ho-prompter/sofie-3082

fix: resolve an issue with prompter jumping when Parts become PartInstances

Author: jstarpl

meteor/client/ui/Prompter/PrompterView.tsx

@@ -321,7 +321,7 @@ export class PrompterViewInner extends MeteorReactComponent<Translated<IProps &
 	}
 	scrollToPartInstance(partInstanceId: PartInstanceId): void {
 		const scrollMargin = this.calculateScrollPosition()
-		const target = document.querySelector(`#partInstance_${partInstanceId}`)
+		const target = document.querySelector(`[data-part-instance-id="${partInstanceId}"]`)
 
 		if (target) {
 			Velocity(document.body, 'finish')
@@ -408,63 +408,60 @@ export class PrompterViewInner extends MeteorReactComponent<Translated<IProps &
 	private checkCurrentTakeMarkers = () => {
 		const playlist = this.props.rundownPlaylist
 
-		if (playlist !== undefined) {
-			const positionTop = window.scrollY
-			const positionBottom = positionTop + window.innerHeight
+		if (playlist === undefined) return
+		const positionTop = window.scrollY
+		const positionBottom = positionTop + window.innerHeight
 
-			let currentPartElement: Element | null = null
-			let currentPartElementAfter: Element | null = null
-			let nextPartElementAfter: Element | null = null
+		let currentPartElement: Element | null = null
+		let currentPartElementAfter: Element | null = null
+		let nextPartElementAfter: Element | null = null
 
-			const anchors: Array<Element> = Array.from(document.querySelectorAll('.scroll-anchor'))
+		const anchors: Array<Element> = Array.from(document.querySelectorAll('.scroll-anchor'))
 
-			for (let index = 0; index < anchors.length; index++) {
-				const current = anchors[index]
-				const next = index + 1 < anchors.length ? anchors[index + 1] : null
+		for (let index = 0; index < anchors.length; index++) {
+			const current = anchors[index]
+			const next = index + 1 < anchors.length ? anchors[index + 1] : null
 
-				if (playlist.currentPartInfo && current.classList.contains(`live`)) {
-					currentPartElement = current
-					currentPartElementAfter = next
-				}
-				if (playlist.nextPartInfo && current.classList.contains(`next`)) {
-					nextPartElementAfter = next
-				}
+			if (playlist.currentPartInfo && current.classList.contains(`live`)) {
+				currentPartElement = current
+				currentPartElementAfter = next
+			}
+			if (playlist.nextPartInfo && current.classList.contains(`next`)) {
+				nextPartElementAfter = next
 			}
+		}
 
-			const currentPositionStart = currentPartElement
-				? currentPartElement.getBoundingClientRect().top + positionTop
-				: null
-			const currentPositionEnd = currentPartElementAfter
-				? currentPartElementAfter.getBoundingClientRect().top + positionTop
-				: null
-
-			const nextPositionEnd = nextPartElementAfter
-				? nextPartElementAfter.getBoundingClientRect().top + positionTop
-				: null
-
-			const takeIndicator = document.querySelector('.take-indicator')
-			if (takeIndicator) {
-				if (currentPositionEnd && currentPositionEnd < positionTop) {
-					// Display take "^" indicator
-					takeIndicator.classList.remove('hidden')
-					takeIndicator.classList.add('top')
-				} else if (currentPositionStart && currentPositionStart > positionBottom) {
-					// Display take "v" indicator
-					takeIndicator.classList.remove('hidden', 'top')
-				} else {
-					takeIndicator.classList.add('hidden')
-				}
+		const currentPositionStart = currentPartElement
+			? currentPartElement.getBoundingClientRect().top + positionTop
+			: null
+		const currentPositionEnd = currentPartElementAfter
+			? currentPartElementAfter.getBoundingClientRect().top + positionTop
+			: null
+
+		const nextPositionEnd = nextPartElementAfter ? nextPartElementAfter.getBoundingClientRect().top + positionTop : null
+
+		const takeIndicator = document.querySelector('.take-indicator')
+		if (takeIndicator) {
+			if (currentPositionEnd && currentPositionEnd < positionTop) {
+				// Display take "^" indicator
+				takeIndicator.classList.remove('hidden')
+				takeIndicator.classList.add('top')
+			} else if (currentPositionStart && currentPositionStart > positionBottom) {
+				// Display take "v" indicator
+				takeIndicator.classList.remove('hidden', 'top')
+			} else {
+				takeIndicator.classList.add('hidden')
 			}
+		}
 
-			const nextIndicator = document.querySelector('.next-indicator')
-			if (nextIndicator) {
-				if (nextPositionEnd && nextPositionEnd < positionTop) {
-					// Display next "^" indicator
-					nextIndicator.classList.remove('hidden')
-					nextIndicator.classList.add('top')
-				} else {
-					nextIndicator.classList.add('hidden')
-				}
+		const nextIndicator = document.querySelector('.next-indicator')
+		if (nextIndicator) {
+			if (nextPositionEnd && nextPositionEnd < positionTop) {
+				// Display next "^" indicator
+				nextIndicator.classList.remove('hidden')
+				nextIndicator.classList.add('top')
+			} else {
+				nextIndicator.classList.add('hidden')
 			}
 		}
 	}
@@ -737,24 +734,32 @@ export const Prompter = translateWithTracker<PropsWithChildren<IPrompterProps>,
 			// Go through the anchors and use the first one that we find:
 			for (const scrollAnchor of scrollAnchors) {
 				const anchor = document.getElementById(scrollAnchor.anchorId)
-				if (anchor) {
-					const { top } = anchor.getBoundingClientRect()
-
-					if (scrollAnchor.offset !== null) {
-						window.scrollBy({
-							top: top - scrollAnchor.offset,
-						})
-						// We've scrolled, exit the function!
-						return
-					} else {
-						// Note: config.margin does not have to be taken into account here,
-						// the css margins magically does it for us.
-						window.scrollBy({
-							top: top - readPosition,
-						})
-						// We've scrolled, exit the function!
-						return
-					}
+				if (!anchor) continue
+
+				const { top } = anchor.getBoundingClientRect()
+
+				if (scrollAnchor.offset !== null) {
+					this.props.config.debug &&
+						logger.debug(
+							`Selected anchor ${scrollAnchor.anchorId} as anchor element in view, restoring position ${scrollAnchor.offset}`
+						)
+
+					window.scrollBy({
+						top: top - scrollAnchor.offset,
+					})
+					// We've scrolled, exit the function!
+					return
+				} else {
+					this.props.config.debug &&
+						logger.debug(`Selected anchor ${scrollAnchor.anchorId} as anchor element outside of view, jumping to it`)
+
+					// Note: config.margin does not have to be taken into account here,
+					// the css margins magically does it for us.
+					window.scrollBy({
+						top: top - readPosition,
+					})
+					// We've scrolled, exit the function!
+					return
 				}
 			}
 			// None of the anchors where found at this point.
@@ -766,6 +771,7 @@ export const Prompter = translateWithTracker<PropsWithChildren<IPrompterProps>,
 					.join(', ')}`
 			)
 
+			// TODO: In the past 4 months this has been here, this hasn't logged a single line, should we keep it?
 			// Below is for troubleshooting, see if the anchor is in prompterData:
 			if (!this.props.prompterData) {
 				logger.error(`Read anchor troubleshooting: no prompterData`)
@@ -847,9 +853,9 @@ export const Prompter = translateWithTracker<PropsWithChildren<IPrompterProps>,
 		}
 
 		private getPartStatus(prompterData: PrompterData, part: PrompterDataPart) {
-			if (prompterData.currentPartInstanceId === part.id) {
+			if (prompterData.currentPartInstanceId === part.partInstanceId) {
 				return 'live'
-			} else if (prompterData.nextPartInstanceId === part.id) {
+			} else if (prompterData.nextPartInstanceId === part.partInstanceId) {
 				return 'next'
 			} else {
 				return null
@@ -881,9 +887,10 @@ export const Prompter = translateWithTracker<PropsWithChildren<IPrompterProps>,
 				segment.parts.forEach((part) => {
 					lines.push(
 						<div
-							id={`partInstance_${part.id}`}
+							id={`part_${part.id}`}
 							data-obj-id={segment.id + '_' + part.id}
-							key={'partInstance_' + part.id}
+							data-part-instance-id={part.partInstanceId}
+							key={'part_' + part.id}
 							className={ClassNames('prompter-part', 'scroll-anchor', this.getPartStatus(prompterData, part))}
 						>
 							{part.title || 'N/A'}

meteor/client/ui/Prompter/prompter.ts

@@ -35,7 +35,8 @@ export interface PrompterDataSegment {
 	parts: PrompterDataPart[]
 }
 export interface PrompterDataPart {
-	id: PartInstanceId
+	id: PartId
+	partInstanceId: PartInstanceId
 	title: string | undefined
 	pieces: PrompterDataPiece[]
 }
@@ -183,7 +184,8 @@ export namespace PrompterAPI {
 			for (let partIndex = 0; partIndex < partInstances.length; partIndex++) {
 				const partInstance = partInstances[partIndex]
 				const partData: PrompterDataPart = {
-					id: partInstance._id,
+					id: partInstance.part._id,
+					partInstanceId: partInstance._id,
 					title: partInstance.part.prompterTitle || partInstance.part.title,
 					pieces: [],
 				}