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