Skip to content

Commit

Permalink
feat(shell): [closes #155] Handle unsupported environments (#161)
Browse files Browse the repository at this point in the history 
* feat(shell): [#155] show error in unsupported environment
* feat(shell): [#155] show details about unsupported environment
  • Loading branch information
@jeremyckahn
jeremyckahn authored Sep 7, 2023
1 parent d988620 commit d06bbcf
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 64 deletions.
79 changes: 79 additions & 0 deletions src/components/Shell/EnvironmentUnsupportedDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 76 additions & 64 deletions src/components/Shell/Shell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
)
Expand Down

1 comment on commit d06bbcf

@vercel
Copy link

@vercel vercel bot commented on d06bbcf Sep 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

chitchatter – ./

chitchatter-git-main-jeremyckahn.vercel.app
chitchatter-jeremyckahn.vercel.app
chitchatter.vercel.app

Please sign in to comment.