e2ee: add label if all participants have E2EE enabled

css/modals/video-quality/_video-quality.scss

@@ -164,6 +164,13 @@
         background: #B8C7E0;
     }
 
+    .circular-label.e2ee {
+        align-items: center;
+        background: #76CF9C;
+        display: flex;
+        justify-content: center;
+    }
+
     .circular-label.file {
         background: #FF5630;
     }

lang/main.json

@@ -294,6 +294,9 @@
     "documentSharing": {
         "title": "Shared Document"
     },
+    "e2ee": {
+        "labelToolTip": "All participants in this meeting have enabled End-to-End encryption"
+    },
     "feedback": {
         "average": "Average",
         "bad": "Bad",

react/features/base/icons/svg/e2ee.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 7.5H5.25H12.75H14.25V15H3.75V7.5ZM14.25 6H12.75V5.25C12.75 3.17893 11.0711 1.5 9 1.5C6.92893 1.5 5.25 3.17893 5.25 5.25V6H3.75C2.92157 6 2.25 6.67157 2.25 7.5V15C2.25 15.8284 2.92157 16.5 3.75 16.5H14.25C15.0784 16.5 15.75 15.8284 15.75 15V7.5C15.75 6.67157 15.0784 6 14.25 6ZM9.72642 11.8127C10.1877 11.5568 10.5 11.0649 10.5 10.5C10.5 9.67157 9.82843 9 9 9C8.17157 9 7.5 9.67157 7.5 10.5C7.5 11.0649 7.81226 11.5568 8.27358 11.8127C8.25819 11.8726 8.25 11.9353 8.25 12V12.75C8.25 13.1642 8.58579 13.5 9 13.5C9.41421 13.5 9.75 13.1642 9.75 12.75V12C9.75 11.9353 9.74181 11.8726 9.72642 11.8127ZM9 3C10.2426 3 11.25 4.00736 11.25 5.25V6H6.75V5.25C6.75 4.00736 7.75736 3 9 3Z" fill="white"/>
+</svg>

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

@@ -27,6 +27,7 @@ export { default as IconDeviceSpeaker } from './volume.svg';
 export { default as IconDominantSpeaker } from './dominant-speaker.svg';
 export { default as IconDownload } from './download.svg';
 export { default as IconDragHandle } from './drag-handle.svg';
+export { default as IconE2EE } from './e2ee.svg';
 export { default as IconEventNote } from './event_note.svg';
 export { default as IconExclamation } from './exclamation.svg';
 export { default as IconExclamationSolid } from './exclamation-solid.svg';

react/features/base/label/components/AbstractCircularLabel.js

@@ -1,12 +1,13 @@
 // @flow
+
 import { Component } from 'react';
 
 export type Props = {
 
     /**
-     * String that will be rendered as the label itself.
+     * String or component that will be rendered as the label itself.
      */
-    label: string
+    label: string | React$Node
 };
 
 /**

react/features/conference/components/AbstractLabels.js

@@ -2,6 +2,7 @@
 
 import React, { Component } from 'react';
 
+import { E2EELabel } from '../../e2ee';
 import { isFilmstripVisible } from '../../filmstrip';
 import { LocalRecordingLabel } from '../../local-recording';
 import { RecordingLabel } from '../../recording';
@@ -33,6 +34,18 @@ export type Props = {
  * @extends Component
  */
 export default class AbstractLabels<P: Props, S> extends Component<P, S> {
+    /**
+     * Renders the {@code E2EELabel}.
+     *
+     * @protected
+     * @returns {React$Element}
+     */
+    _renderE2EELabel() {
+        return (
+            <E2EELabel />
+        );
+    }
+
     /**
      * Renders the {@code LocalRecordingLabel}.
      *

react/features/conference/components/web/Labels.js

@@ -74,6 +74,9 @@ class Labels extends AbstractLabels<Props, State> {
 
         return (
             <div className = { className } >
+                {
+                    this._renderE2EELabel()
+                }
                 {
                     this._renderRecordingLabel(
                         JitsiRecordingConstants.mode.FILE)
@@ -96,6 +99,8 @@ class Labels extends AbstractLabels<Props, State> {
         );
     }
 
+    _renderE2EELabel: () => React$Element<*>;
+
     _renderLocalRecordingLabel: () => React$Element<*>;
 
     _renderRecordingLabel: string => React$Element<*>;

react/features/e2ee/components/AbstractE2EELabel.js

@@ -0,0 +1,30 @@
+// @flow
+
+
+export type Props = {
+
+    /**
+     * True if the label needs to be rendered, false otherwise.
+     */
+    _showLabel: boolean,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * Maps (parts of) the redux state to the associated props of this {@code Component}.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {Props}
+ */
+export function _mapStateToProps(state: Object) {
+    const participants = state['features/base/participants'];
+
+    return {
+        _showLabel: participants.every(p => p.e2eeEnabled)
+    };
+}

react/features/e2ee/components/E2EELabel.js

@@ -0,0 +1,47 @@
+// @flow
+
+import Tooltip from '@atlaskit/tooltip';
+import React, { Component } from 'react';
+
+import { translate } from '../../base/i18n';
+import { Icon, IconE2EE } from '../../base/icons';
+import { CircularLabel } from '../../base/label';
+import { connect } from '../../base/redux';
+
+import { _mapStateToProps, type Props } from './AbstractE2EELabel';
+
+
+/**
+ * React {@code Component} for displaying a label when everyone has E2EE enabled in a conferene.
+ *
+ * @extends Component
+ */
+class E2EELabel extends Component<Props> {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        if (!this.props._showLabel) {
+            return null;
+        }
+
+        // eslint-disable-next-line react/jsx-max-props-per-line
+        const icon = <Icon size = { 22 } src = { IconE2EE } />;
+
+        return (
+            <Tooltip
+                content = { this.props.t('e2ee.labelToolTip') }
+                position = { 'left' }>
+                <CircularLabel
+                    className = 'e2ee'
+                    label = { icon } />
+            </Tooltip>
+        );
+    }
+}
+
+export default translate(connect(_mapStateToProps)(E2EELabel));

react/features/e2ee/components/index.native.js

@@ -0,0 +1,2 @@
+// TODO: implement later.
+export const E2EELabel = undefined;

react/features/e2ee/components/index.js → react/features/e2ee/components/index.web.js

@@ -1,2 +1,3 @@
 export { default as E2EEButton } from './E2EEButton';
 export { default as E2EEDialog } from './E2EEDialog';
+export { default as E2EELabel } from './E2EELabel';