Feature/grid mode (#720)

Author: olipyskoty

.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',
+};

CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.7.0 (July 6, 2022)
+
+### New Feature
+
+- This release adds a Gallery View feature. Gallery View is an additional layout setting which allows users to view other participants' videos in the form of a grid. Users can update the max number of participants per page via the Audio and Video Settings > Gallery View. Users can also switch to Speaker View (the app's original layout) by accessing the More menu. Please note that Gallery View will be enabled by default.
+
+### Dependency Upgrade
+- `twilio-video` has been upgraded from 2.21.2 to 2.22.0. 
+
+### Bugfixes
+
+- Fixes an issue where the `<AudioLevelIndicator />` could cause a memory leak after it is mounted/unmounted many times. [#703](https://github.com/twilio/twilio-video-app-react/pull/703)
+- Provides a workaround for a bug introduced in Chrome 103, where calling `.stop()` on a cloned `MediaStreamTrack` could cause a loss of audio in the app. [#713](https://github.com/twilio/twilio-video-app-react/pull/713)
+- Removes the `frame rate` and `resolution` constraints when requesting a screen share track which should allow for higher quality screen share tracks to be published. [#715](https://github.com/twilio/twilio-video-app-react/pull/715)
+
 ## 0.6.5 (June 3, 2022)
 
 ### Dependency Upgrade

app.yaml

@@ -1,4 +1,4 @@
-runtime: nodejs12
+runtime: nodejs16
 
 entrypoint: npm run server
 

cypress/integration/twilio-video.spec.js

@@ -11,7 +11,14 @@ const getRoomName = () =>
 context('A video app user', () => {
   describe('before entering a room', () => {
     it('should see their audio level indicator moving in the media device panel', () => {
-      cy.visit('/');
+      // These tests were written before Gallery View was implemented. This app now activates
+      // Gallery View by default, so here we activate Speaker View before visiting the app so 
+      // that the tests can pass.
+      cy.visit('/', {
+        onBeforeLoad: window => {
+          window.localStorage.setItem('gallery-view-active-key', false);
+        },
+      });
 
       cy.get('#input-user-name').type('testuser');
       cy.get('#input-room-name').type(getRoomName());

cypress/plugins/index.js

@@ -19,6 +19,14 @@ module.exports = (on, config) => {
         args,
       });
       const page = (participants[name] = await browser.newPage()); // keep track of this participant for future use
+
+      // These tests were written before Gallery View was implemented. This app now activates
+      // Gallery View by default, so here we activate Speaker View before visiting the app so
+      // that the tests can pass.
+      await page.evaluateOnNewDocument(() => {
+        localStorage.clear();
+        localStorage.setItem('gallery-view-active-key', false);
+      });
       await page.goto(config.baseUrl);
       await page.type('#input-user-name', name);
       await page.type('#input-room-name', roomName);

cypress/support/commands.js

@@ -1,7 +1,14 @@
 import detectSound from './detectSound';
 
 Cypress.Commands.add('joinRoom', (username, roomname) => {
-  cy.visit('/');
+  // These tests were written before Gallery View was implemented. This app now activates
+  // Gallery View by default, so here we activate Speaker View before visiting the app so
+  // that the tests can pass.
+  cy.visit('/', {
+    onBeforeLoad: window => {
+      window.localStorage.setItem('gallery-view-active-key', false);
+    },
+  });
   cy.get('#input-user-name').type(username);
   cy.get('#input-room-name').type(roomname);
   cy.get('[type="submit"]').click();