fix: ensure that useControllerMessages only operates on the container

nrkno · Feb 13, 2024 · 475d8c3 · 475d8c3
1 parent a4fe3f7
commit 475d8c3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/apps/client/src/hooks/useControllerMessages.ts b/packages/apps/client/src/hooks/useControllerMessages.ts
@@ -51,24 +51,26 @@ export function useControllerMessages(
 
 	const applyControllerMessage = useCallback(
 		(message: ControllerMessage, timestamp = getCurrentTime()) => {
+			if (!ref.current) return
 			speed.current = message.speed ?? speed.current
+			const container = ref.current
 
 			let targetTop = position.current
 
 			if (message.offset) {
 				targetTop = 0
 
 				if (message.offset.target !== null) {
-					const targetEl = getAnchorElementById(message.offset.target)
+					const targetEl = getAnchorElementById(container, message.offset.target)
 					if (!targetEl) {
 						console.error(`Could not find target "${message.offset.target}"`)
 						return
 					}
 
 					const targetRect = targetEl.getBoundingClientRect()
-					targetTop = targetRect.top + position.current - message.offset.offset * fontSizePx
+					targetTop = position.current + targetRect.top - message.offset.offset * fontSizePx
 				} else {
-					targetTop = targetTop + message.offset.offset * fontSizePx
+					targetTop = message.offset.offset * fontSizePx
 				}
 			}
 
@@ -77,7 +79,7 @@ export function useControllerMessages(
 
 			position.current = targetTop
 
-			ref.current?.scrollTo({
+			container.scrollTo({
 				top: targetTop,
 				behavior: 'instant',
 			})

diff --git a/packages/apps/client/src/lib/anchorElements.ts b/packages/apps/client/src/lib/anchorElements.ts
@@ -6,6 +6,9 @@ export function getAllAnchorElements(): NodeListOf<HTMLElement> {
 	return document.querySelectorAll<HTMLElement>('[data-obj-id]')
 }
 
-export function getAnchorElementById(id: UISegmentId | UILineId | TextMarkerId): HTMLElement | null {
-	return document.querySelector(`[data-obj-id="${id}"]`)
+export function getAnchorElementById(
+	container: HTMLElement | Document,
+	id: UISegmentId | UILineId | TextMarkerId
+): HTMLElement | null {
+	return container.querySelector(`[data-obj-id="${id}"]`)
 }