Merge branch 'main' into customAppSettings

.github/workflows/build-and-deploy.yml

@@ -372,7 +372,6 @@ jobs:
       run: |
         cd webapp
         ls -alh
-        ls -alh target/
         mvn -e deploy -DskipTests --quiet --settings ../mvn-settings.xml
         sleep 60
       env:
@@ -381,7 +380,7 @@ jobs:
         MAVEN_GPG_PASSPHRASE: ${{ secrets.MVN_GPG_PASSPHRASE }}
 
     - name: Get versions data from repo
-      run: wget -O maven-metadata.xml https://oss.sonatype.org/service/local/repositories/snapshots/content/io/antmedia/ant-media-server/maven-metadata.xml       
+      run: wget -O maven-metadata.xml https://oss.sonatype.org/service/local/repositories/snapshots/content/io/antmedia/webrtc/ConferenceCall/maven-metadata.xml       
     - name: Install jq
       run: sudo apt-get install jq -y
     - name: Download war File

.github/workflows/new_release.yml

@@ -16,7 +16,7 @@ jobs:
       uses: actions/checkout@v2
 
     - name: Get versions data from repo
-      run: wget -O maven-metadata.xml https://oss.sonatype.org/service/local/repositories/releases/content/io/antmedia/ant-media-server/maven-metadata.xml       
+      run: wget -O maven-metadata.xml https://oss.sonatype.org/service/local/repositories/releases/content/io/antmedia/webrtc/ConferenceCall/maven-metadata.xml       
 
     - name: Download war File
       run: |

react/.env.development.conference

@@ -69,9 +69,15 @@ REACT_APP_RECORDING_MANAGED_BY_ADMIN=false
 # Speed Test configurations
 REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=false
 
+# Show play only participants in the participant list
+REACT_APP_SHOW_PLAY_ONLY_PARTICIPANTS=false
+
 # Auto Pin configurations for screen share
 REACT_APP_AUTO_PIN_WHEN_SCREEN_SHARE=true
 
+# Play only room configurations
+REACT_APP_PLAY_ONLY_ROOM_EMPTY_MESSAGE="There is no active publisher right now."
+
 # 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"

react/.env.development.webinar

@@ -71,6 +71,11 @@ REACT_APP_FORCE_THEME="white"
 # Speed Test configurations
 REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=true
 
+# Play only room configurations
+REACT_APP_PLAY_ONLY_ROOM_EMPTY_MESSAGE="There is no active publisher right now."
+# Show play only participants in the participant list
+REACT_APP_SHOW_PLAY_ONLY_PARTICIPANTS=false
+
 # URL configurations
 REACT_APP_FOOTER_LOGO_ON_CLICK_URL=""
 REACT_APP_REPORT_PROBLEM_URL=""

react/.env.production

@@ -70,9 +70,15 @@ REACT_APP_RECORDING_MANAGED_BY_ADMIN=false
 # Speed Test configurations
 REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=false
 
+# Show play only participants in the participant list
+REACT_APP_SHOW_PLAY_ONLY_PARTICIPANTS=false
+
 # Virtual Background configurations
 REACT_APP_VIRTUAL_BACKGROUND_IMAGES="https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background0.png,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background1.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background2.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background3.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background4.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background5.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background7.jpg"
 
+# Play only room configurations
+REACT_APP_PLAY_ONLY_ROOM_EMPTY_MESSAGE="There is no active publisher right now."
+
 # 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"

react/.env.production.webinar

@@ -73,6 +73,9 @@ REACT_APP_FORCE_THEME="white"
 # Speed Test configurations
 REACT_APP_SPEED_TEST_BEFORE_JOINING_THE_ROOM=true
 
+# Show play only participants in the participant list
+REACT_APP_SHOW_PLAY_ONLY_PARTICIPANTS=false
+
 # Virtual Background configurations
 REACT_APP_VIRTUAL_BACKGROUND_IMAGES="https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background0.png,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background1.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background2.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background3.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background4.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background5.jpg,https://raw.githubusercontent.com/ant-media/conference-call-application/main/static/virtualBackgroundImages/virtual-background7.jpg"
 

