Merge branch 'main' into customAppSettings

ant-media · Jan 13, 2025 · c6ad02e · c6ad02e
2 parents 9d92206 + c423835
commit c6ad02e
Show file tree

Hide file tree

Showing 11 changed files with 167 additions and 28 deletions.
diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
@@ -87,7 +87,7 @@ jobs:
         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
-        npm install --legacy-peer-deps
+        npm install --force
         npm run build
         cd ..
         if [ -d "webapp/src/main/webapp/static" ] && [ "$(ls -A webapp/src/main/webapp/static)" ]; then
@@ -118,7 +118,7 @@ jobs:
         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
-        npm install --legacy-peer-deps
+        npm install --force
         npm run build
         cd ..
         if [ -d "webapp/src/main/webapp/static" ] && [ "$(ls -A webapp/src/main/webapp/static)" ]; then
@@ -187,7 +187,7 @@ jobs:
           echo "ls:"
           ls -al
           cd react
-          npm install --include=dev --legacy-peer-deps
+          npm install --include=dev --force
           npm test
 
       - name: Upload coverage to Codecov
@@ -374,7 +374,7 @@ jobs:
         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
-        npm install --legacy-peer-deps
+        npm install --force
         npm run build
         cd ..
         if [ -d "webapp/src/main/webapp/static" ] && [ "$(ls -A webapp/src/main/webapp/static)" ]; then

diff --git a/react/.env.development.webinar b/react/.env.development.webinar
@@ -28,7 +28,7 @@ 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
+REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=true
 
 # Option menu buttons configurations
 REACT_APP_OPTION_MENU_GENERAL_SETTINGS_BUTTON_VISIBILITY=false

diff --git a/react/.env.production.webinar b/react/.env.production.webinar
@@ -28,7 +28,7 @@ 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
+REACT_APP_FOOTER_PUBLISHER_REQUEST_BUTTON_VISIBILITY=true
 
 # Option menu buttons configurations
 REACT_APP_OPTION_MENU_GENERAL_SETTINGS_BUTTON_VISIBILITY=false

diff --git a/react/src/Components/Footer/Components/MoreOptionsButton.js b/react/src/Components/Footer/Components/MoreOptionsButton.js
@@ -214,7 +214,7 @@ function MoreOptionsButton(props) {
                       <ListItemIcon>
                           <SvgIcon size={36} name={"raise-hand"} color={"white"} />
                       </ListItemIcon>
-                      <ListItemText id={"publisher-request-list-button"}>{t("Publisher Request List")}</ListItemText>
+                      <ListItemText id={"more-options-publisher-request-list-button"}>{t("Publisher Request List")}</ListItemText>
                   </MenuItem>
                   : null}
 
@@ -225,7 +225,7 @@ function MoreOptionsButton(props) {
                       <ListItemIcon>
                           <SvgIcon size={36} name={"raise-hand"} color={"white"} />
                       </ListItemIcon>
-                      <ListItemText id={"request-to-publisher-button"}>{t("Request becoming publisher")}</ListItemText>
+                      <ListItemText id={"more-options-request-publish-button"}>{t("Request becoming publisher")}</ListItemText>
                   </MenuItem>
                   : null}
 

diff --git a/react/src/Components/Footer/Footer.js b/react/src/Components/Footer/Footer.js
@@ -222,7 +222,9 @@ function Footer(props) {
                       <RequestPublishButton
                           footer={true}
                           rounded={false}
-                          handlePublisherRequest={()=>props?.handlePublisherRequest()}
+                          handlePublisherRequest={()=> {
+                            props?.handlePublisherRequest()
+                          }}
                       />
                     </Grid>
                     : null}
