Merge branch 'main' into addRaiseYourHand

ant-media · Dec 15, 2024 · 2c60763 · 2c60763
2 parents 14728c3 + b15fe00
commit 2c60763
Show file tree

Hide file tree

Showing 21 changed files with 1,760 additions and 193 deletions.
diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
@@ -359,7 +359,6 @@ jobs:
         NODE_OPTIONS: '--max-old-space-size=4096'
       run: |
         cd react
-        mv .env.production.conferencing .env.production
         sed -i "s#^REACT_APP_TURN_SERVER_URL=.*#REACT_APP_TURN_SERVER_URL=\"turn:${{ secrets.STAGING_TURN_URL }}\"#" .env.production
         sed -i "s#^REACT_APP_TURN_SERVER_USERNAME=.*#REACT_APP_TURN_SERVER_USERNAME=\"${{ secrets.STAGING_TURN_USERNAME }}\"#" .env.production
         sed -i "s#^REACT_APP_TURN_SERVER_CREDENTIAL=.*#REACT_APP_TURN_SERVER_CREDENTIAL=\"${{ secrets.STAGING_TURN_PASSWORD }}\"#" .env.production

diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,5 @@ webapp/src/main/webapp/
 react/.env.development
 react/.idea/workspace.xml
 react/.env.fakeeh
