feat(prejoin): Add precall connection quality indicator

* Adds a dropdown indicator which displays the status of the internet connection.
* It uses the same data as `https://network.callstats.io`.
* The algorithm for the strings displayed to the user is also the one used on `network.callstas.io`.

conference.js

@@ -121,7 +121,8 @@ import { suspendDetected } from './react/features/power-monitor';
 import {
     initPrejoin,
     isPrejoinPageEnabled,
-    isPrejoinPageVisible
+    isPrejoinPageVisible,
+    makePrecallTest
 } from './react/features/prejoin';
 import { createRnnoiseProcessorPromise } from './react/features/rnnoise';
 import { toggleScreenshotCaptureEffect } from './react/features/screenshot-capture';
@@ -767,6 +768,8 @@ export default {
                 return c;
             });
 
+            APP.store.dispatch(makePrecallTest(this._getConferenceOptions()));
+
             const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(initialOptions);
             const tracks = await tryCreateLocalTracks;
 

css/_connection-status.scss

@@ -0,0 +1,60 @@
+.con-status {
+    position: absolute;
+    top: 40px;
+    width: 100%;
+    z-index: $toolbarZ + 3;
+
+    &-container {
+        background: rgba(28, 32, 37, .5);
+        border-radius: 3px;
+        color: #fff;
+        font-size: 13px;
+        line-height: 20px;
+        margin: 0 auto;
+        width: 304px;
+    }
+
+    &-header {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+        padding: 8px;
+    }
+
+    &-circle {
+        border-radius: 50%;
+        display: inline-block;
+        padding: 4px;
+    }
+
+    &--good {
+        background: #31B76A;
+    }
+
+    &--poor {
+        background: #E12D2D;
+    }
+
+    &--non-optimal {
+        background: #E39623;
+    }
+
+    &-arrow {
+        &--up {
+            transform: rotate(180deg);
+        }
+
+        &>svg {
+            cursor: pointer;
+        }
+    }
+
+    &-text {
+        text-align: center;
+    }
+
+    &-details {
+        border-top: 1px solid #5E6D7A;
+        padding: 16px;
+    }
+}

css/main.scss

@@ -102,5 +102,6 @@ $flagsImagePath: "../images/";
 @import 'premeeting-screens';
 @import 'e2ee';
 @import 'responsive';
+@import 'connection-status';
 
 /* Modules END */

lang/main.json

@@ -511,6 +511,25 @@
         "callMeAtNumber": "Call me at this number:",
         "configuringDevices": "Configuring devices...",
         "connectedWithAudioQ": "You’re connected with audio?",
+        "connection": {
+           "good": "Your internet connection looks good!",
+           "nonOptimal": "Your internet connection is not optimal",
+           "poor": "You have a poor internet connection"
+        },
+        "connectionDetails": {
+          "audioClipping": "We expect your audio to be clipped.",
+          "audioHighQuality": "We expect your audio to have excellent quality.",
+          "audioLowNoVideo": "We expect your audio quality to be low and no video.",
+          "goodQuality": "Awesome! Your media quality is going to be great.",
+          "noMediaConnectivity": "We could not find a way to establish media connectivity for this test. This is typically caused by a firewall or NAT.",
+          "noVideo": "We expect that your video will be terrible.",
+          "undetectable": "If you still can not make calls in browser, we recommend that you make sure your speakers, microphone and camera are properly set up, that you have granted your browser rights to use your microphone and camera, and that your browser version is up-to-date. If you still have trouble calling, you should contact the web application developer.",
+          "veryPoorConnection": "We expect your call quality to be really terrible.",
+          "videoFreezing": "We expect your video to freeze, turn black, and be pixelated.",
+          "videoHighQuality": "We expect your video to have good quality.",
+          "videoLowQuality": "We expect your video to have low quality in terms of frame rate and resolution.",
+          "videoTearing": "We expect your video to be pixelated or have visual artefacts."
+        },
         "copyAndShare": "Copy & share meeting link",
         "dialInMeeting": "Dial into the meeting",
         "dialInPin": "Dial into the meeting and enter PIN code:",

react/features/base/icons/svg/index.js

@@ -98,4 +98,7 @@ export { default as IconVolume } from './volume.svg';
 export { default as IconVolumeEmpty } from './volume-empty.svg';
 export { default as IconVolumeOff } from './volume-off.svg';
 export { default as IconWarning } from './warning.svg';
