jiti-meet/react/features/e2ee/components/E2EESection.js

154 lines
3.7 KiB
JavaScript
Raw Normal View History

/* @flow */
import React, { Component } from 'react';
import type { Dispatch } from 'redux';
import { createE2EEEvent, sendAnalytics } from '../../analytics';
import { translate } from '../../base/i18n';
import { Switch } from '../../base/react';
import { connect } from '../../base/redux';
import { toggleE2EE } from '../actions';
import { doesEveryoneSupportE2EE } from '../functions';
type Props = {
/**
* Whether E2EE is currently enabled or not.
*/
_enabled: boolean,
/**
* Indicates whether all participants in the conference currently support E2EE.
*/
feat: Participants optimisations (#9515) * fix(participants): Change from array to Map * fix(unload): optimise * feat: Introduces new states for e2ee feature. Stores everyoneSupportsE2EE and everyoneEnabledE2EE to minimize looping through participants list. squash: Uses participants map and go over the elements only once. * feat: Optimizes isEveryoneModerator to do less frequent checks in all participants. * fix: Drops deep equal from participants pane and uses the map. * fix(SharedVideo): isVideoPlaying * fix(participants): Optimise isEveryoneModerator * fix(e2e): Optimise everyoneEnabledE2EE * fix: JS errors. * ref(participants): remove getParticipants * fix(participants): Prepare for PR. * fix: Changes participants pane to be component. The functional component was always rendered: `prev props: {} !== {} :next props`. * feat: Optimization to skip participants list on pane closed. * fix: The participants list shows and the local participant. * fix: Fix wrong action name for av-moderation. * fix: Minimizes the number of render calls of av moderation notification. * fix: Fix iterating over remote participants. * fix: Fixes lint error. * fix: Reflects participant updates for av-moderation. * fix(ParticipantPane): to work with IDs. * fix(av-moderation): on PARTCIPANT_UPDATE * fix(ParticipantPane): close delay. * fix: address code review comments * fix(API): mute-everyone * fix: bugs * fix(Thumbnail): on mobile. * fix(ParticipantPane): Close context menu on click. * fix: Handles few error when local participant is undefined. * feat: Hides AV moderation if not supported. * fix: Show mute all video. * fix: Fixes updating participant for av moderation. Co-authored-by: damencho <damencho@jitsi.org>
2021-07-09 12:36:19 +00:00
_everyoneSupportE2EE: boolean,
/**
* The redux {@code dispatch} function.
*/
dispatch: Dispatch<any>,
/**
* Invoked to obtain translated strings.
*/
t: Function
};
type State = {
/**
* True if the switch is toggled on.
*/
enabled: boolean
};
/**
* Implements a React {@code Component} for displaying a security dialog section with a field
* for setting the E2EE key.
*
* @extends Component
*/
class E2EESection extends Component<Props, State> {
/**
* Implements React's {@link Component#getDerivedStateFromProps()}.
*
* @inheritdoc
*/
static getDerivedStateFromProps(props: Props, state: Object) {
if (props._enabled !== state.enabled) {
return {
enabled: props._enabled
};
}
return null;
}
/**
* Instantiates a new component.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this.state = {
enabled: false
};
// Bind event handlers so they are only bound once for every instance.
this._onToggle = this._onToggle.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
feat: Participants optimisations (#9515) * fix(participants): Change from array to Map * fix(unload): optimise * feat: Introduces new states for e2ee feature. Stores everyoneSupportsE2EE and everyoneEnabledE2EE to minimize looping through participants list. squash: Uses participants map and go over the elements only once. * feat: Optimizes isEveryoneModerator to do less frequent checks in all participants. * fix: Drops deep equal from participants pane and uses the map. * fix(SharedVideo): isVideoPlaying * fix(participants): Optimise isEveryoneModerator * fix(e2e): Optimise everyoneEnabledE2EE * fix: JS errors. * ref(participants): remove getParticipants * fix(participants): Prepare for PR. * fix: Changes participants pane to be component. The functional component was always rendered: `prev props: {} !== {} :next props`. * feat: Optimization to skip participants list on pane closed. * fix: The participants list shows and the local participant. * fix: Fix wrong action name for av-moderation. * fix: Minimizes the number of render calls of av moderation notification. * fix: Fix iterating over remote participants. * fix: Fixes lint error. * fix: Reflects participant updates for av-moderation. * fix(ParticipantPane): to work with IDs. * fix(av-moderation): on PARTCIPANT_UPDATE * fix(ParticipantPane): close delay. * fix: address code review comments * fix(API): mute-everyone * fix: bugs * fix(Thumbnail): on mobile. * fix(ParticipantPane): Close context menu on click. * fix: Handles few error when local participant is undefined. * feat: Hides AV moderation if not supported. * fix: Show mute all video. * fix: Fixes updating participant for av moderation. Co-authored-by: damencho <damencho@jitsi.org>
2021-07-09 12:36:19 +00:00
const { _everyoneSupportE2EE, t } = this.props;
const { enabled } = this.state;
const description = t('dialog.e2eeDescription');
return (
<div id = 'e2ee-section'>
<p
aria-live = 'polite'
className = 'description'
id = 'e2ee-section-description'>
{ description }
{ !_everyoneSupportE2EE && <br /> }
{ !_everyoneSupportE2EE && t('dialog.e2eeWarning') }
</p>
<div className = 'control-row'>
2021-01-14 16:12:08 +00:00
<label htmlFor = 'e2ee-section-switch'>
{ t('dialog.e2eeLabel') }
</label>
<Switch
2021-01-14 16:12:08 +00:00
id = 'e2ee-section-switch'
onValueChange = { this._onToggle }
value = { enabled } />
</div>
</div>
);
}
_onToggle: () => void;
/**
* Callback to be invoked when the user toggles E2EE on or off.
*
* @private
* @returns {void}
*/
_onToggle() {
const newValue = !this.state.enabled;
this.setState({
enabled: newValue
});
sendAnalytics(createE2EEEvent(`enabled.${String(newValue)}`));
this.props.dispatch(toggleE2EE(newValue));
}
}
/**
* Maps (parts of) the Redux state to the associated props for this component.
*
* @param {Object} state - The Redux state.
* @private
* @returns {Props}
*/
function mapStateToProps(state) {
const { enabled } = state['features/e2ee'];
return {
_enabled: enabled,
_everyoneSupportE2EE: doesEveryoneSupportE2EE(state)
};
}
export default translate(connect(mapStateToProps)(E2EESection));