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

* feat(shell): [#155] show error in unsupported environment
* feat(shell): [#155] show details about unsupported environment

src/components/Shell/EnvironmentUnsupportedDialog.tsx

@@ -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>
+  )
+}

src/components/Shell/Shell.tsx

@@ -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,6 +313,8 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
     <ShellContext.Provider value={shellContextValue}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
+        {isEnvironmentSupported ? (
+          <>
             <UpgradeDialog appNeedsUpdate={appNeedsUpdate} />
             <Box
               className="Chitchatter"
@@ -330,7 +336,9 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
                 isPeerListOpen={isPeerListOpen}
                 title={title}
                 onPeerListClick={handlePeerListClick}
-            onRoomControlsClick={() => setShowRoomControls(!showRoomControls)}
+                onRoomControlsClick={() =>
+                  setShowRoomControls(!showRoomControls)
+                }
                 setIsQRCodeDialogOpen={setIsQRCodeDialogOpen}
                 showAppBar={showAppBar}
                 isFullscreen={isFullscreen}
@@ -373,6 +381,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
               />
               <ServerConnectionFailureDialog />
             </Box>
+          </>
+        ) : (
+          <EnvironmentUnsupportedDialog />
+        )}
       </ThemeProvider>
     </ShellContext.Provider>
   )