VIDCS-3317: In meeting room on mobile, muted alert and connection ale…

…rt are not centered (#103)
Vonage · Feb 28, 2025 · 16420ad · 16420ad
1 parent 5c5bb96
commit 16420ad
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 69 deletions.
diff --git a/frontend/src/components/MeetingRoom/AudioControlButton/AudioControlButton.tsx b/frontend/src/components/MeetingRoom/AudioControlButton/AudioControlButton.tsx
@@ -34,7 +34,7 @@ const AudioControlButton = (): ReactElement => {
 
   return (
     <div className="hidden xs:inline">
-      <MutedAlert anchorRef={anchorRef} />
+      <MutedAlert />
       <ButtonGroup
         className="mr-3 mt-1 bg-notVeryGray-55"
         disableElevation

diff --git a/frontend/src/components/MeetingRoom/ConnectionAlert/ConnectionAlert.tsx b/frontend/src/components/MeetingRoom/ConnectionAlert/ConnectionAlert.tsx
@@ -1,5 +1,6 @@
-import { Alert, AlertTitle, Stack } from '@mui/material';
+import { Alert, AlertTitle, SxProps } from '@mui/material';
 import { ReactElement, useState } from 'react';
+import useIsSmallViewport from '../../../hooks/useIsSmallViewport';
 
 export type ConnectionAlertProps = {
   title: string;
@@ -8,7 +9,6 @@ export type ConnectionAlertProps = {
   severity: 'warning' | 'error';
 };
 
-const maxWidth = '@apply max-w-[calc(100vw_-_8px)]';
 /**
  * ConnectionAlert Component
  * An MUI Alert to display the title and message for connection issues.
@@ -26,26 +26,42 @@ const ConnectionAlert = ({
   severity,
 }: ConnectionAlertProps): ReactElement | false => {
   const [closed, setClosed] = useState(false);
+  const isSmallViewPort = useIsSmallViewport();
+  const sxProps: SxProps = isSmallViewPort
+    ? {
+        left: '50%',
+        transform: 'translate(-50%, 0%)',
+        // We account for the SmallViewportHeader
+        top: '64px',
+      }
+    : {
+        left: '0.25rem',
+        top: '0.25rem',
+      };
 
   return (
     !closed && (
-      <Stack className={`absolute left-1 top-1 ${maxWidth}`}>
-        <Alert
-          severity={severity}
-          variant="standard"
-          color="error"
-          {...(closable
-            ? {
-                onClose: () => {
-                  setClosed(true);
-                },
-              }
-            : {})}
-        >
-          <AlertTitle>{title}</AlertTitle>
-          {message}
-        </Alert>
-      </Stack>
+      <Alert
+        severity={severity}
+        variant="standard"
+        color="error"
+        {...(closable
+          ? {
+              onClose: () => {
+                setClosed(true);
+              },
+            }
+          : {})}
+        sx={{
+          ...sxProps,
+          position: 'absolute',
+          width: '100%',
+          maxWidth: '320px',
+        }}
+      >
+        <AlertTitle>{title}</AlertTitle>
+        {message}
+      </Alert>
     )
   );
 };

diff --git a/frontend/src/components/MutedAlert/MutedAlert.tsx b/frontend/src/components/MutedAlert/MutedAlert.tsx
@@ -1,75 +1,48 @@
-import Paper from '@mui/material/Paper';
-import Popper from '@mui/material/Popper';
 import Fade from '@mui/material/Fade';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-import { useTheme } from '@mui/material/styles';
-import { useState, useEffect, RefObject, ReactElement } from 'react';
+import { useState, useEffect, ReactElement } from 'react';
+import { Alert } from '@mui/material';
 import { MUTED_ALERT_MESSAGE, FORCE_MUTED_ALERT_MESSAGE } from '../../utils/constants';
 import useSpeakingDetector from '../../hooks/useSpeakingDetector';
 import usePublisherContext from '../../hooks/usePublisherContext';
-
-export type MutedAlertProps = {
-  anchorRef: RefObject<HTMLInputElement>;
-};
+import useIsSmallViewport from '../../hooks/useIsSmallViewport';
 
 /**
  * MutedAlert Component
  *
  * Displays a dismissible notification when the user is speaking while muted or has been muted by another participant.
- * @param {MutedAlertProps} props - The props for the component.
- *  @property {RefObject<HTMLInputElement>} anchorRef - The reference element for the MutedAlert component.
  * @returns {ReactElement} - The MutedAlert component.
  */
-const MutedAlert = ({ anchorRef }: MutedAlertProps): ReactElement => {
+const MutedAlert = (): ReactElement => {
   const { publisher, isAudioEnabled, isForceMuted } = usePublisherContext();
   const [open, setOpen] = useState<boolean>(false);
   const isSpeakingWhileMuted = useSpeakingDetector({
     isAudioEnabled,
     selectedMicrophoneId: publisher?.getAudioSource()?.id,
   });
-  const theme = useTheme();
+  const isSmallViewport = useIsSmallViewport();
+  const messageToDisplay = isForceMuted ? FORCE_MUTED_ALERT_MESSAGE : MUTED_ALERT_MESSAGE;
 
   useEffect(() => {
     setOpen(isForceMuted || isSpeakingWhileMuted);
   }, [isForceMuted, isSpeakingWhileMuted]);
 
   return (
-    <Popper open={open} anchorEl={anchorRef.current} placement="top" transition>
-      {({ TransitionProps }) => (
-        <Fade {...TransitionProps} timeout={350}>
-          <Paper
-            sx={{
-              p: 2,
-              backgroundColor: 'rgb(60, 64, 67)',
-              color: '#fff',
-              maxWidth: 300,
-              width: 'auto',
-              borderRadius: 2,
-              boxShadow: 3,
-              fontSize: '0.875rem',
-              transform: 'translateY(-10%) translateX(-40%)',
-              // this is needed to center align on small devices
-              [theme.breakpoints.down(700)]: {
-                transform: 'translateY(-10%) translateX(25%)',
-              },
-            }}
-          >
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-              {isForceMuted && <span>{FORCE_MUTED_ALERT_MESSAGE}</span>}
-              {isSpeakingWhileMuted && !isForceMuted && <span>{MUTED_ALERT_MESSAGE}</span>}
-              <IconButton
-                onClick={() => setOpen(false)}
-                sx={{ color: '#fff', padding: 0, marginLeft: 1 }}
-                size="small"
-              >
-                <CloseIcon fontSize="small" />
-              </IconButton>
-            </div>
-          </Paper>
-        </Fade>
-      )}
-    </Popper>
+    <Fade in={open}>
+      <Alert
+        severity="warning"
+        onClose={() => setOpen(false)}
+        sx={{
+          position: 'absolute',
+          bottom: isSmallViewport ? '80px' : '96px',
+          left: '50%',
+          transform: 'translate(-50%, 0%)',
+          width: '100%',
+          maxWidth: '320px',
+        }}
+      >
+        {messageToDisplay}
+      </Alert>
+    </Fade>
   );
 };