mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-29 11:39:08 +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, showInput,
height, height,
}) => { }) => {
const [atBottom, setAtBottom] = useState(false); const [atBottom, setAtBottom] = useState(true);
// const [showButton, setShowButton] = useState(false);
const chatContainerRef = useRef(null); const chatContainerRef = useRef(null);
// const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
const getNameChangeViewForMessage = (message: NameChangeEvent) => { const getNameChangeViewForMessage = (message: NameChangeEvent) => {
const { oldName, user } = message; const { oldName, user } = message;
@ -180,13 +178,21 @@ export const ChatContainer: FC<ChatContainerProps> = ({
style={{ height }} style={{ height }}
className={styles.virtuoso} className={styles.virtuoso}
ref={chatContainerRef} ref={chatContainerRef}
initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom // initialTopMostItemIndex={999999}
data={messages} data={messages}
itemContent={(index, message) => getViewForMessage(index, message)} itemContent={(index, message) => getViewForMessage(index, message)}
followOutput="auto" followOutput={(isAtBottom: boolean) => {
if (isAtBottom) {
return 'smooth';
}
return false;
}}
alignToBottom alignToBottom
atBottomThreshold={70} atBottomThreshold={70}
atBottomStateChange={bottom => setAtBottom(bottom)} atBottomStateChange={bottom => {
setAtBottom(bottom);
}}
endReached={() => setAtBottom(true)}
/> />
{!atBottom && <ScrollToBotBtn chatContainerRef={chatContainerRef} messages={messages} />} {!atBottom && <ScrollToBotBtn chatContainerRef={chatContainerRef} messages={messages} />}
</> </>