owncast/web/components/chat/ChatContainer/ChatContainer.tsx

297 lines
9 KiB
TypeScript

import { Virtuoso } from 'react-virtuoso';
import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react';
import {
ConnectedClientInfoEvent,
FediverseEvent,
MessageType,
NameChangeEvent,
} from '../../../interfaces/socket-events';
import styles from './ChatContainer.module.scss';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import { ChatUserMessage } from '../ChatUserMessage/ChatUserMessage';
import { ChatTextField } from '../ChatTextField/ChatTextField';
import { ChatModeratorNotification } from '../ChatModeratorNotification/ChatModeratorNotification';
import { ChatSystemMessage } from '../ChatSystemMessage/ChatSystemMessage';
import { ChatJoinMessage } from '../ChatJoinMessage/ChatJoinMessage';
import { ScrollToBotBtn } from './ScrollToBotBtn';
import { ChatActionMessage } from '../ChatActionMessage/ChatActionMessage';
import { ChatSocialMessage } from '../ChatSocialMessage/ChatSocialMessage';
import { ChatNameChangeMessage } from '../ChatNameChangeMessage/ChatNameChangeMessage';
export type ChatContainerProps = {
messages: ChatMessage[];
usernameToHighlight: string;
chatUserId: string;
isModerator: boolean;
showInput?: boolean;
height?: string;
};
function shouldCollapseMessages(
messages: ChatMessage[],
index: number,
collapsedMessageIds: Set<string>,
): boolean {
if (messages.length < 2) {
return false;
}
const message = messages[index];
if (!message || !message.user) {
return false;
}
const {
user: { id },
} = message;
const lastMessage = messages[index - 1];
if (lastMessage?.type !== MessageType.CHAT) {
return false;
}
if (!lastMessage?.timestamp || !message.timestamp) {
return false;
}
const maxTimestampDelta = 1000 * 60; // 1 minute
const lastTimestamp = new Date(lastMessage?.timestamp).getTime();
const thisTimestamp = new Date(message.timestamp).getTime();
if (thisTimestamp - lastTimestamp > maxTimestampDelta) {
return false;
}
if (id !== lastMessage?.user.id) {
return false;
}
// Limit the number of messages that can be collapsed in a row.
const maxCollapsedMessageCount = 5;
if (collapsedMessageIds.size >= maxCollapsedMessageCount) {
return false;
}
return true;
}
function checkIsModerator(message: ChatMessage | ConnectedClientInfoEvent) {
const {
user: { scopes },
} = message;
if (!scopes || scopes.length === 0) {
return false;
}
return scopes.includes('MODERATOR');
}
export const ChatContainer: FC<ChatContainerProps> = ({
messages,
usernameToHighlight,
chatUserId,
isModerator,
showInput,
height,
}) => {
const [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false);
const [isAtBottom, setIsAtBottom] = useState(false);
const chatContainerRef = useRef(null);
const showScrollToBottomButtonDelay = useRef(null);
const scrollToBottomDelay = useRef(null);
const collapsedMessageIds = new Set<string>();
const setShowScrolltoBottomButtonWithDelay = (show: boolean) => {
showScrollToBottomButtonDelay.current = setTimeout(() => {
setShowScrollToBottomButton(show);
}, 1500);
};
useEffect(
() =>
// Clear the timer when the component unmounts
() => {
clearTimeout(showScrollToBottomButtonDelay.current);
clearTimeout(scrollToBottomDelay.current);
},
[],
);
const getFediverseMessage = (message: FediverseEvent) => <ChatSocialMessage message={message} />;
const getUserJoinedMessage = (message: ChatMessage) => {
const {
user: { displayName, displayColor },
} = message;
const isAuthorModerator = checkIsModerator(message);
return (
<ChatJoinMessage
displayName={displayName}
userColor={displayColor}
isAuthorModerator={isAuthorModerator}
/>
);
};
const getActionMessage = (message: ChatMessage) => {
const { body } = message;
return <ChatActionMessage body={body} />;
};
const getConnectedInfoMessage = (message: ConnectedClientInfoEvent) => {
const modStatusUpdate = checkIsModerator(message);
if (!modStatusUpdate) {
// Important note: We can't return null or an element with zero width
// or zero height. So to work around this we return a very small 1x1 div.
const st: CSSProperties = { width: '1px', height: '1px' };
return <div style={st} />;
}
// Alert the user that they are a moderator.
return <ChatModeratorNotification />;
};
const getUserChatMessageView = (index: number, message: ChatMessage) => {
const collapsed = shouldCollapseMessages(messages, index, collapsedMessageIds);
if (!collapsed) {
collapsedMessageIds.clear();
} else {
collapsedMessageIds.add(message.id);
}
return (
<ChatUserMessage
message={message}
showModeratorMenu={isModerator} // Moderators have access to an additional menu
highlightString={usernameToHighlight} // What to highlight in the message
sentBySelf={message.user?.id === chatUserId} // The local user sent this message
sameUserAsLast={collapsed}
isAuthorModerator={message.user?.scopes?.includes('MODERATOR')}
isAuthorBot={message.user?.scopes?.includes('BOT')}
isAuthorAuthenticated={message.user?.authenticated}
key={message.id}
/>
);
};
const getViewForMessage = (
index: number,
message: ChatMessage | NameChangeEvent | ConnectedClientInfoEvent | FediverseEvent,
) => {
switch (message.type) {
case MessageType.CHAT:
return getUserChatMessageView(index, message as ChatMessage);
case MessageType.NAME_CHANGE:
return <ChatNameChangeMessage message={message as NameChangeEvent} />;
case MessageType.CONNECTED_USER_INFO:
return getConnectedInfoMessage(message as ConnectedClientInfoEvent);
case MessageType.USER_JOINED:
return getUserJoinedMessage(message as ChatMessage);
case MessageType.CHAT_ACTION:
return getActionMessage(message as ChatMessage);
case MessageType.SYSTEM:
return (
<ChatSystemMessage
message={message as ChatMessage}
highlightString={usernameToHighlight} // What to highlight in the message
key={message.id}
/>
);
case MessageType.FEDIVERSE_ENGAGEMENT_FOLLOW:
return getFediverseMessage(message as FediverseEvent);
case MessageType.FEDIVERSE_ENGAGEMENT_LIKE:
return getFediverseMessage(message as FediverseEvent);
case MessageType.FEDIVERSE_ENGAGEMENT_REPOST:
return getFediverseMessage(message as FediverseEvent);
default:
return null;
}
};
const scrollChatToBottom = (ref, behavior = 'smooth') => {
clearTimeout(scrollToBottomDelay.current);
clearTimeout(showScrollToBottomButtonDelay.current);
scrollToBottomDelay.current = setTimeout(() => {
ref.current?.scrollToIndex({
index: messages.length - 1,
behavior,
});
setIsAtBottom(true);
setShowScrollToBottomButton(false);
}, 100);
};
// This is a hack to force a scroll to the very bottom of the chat messages
// on initial mount of the component.
// For https://github.com/owncast/owncast/issues/2500
useEffect(() => {
setTimeout(() => {
scrollChatToBottom(chatContainerRef, 'auto');
setShowScrolltoBottomButtonWithDelay(false);
}, 500);
}, []);
const MessagesTable = useMemo(
() => (
<>
<Virtuoso
id="virtuoso"
style={{ height }}
className={styles.virtuoso}
ref={chatContainerRef}
data={messages}
itemContent={(index, message) => getViewForMessage(index, message)}
initialTopMostItemIndex={messages.length - 1}
followOutput={() => {
clearTimeout(showScrollToBottomButtonDelay.current);
if (isAtBottom) {
setShowScrollToBottomButton(false);
scrollChatToBottom(chatContainerRef, 'auto');
return 'smooth';
}
setShowScrolltoBottomButtonWithDelay(true);
return false;
}}
alignToBottom
atBottomThreshold={70}
atBottomStateChange={bottom => {
setIsAtBottom(bottom);
if (bottom) {
setShowScrollToBottomButton(false);
} else {
setShowScrolltoBottomButtonWithDelay(true);
}
}}
/>
{showScrollToBottomButton && (
<ScrollToBotBtn
onClick={() => {
scrollChatToBottom(chatContainerRef, 'auto');
}}
/>
)}
</>
),
[messages, usernameToHighlight, chatUserId, isModerator, showScrollToBottomButton, isAtBottom],
);
return (
<div id="chat-container" className={styles.chatContainer}>
{MessagesTable}
{showInput && (
<div className={styles.chatTextField}>
<ChatTextField />
</div>
)}
</div>
);
};
ChatContainer.defaultProps = {
showInput: true,
height: 'auto',
};