Video 9513 update disabled video UI

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

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 Grid View was implemented. This app now activates
+      // Grid View by default, so here we activate Presentation View before visiting the app so 
+      // that the tests can pass.
+      cy.visit('/', {
+        onBeforeLoad: window => {
+          window.localStorage.setItem('grid-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 Grid View was implemented. This app now activates
+      // Grid View by default, so here we activate Presentation View before visiting the app so
+      // that the tests can pass.
+      await page.evaluateOnNewDocument(() => {
+        localStorage.clear();
+        localStorage.setItem('grid-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 Grid View was implemented. This app now activates
+  // Grid View by default, so here we activate Presentation View before visiting the app so
+  // that the tests can pass.
+  cy.visit('/', {
+    onBeforeLoad: window => {
+      window.localStorage.setItem('grid-view-active-key', false);
+    },
+  });
   cy.get('#input-user-name').type(username);
   cy.get('#input-room-name').type(roomname);
   cy.get('[type="submit"]').click();