Implement chat auto-scroll

pull/305/head
ElementalAlchemist 2 years ago committed by Mike Lang
parent 4ac24fe716
commit aa2c444d1a

@ -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;

@ -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) {

@ -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%;
}

Loading…
Cancel
Save