Grid mode

.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

@@ -44,9 +44,15 @@
     "ts-node": "^9.1.1",
     "twilio": "^3.63.1",
     "twilio-video": "^2.20.1",
-    "typescript": "^3.8.3"
+    "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 +93,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 +104,17 @@
       "@typescript-eslint/no-shadow": [
         "warn"
       ]
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
   },
   "browserslist": {
     "production": [

src/components/GridView/GridView.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { GridView } from './GridView';
+import { shallow } from 'enzyme';
+import useGridLayout from '../../hooks/useGridLayout/useGridLayout';
+
+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_MAX_PARTICIPANTS: 2,
+  GRID_MODE_MARGIN: 3,
+}));
+jest.mock('../../hooks/useParticipants/useParticipants', () => () => mockParticipants);
+jest.mock('../../hooks/useVideoContext/useVideoContext', () => () => ({
+  room: {
+    localParticipant: { identity: 'test-local-participant' },
+  },
+}));
+jest.mock('../../hooks/useGridLayout/useGridLayout', () =>
+  jest.fn(() => ({
+    participantVideoWidth: 720,
+    containerRef: { current: null },
+  }))
+);
+
+describe('the GridView component', () => {
+  it('should render correctly', () => {
+    const wrapper = shallow(<GridView />);
+    expect(wrapper).toMatchSnapshot();
+    expect(useGridLayout).toHaveBeenCalledWith(2);
+  });
+});

src/components/GridView/GridView.tsx

