Add pagination system

react/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
-    "@antmedia/webrtc_adaptor": "^2.12.0-SNAPSHOT-2024-Oct-19-07-47",
+    "@antmedia/webrtc_adaptor": "^2.12.0-SNAPSHOT-2024-Nov-29-04-11",
     "@charkour/react-reactions": "^0.11.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",

react/src/Components/ParticipantTab.js

@@ -6,7 +6,7 @@
 import {styled, useTheme} from "@mui/material/styles";
 import { SvgIcon } from "./SvgIcon";
 import { ConferenceContext } from "pages/AntMedia";
-import {CircularProgress} from "@mui/material";
+import {CircularProgress, Pagination} from "@mui/material";
 import {WebinarRoles} from "../WebinarRoles";
 
 const ParticipantName = styled(Typography)(({ theme }) => ({
@@ -25,9 +25,13 @@
   const conference = React.useContext(ConferenceContext);
   const theme = useTheme();
 
+  const paginationUpdate = (event, value) => {
+    conference?.updateAllParticipantsPagination(value);
+  }
+
   const getAdminButtons = (streamId, assignedVideoCardId) => {
       let publishStreamId = (streamId === "localVideo") ? conference.publishStreamId : streamId;
-      let role = conference.allParticipants[publishStreamId]?.role;
+      let role = conference.pagedParticipants[publishStreamId]?.role;
 
     return (
       <div id={'admin-button-group-'+streamId}>
@@ -97,7 +101,7 @@
         </Grid>
         <Grid item>
           <div style={{display: 'flex'}}>
-            {(typeof conference.allParticipants[streamId]?.isPinned !== "undefined") && (conference.allParticipants[streamId]?.isPinned === true) ? (
+            {(typeof conference.pagedParticipants[streamId]?.isPinned !== "undefined") && (conference.pagedParticipants[streamId]?.isPinned === true) ? (
               <PinBtn
                 id={"unpin-" + streamId}
                 sx={{minWidth: "unset", pt: 1, pb: 1}}
@@ -139,20 +143,32 @@
             variant="body2"
             style={{marginLeft: 4, fontWeight: 500}}
           >
-            {Object.keys(conference.allParticipants).length}
+            {conference?.participantCount}
           </ParticipantName>
         </Grid>
-        {conference.isPlayOnly === false ? getParticipantItem(conference.publishStreamId, "You") : ""}
-        {Object.entries(conference.allParticipants).map(([streamId, broadcastObject]) => {
+        {Object.entries(conference.pagedParticipants).map(([streamId, broadcastObject]) => {
           if (conference.publishStreamId !== streamId) {
-            var assignedVideoCardId = conference?.videoTrackAssignments?.find(vta => vta.streamId === streamId)?.videoLabel;
+            let assignedVideoCardId = conference?.videoTrackAssignments?.find(vta => vta.streamId === streamId)?.videoLabel;
             return getParticipantItem(streamId, broadcastObject.name, assignedVideoCardId);
           } else {
-            return "";
+            return getParticipantItem(conference.publishStreamId, "You");
           }
         })}
       </Stack>
     </Grid>
+      {/* Pagination Controls */}
+      <Grid
+          container
+          justifyContent="center"
+          sx={{ mt: 2, mb: 2 }}
+      >
+        <Pagination
+            data-testid="participant-list-pagination"
+            count={conference.globals.participantListPagination.totalPage}
+            page={conference.globals.participantListPagination.currentPage}
+            onChange={paginationUpdate}
+        />
+      </Grid>
     </>
   );
 

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

@@ -25,9 +25,31 @@ const contextValue = {
   publishStreamId: 'test-stream-id',
   pinVideo: jest.fn(),
   makeParticipantPresenter: jest.fn(),
+  pagedParticipants: {
+    'test-stream-id': {
+        role: 'host',
+        participantID: 'test-participant-id',
+        streamID: 'test-stream-id',
+        videoTrack: 'test-video-track',
+        audioTrack: 'test-audio-track',
+        videoLabel: 'test-video-label',
+    }
+  },
   isAdmin: true,
   isPlayOnly: false,
   videoTrackAssignments: [{streamID: 'test-stream-id', participantID: 'test-participant-id', videoTrack: 'test-video-track', audioTrack: 'test-audio-track', videoLabel: 'test-video-label'}],
+  globals: {
+    maxVideoTrackCount: 6,
+    desiredTileCount: 6,
+    trackEvents: [],
+    participantListPagination: {
+      currentPage: 1,
+      pageSize: 15,
+      totalPage: 1,
+      startIndex: 0,
+      endIndex: 15
+    }
+  }
 };
 
 // Mock the useContext hook

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

@@ -2875,4 +2875,142 @@ describe('AntMedia Component', () => {
     });
   });
 
+  describe('updateAllParticipantsPagination', () => {
+    it('sets currentPage to 1 if currentPage is less than or equal to 0', async () => {
+      const { container } = render(
+          <ThemeProvider theme={theme(ThemeList.Green)}>
+            <AntMedia isTest={true}>
+              <MockChild/>
+            </AntMedia>
+          </ThemeProvider>);
+
+
+      await waitFor(() => {
+        expect(webRTCAdaptorConstructor).not.toBe(undefined);
+      });
+
+      currentConference.updateAllParticipantsPagination(0);
+      expect(currentConference.globals.participantListPagination.currentPage).toBe(1);
+    });
+
+    it('calculates totalPage correctly', async () => {
+      const { container } = render(
+          <ThemeProvider theme={theme(ThemeList.Green)}>
+            <AntMedia isTest={true}>
+              <MockChild/>
+            </AntMedia>
+          </ThemeProvider>);
+
+
+      await waitFor(() => {
+        expect(webRTCAdaptorConstructor).not.toBe(undefined);
+      });
+
+      await act(async () => {
+        currentConference.setParticipantCount(25);
+      });
+      currentConference.globals.participantListPagination.pageSize = 10;
+      currentConference.updateAllParticipantsPagination(1);
+      expect(currentConference.globals.participantListPagination.totalPage).toBe(3);
+    });
+
+    it('sets currentPage to totalPage if currentPage is greater than totalPage', async () => {
+      const { container } = render(
+          <ThemeProvider theme={theme(ThemeList.Green)}>
+            <AntMedia isTest={true}>
+              <MockChild/>
+            </AntMedia>
+          </ThemeProvider>);
+
+
+      await waitFor(() => {
+        expect(webRTCAdaptorConstructor).not.toBe(undefined);
+      });
+
+      await act(async () => {
+        currentConference.setParticipantCount(25);
+      });
+      await waitFor(() => {
+        expect(currentConference.participantCount).toBe(25);
+      });
+      currentConference.globals.participantListPagination.pageSize = 10;
+      currentConference.updateAllParticipantsPagination(5);
+      expect(currentConference.globals.participantListPagination.currentPage).toBe(3);
+    });
+
+    it('calculates startIndex and endIndex correctly', async () => {
+      const { container } = render(
+          <ThemeProvider theme={theme(ThemeList.Green)}>
+            <AntMedia isTest={true}>
+              <MockChild/>
+            </AntMedia>
+          </ThemeProvider>);
+
+
+      await waitFor(() => {
+        expect(webRTCAdaptorConstructor).not.toBe(undefined);
+      });
+
+      await act(async () => {
+        currentConference.setParticipantCount(25);
+      });
+      await waitFor(() => {
+        expect(currentConference.participantCount).toBe(25);
+      });
+      currentConference.globals.participantListPagination.pageSize = 10;
+      currentConference.updateAllParticipantsPagination(2);
+    });
+
+    it('calls getSubtracks with correct parameters', async () => {
+      const { container } = render(
+          <ThemeProvider theme={theme(ThemeList.Green)}>
+            <AntMedia isTest={true}>
+              <MockChild/>
+            </AntMedia>
+          </ThemeProvider>);
+
+
+      await waitFor(() => {
+        expect(webRTCAdaptorConstructor).not.toBe(undefined);
+      });
+
+      const mockGetSubtracks = jest.fn();
+      currentConference.getSubtracks = mockGetSubtracks;
+
+      currentConference.roomName = 'testRoom';
+      await act(async () => {
+        currentConference.setParticipantCount(25);
+      });
+      await waitFor(() => {
+        expect(currentConference.participantCount).toBe(25);
+      });
+      currentConference.globals.participantListPagination.pageSize = 10;
+      currentConference.updateAllParticipantsPagination(2);
+    });
+
+    it('update participant count, when we receive new subtrack count', async () => {
+      const { container } = render(
+          <ThemeProvider theme={theme(ThemeList.Green)}>
+            <AntMedia isTest={true}>
+              <MockChild/>
+            </AntMedia>
+          </ThemeProvider>);
+
+
+      await waitFor(() => {
+        expect(webRTCAdaptorConstructor).not.toBe(undefined);
+      });
+
+      const obj = { count: 12 };
+
+      await act(async () => {
+        webRTCAdaptorConstructor.callback('subtrackCount', obj);
+      });
+
+      await waitFor(() => {
+        expect(currentConference.participantCount).toBe(12);
+      });
+    });
+  });
+
 });