mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 12:49:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat(embeds): wrap chat embeds in error components

Browse source
This commit is contained in:
Gabe Kangas 2023-05-06 14:11:09 -07:00
parent f5657d9fdc
commit 8dbc8a07cf
No known key found for this signature in database
GPG key ID: 4345B2060657F330
2 changed files with 52 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
web/pages/embed/chat/readonly/index.tsx
View file

@ -1,4 +1,5 @@
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 {
@ -8,6 +9,7 @@ import {
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);
@ -16,19 +18,26 @@ export default function ReadOnlyChatEmbed() {
return (
<div>
<ClientConfigStore />
<Theme />
{currentUser && (
<ChatContainer
messages={messages}
usernameToHighlight={currentUser.displayName}
chatUserId={currentUser.id}
isModerator={false}
showInput={false}
height="100vh"
chatAvailable={isChatAvailable}
/>
)}
<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}
/>
)}
</ErrorBoundary>
</div>
);
}

46
web/pages/embed/chat/readwrite/index.tsx
View file

@ -1,6 +1,7 @@
/* 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 {
@ -17,6 +18,7 @@ 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);
@ -47,22 +49,34 @@ export default function ReadWriteChatEmbed() {
}
`}
</style>
<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
// 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>
);
}