+test/run.sh
+test/runw.sh
diff --git a/react/.env.development.conference b/react/.env.development.conference
@@ -0,0 +1,77 @@
+## Ant Media Server WebRTC Conference App Environment Variables
+# Path: .env.production
+
+# IMPORTANT: This file is for production environment.
+# If you wanted to make local tests, you can copy this file to .env.development and change the values.
+# When you run the application with npm start, .env.development file will be used.
+# When you run the application with npm run build, .env.production file will be used.
+
+# We don't suggest to set REACT_APP_WEBSOCKET_URL and REACT_APP_REST_BASE_URL in production environment.
+# When you create a war file and deploy it to the Ant Media Server, these variables will be set automatically.
+
+# Ant Media Server URL configurations
+REACT_APP_WEBSOCKET_URL="ws://localhost:5080/Conference/websocket"
+#REACT_APP_WEBSOCKET_URL="wss://circle.antmedia.io/Conference/websocket"
+#REACT_APP_WEBSOCKET_URL="ws://localhost:7080/demo/websocket"
+
+# Turn Server URL configurations
+REACT_APP_TURN_SERVER_URL="turn:ovh36.antmedia.io:3478"
+REACT_APP_TURN_SERVER_USERNAME="ovh36"
+REACT_APP_TURN_SERVER_CREDENTIAL="ovh36"
+
+# Footer buttons configurations
+REACT_APP_FOOTER_OPTION_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_CAMERA_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_MIC_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_SCREEN_SHARE_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_REACTIONS_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_MESSAGE_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_PARTICIPANT_LIST_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_END_CALL_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_CLOCK_VISIBILITY=true
+REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=false
+
+# Option menu buttons configurations
+REACT_APP_OPTION_MENU_GENERAL_SETTINGS_BUTTON_VISIBILITY=true
+REACT_APP_OPTION_MENU_CHANGE_LAYOUT_BUTTON_VISIBILITY=true
+REACT_APP_OPTION_MENU_CALL_SETTINGS_BUTTON_VISIBILITY=true
+REACT_APP_OPTION_MENU_REPORT_PROBLEM_BUTTON_VISIBILITY=true
+
+# General settings configurations
+REACT_APP_GENERAL_SETTINGS_LANGUAGE_VISIBILITY=true
+REACT_APP_GENERAL_SETTINGS_THEME_VISIBILITY=true
+
+# Call settings configurations
+REACT_APP_CALL_SETTINGS_VIRTUAL_BACKGROUND_MODE_VISIBILITY=true
+
+# Waiting room configurations
+REACT_APP_WAITING_ROOM_PARTICIPANT_NAME_READONLY=false
+
+# Layout configurations
+# If you make REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY false, you won't see other participants' video in case of number of participants is more than the max participant number of the layout
+REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY=true
+
+# Time Zone Widget configurations
+REACT_APP_TIME_ZONE_LIVE_TEXT_VISIBILITY=true
+
+# Video Overlay configurations
+REACT_APP_VIDEO_OVERLAY_ADMIN_MODE_ENABLED=false
+
+# Participant Tab configurations
+REACT_APP_PARTICIPANT_TAB_ADMIN_MODE_ENABLED=false
+
+# Meeting Recording configuration
+REACT_APP_RECORDING_MANAGED_BY_ADMIN=false
+
+# Used to force the theme
+#REACT_APP_FORCE_THEME="white"
+
+# Speed Test configurations
+REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=false
+
+# Auto Pin configurations for screen share
+REACT_APP_AUTO_PIN_WHEN_SCREEN_SHARE=true
+
+# URL configurations
+REACT_APP_FOOTER_LOGO_ON_CLICK_URL="https://antmedia.io/circle"
+REACT_APP_REPORT_PROBLEM_URL="https://github.com/ant-media/conference-call-application/issues"
diff --git a/react/.env.development.webinar b/react/.env.development.webinar
@@ -0,0 +1,76 @@
+## Ant Media Server WebRTC Conference App Environment Variables
+# Path: .env.production
+
+# IMPORTANT: This file is for production environment.
+# If you wanted to make local tests, you can copy this file to .env.development and change the values.
+# When you run the application with npm start, .env.development file will be used.
+# When you run the application with npm run build, .env.production file will be used.
+
+# We don't suggest to set REACT_APP_WEBSOCKET_URL and REACT_APP_REST_BASE_URL in production environment.
+# When you create a war file and deploy it to the Ant Media Server, these variables will be set automatically.
+
+# Ant Media Server URL configurations
+#REACT_APP_WEBSOCKET_URL="ws://localhost:5080/Conference/websocket"
+
+# Turn Server URL configurations
+REACT_APP_TURN_SERVER_URL="turn:ovh36.antmedia.io:3478"
+REACT_APP_TURN_SERVER_USERNAME="ovh36"
+REACT_APP_TURN_SERVER_CREDENTIAL="ovh36"
+
+# Footer buttons configurations
+REACT_APP_FOOTER_APP_LOGO_VISIBILITY=false
+REACT_APP_FOOTER_OPTION_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_CAMERA_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_MIC_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_SCREEN_SHARE_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_REACTIONS_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_MESSAGE_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_PARTICIPANT_LIST_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_END_CALL_BUTTON_VISIBILITY=true
+REACT_APP_FOOTER_CLOCK_VISIBILITY=true
+REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=false
+
+# Option menu buttons configurations
+REACT_APP_OPTION_MENU_GENERAL_SETTINGS_BUTTON_VISIBILITY=false
+REACT_APP_OPTION_MENU_CHANGE_LAYOUT_BUTTON_VISIBILITY=false
+REACT_APP_OPTION_MENU_CALL_SETTINGS_BUTTON_VISIBILITY=true
+REACT_APP_OPTION_MENU_REPORT_PROBLEM_BUTTON_VISIBILITY=true
+
+# General settings configurations
+REACT_APP_GENERAL_SETTINGS_LANGUAGE_VISIBILITY=true
+REACT_APP_GENERAL_SETTINGS_THEME_VISIBILITY=true
+
+# Call settings configurations
+REACT_APP_CALL_SETTINGS_VIRTUAL_BACKGROUND_MODE_VISIBILITY=true
+
+# Waiting room configurations
+REACT_APP_WAITING_ROOM_PARTICIPANT_NAME_READONLY=true
+
+# Layout configurations
+# If you make REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY false, you won't see other participants' video in case of number of participants is more than the max participant number of the layout
+REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY=false
+
+# Time Zone Widget configurations
+REACT_APP_TIME_ZONE_LIVE_TEXT_VISIBILITY=true
+
+# Video Overlay configurations
+REACT_APP_VIDEO_OVERLAY_ADMIN_MODE_ENABLED=true
+
+# Speed Test configurations
+REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=true
+
+# Participant Tab configurations
+REACT_APP_PARTICIPANT_TAB_ADMIN_MODE_ENABLED=true
+
+# Meeting Recording configuration
+REACT_APP_RECORDING_MANAGED_BY_ADMIN=true
+
+# Used to force the theme
+REACT_APP_FORCE_THEME="white"
+
+# Speed Test configurations
+REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=true
+
+# URL configurations
+REACT_APP_FOOTER_LOGO_ON_CLICK_URL=""
+REACT_APP_REPORT_PROBLEM_URL=""
diff --git a/react/src/Components/Cards/VideoCard.js b/react/src/Components/Cards/VideoCard.js
@@ -82,9 +82,9 @@ function VideoCard(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [conference.isPublished]);
 
