Implement chat auto-scroll

thrimbletrimmer/scripts/common.js

@@ -585,6 +585,7 @@ function renderChatMessage(chatMessageData) {
 
 			const emoteImg = document.createElement("img");
 			emoteImg.src = `https://static-cdn.jtvnw.net/emoticons/v2/${emoteData.emote}/default/dark/1.0`;
+			emoteImg.classList.add("chat-replay-message-emote");
 			const emoteStringLen = emoteData.end - emoteData.start + 1;
 			const emoteText = text.substring(emoteData.start, emoteStringLen);
 			emoteImg.alt = emoteText;

thrimbletrimmer/scripts/stream.js

@@ -257,6 +257,7 @@ function initialChatRender() {
 	}
 
 	globalChatPreviousRenderTime = videoTime;
+	chatReplayContainer.scrollTop = chatReplayContainer.scrollHeight;
 }
 
 function updateChatRender() {
@@ -269,13 +270,16 @@ function updateChatRender() {
 	}
 	const videoPlayer = document.getElementById("video");
 	const videoTime = videoPlayer.currentTime;
+	const chatReplayContainer = document.getElementById("chat-replay");
+	const wasScrolledToBottom =
+		chatReplayContainer.scrollTop + chatReplayContainer.offsetHeight >=
+		chatReplayContainer.scrollHeight;
 
 	if (videoTime < globalChatPreviousRenderTime) {
 		initialChatRender();
 	} else {
 		const videoDateTime = dateTimeFromVideoPlayerTime(videoTime);
 		const lastAddedTime = dateTimeFromVideoPlayerTime(globalChatPreviousRenderTime);
-		const chatReplayContainer = document.getElementById("chat-replay");
 
 		let rangeMin = 0;
 		let rangeMax = globalChatData.length;
@@ -301,6 +305,9 @@ function updateChatRender() {
 		}
 	}
 	globalChatPreviousRenderTime = videoTime;
+	if (wasScrolledToBottom) {
+		chatReplayContainer.scrollTop = chatReplayContainer.scrollHeight;
+	}
 }
 
 function handleChatMessage(chatReplayContainer, chatMessage) {

thrimbletrimmer/styles/thrimbletrimmer.css

@@ -368,6 +368,7 @@ a,
 
 #chat-replay {
 	overflow-y: auto;
+	min-height: 250px;
 }
 
 .chat-replay-message {
@@ -387,6 +388,15 @@ a,
 	flex-grow: 1;
 }
 
+.chat-replay-message-emote {
+	/*
+	This size is set based on Twitch's 1.0 emote size.
+	This will need to be updated if that changes. (Otherwise, auto-scrolling will break.)
+	*/
+	width: 28px;
+	height: 28px;
+}
+
 .chat-replay-message-reply {
 	font-size: 80%;
 }