Merge pull request Sofie-Automation#1436 from tv2norge-collab/contribute/EAV-555

Author: jstarpl

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

@@ -319,65 +319,28 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 		const target = document.querySelector<HTMLElement>(`[data-part-instance-id="${partInstanceId}"]`)
 
 		if (!target) return
-		// Velocity(document.body, 'finish')
-		// Velocity(target, 'scroll', { offset: -1 * scrollMargin, duration: 400, easing: 'ease-out' })
-		const offsetTop = window.scrollY + target.offsetTop
-		this._lastAnimation?.stop()
-		this._lastAnimation = animate(
-			window,
-			{
-				scrollY: offsetTop + -1 * scrollMargin,
-			},
-			{
-				duration: 0.4,
-				ease: 'easeOut',
-			}
-		)
+
+		const targetOffsetTop = target.getBoundingClientRect().top + window.pageYOffset
+		this.animateScrollTo(targetOffsetTop - scrollMargin)
 	}
 	scrollToLive(): void {
 		const scrollMargin = this.calculateScrollPosition()
 		const current =
 			document.querySelector<HTMLElement>('.prompter .live') || document.querySelector<HTMLElement>('.prompter .next')
 
 		if (!current) return
-		// 	Velocity(document.body, 'finish')
-		// 	Velocity(current, 'scroll', { offset: -1 * scrollMargin, duration: 400, easing: 'ease-out' })
-		// }
 
-		const offsetTop = window.scrollY + current.offsetTop
-		this._lastAnimation?.stop()
-		this._lastAnimation = animate(
-			window,
-			{
-				scrollY: offsetTop + -1 * scrollMargin,
-			},
-			{
-				duration: 0.4,
-				ease: 'easeOut',
-			}
-		)
+		const targetOffsetTop = current.getBoundingClientRect().top + window.pageYOffset
+		this.animateScrollTo(targetOffsetTop - scrollMargin)
 	}
 	scrollToNext(): void {
 		const scrollMargin = this.calculateScrollPosition()
 		const next = document.querySelector<HTMLElement>('.prompter .next')
 
 		if (!next) return
-		// 	Velocity(document.body, 'finish')
-		// 	Velocity(next, 'scroll', { offset: -1 * scrollMargin, duration: 400, easing: 'ease-out' })
-		// }
 
-		const offsetTop = window.scrollY + next.offsetTop
-		this._lastAnimation?.stop()
-		this._lastAnimation = animate(
-			window,
-			{
-				scrollY: offsetTop + -1 * scrollMargin,
-			},
-			{
-				duration: 0.4,
-				ease: 'easeOut',
-			}
-		)
+		const targetOffsetTop = next.getBoundingClientRect().top + window.pageYOffset
+		this.animateScrollTo(targetOffsetTop - scrollMargin)
 	}
 	scrollToPrevious(): void {
 		const scrollMargin = this.calculateScrollPosition()
@@ -386,25 +349,8 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 		const target = anchors[anchors.length - 2] || anchors[0]
 		if (!target) return
 
-		// Velocity(document.body, 'finish')
-		// Velocity(document.body, 'scroll', {
-		// 	offset: window.scrollY - scrollMargin + target[0],
-		// 	duration: 200,
-		// 	easing: 'ease-out',
-		// })
-
-		const offsetTop = window.scrollY + target[0]
-		this._lastAnimation?.stop()
-		this._lastAnimation = animate(
-			window,
-			{
-				scrollY: offsetTop + -1 * scrollMargin,
-			},
-			{
-				duration: 0.4,
-				ease: 'easeOut',
-			}
-		)
+		const targetOffsetTop = target[0] + window.pageYOffset
+		this.animateScrollTo(targetOffsetTop - scrollMargin)
 	}
 	scrollToFollowing(): void {
 		const scrollMargin = this.calculateScrollPosition()
@@ -413,24 +359,16 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 		const target = anchors[0]
 		if (!target) return
 
-		// Velocity(document.body, 'finish')
-		// Velocity(document.body, 'scroll', {
-		// 	offset: window.scrollY - scrollMargin + target[0],
-		// 	duration: 200,
-		// 	easing: 'ease-out',
-		// })
-		const offsetTop = window.scrollY + target[0]
+		const targetOffsetTop = target[0] + window.pageYOffset
+		this.animateScrollTo(targetOffsetTop - scrollMargin)
+	}
+	private animateScrollTo(scrollToPosition: number) {
 		this._lastAnimation?.stop()
-		this._lastAnimation = animate(
-			window,
-			{
-				scrollY: offsetTop + -1 * scrollMargin,
-			},
-			{
-				duration: 0.4,
-				ease: 'easeOut',
-			}
-		)
+		this._lastAnimation = animate(window.scrollY, scrollToPosition, {
+			duration: 0.4,
+			ease: 'easeOut',
+			onUpdate: (latest) => window.scrollTo(0, latest),
+		})
 	}
 	listAnchorPositions(startY: number, endY: number, sortDirection = 1): [number, Element][] {
 		let foundPositions: [number, Element][] = []