You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.9 KiB
82 lines
2.9 KiB
/* eslint-disable react/no-unknown-property */ |
|
import { useRecoilValue } from 'recoil'; |
|
import { useEffect } from 'react'; |
|
import { ErrorBoundary } from 'react-error-boundary'; |
|
import { ChatMessage } from '../../../../interfaces/chat-message.model'; |
|
import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer'; |
|
import { |
|
ClientConfigStore, |
|
currentUserAtom, |
|
visibleChatMessagesSelector, |
|
clientConfigStateAtom, |
|
appStateAtom, |
|
serverStatusState, |
|
isChatAvailableSelector, |
|
} from '../../../../components/stores/ClientConfigStore'; |
|
import Header from '../../../../components/ui/Header/Header'; |
|
import { ClientConfig } from '../../../../interfaces/client-config.model'; |
|
import { AppStateOptions } from '../../../../components/stores/application-state'; |
|
import { ServerStatus } from '../../../../interfaces/server-status.model'; |
|
import { Theme } from '../../../../components/theme/Theme'; |
|
import { ComponentError } from '../../../../components/ui/ComponentError/ComponentError'; |
|
|
|
export default function ReadWriteChatEmbed() { |
|
const currentUser = useRecoilValue(currentUserAtom); |
|
const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector); |
|
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom); |
|
const clientStatus = useRecoilValue<ServerStatus>(serverStatusState); |
|
|
|
const appState = useRecoilValue<AppStateOptions>(appStateAtom); |
|
const isChatAvailable = useRecoilValue(isChatAvailableSelector); |
|
|
|
const { name, chatDisabled } = clientConfig; |
|
const { videoAvailable } = appState; |
|
const { streamTitle, online } = clientStatus; |
|
|
|
const headerText = online ? streamTitle || name : name; |
|
|
|
// This is a hack to force a specific body background color for just this page. |
|
useEffect(() => { |
|
document.body.classList.add('body-background'); |
|
}, []); |
|
|
|
return ( |
|
<div> |
|
<style jsx global> |
|
{` |
|
.body-background { |
|
background: var(--theme-color-components-chat-background); |
|
} |
|
`} |
|
</style> |
|
<ErrorBoundary |
|
// eslint-disable-next-line react/no-unstable-nested-components |
|
fallbackRender={({ error }) => ( |
|
<ComponentError componentName="ReadWriteChatEmbed" message={error.message} /> |
|
)} |
|
> |
|
<ClientConfigStore /> |
|
<Theme /> |
|
<Header |
|
name={headerText} |
|
chatAvailable |
|
chatDisabled={chatDisabled} |
|
online={videoAvailable} |
|
/> |
|
{currentUser && ( |
|
<div id="chat-container"> |
|
<ChatContainer |
|
messages={messages} |
|
usernameToHighlight={currentUser.displayName} |
|
chatUserId={currentUser.id} |
|
isModerator={currentUser.isModerator} |
|
showInput |
|
height="92vh" |
|
chatAvailable={isChatAvailable} |
|
/> |
|
</div> |
|
)} |
|
</ErrorBoundary> |
|
</div> |
|
); |
|
}
|
|
|