+export { default as IconWifi1Bar } from './wifi-1.svg';
+export { default as IconWifi2Bars } from './wifi-2.svg';
+export { default as IconWifi3Bars } from './wifi-3.svg';
 export { default as IconYahoo } from './yahoo.svg';

react/features/base/icons/svg/wifi-1.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M13.0913 6.59847C12.4227 5.88894 11.629 5.32611 10.7554 4.94212C9.88182 4.55812 8.94553 4.36048 7.99997 4.36048C7.05442 4.36048 6.11813 4.55812 5.24456 4.94212C4.371 5.32611 3.57726 5.88894 2.90869 6.59847L4.36305 8.14176C4.84061 7.63486 5.4076 7.23276 6.03163 6.95842C6.65566 6.68408 7.32451 6.54288 7.99997 6.54288C8.67544 6.54288 9.34429 6.68408 9.96832 6.95842C10.5923 7.23276 11.1593 7.63486 11.6369 8.14176L13.0913 6.59847Z" fill="white"/>
+<path opacity="0.4" d="M16 3.51081C13.8766 1.26261 10.9996 0 8 0C5.00044 0 2.12337 1.26261 0 3.51081L1.45436 5.0541C3.19156 3.21432 5.54565 2.18105 8 2.18105C10.4543 2.18105 12.8084 3.21432 14.5456 5.0541L16 3.51081Z" fill="white"/>
+<path d="M5.94287 9.81713L7.99996 12L10.057 9.81713C9.78693 9.53041 9.46623 9.30297 9.11328 9.1478C8.76032 8.99263 8.38201 8.91276 7.99996 8.91276C7.6179 8.91276 7.23959 8.99263 6.88663 9.1478C6.53368 9.30297 6.21298 9.53041 5.94287 9.81713Z" />
+</svg>

react/features/base/icons/svg/wifi-2.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0913 6.59847C12.4227 5.88894 11.629 5.32611 10.7554 4.94211C9.88182 4.55811 8.94553 4.36047 7.99997 4.36047C7.05442 4.36047 6.11813 4.55811 5.24456 4.94211C4.371 5.32611 3.57726 5.88894 2.90869 6.59847L4.36305 8.14176C4.84061 7.63486 5.4076 7.23276 6.03163 6.95842C6.65566 6.68408 7.32451 6.54288 7.99997 6.54288C8.67544 6.54288 9.34429 6.68408 9.96832 6.95842C10.5923 7.23276 11.1593 7.63486 11.6369 8.14176L13.0913 6.59847Z" fill="white"/>
+<path opacity="0.4" d="M16 3.51081C13.8766 1.26261 10.9996 0 8 0C5.00044 0 2.12337 1.26261 0 3.51081L1.45436 5.0541C3.19156 3.21432 5.54565 2.18105 8 2.18105C10.4543 2.18105 12.8084 3.21432 14.5456 5.0541L16 3.51081Z" fill="white"/>
+<path d="M5.94287 9.81713L7.99996 12L10.057 9.81713C9.78693 9.53042 9.46623 9.30298 9.11328 9.14781C8.76032 8.99263 8.38201 8.91277 7.99996 8.91277C7.6179 8.91277 7.23959 8.99263 6.88663 9.14781C6.53368 9.30298 6.21298 9.53042 5.94287 9.81713Z" />
+</svg>

react/features/base/icons/svg/wifi-3.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0913 6.59847C12.4227 5.88894 11.629 5.32611 10.7554 4.94211C9.88182 4.55811 8.94553 4.36047 7.99997 4.36047C7.05442 4.36047 6.11813 4.55811 5.24456 4.94211C4.371 5.32611 3.57726 5.88894 2.90869 6.59847L4.36305 8.14176C4.84061 7.63486 5.4076 7.23276 6.03163 6.95842C6.65566 6.68408 7.32451 6.54288 7.99997 6.54288C8.67544 6.54288 9.34429 6.68408 9.96832 6.95842C10.5923 7.23276 11.1593 7.63486 11.6369 8.14176L13.0913 6.59847Z" fill="white"/>
+<path d="M16 3.51081C13.8766 1.26261 10.9996 0 8 0C5.00044 0 2.12337 1.26261 0 3.51081L1.45436 5.0541C3.19156 3.21432 5.54565 2.18105 8 2.18105C10.4543 2.18105 12.8084 3.21432 14.5456 5.0541L16 3.51081Z" fill="white"/>
+<path d="M5.94287 9.81713L7.99996 12L10.057 9.81713C9.78693 9.53042 9.46623 9.30298 9.11328 9.14781C8.76032 8.99263 8.38201 8.91277 7.99996 8.91277C7.6179 8.91277 7.23959 8.99263 6.88663 9.14781C6.53368 9.30298 6.21298 9.53042 5.94287 9.81713Z" />
+</svg>

