Grid mode pagination

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@twilio-labs/plugin-rtc": "^0.8.2",
     "@twilio/conversations": "^1.2.3",
     "@twilio/video-processors": "^1.0.1",

src/components/DeviceSelectionDialog/DeviceSelectionDialog.tsx

@@ -14,6 +14,7 @@ import {
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import VideoInputList from './VideoInputList/VideoInputList';
+import MaxGridParticipants from './MaxGridParticipants/MaxGridParticipants';
 
 const useStyles = makeStyles((theme: Theme) => ({
   container: {
@@ -70,6 +71,13 @@ export default function DeviceSelectionDialog({ open, onClose }: { open: boolean
         <div className={classes.listSection}>
           <AudioOutputList />
         </div>
+        <Divider />
+        <div className={classes.listSection}>
+          <Typography variant="h6" className={classes.headline}>
+            Grid View
+          </Typography>
+          <MaxGridParticipants />
+        </div>
       </DialogContent>
       <Divider />
       <DialogActions>

src/components/DeviceSelectionDialog/MaxGridParticipants/MaxGridParticipants.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FormControl, MenuItem, Typography, Select, Grid } from '@material-ui/core';
+import { useAppState } from '../../../state';
+
+const MAX_PARTICIPANT_OPTIONS = [9, 16, 25, 36, 49];
+
+export default function MaxGridParticipants() {
+  const { maxGridParticipants, setMaxGridParticipants } = useAppState();
+
+  return (
+    <div>
+      <Typography variant="subtitle2" gutterBottom>
+        Max Grid Participants
+      </Typography>
+      <Grid container alignItems="center" justifyContent="space-between">
+        <div className="inputSelect">
+          <FormControl fullWidth>
+            <Select
+              onChange={e => setMaxGridParticipants(parseInt(e.target.value as string))}
+              value={maxGridParticipants}
+              variant="outlined"
+            >
+              {MAX_PARTICIPANT_OPTIONS.map(option => (
+                <MenuItem value={option} key={option}>
+                  {option}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </div>
+      </Grid>
+    </div>
+  );
+}

src/components/GridView/GridView.test.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { GridView } from './GridView';
 import { shallow } from 'enzyme';
 import useGridLayout from '../../hooks/useGridLayout/useGridLayout';
+import { usePagination } from '../../hooks/usePagination/usePagination';
 
+const mockLocalParticipant = { identity: 'test-local-participant', sid: 0 };
 const mockParticipants = [
   { identity: 'test-participant-1', sid: 1 },
   { identity: 'test-participant-2', sid: 2 },
@@ -12,13 +14,12 @@ const mockParticipants = [
 
 jest.mock('../../constants', () => ({
   GRID_MODE_ASPECT_RATIO: 9 / 16,
-  GRID_MODE_MAX_PARTICIPANTS: 2,
   GRID_MODE_MARGIN: 3,
 }));
 jest.mock('../../hooks/useParticipants/useParticipants', () => () => mockParticipants);
 jest.mock('../../hooks/useVideoContext/useVideoContext', () => () => ({
   room: {
-    localParticipant: { identity: 'test-local-participant' },
+    localParticipant: mockLocalParticipant,
   },
 }));
 jest.mock('../../hooks/useGridLayout/useGridLayout', () =>
@@ -28,10 +29,79 @@ jest.mock('../../hooks/useGridLayout/useGridLayout', () =>
   }))
 );
 
+jest.mock('../../hooks/usePagination/usePagination', () => ({
+  usePagination: jest.fn(() => ({
+    currentPage: 2,
+    totalPages: 4,
+    setCurrentPage: jest.fn(),
+    paginatedParticipants: [mockLocalParticipant, ...mockParticipants],
+  })),
+}));
+
+const mockUsePagination = usePagination as jest.Mock<any>;
+
 describe('the GridView component', () => {
   it('should render correctly', () => {
     const wrapper = shallow(<GridView />);
     expect(wrapper).toMatchSnapshot();
-    expect(useGridLayout).toHaveBeenCalledWith(2);
+    expect(useGridLayout).toHaveBeenCalledWith(5);
+  });
+
+  it('should not render the previous page button when the user is viewing the first page', () => {
+    mockUsePagination.mockImplementationOnce(() => ({
+      currentPage: 1,
+      totalPages: 4,
+      setCurrentPage: jest.fn(),
+      paginatedParticipants: [mockLocalParticipant, ...mockParticipants],
+    }));
+
+    const wrapper = shallow(<GridView />);
+    expect(
+      wrapper
+        .find('.makeStyles-buttonContainerLeft-4')
+        .childAt(0)
+        .exists()
+    ).toBe(false);
+    expect(
+      wrapper
+        .find('.makeStyles-buttonContainerRight-5')
+        .childAt(0)
+        .exists()
+    ).toBe(true);
+  });
+
+  it('should not render the next page button when the user is viewing the last page', () => {
+    mockUsePagination.mockImplementationOnce(() => ({
+      currentPage: 4,
+      totalPages: 4,
+      setCurrentPage: jest.fn(),
+      paginatedParticipants: [mockLocalParticipant, ...mockParticipants],
+    }));
+
+    const wrapper = shallow(<GridView />);
+    expect(
+      wrapper
+        .find('.makeStyles-buttonContainerLeft-4')
+        .childAt(0)
+        .exists()
+    ).toBe(true);
+    expect(
+      wrapper
+        .find('.makeStyles-buttonContainerRight-5')
+        .childAt(0)
+        .exists()
+    ).toBe(false);
+  });
+
+  it('should not render the Pagination component when there is only one page', () => {
+    mockUsePagination.mockImplementationOnce(() => ({
+      currentPage: 1,
+      totalPages: 1,
+      setCurrentPage: jest.fn(),
+      paginatedParticipants: [mockLocalParticipant, ...mockParticipants],
+    }));
+
+    const wrapper = shallow(<GridView />);
+    expect(wrapper.find('.makeStyles-pagination-8').exists()).toBe(false);
   });
 });

src/components/GridView/GridView.tsx

@@ -1,57 +1,134 @@
 import React from 'react';
-import { GRID_MODE_ASPECT_RATIO, GRID_MODE_MARGIN, GRID_MODE_MAX_PARTICIPANTS } from '../../constants';
-import { makeStyles, Theme } from '@material-ui/core';
+import ArrowBack from '@material-ui/icons/ArrowBack';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import clsx from 'clsx';
+import { GRID_MODE_ASPECT_RATIO, GRID_MODE_MARGIN } from '../../constants';
+import { IconButton, makeStyles } from '@material-ui/core';
+import { Pagination } from '@material-ui/lab';
 import Participant from '../Participant/Participant';
 import useGridLayout from '../../hooks/useGridLayout/useGridLayout';
 import useParticipants from '../../hooks/useParticipants/useParticipants';
 import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
+import { usePagination } from '../../hooks/usePagination/usePagination';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const CONTAINER_GUTTER = '50px';
+
+const useStyles = makeStyles({
   container: {
+    position: 'relative',
+    gridArea: '1 / 1 / 2 / 3',
+  },
+  participantContainer: {
+    position: 'absolute',
     display: 'flex',
-    width: 'calc(100% - 200px)',
+    top: CONTAINER_GUTTER,
+    right: CONTAINER_GUTTER,
+    bottom: CONTAINER_GUTTER,
+    left: CONTAINER_GUTTER,
     margin: '0 auto',
     alignContent: 'center',
     flexWrap: 'wrap',
     justifyContent: 'center',
-    gridArea: '1 / 1 / 2 / 3',
   },
-  participant: {
-    '&:nth-child(n + 26)': {
-      display: 'none',
+  buttonContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  buttonContainerLeft: {
+    right: `calc(100% - ${CONTAINER_GUTTER})`,
+    left: 0,
+  },
+  buttonContainerRight: {
+    right: 0,
+    left: `calc(100% - ${CONTAINER_GUTTER})`,
+  },
+  pagination: {
+    '& .MuiPaginationItem-root': {
+      color: 'white',
     },
   },
-}));
+  paginationButton: {
+    color: 'black',
+    background: 'rgba(255, 255, 255, 0.8)',
+    width: '40px',
+    height: '40px',
+    '&:hover': {
+      background: 'rgba(255, 255, 255)',
+    },
+  },
+  paginationContainer: {
+    position: 'absolute',
+    top: `calc(100% - ${CONTAINER_GUTTER})`,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
 
 export function GridView() {
   const classes = useStyles();
   const { room } = useVideoContext();
   const participants = useParticipants();
 
-  const { participantVideoWidth, containerRef } = useGridLayout(
-    Math.min(participants.length + 1, GRID_MODE_MAX_PARTICIPANTS)
-  );
+  const { paginatedParticipants, setCurrentPage, currentPage, totalPages } = usePagination([
+    room!.localParticipant,
+    ...participants,
+  ]);
+
+  const { participantVideoWidth, containerRef } = useGridLayout(paginatedParticipants.length);
 
   const participantWidth = `${participantVideoWidth}px`;
   const participantHeight = `${Math.floor(participantVideoWidth * GRID_MODE_ASPECT_RATIO)}px`;
 
   return (
-    <div className={classes.container} ref={containerRef}>
-      <div
-        className={classes.participant}
-        style={{ width: participantWidth, height: participantHeight, margin: GRID_MODE_MARGIN }}
-      >
-        <Participant participant={room!.localParticipant} isLocalParticipant={true} />
+    <div className={classes.container}>
+      <div className={clsx(classes.buttonContainer, classes.buttonContainerLeft)}>
+        {!(currentPage === 1) && (
+          <IconButton className={classes.paginationButton} onClick={() => setCurrentPage(page => page - 1)}>
+            <ArrowBack />
+          </IconButton>
+        )}
+      </div>
+      <div className={clsx(classes.buttonContainer, classes.buttonContainerRight)}>
+        {!(currentPage === totalPages) && (
+          <IconButton className={classes.paginationButton} onClick={() => setCurrentPage(page => page + 1)}>
+            <ArrowForward />
+          </IconButton>
+        )}
+      </div>
+      <div className={classes.paginationContainer}>
+        {totalPages > 1 && (
+          <Pagination
+            className={classes.pagination}
+            page={currentPage}
+            count={totalPages}
+            onChange={(_, value) => setCurrentPage(value)}
+            shape="rounded"
+            color="primary"
+            size="small"
+            hidePrevButton
+            hideNextButton
+          />
+        )}
+      </div>
+      <div className={classes.participantContainer} ref={containerRef}>
+        {paginatedParticipants.map(participant => (
+          <div
+            key={participant.sid}
+            style={{ width: participantWidth, height: participantHeight, margin: GRID_MODE_MARGIN }}
+          >
+            <Participant participant={participant} isLocalParticipant={participant === room!.localParticipant} />
+          </div>
+        ))}
       </div>
-      {participants.map(participant => (
-        <div
-          key={participant.sid}
-          className={classes.participant}
-          style={{ width: participantWidth, height: participantHeight, margin: GRID_MODE_MARGIN }}
-        >
-          <Participant participant={participant} />
-        </div>
-      ))}
     </div>
   );
 }