220 lines
6.7 KiB
JavaScript
Executable File
220 lines
6.7 KiB
JavaScript
Executable File
/* @flow */
|
|
|
|
import React from 'react';
|
|
import Flux from '../../lib/flux';
|
|
import lodash from 'lodash';
|
|
import OverlayStore from '../../stores/OverlayStore';
|
|
import KeybindsStore from '../../stores/KeybindsStore';
|
|
import OverlayActionCreators from '../../actions/OverlayActionCreators';
|
|
import KeybindsActionCreators from '../../actions/KeybindsActionCreators';
|
|
import HelpdeskUtils from '../../utils/HelpdeskUtils';
|
|
import FormNotice from '../../uikit/form/FormNotice';
|
|
import FormSection from '../../uikit/form/FormSection';
|
|
import FormTitle, {Tags} from '../../uikit/form/FormTitle';
|
|
import Flex from '../../uikit/Flex';
|
|
import FormItem from '../../uikit/form/FormItem';
|
|
import SwitchItem from '../../uikit/SwitchItem';
|
|
import KeyRecorder from '../common/KeyRecorder';
|
|
import RadioGroup from '../../uikit/RadioGroup';
|
|
import i18n from '../../i18n';
|
|
import {
|
|
OverlayDisplayNames,
|
|
OverlayDisplayUsers,
|
|
OverlayAvatarSizes,
|
|
KeybindCustomActions as KeybindActions,
|
|
} from '../../Constants';
|
|
|
|
function getCurrentInputLockKeybind() {
|
|
return lodash.find(KeybindsStore.getKeybinds(), keybind => {
|
|
return keybind.managed === true && keybind.action === KeybindActions.TOGGLE_OVERLAY_INPUT_LOCK;
|
|
});
|
|
}
|
|
|
|
class UserSettingsOverlay extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
lodash.bindAll(this, [
|
|
'handleChangeEnabled',
|
|
'handleChangeDisplayNameMode',
|
|
'handleChangeAvatarSizeMode',
|
|
'handleChangeDisplayUserMode',
|
|
'handleInputLockShortcutChange',
|
|
]);
|
|
}
|
|
|
|
handleChangeEnabled(e) {
|
|
OverlayActionCreators.setEnabled(e.currentTarget.checked);
|
|
}
|
|
|
|
handleChangeDisplayNameMode({value}) {
|
|
OverlayActionCreators.setDisplayNameMode(value);
|
|
}
|
|
|
|
handleChangeAvatarSizeMode({value}) {
|
|
OverlayActionCreators.setAvatarSizeMode(value);
|
|
}
|
|
|
|
handleChangeDisplayUserMode({value}) {
|
|
OverlayActionCreators.setDisplayUserMode(value);
|
|
}
|
|
|
|
handleInputLockShortcutChange(shortcut) {
|
|
KeybindsActionCreators.setKeybind({...this.props.inputLockKeybind, shortcut});
|
|
}
|
|
|
|
renderExplanation() {
|
|
return (
|
|
<FormNotice
|
|
type={FormNotice.Types.WARNING}
|
|
className="margin-bottom-20 padded"
|
|
body={i18n.Messages.OVERLAY_EXPLANATION.format({supportURL: HelpdeskUtils.getArticleURL(217659737)})}
|
|
/>
|
|
);
|
|
}
|
|
|
|
renderOverlayToggle() {
|
|
const {enabled, available, progress, inputLockKeybind} = this.props;
|
|
|
|
let overlayProgressNote;
|
|
if (enabled && !available && progress < 1) {
|
|
const percent = (progress * 100) | 0;
|
|
const note = i18n.Messages.OVERLAY_DOWNLOAD_PROGRESS.format({percent});
|
|
overlayProgressNote = <span className="overlay-updating-note">{note}</span>;
|
|
}
|
|
return (
|
|
<Flex className="margin-bottom-20">
|
|
<Flex.Child basis="50%">
|
|
<FormItem>
|
|
<FormTitle tag={Tags.H5}>
|
|
{i18n.Messages.SETTINGS_GAMES_ENABLE_OVERLAY_LABEL}
|
|
{overlayProgressNote}
|
|
</FormTitle>
|
|
<SwitchItem
|
|
className="margin-bottom-20"
|
|
style={{marginTop: 16}}
|
|
value={enabled}
|
|
hideBorder
|
|
onChange={this.handleChangeEnabled}>
|
|
{i18n.Messages.ENABLE_INGAME_OVERLAY}
|
|
</SwitchItem>
|
|
</FormItem>
|
|
</Flex.Child>
|
|
<Flex.Child basis="50%">
|
|
<FormItem title={i18n.Messages.KEYBIND_TOGGLE_OVERLAY_INPUT_LOCK}>
|
|
<KeyRecorder
|
|
disabled={!enabled}
|
|
defaultValue={inputLockKeybind != null ? inputLockKeybind.shortcut : ''}
|
|
onChange={this.handleInputLockShortcutChange}
|
|
/>
|
|
</FormItem>
|
|
</Flex.Child>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
renderAvatarSize() {
|
|
return (
|
|
<Flex className="margin-bottom-20">
|
|
<Flex.Child>
|
|
<FormItem title={i18n.Messages.FORM_LABEL_AVATAR_SIZE}>
|
|
<RadioGroup
|
|
options={[
|
|
{
|
|
name: i18n.Messages.AVATAR_SIZE_OPTION_LARGE,
|
|
value: OverlayAvatarSizes.LARGE,
|
|
},
|
|
{
|
|
name: i18n.Messages.AVATAR_SIZE_OPTION_SMALL,
|
|
value: OverlayAvatarSizes.SMALL,
|
|
},
|
|
]}
|
|
onChange={this.handleChangeAvatarSizeMode}
|
|
value={this.props.avatarSizeMode}
|
|
/>
|
|
</FormItem>
|
|
</Flex.Child>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
renderDisplayNames() {
|
|
return (
|
|
<Flex className="margin-bottom-20">
|
|
<Flex.Child>
|
|
<FormItem title={i18n.Messages.FORM_LABEL_DISPLAY_NAMES}>
|
|
<RadioGroup
|
|
options={[
|
|
{
|
|
name: i18n.Messages.DISPLAY_OPTION_ALWAYS,
|
|
value: OverlayDisplayNames.ALWAYS,
|
|
},
|
|
{
|
|
name: i18n.Messages.DISPLAY_OPTION_ONLY_WHILE_SPEAKING,
|
|
value: OverlayDisplayNames.ONLY_WHILE_SPEAKING,
|
|
},
|
|
{
|
|
name: i18n.Messages.DISPLAY_OPTION_NEVER,
|
|
value: OverlayDisplayNames.NEVER,
|
|
},
|
|
]}
|
|
onChange={this.handleChangeDisplayNameMode}
|
|
value={this.props.displayNameMode}
|
|
/>
|
|
</FormItem>
|
|
</Flex.Child>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
renderDisplayUsers() {
|
|
return (
|
|
<Flex>
|
|
<Flex.Child>
|
|
<FormItem title={i18n.Messages.FORM_LABEL_DISPLAY_USERS}>
|
|
<RadioGroup
|
|
options={[
|
|
{
|
|
name: i18n.Messages.DISPLAY_OPTION_ALWAYS,
|
|
value: OverlayDisplayUsers.ALWAYS,
|
|
},
|
|
{
|
|
name: i18n.Messages.DISPLAY_OPTION_ONLY_WHILE_SPEAKING,
|
|
value: OverlayDisplayUsers.ONLY_WHILE_SPEAKING,
|
|
},
|
|
]}
|
|
onChange={this.handleChangeDisplayUserMode}
|
|
value={this.props.displayUserMode}
|
|
/>
|
|
</FormItem>
|
|
</Flex.Child>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<FormSection tag={Tags.H2} title={i18n.Messages.OVERLAY}>
|
|
{this.renderExplanation()}
|
|
{this.renderOverlayToggle()}
|
|
{this.renderAvatarSize()}
|
|
{this.renderDisplayNames()}
|
|
{this.renderDisplayUsers()}
|
|
</FormSection>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Flux.connectStores([OverlayStore, KeybindsStore], () => ({
|
|
enabled: OverlayStore.enabled,
|
|
available: OverlayStore.isAvailable,
|
|
progress: OverlayStore.installProgress,
|
|
avatarSizeMode: OverlayStore.getAvatarSizeMode(),
|
|
displayNameMode: OverlayStore.getDisplayNameMode(),
|
|
displayUserMode: OverlayStore.getDisplayUserMode(),
|
|
inputLockKeybind: getCurrentInputLockKeybind(),
|
|
}))(UserSettingsOverlay);
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/user_settings/UserSettingsOverlay.js
|