LogalDeveloper/owncast
0
Fork 0
Code Activity

Increase the bottom threshold for chat container. Closes #2342

Browse Source
This commit is contained in:
Gabe Kangas
2022-12-01 19:26:16 -08:00
parent fd69febf0d
commit 8a14173066
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/components/chat/ChatContainer/ChatContainer.module.scss
View File

@@ -16,6 +16,7 @@
color: var(--text-color-secondary); color: var(--text-color-secondary);
& .toBottomWrap { & .toBottomWrap {
& .toBottomBtn { & .toBottomBtn {
z-index: 9999;
border: none; border: none;
background-color: gray; background-color: gray;
} }

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

@@ -44,12 +44,12 @@ function shouldCollapseMessages(messages: ChatMessage[], index: number): boolean
return false; return false;
} }
if (!lastMessage.timestamp || !message.timestamp) { if (!lastMessage?.timestamp || !message.timestamp) {
return false; return false;
} }
const maxTimestampDelta = 1000 * 60 * 2; // 2 minutes const maxTimestampDelta = 1000 * 60 * 2; // 2 minutes
const lastTimestamp = new Date(lastMessage.timestamp).getTime(); const lastTimestamp = new Date(lastMessage?.timestamp).getTime();
const thisTimestamp = new Date(message.timestamp).getTime(); const thisTimestamp = new Date(message.timestamp).getTime();
if (thisTimestamp - lastTimestamp > maxTimestampDelta) { if (thisTimestamp - lastTimestamp > maxTimestampDelta) {
return false; return false;
@@ -185,6 +185,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
itemContent={(index, message) => getViewForMessage(index, message)} itemContent={(index, message) => getViewForMessage(index, message)}
followOutput="auto" followOutput="auto"
alignToBottom alignToBottom
atBottomThreshold={70}
atBottomStateChange={bottom => setAtBottom(bottom)} atBottomStateChange={bottom => setAtBottom(bottom)}
/> />
{!atBottom && <ScrollToBotBtn chatContainerRef={chatContainerRef} messages={messages} />} {!atBottom && <ScrollToBotBtn chatContainerRef={chatContainerRef} messages={messages} />}