react/src/Components/ParticipantTab.js

@@ -140,6 +140,7 @@ function ParticipantTab(props) {
         </Grid>
         <Grid item>
           <div style={{display: 'flex'}}>
+            {conference.pagedParticipants[streamId]?.status !== "created" ? <>
             {(typeof conference.pagedParticipants[streamId]?.isPinned !== "undefined") && (conference.pagedParticipants[streamId]?.isPinned === true) ? (
               <PinBtn
                 id={"unpin-" + streamId}
@@ -169,6 +170,13 @@ function ParticipantTab(props) {
                   getMuteParticipantButton(streamId)
               ) : null}
             </div>
+            </> : <PinBtn
+                id={"playonly-" + streamId}
+                data-testid={"playonly-" + streamId}
+                sx={{minWidth: "unset", pt: 1, pb: 1}}
+            >
+              <SvgIcon size={28} name="eye" color={theme.palette?.participantListIcon?.primary}/>
+            </PinBtn> }
           </div>
         </Grid>
       </Grid>

react/src/__tests__/Components/ParticipantTab.test.js

@@ -55,6 +55,18 @@ const contextValue = {
       metaData: {
         isMuted: false
       }
+    },
+    'test-play-only-stream-id': {
+      role: 'host',
+      participantID: 'test-play-only-participant-id',
+      streamID: 'test-play-only-stream-id',
+      videoTrack: 'test-play-only-video-track',
+      audioTrack: 'test-play-only-audio-track',
+      videoLabel: 'test-play-only-video-label',
+      metaData: {
+        isMuted: false
+      },
+      status: "created"
     }
   },
   isAdmin: true,
@@ -180,5 +192,16 @@ describe('ParticipantTab Component', () => {
     expect(contextValue.setParticipantIdMuted).toHaveBeenCalled();
     expect(contextValue.turnOffYourMicNotification).toHaveBeenCalled();
   });
+
+  it('render play only participat icon', () => {
+    const { getByTestId } = render(
+        <ThemeProvider theme={theme(ThemeList.Green)}>
+          <ParticipantTab />
+        </ThemeProvider>
+    );
+
+    const playOnlyParticipant = getByTestId('playonly-test-play-only-stream-id');
+    expect(playOnlyParticipant).toBeInTheDocument();
+  });
 
 });

react/src/__tests__/pages/AntMedia.test.js

@@ -84,9 +84,11 @@ jest.mock('@antmedia/webrtc_adaptor', () => ({
       closeStream: jest.fn(),
       closeWebSocket: jest.fn(),
       playStats: {},
+      leaveFromRoom: jest.fn(),
       enableEffect: jest.fn(),
       setSelectedVideoEffect: jest.fn(),
       setBlurEffectRange: jest.fn(),
+      joinRoom: jest.fn(),
       getSubtrackCount: jest.fn(),
       setVolumeLevel: jest.fn(),
     }
@@ -499,13 +501,17 @@ describe('AntMedia Component', () => {
       currentConference.handleSetDesiredTileCount(5);
     });
 
-    expect(currentConference.globals.desiredTileCount == 5);
+    await waitFor(() => {
+      expect(currentConference.globals.desiredTileCount).toBe(5);
+    });
 
     await act(async () => {
       currentConference.updateMaxVideoTrackCount(7);
     });
 
-    expect(currentConference.globals.maxVideoTrackCount === 7);
+    await waitFor(() => {
+      expect(currentConference.globals.maxVideoTrackCount).toBe(7);
+    });
 
     consoleSpy.mockRestore();
 
@@ -1144,12 +1150,28 @@ describe('AntMedia Component', () => {
       expect(webRTCAdaptorConstructor).not.toBe(undefined);
     });
 
+    let roomName = "room";
+    let publishStreamId = "publishStreamId";
+
+    await act(async () => {
+      currentConference.setRoomName(roomName);
+    });
+
+    await act(async () => {
+      currentConference.setPublishStreamId(publishStreamId);
+    });
+
+    await act(async () => {
+      process.env.REACT_APP_SHOW_PLAY_ONLY_PARTICIPANTS = 'true';
+    });
+
     await act(async () => {
       currentConference.handleLeaveFromRoom();
     });
 
     expect(webRTCAdaptorConstructor.stop).toHaveBeenCalled();
     expect(webRTCAdaptorConstructor.closeStream).toHaveBeenCalled();
+    expect(webRTCAdaptorConstructor.leaveFromRoom).toHaveBeenCalledWith(roomName, publishStreamId);
 
   });
 