react/features/base/premeeting/components/web/ConnectionStatus.js

@@ -0,0 +1,104 @@
+// @flow
+
+import React, { useState } from 'react';
+
+import { translate } from '../../../i18n';
+import { Icon, IconArrowDownSmall, IconWifi1Bar, IconWifi2Bars, IconWifi3Bars } from '../../../icons';
+import { connect } from '../../../redux';
+import { CONNECTION_TYPE } from '../../constants';
+import { getConnectionData } from '../../functions';
+
+type Props = {
+
+    /**
+     * List of strings with details about the connection.
+     */
+    connectionDetails: string[],
+
+    /**
+     * The type of the connection. Can be: 'none', 'poor', 'nonOptimal' or 'good'.
+     */
+    connectionType: string,
+
+    /**
+     * Used for translation.
+     */
+    t: Function
+}
+
+const CONNECTION_TYPE_MAP = {
+    [CONNECTION_TYPE.POOR]: {
+        connectionClass: 'con-status--poor',
+        icon: IconWifi1Bar,
+        connectionText: 'prejoin.connection.poor'
+    },
+    [CONNECTION_TYPE.NON_OPTIMAL]: {
+        connectionClass: 'con-status--non-optimal',
+        icon: IconWifi2Bars,
+        connectionText: 'prejoin.connection.nonOptimal'
+    },
+    [CONNECTION_TYPE.GOOD]: {
+        connectionClass: 'con-status--good',
+        icon: IconWifi3Bars,
+        connectionText: 'prejoin.connection.good'
+    }
+};
+
+/**
+ * Component displaying information related to the connection & audio/video quality.
+ *
+ * @param {Props} props - The props of the component.
+ * @returns {ReactElement}
+ */
+function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
+    if (connectionType === CONNECTION_TYPE.NONE) {
+        return null;
+    }
+
+    const { connectionClass, icon, connectionText } = CONNECTION_TYPE_MAP[connectionType];
+    const [ showDetails, toggleDetails ] = useState(false);
+    const arrowClassName = showDetails
+        ? 'con-status-arrow con-status-arrow--up'
+        : 'con-status-arrow';
+    const detailsText = connectionDetails.map(t).join(' ');
+
+    return (
+        <div className = 'con-status'>
+            <div className = 'con-status-container'>
+                <div className = 'con-status-header'>
+                    <div className = { `con-status-circle ${connectionClass}` }>
+                        <Icon
+                            size = { 16 }
+                            src = { icon } />
+                    </div>
+                    <span className = 'con-status-text'>{t(connectionText)}</span>
+                    <Icon
+                        className = { arrowClassName }
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick = { () => toggleDetails(!showDetails) }
+                        size = { 24 }
+                        src = { IconArrowDownSmall } />
+                </div>
+                { showDetails
+                  && <div className = 'con-status-details'>{detailsText}</div> }
+            </div>
+        </div>
+    );
+}
+
+/**
+ * Maps (parts of) the redux state to the React {@code Component} props.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {Object}
+ */
+function mapStateToProps(state): Object {
+    const { connectionDetails, connectionType } = getConnectionData(state);
+
+    return {
+        connectionDetails,
+        connectionType
+    };
+}
+
+export default translate(connect(mapStateToProps)(ConnectionStatus));

react/features/base/premeeting/components/web/PreMeetingScreen.js

@@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
 
 import { AudioSettingsButton, VideoSettingsButton } from '../../../../toolbox/components/web';
 
+import ConnectionStatus from './ConnectionStatus';
 import CopyMeetingUrl from './CopyMeetingUrl';
 import Preview from './Preview';
 
