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

Tweaks to chat bottom handling for #2342

Browse source
This commit is contained in:
Gabe Kangas 2022-12-20 00:37:17 -08:00
parent 04e436bda1
commit 31f77cf1f0
No known key found for this signature in database
GPG key ID: 4345B2060657F330
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -78,10 +78,8 @@ export const ChatContainer: FC<ChatContainerProps> = ({
showInput,
height,
}) => {
const [atBottom, setAtBottom] = useState(false);
// const [showButton, setShowButton] = useState(false);
const [atBottom, setAtBottom] = useState(true);
const chatContainerRef = useRef(null);
// const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
const getNameChangeViewForMessage = (message: NameChangeEvent) => {
const { oldName, user } = message;
@ -180,13 +178,21 @@ export const ChatContainer: FC<ChatContainerProps> = ({
style={{ height }}
className={styles.virtuoso}
ref={chatContainerRef}
initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
// initialTopMostItemIndex={999999}
data={messages}
itemContent={(index, message) => getViewForMessage(index, message)}
followOutput="auto"
followOutput={(isAtBottom: boolean) => {
if (isAtBottom) {
return 'smooth';
}
return false;
}}
alignToBottom
atBottomThreshold={70}
atBottomStateChange={bottom => setAtBottom(bottom)}
atBottomStateChange={bottom => {
setAtBottom(bottom);
}}
endReached={() => setAtBottom(true)}
/>
{!atBottom && <ScrollToBotBtn chatContainerRef={chatContainerRef} messages={messages} />}
</>