Video 8473 mobile grid mode

package.json

@@ -42,6 +42,7 @@
     "react-scripts": "4.0.3",
     "rimraf": "3.0.2",
     "strip-color": "^0.1.0",
+    "swiper": "^8.1.5",
     "ts-node": "^9.1.1",
     "twilio": "^3.63.1",
     "twilio-video": "^2.20.1",

src/App.test.tsx

@@ -7,6 +7,15 @@ import { shallow } from 'enzyme';
 import useHeight from './hooks/useHeight/useHeight';
 import useRoomState from './hooks/useRoomState/useRoomState';
 
+jest.mock('swiper/react/swiper-react.js', () => ({
+  Swiper: jest.fn(),
+  SwiperSlide: jest.fn(),
+}));
+
+jest.mock('swiper', () => ({
+  Pagination: jest.fn(),
+}));
+
 jest.mock('./hooks/useRoomState/useRoomState');
 jest.mock('./hooks/useHeight/useHeight');
 

src/components/MenuBar/Menu/Menu.tsx

@@ -135,23 +135,21 @@ export default function Menu(props: { buttonClassName?: string }) {
           <Typography variant="body1">Room Monitor</Typography>
         </MenuItem>
 
-        {!isMobile && (
-          <MenuItem
-            onClick={() => {
-              setIsGridModeActive(isGrid => !isGrid);
-              setMenuOpen(false);
-            }}
-          >
-            <IconContainer>
-              {isGridModeActive ? (
-                <CollaborationViewIcon style={{ fill: '#707578', width: '0.9em' }} />
-              ) : (
-                <GridViewIcon style={{ fill: '#707578', width: '0.9em' }} />
-              )}
-            </IconContainer>
-            <Typography variant="body1">{isGridModeActive ? 'Collaboration Mode' : 'Grid Mode'}</Typography>
-          </MenuItem>
-        )}
+        <MenuItem
+          onClick={() => {
+            setIsGridModeActive(isGrid => !isGrid);
+            setMenuOpen(false);
+          }}
+        >
+          <IconContainer>
+            {isGridModeActive ? (
+              <CollaborationViewIcon style={{ fill: '#707578', width: '0.9em' }} />
+            ) : (
+              <GridViewIcon style={{ fill: '#707578', width: '0.9em' }} />
+            )}
+          </IconContainer>
+          <Typography variant="body1">{isGridModeActive ? 'Collaboration Mode' : 'Grid Mode'}</Typography>
+        </MenuItem>
 
         <MenuItem onClick={() => setAboutOpen(true)}>
           <IconContainer>

src/components/MobileGridView/MobileGridView.test.tsx

@@ -0,0 +1,77 @@
+import { MobileGridView } from './MobileGridView';
+import { shallow } from 'enzyme';
+import { useAppState } from '../../state';
+import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
+
+const mockLocalParticipant = { identity: 'test-local-participant', sid: 0 };
+
+jest.mock('swiper/react/swiper-react.js', () => ({
+  Swiper: jest.fn(),
+  SwiperSlide: jest.fn(),
+}));
+
+jest.mock('swiper', () => ({
+  Pagination: jest.fn(),
+}));
+
+jest.mock('../../hooks/useVideoContext/useVideoContext');
+jest.mock('../../state');
+
+const mockUseVideoContext = useVideoContext as jest.Mock<any>;
+const mockUseAppState = useAppState as jest.Mock<any>;
+
+mockUseAppState.mockImplementation(() => ({ maxGridParticipants: 9 }));
+mockUseVideoContext.mockImplementation(() => ({
+  room: {
+    localParticipant: mockLocalParticipant,
+    participants: [],
+  },
+}));
+
+describe('the MobileGridView component', () => {
+  it('should render correctly when there is only the localParticipant', () => {
+    const wrapper = shallow(<MobileGridView />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render correctly when there is one participant plus the localParticipant', () => {
+    mockUseVideoContext.mockImplementation(() => ({
+      room: {
+        localParticipant: mockLocalParticipant,
+        participants: [{ identity: 'test-participant-1', sid: 1 }],
+      },
+    }));
+    const wrapper = shallow(<MobileGridView />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render correctly when there are two participants plus the localParticipant', () => {
+    mockUseVideoContext.mockImplementation(() => ({
+      room: {
+        localParticipant: mockLocalParticipant,
+        participants: [
+          { identity: 'test-participant-1', sid: 1 },
+          { identity: 'test-participant-2', sid: 2 },
+        ],
+      },
+    }));
+    const wrapper = shallow(<MobileGridView />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render correctly when there are 3 or more participants plus the localParticipant', () => {
+    mockUseVideoContext.mockImplementation(() => ({
+      room: {
+        localParticipant: mockLocalParticipant,
+        participants: [
+          { identity: 'test-participant-1', sid: 1 },
+          { identity: 'test-participant-2', sid: 2 },
+          { identity: 'test-participant-3', sid: 3 },
+          { identity: 'test-participant-4', sid: 4 },
+        ],
+      },
+    }));
+    const wrapper = shallow(<MobileGridView />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/MobileGridView/MobileGridView.tsx

@@ -0,0 +1,95 @@
+import { CSSProperties } from 'react';
+import { makeStyles } from '@material-ui/core';
+import Participant from '../Participant/Participant';
+import useDominantSpeaker from '../../hooks/useDominantSpeaker/useDominantSpeaker';
+import useGridParticipants from '../../hooks/useGridParticipants/useGridParticipants';
+import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
+
+import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
+import 'swiper/swiper.min.css';
+import 'swiper/modules/pagination/pagination.min.css';
+import { Pagination } from 'swiper';
+import { Participant as IParticipant } from 'twilio-video';
+
+const useStyles = makeStyles({
+  participantContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    height: '100%',
+    '& .swiper': {
+      height: '100%',
+      '--swiper-pagination-bullet-inactive-color': 'white',
+    },
+    '& .swiper-wrapper': {
+      height: '100%',
+    },
+    '& .swiper-slide': {
+      height: '90%', // To leave room for the pagination indicators
+      paddingBottom: '1em',
+    },
+  },
+  swiperSlide: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignSelf: 'center',
+    alignContent: 'flex-start',
+  },
+});
+
+export function MobileGridView() {
+  const classes = useStyles();
+  const { room } = useVideoContext();
+  const participants = useGridParticipants(true);
+  const dominantSpeaker = useDominantSpeaker(true);
+  const remoteParticipantCount = participants.length;
+
+  const pages: IParticipant[][] = [[]];
+  // Add the localParticipant to the front of the array to ensure they are always the first participant:
+  pages[0].push(room!.localParticipant);
+
+  for (let i = 0; i < remoteParticipantCount; i++) {
+    const pageNumber = Math.floor(i / 6);
+    if (!pages[pageNumber]) {
+      pages[pageNumber] = [];
+    }
+    // Each page should have a max of 6 participants:
+    if (pages[pageNumber].length < 6) {
+      pages[pageNumber].push(participants[i]);
+    } else {
+      pages[pageNumber + 1] = [participants[i]];
+    }
+  }
+
+  const participantVideoStyles: CSSProperties = {
+    width: remoteParticipantCount < 3 ? '100%' : '50%',
+    // The height of each participant's video is determined by the number of participants on the grid
+    // page. Here the array indices represent a remoteParticipantCount. If the count is 4 or greater,
+    // the height will be 33.33%
+    height: ['100%', '50%', '33.33%', '50%', '33.33%'][Math.min(remoteParticipantCount, 4)],
+    padding: '0.2em',
+    boxSizing: 'border-box',
+  };
+
+  return (
+    <div className={classes.participantContainer}>
+      <Swiper pagination={true} modules={[Pagination]} className="mySwiper">
+        {pages.map((page, i) => (
+          <SwiperSlide key={i} className={classes.swiperSlide}>
+            {page.map(participant => (
+              <div style={participantVideoStyles} key={participant.sid}>
+                <Participant
+                  participant={participant}
+                  isLocalParticipant={room!.localParticipant === participant}
+                  isDominantSpeaker={dominantSpeaker === participant}
+                />
+              </div>
+            ))}
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+}