c9b54845d9
The goal is to reduce usage on atlassian/aui. New components have been created to display the settings panel. Language selection will reach into i18n for state whereas moderator options will keep state in redux.
109 lines
2.9 KiB
JavaScript
109 lines
2.9 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { translate } from '../../base/i18n';
|
|
import { getLocalParticipant, PARTICIPANT_ROLE } from '../../base/participants';
|
|
|
|
import DeviceSelectionButton from './DeviceSelectionButton';
|
|
import LanguageSelectDropdown from './LanguageSelectDropdown';
|
|
import ModeratorCheckboxes from './ModeratorCheckboxes';
|
|
|
|
/**
|
|
* Implements a React {@link Component} which various ways to change application
|
|
* settings.
|
|
*
|
|
* @extends Component
|
|
*/
|
|
class SettingsMenu extends Component {
|
|
/**
|
|
* {@code SettingsMenu} component's property types.
|
|
*
|
|
* @static
|
|
*/
|
|
static propTypes = {
|
|
/**
|
|
* Whether or not the local user is a moderator.
|
|
*/
|
|
_isModerator: PropTypes.bool,
|
|
|
|
/**
|
|
* Whether or not the button to open device selection should display.
|
|
*/
|
|
showDeviceSettings: PropTypes.bool,
|
|
|
|
/**
|
|
* Whether or not the dropdown to change the current translated language
|
|
* should display.
|
|
*/
|
|
showLanguageSettings: PropTypes.bool,
|
|
|
|
/**
|
|
* Whether or not moderator-only actions that affect the conference
|
|
* should display.
|
|
*/
|
|
showModeratorSettings: PropTypes.bool,
|
|
|
|
/**
|
|
* Whether or not menu section should have section titles displayed.
|
|
*/
|
|
showTitles: PropTypes.bool,
|
|
|
|
/**
|
|
* Invoked to obtain translated strings.
|
|
*/
|
|
t: PropTypes.func
|
|
};
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {ReactElement}
|
|
*/
|
|
render() {
|
|
const {
|
|
_isModerator,
|
|
showDeviceSettings,
|
|
showLanguageSettings,
|
|
showModeratorSettings,
|
|
showTitles,
|
|
t
|
|
} = this.props;
|
|
|
|
return (
|
|
<div className = 'settings-menu'>
|
|
<div className = 'title'>
|
|
{ t('settings.title') }
|
|
</div>
|
|
{ showLanguageSettings
|
|
? <LanguageSelectDropdown />
|
|
: null }
|
|
{ showDeviceSettings
|
|
? <DeviceSelectionButton showTitle = { showTitles } />
|
|
: null }
|
|
{ _isModerator && showModeratorSettings
|
|
? <ModeratorCheckboxes showTitle = { showTitles } />
|
|
: null }
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps parts of Redux store to component prop types.
|
|
*
|
|
* @param {Object} state - Snapshot of Redux store.
|
|
* @returns {{
|
|
* _isModerator: boolean
|
|
* }}
|
|
*/
|
|
function _mapStateToProps(state) {
|
|
return {
|
|
_isModerator:
|
|
getLocalParticipant(state).role === PARTICIPANT_ROLE.MODERATOR
|
|
};
|
|
}
|
|
|
|
export default translate(connect(_mapStateToProps)(SettingsMenu));
|