@@ -82,6 +83,7 @@ export default class PreMeetingScreen extends PureComponent<Props> {
             <div
                 className = 'premeeting-screen'
                 id = 'lobby-screen'>
+                <ConnectionStatus />
                 <Preview
                     name = { name }
                     showAvatar = { showAvatar }

react/features/base/premeeting/constants.js

@@ -0,0 +1,8 @@
+// @flow
+
+export const CONNECTION_TYPE = {
+    GOOD: 'good',
+    NON_OPTIMAL: 'nonOptimal',
+    NONE: 'none',
+    POOR: 'poor'
+};

react/features/base/premeeting/functions.js

@@ -0,0 +1,142 @@
+import { findIndex } from 'lodash';
+
+import { CONNECTION_TYPE } from './constants';
+
+const LOSS_AUDIO_THRESHOLDS = [ 0.33, 0.05 ];
+const LOSS_VIDEO_THRESHOLDS = [ 0.33, 0.1, 0.05 ];
+
+const THROUGHPUT_AUDIO_THRESHOLDS = [ 8, 20 ];
+const THROUGHPUT_VIDEO_THRESHOLDS = [ 60, 750 ];
+
+/**
+ * Returns the level based on a list of thresholds.
+ *
+ * @param {number[]} thresholds - The thresholds array.
+ * @param {number} value - The value against which the level is calculated.
+ * @param {boolean} descending - The order based on which the level is calculated.
+ *
+ * @returns {number}
+ */
+function _getLevel(thresholds, value, descending = true) {
+    let predicate;
+
+    if (descending) {
+        predicate = function(threshold) {
+            return value > threshold;
+        };
+    } else {
+        predicate = function(threshold) {
+            return value < threshold;
+        };
+    }
+
+    const i = findIndex(thresholds, predicate);
+
+    if (i === -1) {
+        return thresholds.length;
+    }
+
+    return i;
+}
+
+/**
+ * Returns the connection details from the test results.
+ *
+ * @param {{
+ *   fractionalLoss: number,
+ *   throughput: number
+ * }} testResults - The state of the app.
+ *
+ * @returns {{
+ *   connectionType: string,
+ *   connectionDetails: string[]
+ * }}
+ */
+function _getConnectionDataFromTestResults({ fractionalLoss: l, throughput: t }) {
+    const loss = {
+        audioQuality: _getLevel(LOSS_AUDIO_THRESHOLDS, l),
+        videoQuality: _getLevel(LOSS_VIDEO_THRESHOLDS, l)
+    };
+    const throughput = {
+        audioQuality: _getLevel(THROUGHPUT_AUDIO_THRESHOLDS, t, false),
+        videoQuality: _getLevel(THROUGHPUT_VIDEO_THRESHOLDS, t, false)
+    };
+    let connectionType = CONNECTION_TYPE.NONE;
+    const connectionDetails = [];
+
+    if (throughput.audioQuality === 0 || loss.audioQuality === 0) {
+        // Calls are impossible.
+        connectionType = CONNECTION_TYPE.POOR;
+        connectionDetails.push('prejoin.connectionDetails.veryPoorConnection');
+    } else if (
+        throughput.audioQuality === 2
+        && throughput.videoQuality === 2
+        && loss.audioQuality === 2
+        && loss.videoQuality === 3
+    ) {
+        // Ideal conditions for both audio and video. Show only one message.
+        connectionType = CONNECTION_TYPE.GOOD;
+        connectionDetails.push('prejoin.connectionDetails.goodQuality');
+    } else {
+        connectionType = CONNECTION_TYPE.NON_OPTIMAL;
+
+        if (throughput.audioQuality === 1) {
+            // Minimum requirements for a call are met.
+            connectionDetails.push('prejoin.connectionDetails.audioLowNoVideo');
+        } else {
+            // There are two paragraphs: one saying something about audio and the other about video.
+            if (loss.audioQuality === 1) {
+                connectionDetails.push('prejoin.connectionDetails.audioClipping');
+            } else {
+                connectionDetails.push('prejoin.connectionDetails.audioHighQuality');
+            }
+
+            if (throughput.videoQuality === 0 || loss.videoQuality === 0) {
+                connectionDetails.push('prejoin.connectionDetails.noVideo');
+            } else if (throughput.videoQuality === 1) {
+                connectionDetails.push('prejoin.connectionDetails.videoLowQuality');
+            } else if (loss.videoQuality === 1) {
+                connectionDetails.push('prejoin.connectionDetails.videoFreezing');
+            } else if (loss.videoQuality === 2) {
+                connectionDetails.push('prejoin.connectionDetails.videoTearing');
+            } else {
+                connectionDetails.push('prejoin.connectionDetails.videoHighQuality');
+            }
+        }
+        connectionDetails.push('prejoin.connectionDetails.undetectable');
+    }
+
+    return {
+        connectionType,
+        connectionDetails
+    };
+}
+
+/**
+ * Selector for determining the connection type & details.
+ *
+ * @param {Object} state - The state of the app.
+ * @returns {{
+ *   connectionType: string,
+ *   connectionDetails: string[]
+ * }}
+ */
+export function getConnectionData(state) {
+    const { precallTestResults } = state['features/prejoin'];
+
+    if (precallTestResults) {
+        if (precallTestResults.mediaConnectivity) {
+            return _getConnectionDataFromTestResults(precallTestResults);
+        }
+
+        return {
+            connectionType: CONNECTION_TYPE.POOR,
+            connectionDetails: [ 'prejoin.connectionDetails.noMediaConnectivity' ]
+        };
+    }
+
+    return {
+        connectionType: CONNECTION_TYPE.NONE,
+        connectionDetails: []
+    };
+}

react/features/prejoin/actionTypes.js

@@ -39,6 +39,11 @@ export const SET_DIALOUT_STATUS = 'SET_DIALOUT_STATUS';
  */
 export const SET_JOIN_BY_PHONE_DIALOG_VISIBLITY = 'SET_JOIN_BY_PHONE_DIALOG_VISIBLITY';
 
+/**
+ * Action type to set the precall test data.
+ */
+export const SET_PRECALL_TEST_RESULTS = 'SET_PRECALL_TEST_RESULTS';
+
 /**
  * Action type to disable the audio while on prejoin page.
  */

react/features/prejoin/actions.js

@@ -1,5 +1,7 @@
 // @flow
 
+declare var JitsiMeetJS: Object;
+
 import uuid from 'uuid';
 
 import { getRoomName } from '../base/conference';
@@ -24,6 +26,7 @@ import {
     SET_PREJOIN_DISPLAY_NAME_REQUIRED,
     SET_SKIP_PREJOIN,
     SET_JOIN_BY_PHONE_DIALOG_VISIBLITY,
+    SET_PRECALL_TEST_RESULTS,
     SET_PREJOIN_DEVICE_ERRORS,
     SET_PREJOIN_PAGE_VISIBILITY
 } from './actionTypes';
@@ -231,6 +234,22 @@ export function joinConferenceWithoutAudio() {
     };
 }
 
