diff --git a/css/modals/video-quality/_video-quality.scss b/css/modals/video-quality/_video-quality.scss index f251779c7..38e74c999 100644 --- a/css/modals/video-quality/_video-quality.scss +++ b/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; } diff --git a/lang/main.json b/lang/main.json index 4aee7e6be..f972bd6be 100644 --- a/lang/main.json +++ b/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", diff --git a/react/features/base/icons/svg/e2ee.svg b/react/features/base/icons/svg/e2ee.svg new file mode 100644 index 000000000..0ef4c6ae5 --- /dev/null +++ b/react/features/base/icons/svg/e2ee.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js index 13c363198..0193277d5 100644 --- a/react/features/base/icons/svg/index.js +++ b/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'; diff --git a/react/features/base/label/components/AbstractCircularLabel.js b/react/features/base/label/components/AbstractCircularLabel.js index 17e4e3a18..632d37b84 100644 --- a/react/features/base/label/components/AbstractCircularLabel.js +++ b/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 }; /** diff --git a/react/features/conference/components/AbstractLabels.js b/react/features/conference/components/AbstractLabels.js index a23df84a0..12085d7ad 100644 --- a/react/features/conference/components/AbstractLabels.js +++ b/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 extends Component { + /** + * Renders the {@code E2EELabel}. + * + * @protected + * @returns {React$Element} + */ + _renderE2EELabel() { + return ( + + ); + } + /** * Renders the {@code LocalRecordingLabel}. * diff --git a/react/features/conference/components/web/Labels.js b/react/features/conference/components/web/Labels.js index 7d09c0dd6..b2fb0b828 100644 --- a/react/features/conference/components/web/Labels.js +++ b/react/features/conference/components/web/Labels.js @@ -74,6 +74,9 @@ class Labels extends AbstractLabels { return (
+ { + this._renderE2EELabel() + } { this._renderRecordingLabel( JitsiRecordingConstants.mode.FILE) @@ -96,6 +99,8 @@ class Labels extends AbstractLabels { ); } + _renderE2EELabel: () => React$Element<*>; + _renderLocalRecordingLabel: () => React$Element<*>; _renderRecordingLabel: string => React$Element<*>; diff --git a/react/features/e2ee/components/AbstractE2EELabel.js b/react/features/e2ee/components/AbstractE2EELabel.js new file mode 100644 index 000000000..e3af399aa --- /dev/null +++ b/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) + }; +} diff --git a/react/features/e2ee/components/E2EELabel.js b/react/features/e2ee/components/E2EELabel.js new file mode 100644 index 000000000..82d216b3d --- /dev/null +++ b/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 { + + /** + * 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 = ; + + return ( + + + + ); + } +} + +export default translate(connect(_mapStateToProps)(E2EELabel)); diff --git a/react/features/e2ee/components/index.native.js b/react/features/e2ee/components/index.native.js new file mode 100644 index 000000000..f2a937042 --- /dev/null +++ b/react/features/e2ee/components/index.native.js @@ -0,0 +1,2 @@ +// TODO: implement later. +export const E2EELabel = undefined; diff --git a/react/features/e2ee/components/index.js b/react/features/e2ee/components/index.web.js similarity index 67% rename from react/features/e2ee/components/index.js rename to react/features/e2ee/components/index.web.js index c4fb0277d..97d06650a 100644 --- a/react/features/e2ee/components/index.js +++ b/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';