-    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>
@@ -113,18 +113,20 @@ function VideoCard(props) {
 
         return (
             <>
-                {(!useAvatar && process.env.REACT_APP_VIDEO_OVERLAY_ADMIN_MODE_ENABLED === "true") && (
+                {(process.env.REACT_APP_VIDEO_OVERLAY_ADMIN_MODE_ENABLED === "true") && (
                     <OverlayButton
                         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}
                 />
             </>
@@ -136,6 +138,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={() => conference.pinVideo(props.trackAssignment.streamId)}
         />
     );
@@ -166,7 +169,7 @@ function VideoCard(props) {
                 <Grid container justifyContent="center" alignItems="center" wrap="nowrap">
                     <Grid item container justifyContent="center" alignItems="center" columnSpacing={0.5}>
                         {!isMobile && !isTablet && <PinButton props={props} />}
-                        {isAdministrativeButtonsVisible && <AdministrativeButtons props={props} micMuted={micMuted} />}
+                        {isAdministrativeButtonsVisible && <AdministrativeButtons props={props} micMuted={micMuted} useAvatar={useAvatar}/>}
                     </Grid>
                 </Grid>
             </Grid>
@@ -187,6 +190,7 @@ function VideoCard(props) {
                         height: "100%",
                         transform: isMine ? "rotateY(180deg)" : "none",
                     }}
+
                 >
                     <CustomizedVideo
                         {...props}

diff --git a/react/src/Components/Footer/Components/GeneralSettingsDialog.js b/react/src/Components/Footer/Components/GeneralSettingsDialog.js
@@ -86,7 +86,7 @@ export function GeneralSettingsDialog(props) {
               <Grid item xs={10}>
                 <Select
                   fullWidth
-                  id="demo-dialog-native"
+                  id="language-select"
                   variant="outlined"
                   value={currentLanguage}
                   onChange={e => switchLanguage(e.target.value)}
@@ -112,7 +112,7 @@ export function GeneralSettingsDialog(props) {
               <Grid item xs={10}>
                 <Select
                   fullWidth
-                  id="demo-dialog-native"
+                  id="theme-select"
                   variant="outlined"
                   value={themeContext?.currentTheme ? themeContext?.currentTheme : ThemeList.Green}
                   onChange={e => switchTheme(e.target.value)}

diff --git a/react/src/Components/Footer/Components/LayoutSettingsDialog.js b/react/src/Components/Footer/Components/LayoutSettingsDialog.js
@@ -93,14 +93,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
-      conference.pinVideo(firstParticipant?.id ? firstParticipant.streamId : "localVideo");
+      //pins your video
+      conference.pinVideo(conference.videoTrackAssignments[0]?.streamId);
     }
   };
   const radioLabel = (label, icon) => {

diff --git a/react/src/Components/Footer/Components/OptionButton.js b/react/src/Components/Footer/Components/OptionButton.js
@@ -147,7 +147,7 @@ function OptionButton({footer, ...props}) {
 
         {conference.isPlayOnly === false
         && process.env.REACT_APP_OPTION_MENU_CALL_SETTINGS_BUTTON_VISIBILITY === 'true' ?
-          <MenuItem onClick={() => handleDialogOpen()}>
+          <MenuItem onClick={() => handleDialogOpen()} id="call-settings">
             <ListItemIcon>
               <SvgIcon size={36} name={"call-settings"} color={theme.palette?.iconColor?.primary}/>
             </ListItemIcon>
@@ -157,7 +157,8 @@ function OptionButton({footer, ...props}) {
 
         {conference.isPlayOnly === false
         && process.env.REACT_APP_CALL_SETTINGS_VIRTUAL_BACKGROUND_MODE_VISIBILITY === 'true' ?
-            <MenuItem onClick={() => { conference.handleEffectsOpen(!conference.effectsDrawerOpen); handleClose(); }}>
+            <MenuItem onClick={() => { conference.handleEffectsOpen(!conference.effectsDrawerOpen); handleClose(); }} 
+              id="virtual-effects">
               <ListItemIcon>
                 <SvgIcon size={36} name={"background-replacement"} color={theme.palette?.iconColor?.primary} />
               </ListItemIcon>

diff --git a/react/src/Components/Footer/Components/SettingsDialog.js b/react/src/Components/Footer/Components/SettingsDialog.js
@@ -67,7 +67,7 @@ export default function SettingsDialog(props) {
   }, [conference.devices]);
 
   return (
-    <Dialog onClose={handleClose} open={open} fullScreen={fullScreen} maxWidth={'sm'}>
+    <Dialog onClose={handleClose} open={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' }}>
@@ -80,7 +80,7 @@ export default function SettingsDialog(props) {
                 <Select
                   autoFocus={selectFocus === 'camera'}
                   fullWidth
-                  id="demo-dialog-native"
+                  id="setting-dialog-camera-select"
                   variant="outlined"
                   value={conference.selectedCamera}
                   onChange={e => switchVideoMode(e.target.value)}
@@ -108,7 +108,12 @@ export default function SettingsDialog(props) {
             </Grid>
             <Grid container alignItems={'center'} spacing={2}>
               <Grid item xs={10}>
-                <Select variant="outlined" fullWidth value={conference.videoSendResolution} onChange={e => conference.setVideoSendResolution(e.target.value)} sx={{ color: '#fff' }}>
+                <Select variant="outlined" 
+                  fullWidth value={conference.videoSendResolution} 
+                  onChange={e => conference.setVideoSendResolution(e.target.value)} 
+                  sx={{ color: '#fff' }}
+                  id="setting-dialog-resolution-select"
+                >
                   <MenuItem key="auto" value="auto">
                     {t('Auto')}
                   </MenuItem>
@@ -136,7 +141,13 @@ export default function SettingsDialog(props) {
             </Grid>
             <Grid container alignItems={'center'} spacing={2}>
               <Grid item xs={10}>
-                <Select autoFocus={selectFocus === 'audio'} variant="outlined" fullWidth value={conference.selectedMicrophone} onChange={e => switchAudioMode(e.target.value)} sx={{ color: '#fff' }}>
+                <Select autoFocus={selectFocus === 'audio'} 
+                  variant="outlined" 
+                  fullWidth value={conference.selectedMicrophone} 
+                  onChange={e => switchAudioMode(e.target.value)} 
+                  sx={{ color: '#fff' }}
+                  id="setting-dialog-mic-select"
+                >
                   {conference.devices && conference.devices?.length > 0 && conference.devices
                     .filter(device => device.kind === 'audioinput')
                     .map(device => (