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