Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use own scroll to bottom function instead of built-in. Closes #2500

Browse Source
This commit is contained in:
Gabe Kangas 2023-01-11 00:53:18 -08:00
parent b989e9a462
commit bb9b8a8123
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/components/chat/ChatContainer/ChatContainer.tsx
View File

@ -171,11 +171,15 @@ export const ChatContainer: FC<ChatContainerProps> = ({
} }
}; };
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const scrollChatToBottom = (ref, behavior = 'smooth') => { const scrollChatToBottom = (ref, behavior = 'smooth') => {
ref.current?.scrollToIndex({ setTimeout(() => {
index: messages.length - 1, ref.current?.scrollToIndex({
behavior, index: messages.length - 1,
}); behavior,
});
}, 100);
setAtBottom(true); setAtBottom(true);
}; };
@ -192,6 +196,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
() => ( () => (
<> <>
<Virtuoso <Virtuoso
id="virtuoso"
style={{ height }} style={{ height }}
className={styles.virtuoso} className={styles.virtuoso}
ref={chatContainerRef} ref={chatContainerRef}
@ -199,12 +204,12 @@ export const ChatContainer: FC<ChatContainerProps> = ({
itemContent={(index, message) => getViewForMessage(index, message)} itemContent={(index, message) => getViewForMessage(index, message)}
followOutput={(isAtBottom: boolean) => { followOutput={(isAtBottom: boolean) => {
if (isAtBottom) { if (isAtBottom) {
return 'smooth'; scrollChatToBottom(chatContainerRef, 'smooth');
} }
return false; return false;
}} }}
alignToBottom alignToBottom
atBottomThreshold={50} atBottomThreshold={70}
atBottomStateChange={bottom => { atBottomStateChange={bottom => {
setAtBottom(bottom); setAtBottom(bottom);
}} }}