05341aced0
Adds a 'readonly' prop to ChatContainer that conditionally applies a
'readonly-chat' CSS class to the chat container element. This allows
streamers using OBS to target the readonly chat embed with custom CSS.
The readonly embed at /embed/chat/readonly now passes readonly={true}
to ChatContainer, which adds the class to the container div.
Fixes #4266
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { useRecoilValue } from 'recoil';
|
|
import { ErrorBoundary } from 'react-error-boundary';
|
|
import { ChatMessage } from '../../../../interfaces/chat-message.model';
|
|
import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer';
|
|
import {
|
|
ClientConfigStore,
|
|
currentUserAtom,
|
|
visibleChatMessagesSelector,
|
|
isChatAvailableSelector,
|
|
} from '../../../../components/stores/ClientConfigStore';
|
|
import { Theme } from '../../../../components/theme/Theme';
|
|
import { ComponentError } from '../../../../components/ui/ComponentError/ComponentError';
|
|
|
|
export default function ReadOnlyChatEmbed() {
|
|
const currentUser = useRecoilValue(currentUserAtom);
|
|
const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector);
|
|
const isChatAvailable = useRecoilValue(isChatAvailableSelector);
|
|
|
|
return (
|
|
<div>
|
|
<ErrorBoundary
|
|
// eslint-disable-next-line react/no-unstable-nested-components
|
|
fallbackRender={({ error }) => (
|
|
<ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
|
|
)}
|
|
>
|
|
<ClientConfigStore />
|
|
<Theme />
|
|
{currentUser && (
|
|
<ChatContainer
|
|
messages={messages}
|
|
usernameToHighlight={currentUser.displayName}
|
|
chatUserId={currentUser.id}
|
|
isModerator={false}
|
|
showInput={false}
|
|
height="100vh"
|
|
chatAvailable={isChatAvailable}
|
|
readonly
|
|
/>
|
|
)}
|
|
</ErrorBoundary>
|
|
</div>
|
|
);
|
|
}
|