Fix autoscroll on new messages (#1382)

Co-authored-by: Franco <[email protected]> Co-authored-by: Sindre Sorhus <[email protected]> Co-authored-by: Dušan Simić <[email protected]>
sindresorhus · Jun 27, 2020 · e94f36e · e94f36e
1 parent 157e93d
commit e94f36e
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/source/browser.ts b/source/browser.ts
@@ -542,6 +542,58 @@ function insertionListener(event: AnimationEvent): void {
 	}
 }
 
+async function observeAutoscroll(): Promise<void> {
+	const mainElement = await elementReady<HTMLElement>('._4sp8', {stopOnDomReady: false});
+	if (!mainElement) {
+		return;
+	}
+
+	const scrollToBottom = (): void => {
+		const scrollableElement: HTMLElement | null = document.querySelector('[role=presentation] .scrollable');
+		if (scrollableElement) {
+			scrollableElement.scroll({
+				top: Number.MAX_SAFE_INTEGER,
+				behavior: 'smooth'
+			});
+		}
+	}
+
+	const hookMessageObserver = async (): Promise<void> => {
+		const chatElement = await elementReady<HTMLElement>(
+			'[role=presentation] .scrollable [role = region] > div[id ^= "js_"]', {stopOnDomReady: false}
+		);
+
+		if (chatElement) {
+			// Scroll to the bottom when opening different conversation
+			scrollToBottom();
+
+			const messageObserver = new MutationObserver((record: MutationRecord[]) => {
+				const newMessages: MutationRecord[] = record.filter(record => {
+					// The mutation is an addition
+					return record.addedNodes.length > 0 &&
+						// ... of a div       (skip the "seen" status change)
+						(record.addedNodes[0] as HTMLElement).tagName === 'DIV' &&
+						// ... on the last child       (skip previous messages added when scrolling up)
+						chatElement.lastChild!.contains(record.target);
+				});
+
+				if (newMessages.length > 0) {
+					// Scroll to the bottom when there are new messages
+					scrollToBottom();
+				}
+			});
+
+			messageObserver.observe(chatElement, {childList: true, subtree: true});
+		}
+	};
+
+	hookMessageObserver();
+
+	// Hook it again if conversation changes
+	const conversationObserver = new MutationObserver(hookMessageObserver);
+	conversationObserver.observe(mainElement, {childList: true});
+}
+
 // Listen for emoji element dom insertion
 document.addEventListener('animationstart', insertionListener, false);
 
@@ -580,6 +632,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 	// Disable autoplay if set in settings
 	toggleVideoAutoplay();
+
+	// Hook auto-scroll observer
+	observeAutoscroll();
 });
 
 // Handle title bar double-click.