Add missing id's

ant-media · Dec 18, 2024 · 2fdeb90 · 2fdeb90
1 parent e29d239
commit 2fdeb90
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 17 deletions.
diff --git a/react/src/Components/Cards/VideoCard.js b/react/src/Components/Cards/VideoCard.js
@@ -70,9 +70,9 @@ function VideoCard(props) {
 
 
 
-    const OverlayButton = ({ title, icon, color, onClick }) => (
+    const OverlayButton = ({ title, icon, color, onClick, label }) => (
         <Tooltip title={title} placement="top">
-            <Fab onClick={onClick} color={color} aria-label="add" size="small">
+            <Fab onClick={onClick} color={color} aria-label={label} size="small">
                 <SvgIcon size={36} name={icon} color={theme.palette?.iconColor?.primary} />
             </Fab>
         </Tooltip>
@@ -106,13 +106,15 @@ function VideoCard(props) {
                         title={`Camera ${useAvatar ? "off" : "on"} ${props.name}`}
                         icon={useAvatar ? "camera-off" : "camera"}
                         color={useAvatar ? "error" : "primary"}
+                        label={useAvatar ? "turn-on-camera" : "turn-off-camera"}
                         onClick={handleToggleCam}
                     />
                 )}
                 <OverlayButton
                     title={`Microphone ${micMuted ? "on" : "off"} ${props.name}`}
                     icon={micMuted ? "muted-microphone" : "microphone"}
                     color={micMuted ? "error" : "primary"}
+                    label={micMuted ? "unmute" : "mute"}
                     onClick={handleToggleMic}
                 />
             </>
@@ -124,6 +126,7 @@ function VideoCard(props) {
             title={`${props.pinned ? t("unpin") : t("pin")} ${props.name}`}
             icon={props.pinned ? "unpin" : "pin"}
             color="primary"
+            label={props.pinned ? "unpin" : "pin"}
             onClick={() => props?.pinVideo(props.trackAssignment.streamId)}
         />
     );
@@ -162,7 +165,7 @@ function VideoCard(props) {
                     >
                         {!isMobile && !isTablet && <PinButton props={props} />}
                         {isAdministrativeButtonsVisible && (
-                            <AdministrativeButtons props={props} micMuted={micMuted} />
+                            <AdministrativeButtons props={props} micMuted={micMuted} useAvatar={useAvatar}/>
                         )}
                     </Grid>
                 </Grid>

diff --git a/react/src/Components/Footer/Components/GeneralSettingsDialog.js b/react/src/Components/Footer/Components/GeneralSettingsDialog.js
@@ -65,6 +65,7 @@ function GeneralSettingsDialog({
                     <Grid item xs={10}>
                       <Select
                           fullWidth
+                          id="language-select"
                           variant="outlined"
                           value={currentLanguage}
                           onChange={(e) => switchLanguage(e.target.value)}
@@ -89,6 +90,7 @@ function GeneralSettingsDialog({
                     <Grid item xs={10}>
                       <Select
                           fullWidth
+                          id="theme-select"
                           variant="outlined"
                           value={currentTheme}
                           onChange={(e) => switchTheme(e.target.value)}

diff --git a/react/src/Components/Footer/Components/LayoutSettingsDialog.js b/react/src/Components/Footer/Components/LayoutSettingsDialog.js
@@ -89,14 +89,8 @@ export function LayoutSettingsDialog(props) {
         }
       });
     } else if (mode === "sidebar") {
-      const participants = document.querySelectorAll(
-        ".single-video-container.not-pinned video"
-      );
-      const firstParticipant =
-        participants.length > 1 ? participants[1] : participants[0];
-
-      //pin the first participant
-      props?.pinVideo(firstParticipant?.id ? firstParticipant.streamId : "localVideo");
+      //pins your video
+      props?.pinVideo(props?.videoTrackAssignments[0]?.streamId);
     }
   };
   const radioLabel = (label, icon) => {

diff --git a/react/src/Components/Footer/Components/SettingsDialog.js b/react/src/Components/Footer/Components/SettingsDialog.js
@@ -63,7 +63,7 @@ export default function SettingsDialog(props) {
   }, [props?.devices]);
 
   return (
-    <Dialog onClose={handleClose} open={props?.open} fullScreen={fullScreen} maxWidth={'sm'}>
+    <Dialog onClose={handleClose} open={props?.open} fullScreen={fullScreen} maxWidth={'sm'} id="settings-dialog">
       <AntDialogTitle onClose={handleClose}>{t('Set Camera and Microphone')}</AntDialogTitle>
       <DialogContent>
         <Box component="form" sx={{ display: 'flex', flexWrap: 'wrap' }}>
@@ -76,7 +76,7 @@ export default function SettingsDialog(props) {
                 <Select
                   autoFocus={props?.selectFocus === 'camera'}
                   fullWidth
-                  id="demo-dialog-native"
+                  id="setting-dialog-camera-select"
                   variant="outlined"
                   value={props?.selectedCamera}
                   onChange={e => switchVideoMode(e.target.value)}
@@ -104,7 +104,14 @@ export default function SettingsDialog(props) {
             </Grid>
             <Grid container alignItems={'center'} spacing={2}>
               <Grid item xs={10}>
-                <Select variant="outlined" fullWidth value={props?.videoSendResolution} onChange={e => props?.setVideoSendResolution(e.target.value)} sx={{ color: '#fff' }}>
+                <Select
+                    variant="outlined"
+                    fullWidth
+                    value={props?.videoSendResolution}
+                    onChange={e => props?.setVideoSendResolution(e.target.value)}
+                    sx={{ color: '#fff' }}
+                    id="setting-dialog-resolution-select"
+                >
                   <MenuItem key="auto" value="auto">
                     {t('Auto')}
                   </MenuItem>

diff --git a/react/src/pages/MeetingRoom.js b/react/src/pages/MeetingRoom.js
@@ -12,6 +12,7 @@ import {isComponentMode} from "../utils";
 import BecomePublisherConfirmationDialog from "../Components/BecomePublisherConfirmationDialog";
 import RecordingButton from "../Components/RecordingButton";
 import TalkingIndicator from "../Components/TalkingIndicator";
+import {Container} from "@mui/material";
 
 function debounce(fn, ms) {
   let timer;
@@ -104,7 +105,9 @@ const MeetingRoom = React.memo((props) => {
   const pinLayout = (typeof firstPinnedParticipant !== "undefined");
 
   return (
-      <>
+      <Container
+          id="meeting-room"
+      >
         {props?.isRecordPluginActive === true ?
             <RecordingButton/> : null
         }
@@ -272,7 +275,7 @@ const MeetingRoom = React.memo((props) => {
                   handleEffectsOpen={props?.handleEffectsOpen}
                   globals={props?.globals}
               />
-            </>
+          </Container>
         );
         });
 

diff --git a/react/src/pages/WaitingRoom.js b/react/src/pages/WaitingRoom.js
@@ -219,7 +219,9 @@ function WaitingRoom(props) {
     }
 
     return (
-        <Container>
+        <Container
+            id="waiting-room"
+        >
             <SettingsDialog
                 open={dialogOpen}
                 onClose={handleDialogClose}
@@ -386,6 +388,7 @@ function WaitingRoom(props) {
                                                 color="secondary"
                                                 sx={roundStyle}
                                                 onClick={() => handleDialogOpen()}
+                                                id="waiting-room-more-options"
                                             >
                                                 <SvgIcon size={40} name={"settings"}
                                                          color={theme.palette?.iconColor?.primary}/>