@@ -270,6 +272,7 @@ function Footer(props) {
                     <Grid item xs={0}>
                       <MoreOptionsButton
                           footer={true}
+                          isAdmin={props?.isAdmin}
                           isPlayOnly={props?.isPlayOnly}
                           isScreenShared={props?.isScreenShared}
                           handleStartScreenShare={props?.handleStartScreenShare}

diff --git a/react/src/Components/PublisherRequestTab.js b/react/src/Components/PublisherRequestTab.js
@@ -3,11 +3,11 @@ import Stack from "@mui/material/Stack";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import {styled} from "@mui/material/styles";
+import {styled, useTheme} from "@mui/material/styles";
 import { SvgIcon } from "./SvgIcon";
 
 const PublisherRequestName = styled(Typography)(({ theme }) => ({
-    color: "#000",
+    color: theme.palette?.participantListIcon?.primary,
     fontWeight: 500,
     fontSize: 14,
 }));
@@ -20,6 +20,8 @@ const PinBtn = styled(Button)(({ theme }) => ({
 }));
 
 function PublisherRequestTab(props) {
+    const theme = useTheme();
+
     const getPublisherRequestItem = (streamId) => {
         return (
             <Grid
@@ -35,6 +37,7 @@ function PublisherRequestTab(props) {
                 </Grid>
                 <Grid item>
                     <PinBtn
+                        id={"approve-become-speaker-"+streamId}
                         data-testid={"approve-become-speaker-"+streamId}
                         sx={{ minWidth: "unset", pt: 1, pb: 1 }}
                         onClick={() => {props?.approveBecomeSpeakerRequest(streamId);}}
@@ -43,6 +46,7 @@ function PublisherRequestTab(props) {
                     </PinBtn>
 
                     <PinBtn
+                        id={"reject-become-speaker-"+streamId}
                         data-testid={"reject-become-speaker-"+streamId}
                         sx={{ minWidth: "unset", pt: 1, pb: 1 }}
                         onClick={() => {props?.rejectBecomeSpeakerRequest(streamId);}}
@@ -58,10 +62,10 @@ function PublisherRequestTab(props) {
         <div style={{width: "100%", overflowY: "auto"}}>
             <Stack sx={{width: "100%",}} spacing={2}>
                 <Grid container>
-                    <SvgIcon size={28} name="participants" color="#000"/>
+                    <SvgIcon size={28} name="participants" color={theme.palette?.participantListIcon?.primary}/>
                     <PublisherRequestName
                         variant="body2"
-                        style={{marginLeft: 8, fontWeight: 500}}
+                        style={{marginLeft: 8, fontWeight: 500, color: theme.palette?.participantListIcon?.primary}}
                     >
                         {props?.requestSpeakerList.length}
                     </PublisherRequestName>

diff --git a/react/src/__tests__/pages/AntMedia.test.js b/react/src/__tests__/pages/AntMedia.test.js
@@ -2275,6 +2275,37 @@ describe('AntMedia Component', () => {
     consoleSpy.mockRestore();
   });
 
+  it('streamIdInUseCounter is not incremented due to reconnection is true', async () => {
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+
+    const {container} = render(
+        <ThemeProvider theme={theme(ThemeList.Green)}>
+          <AntMedia isTest={true}>
+            <MockChild/>
+          </AntMedia>
+        </ThemeProvider>);
+
+
+    await waitFor(() => {
+      expect(webRTCAdaptorConstructor).not.toBe(undefined);
+    });
+
+    await act(async () => {
+      webRTCAdaptorConstructor.callback("reconnection_attempt_for_player");
+    });
+
+    await act(async () => {
+      webRTCAdaptorConstructor.callbackError("streamIdInUse", "Stream ID is in use");
+      webRTCAdaptorConstructor.callbackError("streamIdInUse", "Stream ID is in use");
+      webRTCAdaptorConstructor.callbackError("streamIdInUse", "Stream ID is in use");
+      webRTCAdaptorConstructor.callbackError("streamIdInUse", "Stream ID is in use");
+    });
+
+    expect(consoleSpy).not.toHaveBeenCalledWith("This stream id is already in use. You may be logged in on another device.");
+
+    consoleSpy.mockRestore();
+  });
+
   it('updates allParticipants and participantUpdated when subtrackList is provided', async () => {
     const { container } = render(
         <ThemeProvider theme={theme(ThemeList.Green)}>

diff --git a/react/src/pages/AntMedia.js b/react/src/pages/AntMedia.js
@@ -1797,13 +1797,16 @@ function AntMedia(props) {
         } else if (error.indexOf("no_stream_exist") !== -1) {
             setIsNoSreamExist(true);
         } else if (error.indexOf("streamIdInUse") !== -1) {
-            streamIdInUseCounter++;
-            if (streamIdInUseCounter > 3) {
-                console.log("This stream id is already in use. You may be logged in on another device.");
-                setLeaveRoomWithError("Streaming is already active with your username. Please check that you're not using it in another browser tab.");
-                setLeftTheRoom(true);
-                setIsJoining(false);
-                setIsReconnectionInProgress(false);
+            // if the stream id is in use when reconnection, don't display the error
+            if (!reconnecting) {
+                streamIdInUseCounter++;
+                if (streamIdInUseCounter > 3) {
+                    console.log("This stream id is already in use. You may be logged in on another device.");
+                    setLeaveRoomWithError("Streaming is already active with your username. Please check that you're not using it in another browser tab.");
+                    setLeftTheRoom(true);
+                    setIsJoining(false);
+                    setIsReconnectionInProgress(false);
+                }
             }
         } else if (error.indexOf("data_channel_error") !== -1) {
             errorMessage = "There was a error during data channel communication";
@@ -3398,6 +3401,7 @@ function AntMedia(props) {
                             pinVideo={(streamId) => pinVideo(streamId)}
                             isAdmin={isAdmin}
                             publishStreamId={publishStreamId}
+                            role={role}
                         />
                     ) : (
                         <>
@@ -3451,7 +3455,7 @@ function AntMedia(props) {
                                 handleParticipantListOpen={(open) => handleParticipantListOpen(open)}
                                 requestSpeakerList={requestSpeakerList}
                                 handlePublisherRequestListOpen={(open) => setPublisherRequestListDrawerOpen(open)}
-                                handlePublisherRequest={()=>{}}
+                                handlePublisherRequest={()=>handlePublisherRequest()}
                                 setLeftTheRoom={(left) => setLeftTheRoom(left)}
                                 addFakeParticipant={() => addFakeParticipant()}
                                 removeFakeParticipant={() => removeFakeParticipant()}
@@ -3520,10 +3524,15 @@ function AntMedia(props) {
                                 setPublisherRequestListDrawerOpen={(open) => setPublisherRequestListDrawerOpen(open)}
                             />
                             <PublisherRequestListDrawer
+                                publisherRequestListDrawerOpen={publisherRequestListDrawerOpen}
                                 approveBecomeSpeakerRequest={(streamId) => approveBecomeSpeakerRequest(streamId)}
                                 rejectBecomeSpeakerRequest={(streamId) => rejectBecomeSpeakerRequest(streamId)}
                                 requestSpeakerList={requestSpeakerList}
                                 publishStreamId={publishStreamId}
+                                handleMessageDrawerOpen={(open) => handleMessageDrawerOpen(open)}
+                                handleParticipantListOpen={(open) => handleParticipantListOpen(open)}
+                                handleEffectsOpen={(open) => handleEffectsOpen(open)}
+                                setPublisherRequestListDrawerOpen={(open) => setPublisherRequestListDrawerOpen(open)}
                             />
                         </>
                     )}

diff --git a/react/src/pages/MeetingRoom.js b/react/src/pages/MeetingRoom.js
@@ -252,7 +252,7 @@ const MeetingRoom = React.memo((props) => {
                   requestSpeakerList={props?.requestSpeakerList}
                   publisherRequestListDrawerOpen={props?.publisherRequestListDrawerOpen}
                   handlePublisherRequestListOpen={props?.handlePublisherRequestListOpen}
-                  handlePublisherRequest={props?.handlePublisherRequest}
+                  handlePublisherRequest={()=> {props?.handlePublisherRequest()}}
                   setLeftTheRoom={props?.setLeftTheRoom}
                   addFakeParticipant={props?.addFakeParticipant}
                   removeFakeParticipant={props?.removeFakeParticipant}

diff --git a/react/src/pages/WaitingRoom.js b/react/src/pages/WaitingRoom.js
@@ -70,9 +70,9 @@ function WaitingRoom(props) {
     };
 
     React.useEffect(() => {
-        if (conference.role === WebinarRoles.TempListener) {
+        if (props?.role === WebinarRoles.TempListener) {
             const tempLocalVideo = document.getElementById("localVideo");
-            conference?.localVideoCreate(tempLocalVideo);
+            props?.localVideoCreate(tempLocalVideo);
             console.log("TempListener local video created");
         }
     }, []);
@@ -319,7 +319,7 @@ function WaitingRoom(props) {
             <Grid
                 container
                 spacing={4}
-                justifyContent={conference.role !== WebinarRoles.TempListener ? "space-between" : "center"}
+                justifyContent={props?.role !== WebinarRoles.TempListener ? "space-between" : "center"}
                 alignItems={"center"}
             >
 
@@ -414,7 +414,7 @@ function WaitingRoom(props) {
                                 "You can choose whether to open your camera and microphone before you get into room"
                             )}
                         </Typography>
-                        {conference.role === WebinarRoles.TempListener ? (
+                        {props?.role === WebinarRoles.TempListener ? (
                             <form
                                 data-testid="temp-listener-join-form"
                                 onSubmit={(e) => {
@@ -438,7 +438,7 @@ function WaitingRoom(props) {
                     </Grid>
                     : null}
 
-                {conference.role !== WebinarRoles.TempListener ? (
+                {props?.role !== WebinarRoles.TempListener ? (
                 <Grid item md={props?.isPlayOnly === false ? 4 : 12}>
                     <Grid container justifyContent={"center"}>
                         <Grid container justifyContent={"center"}>