mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-25 22:31:09 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix(chat): try to improve auto scroll to bottom. Closes #3029

Browse source
This commit is contained in:
Gabe Kangas 2023-06-12 15:44:11 -07:00
parent 6e46034414
commit 58f2d09815
No known key found for this signature in database
GPG key ID: 4345B2060657F330
1 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
web/components/chat/ChatContainer/ChatContainer.tsx
View file

@ -205,16 +205,14 @@ export const ChatContainer: FC<ChatContainerProps> = ({
}
};
const scrollChatToBottom = (ref, behavior = 'smooth') => {
const scrollChatToBottom = ref => {
clearTimeout(scrollToBottomDelay.current);
scrollToBottomDelay.current = setTimeout(() => {
ref.current?.scrollToIndex({
index: messages.length - 1,
behavior,
});
ref.current?.scrollTo({ top: Infinity, left: 0, behavior: 'auto' });
setIsAtBottom(true);
setShowScrollToBottomButton(false);
}, 150);
setShowScrollToBottomButton(false);
};
// This is a hack to force a scroll to the very bottom of the chat messages
@ -222,7 +220,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
// For https://github.com/owncast/owncast/issues/2500
useEffect(() => {
setTimeout(() => {
scrollChatToBottom(chatContainerRef, 'auto');
scrollChatToBottom(chatContainerRef);
}, 500);
}, []);
@ -240,7 +238,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
followOutput={() => {
if (isAtBottom) {
setShowScrollToBottomButton(false);
scrollChatToBottom(chatContainerRef, 'auto');
scrollChatToBottom(chatContainerRef);
return 'smooth';
}
@ -261,7 +259,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
{showScrollToBottomButton && (
<ScrollToBotBtn
onClick={() => {
scrollChatToBottom(chatContainerRef, 'auto');
scrollChatToBottom(chatContainerRef);
}}
/>
)}