128 lines
4.2 KiB
JavaScript
Executable file
128 lines
4.2 KiB
JavaScript
Executable file
import React from 'react';
|
|
import Flux from '../../lib/flux';
|
|
import i18n from '../../i18n';
|
|
import NativeUtils from '../../utils/NativeUtils';
|
|
import {
|
|
FormSection,
|
|
FormNotice,
|
|
FormNoticeTypes,
|
|
FormNoticeImagePositions,
|
|
FormTitle,
|
|
FormTitleTags,
|
|
} from '../../uikit/form';
|
|
import SwitchItem from '../../uikit/SwitchItem';
|
|
import UserSettingsStore from '../../stores/UserSettingsStore';
|
|
import StreamerModeStore from '../../stores/StreamerModeStore';
|
|
import StreamerModeActionCreators from '../../actions/StreamerModeActionCreators';
|
|
import UserSettingsModalActionCreators from '../../actions/UserSettingsModalActionCreators';
|
|
import {UserSettingsSections} from '../../Constants';
|
|
import '../../styles/user_settings_streamer_mode.styl';
|
|
|
|
class UserSettingsModalStreamerMode extends React.PureComponent {
|
|
props: {
|
|
theme: string,
|
|
enabled: boolean,
|
|
autoToggle: boolean,
|
|
hidePersonalInformation: boolean,
|
|
hideInstantInvites: boolean,
|
|
disableSounds: boolean,
|
|
disableNotifications: boolean,
|
|
};
|
|
|
|
renderNotice() {
|
|
return (
|
|
<FormNotice
|
|
className="margin-bottom-40"
|
|
iconClassName="notice-icon"
|
|
type={FormNoticeTypes.PRIMARY}
|
|
imageData={{
|
|
src: require('../../images/img_streamer_mode_small.svg'),
|
|
width: 184,
|
|
height: 110,
|
|
position: FormNoticeImagePositions.RIGHT,
|
|
}}
|
|
title={i18n.Messages.USER_SETTINGS_STREAMER_NOTICE_TITLE}
|
|
body={i18n.Messages.USER_SETTINGS_STREAMER_NOTICE_BODY.format({
|
|
streamkitURL: 'https://discordapp.com/streamkit',
|
|
})}
|
|
/>
|
|
);
|
|
}
|
|
|
|
renderAutoToggle() {
|
|
if (NativeUtils.embedded) {
|
|
return (
|
|
<SwitchItem
|
|
value={this.props.autoToggle}
|
|
onChange={this.handleChange.bind(this, 'autoToggle')}
|
|
note={i18n.Messages.AUTO_TOGGLE_STREAMER_MODE_DESCRIPTION}>
|
|
{i18n.Messages.AUTO_TOGGLE_STREAMER_MODE_LABEL}
|
|
</SwitchItem>
|
|
);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<FormSection className="user-settings-streamer-mode" tag={FormTitleTags.H2} title={i18n.Messages.STREAMER_MODE}>
|
|
{this.renderNotice()}
|
|
<SwitchItem
|
|
value={this.props.enabled}
|
|
onChange={this.handleChange.bind(this, 'enabled')}
|
|
note={i18n.Messages.ENABLE_STREAMER_MODE_DESCRIPTION.format({onClick: this.handleGotoKeybinds})}>
|
|
{i18n.Messages.ENABLE_STREAMER_MODE_LABEL}
|
|
</SwitchItem>
|
|
{this.renderAutoToggle()}
|
|
<FormTitle className="options-header margin-top-40 margin-bottom-8">
|
|
{i18n.Messages.OPTIONS}
|
|
</FormTitle>
|
|
<SwitchItem
|
|
value={this.props.hidePersonalInformation}
|
|
onChange={this.handleChange.bind(this, 'hidePersonalInformation')}
|
|
note={i18n.Messages.HIDE_PERSONAL_INFORMATION_DESCRIPTION}>
|
|
{i18n.Messages.HIDE_PERSONAL_INFORMATION_LABEL}
|
|
</SwitchItem>
|
|
<SwitchItem
|
|
value={this.props.hideInstantInvites}
|
|
onChange={this.handleChange.bind(this, 'hideInstantInvites')}
|
|
note={i18n.Messages.HIDE_INSTANT_INVITES_DESCRIPTION}>
|
|
{i18n.Messages.HIDE_INSTANT_INVITES_LABEL}
|
|
</SwitchItem>
|
|
<SwitchItem
|
|
value={this.props.disableSounds}
|
|
onChange={this.handleChange.bind(this, 'disableSounds')}
|
|
note={i18n.Messages.DISABLE_SOUNDS_DESCRIPTION}>
|
|
{i18n.Messages.DISABLE_SOUNDS_LABEL}
|
|
</SwitchItem>
|
|
<SwitchItem
|
|
value={this.props.disableNotifications}
|
|
onChange={this.handleChange.bind(this, 'disableNotifications')}
|
|
note={i18n.Messages.DISABLE_NOTIFICATIONS_DESCRIPTION}>
|
|
{i18n.Messages.DISABLE_NOTIFICATIONS_LABEL}
|
|
</SwitchItem>
|
|
</FormSection>
|
|
);
|
|
}
|
|
|
|
// Handlers
|
|
|
|
handleChange(key, e) {
|
|
StreamerModeActionCreators.update({[key]: e.currentTarget.checked});
|
|
}
|
|
|
|
handleGotoKeybinds() {
|
|
UserSettingsModalActionCreators.setSection(UserSettingsSections.KEYBINDS);
|
|
}
|
|
}
|
|
|
|
export default Flux.connectStores([UserSettingsStore, StreamerModeStore], () => {
|
|
return {
|
|
...StreamerModeStore.getSettings(),
|
|
theme: UserSettingsStore.theme,
|
|
};
|
|
})(UserSettingsModalStreamerMode);
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/user_settings/UserSettingsStreamerMode.js
|