Video 6352 quality pane (#10)

Author: olipyskoty

serverless/__tests__/e2e/e2e.ts

@@ -41,9 +41,29 @@ describe('the serverless endpoints', () => {
 
   describe('the token function', () => {
     it('should return a valid access token', async () => {
-      const { body } = await superagent.get(`${appURL}/token`);
+      const { body } = await superagent.get(`${appURL}/app/token`);
       const token = jwt.decode(body.token) as { [key: string]: any };
       expect(token.grants.identity).toEqual(constants.VIDEO_IDENTITY);
     });
   });
+
+  describe('the turn-credentials function', () => {
+    it('should return turn credentials', async () => {
+      const { body } = await superagent.get(`${appURL}/app/turn-credentials`);
+      expect(body).toEqual(
+        expect.objectContaining({
+          password: '[Redacted]',
+          ttl: '30',
+          username: expect.any(String),
+          accountSid: expect.any(String),
+          iceServers: expect.arrayContaining([
+            {
+              url: expect.any(String),
+              urls: expect.any(String),
+            },
+          ]),
+        })
+      );
+    });
+  });
 });

serverless/__tests__/functions/token.ts serverless/__tests__/functions/app/token.ts

@@ -1,4 +1,4 @@
-import { handler } from '../../functions/token';
+import { handler } from '../../../functions/app/token';
 import jwt, { VerifyCallback } from 'jsonwebtoken';
 
 const mockContext = {

serverless/__tests__/functions/app/turn-credentials.ts

@@ -0,0 +1,19 @@
+import { handler } from '../../../functions/app/turn-credentials';
+
+const mockClient = {
+  tokens: {
+    create: jest.fn(() => Promise.resolve('mock token')),
+  },
+};
+
+describe('the turn-credentials function', () => {
+  it('should return turn credentials', (done) => {
+    const mockCallback = jest.fn();
+    handler({ getTwilioClient: () => mockClient }, {}, mockCallback);
+    expect(mockClient.tokens.create).toHaveBeenCalledWith({ ttl: 30 });
+    setImmediate(() => {
+      expect(mockCallback).toHaveBeenCalledWith(null, 'mock token');
+      done();
+    });
+  });
+});

serverless/functions/token.js serverless/functions/app/token.js

@@ -0,0 +1,7 @@
+exports.handler = function (context, event, callback) {
+    const verifyExpiry = require(Runtime.getAssets()['/verify_expiry.js'].path);
+    verifyExpiry.handler(context, event, callback);
+  
+    const client = context.getTwilioClient();
+    client.tokens.create({ ttl: 30 }).then((token) => callback(null, token));
+  };

serverless/functions/app/turn-credentials.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Video, { PreflightTestReport } from 'twilio-video';
-import { AudioInputTest, AudioOutputTest, VideoInputTest } from '@twilio/rtc-diagnostics';
+import { AudioInputTest, AudioOutputTest, VideoInputTest, MediaConnectionBitrateTest } from '@twilio/rtc-diagnostics';
 import {
   ActivePane,
   useAppStateContext,
@@ -11,9 +11,16 @@ import {
 } from './AppStateProvider';
 import { renderHook, act } from '@testing-library/react-hooks';
 
+const mockStartBitrateTest = jest.fn();
 const mockStartPreflightTest = jest.fn();
 const mockGetTwilioStatus = jest.fn();
 
+jest.mock('./useBitrateTest/useBitrateTest', () =>
+  jest.fn(() => ({
+    startBitrateTest: mockStartBitrateTest,
+  }))
+);
+
 jest.mock('./usePreflightTest/usePreflightTest', () =>
   jest.fn(() => ({
     startPreflightTest: mockStartPreflightTest,
@@ -34,36 +41,71 @@ describe('the useAppStateContext hook', () => {
 });
 
 describe('the isDownButtonDisabled function', () => {
-  const mockError = Error();
-  it('should return true if preflightTest fails or if Twilio services are down', () => {
-    expect(isDownButtonDisabled(false, 'partial_outage', ActivePane.Connectivity, mockError)).toBe(true);
+  it('should return true if preflightTest fails', () => {
+    const mockCurrentState = {
+      ...initialState,
+      activePane: ActivePane.Connectivity,
+      preflightTestInProgress: false,
+      preflightTest: { ...initialState.preflightTest, error: Error() },
+      bitrateTestInProgress: false,
+    };
+    expect(isDownButtonDisabled(mockCurrentState)).toBe(true);
   });
 
-  it('should return true when preflight test is in progress', () => {
-    expect(isDownButtonDisabled(true, 'operational', ActivePane.Connectivity, null)).toBe(true);
+  it('should return true when preflight test and/or bitrate test is in progress', () => {
+    const mockCurrentState = {
+      ...initialState,
+      activePane: ActivePane.Connectivity,
+      preflightTestInProgress: true,
+      bitrateTestInProgress: false,
+    };
+
+    expect(isDownButtonDisabled(mockCurrentState)).toBe(true);
   });
 
   it('should return true if the active pane is the last pane', () => {
-    expect(isDownButtonDisabled(false, 'operational', ActivePane.Results, null)).toBe(true);
+    const mockCurrentState = {
+      ...initialState,
+      activePane: ActivePane.Results,
+    };
+    expect(isDownButtonDisabled(mockCurrentState)).toBe(true);
   });
 
   it('should return true when active pane is DeviceCheck', () => {
-    expect(isDownButtonDisabled(false, 'operational', ActivePane.DeviceCheck, null)).toBe(true);
+    const mockCurrentState = {
+      ...initialState,
+      activePane: ActivePane.DeviceCheck,
+    };
+    expect(isDownButtonDisabled(mockCurrentState)).toBe(true);
   });
 
   it('should return true when active pane is DeviceError', () => {
-    expect(isDownButtonDisabled(false, 'operational', ActivePane.DeviceError, null)).toBe(true);
+    const mockCurrentState = {
+      ...initialState,
+      activePane: ActivePane.DeviceError,
+    };
+    expect(isDownButtonDisabled(mockCurrentState)).toBe(true);
   });
 
   it('should return true when active pane is BrowserCheck and the browser is unsupported', () => {
+    const mockCurrentState = {
+      ...initialState,
+      activePane: ActivePane.BrowserTest,
+    };
     // @ts-ignore
     Video.isSupported = false;
 
-    expect(isDownButtonDisabled(false, 'operational', ActivePane.BrowserTest, null)).toBe(true);
+    expect(isDownButtonDisabled(mockCurrentState)).toBe(true);
   });
 
-  it('should return false if preflightTest completes and active pane is not in Device setup', () => {
-    expect(isDownButtonDisabled(false, 'operational', ActivePane.CameraTest, null)).toBe(false);
+  it('should return false if preflightTest and bitrateTest complete and active pane is not DeviceCheck or DeviceError', () => {
+    const mockCurrentState = {
+      ...initialState,
+      activePane: ActivePane.CameraTest,
+      preflightTestInProgress: false,
+      bitrateTestInProgress: false,
+    };
+    expect(isDownButtonDisabled(mockCurrentState)).toBe(false);
   });
 });
 
@@ -304,6 +346,46 @@ describe('the appState reducer', () => {
       expect(newState.preflightTestInProgress).toBe(false);
     });
   });
+
+  describe('the "set-bitrate" action type', () => {
+    it('should set the bitrate for the bitrate test', () => {
+      const newState = appStateReducer(initialState, { type: 'set-bitrate', bitrate: 100 });
+      expect(newState.bitrateTest.bitrate).toBe(100);
+    });
+  });
+
+  describe('the "set-bitrate-test-error" action type', () => {
+    it('should save the error if an error is thrown during bitrate test', () => {
+      const mockError = Error();
+      const newState = appStateReducer(initialState, { type: 'set-bitrate-test-error', error: mockError });
+      expect(newState.bitrateTest.error).toBe(mockError);
+    });
+  });
+
+  describe('the "set-bitrate-test-report" action type', () => {
+    it('should save the report from the bitrate test', () => {
+      const mockReport = {} as MediaConnectionBitrateTest.Report;
+
+      const newState = appStateReducer(initialState, { type: 'set-bitrate-test-report', report: mockReport });
+      expect(newState.bitrateTest.report).toBe(mockReport);
+    });
+  });
+
+  describe('the "bitrate-test-started" action type', () => {
+    it('should set bitrateTestInProgress to true and bitrateTestFinished to false', () => {
+      const newState = appStateReducer(initialState, { type: 'bitrate-test-started' });
+      expect(newState.bitrateTestInProgress).toBe(true);
+      expect(newState.bitrateTestFinished).toBe(false);
+    });
+  });
+
+  describe('the "bitrate-test-finished" action type', () => {
+    it('should set bitrateTestInProgress to false and bitrateTestFinished to true', () => {
+      const newState = appStateReducer(initialState, { type: 'bitrate-test-finished' });
+      expect(newState.bitrateTestFinished).toBe(true);
+      expect(newState.bitrateTestInProgress).toBe(false);
+    });
+  });
 });
 
 describe('the AppStateProvider component', () => {
@@ -336,6 +418,13 @@ describe('the AppStateProvider component', () => {
           "audioGranted": false,
           "audioInputTestReport": null,
           "audioOutputTestReport": null,
+          "bitrateTest": Object {
+            "bitrate": null,
+            "error": null,
+            "report": null,
+          },
+          "bitrateTestFinished": false,
+          "bitrateTestInProgress": false,
           "deviceError": null,
           "downButtonDisabled": false,
           "preflightTest": Object {

src/components/AppStateProvider/AppStateProvider.test.tsx

@@ -4,7 +4,8 @@ import Video, { PreflightTestReport } from 'twilio-video';
 import UAParser from 'ua-parser-js';
 import usePreflightTest from './usePreflightTest/usePreflightTest';
 import useTwilioStatus from './useTwilioStatus/useTwilioStatus';
-import { AudioInputTest, AudioOutputTest, VideoInputTest } from '@twilio/rtc-diagnostics';
+import useBitrateTest from './useBitrateTest/useBitrateTest';
+import { VideoInputTest, MediaConnectionBitrateTest, AudioInputTest, AudioOutputTest } from '@twilio/rtc-diagnostics';
 
 export enum ActivePane {
   GetStarted,
@@ -39,6 +40,13 @@ interface stateType {
   downButtonDisabled: boolean;
   preflightTestInProgress: boolean;
   preflightTestFinished: boolean;
+  bitrateTest: {
+    bitrate: null | number;
+    report: null | MediaConnectionBitrateTest.Report;
+    error: null | Error;
+  };
+  bitrateTestInProgress: boolean;
+  bitrateTestFinished: boolean;
 }
 
 export type ACTIONTYPE =
@@ -57,7 +65,12 @@ export type ACTIONTYPE =
   | { type: 'set-twilio-status'; status: string }
   | { type: 'set-twilio-status-error'; error: Error }
   | { type: 'preflight-started' }
-  | { type: 'preflight-finished' };
+  | { type: 'preflight-finished' }
+  | { type: 'set-bitrate'; bitrate: number }
+  | { type: 'set-bitrate-test-error'; error: Error }
+  | { type: 'set-bitrate-test-report'; report: MediaConnectionBitrateTest.Report }
+  | { type: 'bitrate-test-started' }
+  | { type: 'bitrate-test-finished' };
 
 type AppStateContextType = {
   state: stateType;
@@ -87,6 +100,13 @@ export const initialState = {
   downButtonDisabled: false,
   preflightTestInProgress: false,
   preflightTestFinished: false,
+  bitrateTest: {
+    bitrate: null,
+    report: null,
+    error: null,
+  },
+  bitrateTestInProgress: false,
+  bitrateTestFinished: false,
 };
 
 export const AppStateContext = createContext<AppStateContextType>(null!);
@@ -100,20 +120,17 @@ export function useAppStateContext() {
 }
 
 // helper function for determining whether to disable the down arrow button:
-export const isDownButtonDisabled = (
-  inProgress: boolean,
-  status: string | null,
-  pane: ActivePane,
-  preflightError: Error | null
-) => {
+export const isDownButtonDisabled = (currentState: stateType) => {
+  const { activePane, preflightTestInProgress, preflightTest, bitrateTestInProgress } = currentState;
+
   const connectionFailedOrLoading =
-    pane === ActivePane.Connectivity && (inProgress || status !== 'operational' || preflightError !== null);
-  const onDeviceCheck = pane === ActivePane.DeviceCheck || pane === ActivePane.DeviceError;
-  const unsupportedBrowser = pane === ActivePane.BrowserTest && !Video.isSupported;
+    activePane === ActivePane.Connectivity &&
+    (preflightTestInProgress || bitrateTestInProgress || preflightTest.error !== null);
 
-  if (connectionFailedOrLoading || !ActivePane[pane + 1] || onDeviceCheck || unsupportedBrowser) return true;
+  const onDeviceCheck = activePane === ActivePane.DeviceCheck || activePane === ActivePane.DeviceError;
+  const unsupportedBrowser = activePane === ActivePane.BrowserTest && !Video.isSupported;
 
-  return false;
+  return connectionFailedOrLoading || !ActivePane[activePane + 1] || onDeviceCheck || unsupportedBrowser;
 };
 
 /**
@@ -229,21 +246,39 @@ export const appStateReducer = produce((draft: stateType, action: ACTIONTYPE) =>
       draft.preflightTestFinished = true;
       draft.preflightTestInProgress = false;
       break;
+
+    case 'set-bitrate':
+      draft.bitrateTest.bitrate = action.bitrate;
+      break;
+
+    case 'set-bitrate-test-report':
+      draft.bitrateTest.report = action.report;
+      break;
+
+    case 'set-bitrate-test-error':
+      draft.bitrateTest.error = action.error;
+      break;
+
+    case 'bitrate-test-started':
+      draft.bitrateTestInProgress = true;
+      draft.bitrateTestFinished = false;
+      break;
+
+    case 'bitrate-test-finished':
+      draft.bitrateTestFinished = true;
+      draft.bitrateTestInProgress = false;
+      break;
   }
 
   const currentState = current(draft);
 
-  draft.downButtonDisabled = isDownButtonDisabled(
-    currentState.preflightTestInProgress,
-    currentState.twilioStatus,
-    currentState.activePane,
-    currentState.preflightTest.error
-  );
+  draft.downButtonDisabled = isDownButtonDisabled(currentState);
 });
 
 export const AppStateProvider: React.FC = ({ children }) => {
   const [state, dispatch] = useReducer(appStateReducer, initialState);
   const { startPreflightTest } = usePreflightTest(dispatch);
+  const { startBitrateTest } = useBitrateTest(dispatch);
   const { getTwilioStatus } = useTwilioStatus(dispatch);
 
   const userAgentParser = new UAParser();
@@ -252,14 +287,15 @@ export const AppStateProvider: React.FC = ({ children }) => {
   const nextPane = useCallback(() => {
     switch (state.activePane) {
       case ActivePane.GetStarted:
+        startBitrateTest();
         startPreflightTest();
         getTwilioStatus();
         dispatch({ type: 'next-pane' });
         break;
       default:
         dispatch({ type: 'next-pane' });
     }
-  }, [startPreflightTest, getTwilioStatus, state, dispatch]);
+  }, [startBitrateTest, startPreflightTest, getTwilioStatus, state, dispatch]);
 
   useEffect(() => {
     navigator.mediaDevices.enumerateDevices().then((devices) => dispatch({ type: 'set-devices', devices }));