+/**
+ * Initializes the 'precallTest' and executes one test, storing the results.
+ *
+ * @param {Object} conferenceOptions - The conference options.
+ * @returns {Function}
+ */
+export function makePrecallTest(conferenceOptions: Object) {
+    return async function(dispatch: Function) {
+        await JitsiMeetJS.precallTest.init(conferenceOptions);
+
+        const results = await JitsiMeetJS.precallTest.execute();
+
+        dispatch(setPrecallTestResults(results));
+    };
+}
+
 /**
  * Opens an external page with all the dial in numbers.
  *
@@ -397,6 +416,19 @@ export function setJoinByPhoneDialogVisiblity(value: boolean) {
     };
 }
 
+/**
+ * Action used to set data from precall test.
+ *
+ * @param {Object} value - The precall test results.
+ * @returns {Object}
+ */
+export function setPrecallTestResults(value: Object) {
+    return {
+        type: SET_PRECALL_TEST_RESULTS,
+        value
+    };
+}
+
 /**
  * Action used to set the initial errors after creating the tracks.
  *

react/features/prejoin/reducer.js

@@ -6,6 +6,7 @@ import {
     SET_DIALOUT_NUMBER,
     SET_DIALOUT_STATUS,
     SET_JOIN_BY_PHONE_DIALOG_VISIBLITY,
+    SET_PRECALL_TEST_RESULTS,
     SET_PREJOIN_DEVICE_ERRORS,
     SET_PREJOIN_DISPLAY_NAME_REQUIRED,
     SET_PREJOIN_PAGE_VISIBILITY,
@@ -45,6 +46,12 @@ ReducerRegistry.register(
             };
         }
 
+        case SET_PRECALL_TEST_RESULTS:
+            return {
+                ...state,
+                precallTestResults: action.value
+            };
+
         case SET_PREJOIN_PAGE_VISIBILITY:
             return {
                 ...state,