@@ -3453,4 +3475,33 @@ describe('AntMedia Component', () => {
     });
   });
 
+  it('test play only participant join room', async () => {
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+
+    const { container } = render(
+        <AntMedia isTest={true}>
+          <MockChild/>
+        </AntMedia>);
+
+    await waitFor(() => {
+      expect(webRTCAdaptorConstructor).not.toBe(undefined);
+    });
+
+    await act(async () => {
+      currentConference.setIsPlayOnly(true);
+    });
+
+    await act(async () => {
+      process.env.REACT_APP_SHOW_PLAY_ONLY_PARTICIPANTS = "true";
+    });
+
+    await waitFor(() => {
+      currentConference.joinRoom("room", "publishStreamId");
+    });
+
+    expect(consoleSpy).toHaveBeenCalledWith("Play only mode is active, joining the room with the generated stream id");
+
+    consoleSpy.mockRestore();
+  });
+
 });

react/src/__tests__/pages/LayoutPinned.test.js

@@ -40,16 +40,36 @@ describe('Pinned Layout Component', () => {
   });
 
 
-  it('renders without crashing', () => {
+  it('renders without crashing in desktop view', () => {
+    contextValue.allParticipants[`p1`] = {streamId: `p1`, name: `test1`};
+    contextValue.videoTrackAssignments.push({streamId: `p1`, videoLabel: `test1`, track: null, name: `test1`});
+
     const { container, getByText, getByRole } = render(
         <ThemeProvider theme={theme(ThemeList.Green)}>
-            <LayoutPinned />
+            <LayoutPinned
+                isMobile={false}
+            />
         </ThemeProvider>
       );
 
     console.log(container.outerHTML);
   });
 
+  it('renders without crashing in mobile view', () => {
+    contextValue.allParticipants[`p1`] = {streamId: `p1`, name: `test1`};
+    contextValue.videoTrackAssignments.push({streamId: `p1`, videoLabel: `test1`, track: null, name: `test1`});
+
+    const { container, getByText, getByRole } = render(
+        <ThemeProvider theme={theme(ThemeList.Green)}>
+          <LayoutPinned
+              isMobile={true}
+          />
+        </ThemeProvider>
+    );
+
+    console.log(container.outerHTML);
+  });
+
   it('test other cards not visible until limit', () => {
     process.env.REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY = true;
     var noOfParticipants = 4;

react/src/pages/AntMedia.js

@@ -1171,6 +1171,11 @@ function AntMedia(props) {
 
         if (!isPlayOnly) {
             handlePublish(generatedStreamId, token, subscriberId, subscriberCode);
+        } else if (process.env.REACT_APP_SHOW_PLAY_ONLY_PARTICIPANTS === "true") {
+            // if the user is in playOnly mode, it will join the room with the generated stream id
+            // so we can get the list of play only participants in the room
+            webRTCAdaptor?.joinRoom(roomName, generatedStreamId, null, streamName, role, getUserStatusMetadata());
+            console.log("Play only mode is active, joining the room with the generated stream id");
         }
 
         webRTCAdaptor?.play(roomName, token, roomName, null, subscriberId, subscriberCode, '{}', role);
@@ -1180,6 +1185,7 @@ function AntMedia(props) {
         if (videoTrackAssignmentsIntervalJob === null) {
             videoTrackAssignmentsIntervalJob = setInterval(() => {
                 webRTCAdaptor?.requestVideoTrackAssignments(roomName);
+                webRTCAdaptor?.getSubtrackCount(roomName, null, null); // get the total participant count in the room
             }, 3000);
         }
     }
@@ -1523,6 +1529,10 @@ function AntMedia(props) {
             }
         } else if (info === "subtrackCount") {
             if (obj.count !== undefined) {
+                if (obj.count > participantCount) {
+                    // if the new participant is added, we need to get the subtrack list again
+                    webRTCAdaptor?.getSubtracks(roomName, null, globals.participantListPagination.offset, globals.participantListPagination.pageSize);
+                }
                 setParticipantCount(obj.count);
             }
         } else if (info === "broadcastObject") {
@@ -2497,6 +2507,10 @@ function AntMedia(props) {
             handleStopScreenShare();
         }
 
+        if (process.env.REACT_APP_SHOW_PLAY_ONLY_PARTICIPANTS === "true") {
+            webRTCAdaptor?.leaveFromRoom(roomName, publishStreamId);
+        }
+
         playLeaveRoomSound();
 
         setWaitingOrMeetingRoom("waiting");
@@ -3173,7 +3187,9 @@ function AntMedia(props) {
                         setSpeedTestObjectProgress,
                         calculateThePlaySpeedTestResult,
                         processUpdatedStatsForPlaySpeedTest,
-                        speedTestCounter
+                        speedTestCounter,
+                        setRoomName,
+                        setPublishStreamId
                     }}
                 >
                     {props.children}

react/src/pages/LayoutPinned.js

@@ -3,8 +3,6 @@ import VideoCard from "Components/Cards/VideoCard";
 import OthersCard from "Components/Cards/OthersCard";
 import React from "react";
 import { ConferenceContext } from "./AntMedia";
-import {isMobile} from "react-device-detect";
-
 
 function LayoutPinned (props) {
   const conference = React.useContext(ConferenceContext);
@@ -115,14 +113,14 @@ function LayoutPinned (props) {
   return (
     <>
       {pinnedVideo()}
-      { (!isMobile) ?
+      { (!props?.isMobile) ?
           <div id="unpinned-gallery">
-            {conference?.videoTrackAssignments.length === 0 ? <p>There is no active publisher right now.</p> : null}
+            {conference?.videoTrackAssignments.length === 0 ? <p>{process.env.REACT_APP_PLAY_ONLY_ROOM_EMPTY_MESSAGE}</p> : null}
             {videoCards(false)}
             {process.env.REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY === 'true' ? othersCard() : null}
           </div>
           : <><div id="unpinned-gallery">
-            {conference?.videoTrackAssignments.length === 0 ? <p>There is no active publisher right now.</p> : null}
+            {conference?.videoTrackAssignments.length === 0 ? <p>{process.env.REACT_APP_PLAY_ONLY_ROOM_EMPTY_MESSAGE}</p> : null}
             {process.env.REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY === 'true' ? othersCard() : null}
           </div>
             {videoCards(true)}

react/src/pages/LayoutTiled.js

@@ -141,7 +141,7 @@ function LayoutTiled(props) {
 
   return (
       <>
-        {conference?.videoTrackAssignments.length === 0 ? <p>There is no active publisher right now.</p> : null}
+        {conference?.videoTrackAssignments.length === 0 ? <p>{process.env.REACT_APP_PLAY_ONLY_ROOM_EMPTY_MESSAGE}</p> : null}
         {videoCards()}
         {process.env.REACT_APP_LAYOUT_OTHERS_CARD_VISIBILITY === 'true' ? othersCard() : null}
       </>

react/src/pages/MeetingRoom.js

@@ -13,6 +13,7 @@ import {isComponentMode} from "../utils";
 import BecomePublisherConfirmationDialog from "../Components/BecomePublisherConfirmationDialog";
 import RecordingButton from "../Components/RecordingButton";
 import {Container} from "@mui/material";
+import {isMobile} from "react-device-detect";
 
 function debounce(fn, ms) {
   let timer;
@@ -131,6 +132,7 @@ const MeetingRoom = React.memo((props) => {
                   pinnedParticipant={firstPinnedParticipant}
                   width={gallerySize.w}
                   height={gallerySize.h}
+                  isMobile={isMobile}
               />)
               :
               (<LayoutTiled