Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases 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 { useRecoilValue } from 'recoil';
import { ErrorBoundary } from 'react-error-boundary';
import { ChatMessage } from '../../../../interfaces/chat-message.model'; import { ChatMessage } from '../../../../interfaces/chat-message.model';
import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer'; import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer';
import { import {
@ -8,6 +9,7 @@ import {
isChatAvailableSelector, isChatAvailableSelector,
} from '../../../../components/stores/ClientConfigStore'; } from '../../../../components/stores/ClientConfigStore';
import { Theme } from '../../../../components/theme/Theme'; import { Theme } from '../../../../components/theme/Theme';
import { ComponentError } from '../../../../components/ui/ComponentError/ComponentError';
export default function ReadOnlyChatEmbed() { export default function ReadOnlyChatEmbed() {
const currentUser = useRecoilValue(currentUserAtom); const currentUser = useRecoilValue(currentUserAtom);
@ -16,19 +18,26 @@ export default function ReadOnlyChatEmbed() {
return ( return (
<div> <div>
<ClientConfigStore /> <ErrorBoundary
<Theme /> // eslint-disable-next-line react/no-unstable-nested-components
{currentUser && ( fallbackRender={({ error }) => (
<ChatContainer <ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
messages={messages} )}
usernameToHighlight={currentUser.displayName} >
chatUserId={currentUser.id} <ClientConfigStore />
isModerator={false} <Theme />
showInput={false} {currentUser && (
height="100vh" <ChatContainer
chatAvailable={isChatAvailable} messages={messages}
/> usernameToHighlight={currentUser.displayName}
)} chatUserId={currentUser.id}
isModerator={false}
showInput={false}
height="100vh"
chatAvailable={isChatAvailable}
/>
)}
</ErrorBoundary>
</div> </div>
); );
} }

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

@ -1,6 +1,7 @@
/* eslint-disable react/no-unknown-property */ /* eslint-disable react/no-unknown-property */
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { ChatMessage } from '../../../../interfaces/chat-message.model'; import { ChatMessage } from '../../../../interfaces/chat-message.model';
import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer'; import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer';
import { import {
@ -17,6 +18,7 @@ import { ClientConfig } from '../../../../interfaces/client-config.model';
import { AppStateOptions } from '../../../../components/stores/application-state'; import { AppStateOptions } from '../../../../components/stores/application-state';
import { ServerStatus } from '../../../../interfaces/server-status.model'; import { ServerStatus } from '../../../../interfaces/server-status.model';
import { Theme } from '../../../../components/theme/Theme'; import { Theme } from '../../../../components/theme/Theme';
import { ComponentError } from '../../../../components/ui/ComponentError/ComponentError';
export default function ReadWriteChatEmbed() { export default function ReadWriteChatEmbed() {
const currentUser = useRecoilValue(currentUserAtom); const currentUser = useRecoilValue(currentUserAtom);
@ -47,22 +49,34 @@ export default function ReadWriteChatEmbed() {
} }
`} `}
</style> </style>
<ClientConfigStore /> <ErrorBoundary
<Theme /> // eslint-disable-next-line react/no-unstable-nested-components
<Header name={headerText} chatAvailable chatDisabled={chatDisabled} online={videoAvailable} /> fallbackRender={({ error }) => (
{currentUser && ( <ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
<div id="chat-container"> )}
<ChatContainer >
messages={messages} <ClientConfigStore />
usernameToHighlight={currentUser.displayName} <Theme />
chatUserId={currentUser.id} <Header
isModerator={currentUser.isModerator} name={headerText}
showInput chatAvailable
height="92vh" chatDisabled={chatDisabled}
chatAvailable={isChatAvailable} online={videoAvailable}
/> />
</div> {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> </div>
); );
} }