Grid mode use sdk v3

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-essentials',
+      options: { backgrounds: false, docs: false },
+    },
+    '@storybook/preset-create-react-app',
+  ],
+  framework: '@storybook/react',
+  webpackFinal: config => {
+    config.resolve.alias['twilio-video'] = require.resolve('../src/stories/mocks/twilio-video.js');
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,15 @@
+import { decorator as TwilioVideoMockDecorator } from '../src/stories/mocks/twilio-video.js';
+
+// Add the decorator to all stories
+export const decorators = [TwilioVideoMockDecorator];
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  layout: 'fullscreen',
+};

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",
@@ -43,10 +44,16 @@
     "strip-color": "^0.1.0",
     "ts-node": "^9.1.1",
     "twilio": "^3.63.1",
-    "twilio-video": "^2.20.1",
-    "typescript": "^3.8.3"
+    "twilio-video": "https://github.com/twilio/twilio-video.js/archive/refs/tags/3.0.0-rc3.tar.gz",
+    "typescript": "^4.6.2"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/node-logger": "^6.4.18",
+    "@storybook/preset-create-react-app": "^3.2.0",
+    "@storybook/react": "^6.4.18",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/react-hooks": "^3.2.1",
@@ -87,7 +94,9 @@
     "cypress:open": "cypress open",
     "cypress:run": "cypress run --browser chrome",
     "cypress:ci": "cross-env CYPRESS_baseUrl=http://localhost:8081 start-server-and-test server http://localhost:8081 cypress:run",
-    "deploy:twilio-cli": "cross-env REACT_APP_SET_AUTH=passcode npm run build && twilio rtc:apps:video:deploy --authentication=passcode --app-directory ./build"
+    "deploy:twilio-cli": "cross-env REACT_APP_SET_AUTH=passcode npm run build && twilio rtc:apps:video:deploy --authentication=passcode --app-directory ./build",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": "react-app",
@@ -96,7 +105,17 @@
       "@typescript-eslint/no-shadow": [
         "warn"
       ]
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
   },
   "browserslist": {
     "production": [

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

@@ -0,0 +1,107 @@
+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 },
+  { identity: 'test-participant-3', sid: 3 },
+  { identity: 'test-participant-4', sid: 4 },
+];
+
+jest.mock('../../constants', () => ({
+  GRID_MODE_ASPECT_RATIO: 9 / 16,
+  GRID_MODE_MARGIN: 3,
+}));
+jest.mock('../../hooks/useParticipants/useParticipants', () => () => mockParticipants);
+jest.mock('../../hooks/useVideoContext/useVideoContext', () => () => ({
+  room: {
+    localParticipant: mockLocalParticipant,
+  },
+}));
+jest.mock('../../hooks/useGridLayout/useGridLayout', () =>
+  jest.fn(() => ({
+    participantVideoWidth: 720,
+    containerRef: { current: null },
+  }))
+);
+
+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(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

@@ -0,0 +1,134 @@
+import React from 'react';
+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 CONTAINER_GUTTER = '50px';
+
+const useStyles = makeStyles({
+  container: {
+    position: 'relative',
+    gridArea: '1 / 1 / 2 / 3',
+  },
+  participantContainer: {
+    position: 'absolute',
+    display: 'flex',
+    top: CONTAINER_GUTTER,
+    right: CONTAINER_GUTTER,
+    bottom: CONTAINER_GUTTER,
+    left: CONTAINER_GUTTER,
+    margin: '0 auto',
+    alignContent: 'center',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  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 { 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}>
+      <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>
+    </div>
+  );
+}