e2ee: show warning if not all participants support E2EE

Refs: https://github.com/jitsi/lib-jitsi-meet/pull/1108

lang/main.json

@@ -178,6 +178,7 @@
         "e2eeDescription": "<p>End-to-End Encryption is currently <strong>EXPERIMENTAL</strong>. Please see <a href='https://jitsi.org/blog/e2ee/' target='_blank'>this post</a> for details.</p><br/><p>Please keep in mind that turning on end-to-end encryption will effectively disable server-side provided services such as: recording, live streaming and phone participation. Also keep in mind that the meeting will only work for people joining from browsers with support for insertable streams.</p>",
         "e2eeLabel": "Key",
         "e2eeTitle": "End-to-End Encryption",
+        "e2eeWarning": "<br /><p><strong>WARNING:</strong> Not all participants in this meeting seem to have support for End-to-End encryption. If you enable it they won't be able to see nor hear you.</p>",
         "enterDisplayName": "Please enter your name here",
         "error": "Error",
         "externalInstallationMsg": "You need to install our desktop sharing extension.",

react/features/base/participants/middleware.js

@@ -196,6 +196,13 @@ StateListenerRegistry.register(
                 JitsiConferenceEvents.PARTICIPANT_PROPERTY_CHANGED,
                 (participant, propertyName, oldValue, newValue) => {
                     switch (propertyName) {
+                    case 'features_e2ee':
+                        store.dispatch(participantUpdated({
+                            conference,
+                            id: participant.getId(),
+                            e2eeSupported: newValue
+                        }));
+                        break;
                     case 'features_jigasi':
                         store.dispatch(participantUpdated({
                             conference,

react/features/e2ee/components/E2EEDialog.js

@@ -7,6 +7,7 @@ import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 import { createE2EEEvent, sendAnalytics } from '../../analytics';
 import { Dialog } from '../../base/dialog';
 import { translate, translateToHTML } from '../../base/i18n';
+import { getParticipants } from '../../base/participants';
 import { connect } from '../../base/redux';
 
 import { setE2EEKey } from '../actions';
@@ -14,6 +15,11 @@ import { setE2EEKey } from '../actions';
 
 type Props = {
 
+    /**
+     * Indicates whether all participants in the conference currently support E2EE.
+     */
+    _everyoneSupportsE2EE: boolean,
+
     /**
      * The current E2EE key.
      */
@@ -70,7 +76,7 @@ class E2EEDialog extends Component<Props, State> {
      * @returns {ReactElement}
      */
     render() {
-        const { t } = this.props;
+        const { _everyoneSupportsE2EE, t } = this.props;
 
         return (
             <Dialog
@@ -81,6 +87,12 @@ class E2EEDialog extends Component<Props, State> {
                 <div className = 'e2ee-destription'>
                     { translateToHTML(t, 'dialog.e2eeDescription') }
                 </div>
+                {
+                    !_everyoneSupportsE2EE
+                        && <div className = 'e2ee-warn'>
+                            { translateToHTML(t, 'dialog.e2eeWarning') }
+                        </div>
+                }
                 <TextField
                     autoFocus = { true }
                     compact = { true }
@@ -133,8 +145,10 @@ class E2EEDialog extends Component<Props, State> {
  */
 function mapStateToProps(state) {
     const { e2eeKey } = state['features/e2ee'];
+    const participants = getParticipants(state).filter(p => !p.local);
 
     return {
+        _everyoneSupportsE2EE: participants.every(p => Boolean(p.e2eeSupported)),
         _key: e2eeKey || ''
     };
 }