reuterShawn/remnantchat
1
0
Fork 0
forked from Shiloh/remnantchat
Code Pull Requests Activity

feat(shell): [closes #155] Handle unsupported environments (#161)

Browse Source 
* feat(shell): [#155] show error in unsupported environment
* feat(shell): [#155] show details about unsupported environment
This commit is contained in:
Jeremy Kahn 2023-09-07 09:28:29 -05:00 committed by GitHub
parent d988620a00
commit d06bbcf0f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 155 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Shell/EnvironmentUnsupportedDialog.tsx Normal file
View File

@ -0,0 +1,79 @@
import Box from '@mui/material/Box'
import Dialog from '@mui/material/Dialog'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogTitle from '@mui/material/DialogTitle'
import ErrorIcon from '@mui/icons-material/Error'
import Typography from '@mui/material/Typography'
import useTheme from '@mui/material/styles/useTheme'
import Link from '@mui/material/Link'
const { isSecureContext, RTCDataChannel } = window
const doesSupportWebRtc = RTCDataChannel !== undefined
export const isEnvironmentSupported =
(isSecureContext && doesSupportWebRtc) || process.env.NODE_ENV === 'test'
export const EnvironmentUnsupportedDialog = () => {
const theme = useTheme()
return (
<Dialog
open={!isEnvironmentSupported}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<ErrorIcon
fontSize="medium"
sx={theme => ({
color: theme.palette.error.main,
mr: theme.spacing(1),
})}
/>
Environment unsupported
</Box>
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Chitchatter is unable to start up. The following issues were detected:
</DialogContentText>
<Typography
component="ul"
sx={{
color: theme.palette.text.secondary,
m: 1,
}}
>
{!isSecureContext ? (
<li>
The app is not being served from a{' '}
<Link
href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts"
rel="noreferrer"
target="_blank"
>
secure context
</Link>
.
</li>
) : null}
{!doesSupportWebRtc ? (
<li>
Your browser does not support WebRTC. Consider using{' '}
<Link
href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection#browser_compatibility"
rel="noreferrer"
target="_blank"
>
a browser that does
</Link>
.
</li>
) : null}
</Typography>
</DialogContent>
</Dialog>
)
}

140
src/components/Shell/Shell.tsx
View File

@ -31,6 +31,10 @@ import { QRCodeDialog } from './QRCodeDialog'
import { RoomShareDialog } from './RoomShareDialog'
import { useConnectionTest } from './useConnectionTest'
import { ServerConnectionFailureDialog } from './ServerConnectionFailureDialog'
import {
EnvironmentUnsupportedDialog,
isEnvironmentSupported,
} from './EnvironmentUnsupportedDialog'
export interface ShellProps extends PropsWithChildren {
userPeerId: string
@ -309,70 +313,78 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
<ShellContext.Provider value={shellContextValue}>
<ThemeProvider theme={theme}>
<CssBaseline />
<UpgradeDialog appNeedsUpdate={appNeedsUpdate} />
<Box
className="Chitchatter"
sx={{
height: '100vh',
display: 'flex',
}}
>
<NotificationArea
alertSeverity={alertSeverity}
alertText={alertText}
isAlertShowing={isAlertShowing}
onAlertClose={handleAlertClose}
/>
<ShellAppBar
onDrawerOpen={handleDrawerOpen}
onLinkButtonClick={handleLinkButtonClick}
isDrawerOpen={isDrawerOpen}
isPeerListOpen={isPeerListOpen}
title={title}
onPeerListClick={handlePeerListClick}
onRoomControlsClick={() => setShowRoomControls(!showRoomControls)}
setIsQRCodeDialogOpen={setIsQRCodeDialogOpen}
showAppBar={showAppBar}
isFullscreen={isFullscreen}
setIsFullscreen={setIsFullscreen}
/>
<Drawer
isDrawerOpen={isDrawerOpen}
onDrawerClose={handleDrawerClose}
theme={theme}
/>
<RouteContent
isDrawerOpen={isDrawerOpen}
isPeerListOpen={isPeerListOpen}
showAppBar={showAppBar}
>
<ErrorBoundary>{children}</ErrorBoundary>
</RouteContent>
<PeerList
userId={userPeerId}
roomId={roomId}
isPeerListOpen={isPeerListOpen}
onPeerListClose={handlePeerListClick}
peerList={peerList}
peerConnectionTypes={peerConnectionTypes}
audioState={audioState}
peerAudios={peerAudios}
connectionTestResults={connectionTestResults}
/>
<QRCodeDialog
isOpen={isQRCodeDialogOpen}
handleClose={handleQRCodeDialogClose}
/>
<RoomShareDialog
isOpen={isRoomShareDialogOpen}
handleClose={handleRoomShareDialogClose}
roomId={roomId ?? ''}
password={password ?? ''}
showAlert={showAlert}
copyToClipboard={copyToClipboard}
/>
<ServerConnectionFailureDialog />
</Box>
{isEnvironmentSupported ? (
<>
<UpgradeDialog appNeedsUpdate={appNeedsUpdate} />
<Box
className="Chitchatter"
sx={{
height: '100vh',
display: 'flex',
}}
>
<NotificationArea
alertSeverity={alertSeverity}
alertText={alertText}
isAlertShowing={isAlertShowing}
onAlertClose={handleAlertClose}
/>
<ShellAppBar
onDrawerOpen={handleDrawerOpen}
onLinkButtonClick={handleLinkButtonClick}
isDrawerOpen={isDrawerOpen}
isPeerListOpen={isPeerListOpen}
title={title}
onPeerListClick={handlePeerListClick}
onRoomControlsClick={() =>
setShowRoomControls(!showRoomControls)
}
setIsQRCodeDialogOpen={setIsQRCodeDialogOpen}
showAppBar={showAppBar}
isFullscreen={isFullscreen}
setIsFullscreen={setIsFullscreen}
/>
<Drawer
isDrawerOpen={isDrawerOpen}
onDrawerClose={handleDrawerClose}
theme={theme}
/>
<RouteContent
isDrawerOpen={isDrawerOpen}
isPeerListOpen={isPeerListOpen}
showAppBar={showAppBar}
>
<ErrorBoundary>{children}</ErrorBoundary>
</RouteContent>
<PeerList
userId={userPeerId}
roomId={roomId}
isPeerListOpen={isPeerListOpen}
onPeerListClose={handlePeerListClick}
peerList={peerList}
peerConnectionTypes={peerConnectionTypes}
audioState={audioState}
peerAudios={peerAudios}
connectionTestResults={connectionTestResults}
/>
<QRCodeDialog
isOpen={isQRCodeDialogOpen}
handleClose={handleQRCodeDialogClose}
/>
<RoomShareDialog
isOpen={isRoomShareDialogOpen}
handleClose={handleRoomShareDialogClose}
roomId={roomId ?? ''}
password={password ?? ''}
showAlert={showAlert}
copyToClipboard={copyToClipboard}
/>
<ServerConnectionFailureDialog />
</Box>
</>
) : (
<EnvironmentUnsupportedDialog />
)}
</ThemeProvider>
</ShellContext.Provider>
)