@@ -0,0 +1,57 @@
+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 Participant from '../Participant/Participant';
+import useGridLayout from '../../hooks/useGridLayout/useGridLayout';
+import useParticipants from '../../hooks/useParticipants/useParticipants';
+import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  container: {
+    display: 'flex',
+    width: 'calc(100% - 200px)',
+    margin: '0 auto',
+    alignContent: 'center',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gridArea: '1 / 1 / 2 / 3',
+  },
+  participant: {
+    '&:nth-child(n + 26)': {
+      display: 'none',
+    },
+  },
+}));
+
+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 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>
+      {participants.map(participant => (
+        <div
+          key={participant.sid}
+          className={classes.participant}
+          style={{ width: participantWidth, height: participantHeight, margin: GRID_MODE_MARGIN }}
+        >
+          <Participant participant={participant} />
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/GridView/__snapshots__/GridView.test.tsx.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the GridView component should render correctly 1`] = `
+<div
+  className="makeStyles-container-1"
+>
+  <div
+    className="makeStyles-participant-2"
+    style={
+      Object {
+        "height": "405px",
+        "margin": 3,
+        "width": "720px",
+      }
+    }
+  >
+    <Participant
+      isLocalParticipant={true}
+      participant={
+        Object {
+          "identity": "test-local-participant",
+        }
+      }
+    />
+  </div>
+  <div
+    className="makeStyles-participant-2"
+    key="1"
+    style={
+      Object {
+        "height": "405px",
+        "margin": 3,
+        "width": "720px",
+      }
+    }
+  >
+    <Participant
+      participant={
+        Object {
+          "identity": "test-participant-1",
+          "sid": 1,
+        }
+      }
+    />
+  </div>
+  <div
+    className="makeStyles-participant-2"
+    key="2"
+    style={
+      Object {
+        "height": "405px",
+        "margin": 3,
+        "width": "720px",
+      }
+    }
+  >
+    <Participant
+      participant={
+        Object {
+          "identity": "test-participant-2",
+          "sid": 2,
+        }
+      }
+    />
+  </div>
+  <div
+    className="makeStyles-participant-2"
+    key="3"
+    style={
+      Object {
+        "height": "405px",
+        "margin": 3,
+        "width": "720px",
+      }
+    }
+  >
+    <Participant
+      participant={
+        Object {
+          "identity": "test-participant-3",
+          "sid": 3,
+        }
+      }
+    />
+  </div>
+  <div
+    className="makeStyles-participant-2"
+    key="4"
+    style={
+      Object {
+        "height": "405px",
+        "margin": 3,
+        "width": "720px",
+      }
+    }
+  >
+    <Participant
+      participant={
+        Object {
+          "identity": "test-participant-4",
+          "sid": 4,
+        }
+      }
+    />
+  </div>
+</div>
+`;

src/components/MenuBar/Menu/Menu.test.tsx

@@ -38,6 +38,7 @@ mockUseLocalVideoToggle.mockImplementation(() => [true, () => {}]);
 
 describe('the Menu component', () => {
   let mockUpdateRecordingRules: jest.Mock<any>;
+  let mockSetIsGridModeActive = jest.fn();
 
   beforeEach(() => jest.clearAllMocks());
 
@@ -47,6 +48,7 @@ describe('the Menu component', () => {
       isFetching: false,
       updateRecordingRules: mockUpdateRecordingRules,
       roomType: 'group',
+      setIsGridModeActive: mockSetIsGridModeActive,
     }));
     mockUseFlipCameraToggle.mockImplementation(() => ({
       flipCameraDisabled: false,
@@ -88,6 +90,7 @@ describe('the Menu component', () => {
           isFetching: false,
           updateRecordingRules: mockUpdateRecordingRules,
           roomType: 'group',
+          setIsGridModeActive: mockSetIsGridModeActive,
         }));
         const { getByText } = render(<Menu />);
         fireEvent.click(getByText('More'));
@@ -99,6 +102,7 @@ describe('the Menu component', () => {
           isFetching: false,
           updateRecordingRules: mockUpdateRecordingRules,
           roomType: 'group-small',
+          setIsGridModeActive: mockSetIsGridModeActive,
         }));
         const { getByText } = render(<Menu />);
         fireEvent.click(getByText('More'));
@@ -110,6 +114,7 @@ describe('the Menu component', () => {
           isFetching: false,
           updateRecordingRules: mockUpdateRecordingRules,
           roomType: 'go',
+          setIsGridModeActive: mockSetIsGridModeActive,
         }));
         const { getByText, queryByText } = render(<Menu />);
         fireEvent.click(getByText('More'));
@@ -121,6 +126,7 @@ describe('the Menu component', () => {
           isFetching: false,
           updateRecordingRules: mockUpdateRecordingRules,
           roomType: 'peer-to-peer',
+          setIsGridModeActive: mockSetIsGridModeActive,
         }));
         const { getByText, queryByText } = render(<Menu />);
         fireEvent.click(getByText('More'));
@@ -132,6 +138,7 @@ describe('the Menu component', () => {
           isFetching: false,
           updateRecordingRules: mockUpdateRecordingRules,
           roomType: undefined,
+          setIsGridModeActive: mockSetIsGridModeActive,
         }));
         const { getByText } = render(<Menu />);
         fireEvent.click(getByText('More'));
@@ -188,7 +195,7 @@ describe('the Menu component', () => {
       expect(wrapper.find(AboutDialog).prop('open')).toBe(false);
       wrapper
         .find(MenuItem)
-        .at(3)
+        .at(4)
         .simulate('click');
       expect(wrapper.find(AboutDialog).prop('open')).toBe(true);
     });
@@ -203,6 +210,32 @@ describe('the Menu component', () => {
       expect(wrapper.find(DeviceSelectionDialog).prop('open')).toBe(true);
     });
 
+    it('should show the Grid Mode button when grid mode is inactive', () => {
+      mockUseAppState.mockImplementation(() => ({
+        setIsGridModeActive: mockSetIsGridModeActive,
+        isGridModeActive: false,
+      }));
+
+      const { getByText } = render(<Menu />);
+      fireEvent.click(getByText('More'));
+      fireEvent.click(getByText('Grid Mode'));
+
+      expect(mockSetIsGridModeActive.mock.calls[0][0](false)).toBe(true);
+    });
+
+    it('should show the Collaboration Mode button when grid mode is active', () => {
+      mockUseAppState.mockImplementation(() => ({
+        setIsGridModeActive: mockSetIsGridModeActive,
+        isGridModeActive: true,
+      }));
+
+      const { getByText } = render(<Menu />);
+      fireEvent.click(getByText('More'));
+      fireEvent.click(getByText('Collaboration Mode'));
+
+      expect(mockSetIsGridModeActive.mock.calls[0][0](true)).toBe(false);
+    });
+
     it('should render the correct icon', () => {
       const wrapper = shallow(<Menu />);
       expect(wrapper.find(ExpandMoreIcon).exists()).toBe(true);