273 lines
8.2 KiB
JavaScript
273 lines
8.2 KiB
JavaScript
|
/* @flow */
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import Flux from '../../lib/flux';
|
||
|
|
import i18n from '../../i18n';
|
||
|
|
|
||
|
|
import SettingsView from '../common/SettingsView';
|
||
|
|
import ConfirmModal from '../ConfirmModal';
|
||
|
|
import UserSettingsAccount from './UserSettingsAccount';
|
||
|
|
import UserSettingsExperiments from './UserSettingsExperiments';
|
||
|
|
import UserSettingsTextImages from './UserSettingsTextImages';
|
||
|
|
import UserSettingsConnections from './UserSettingsConnections';
|
||
|
|
import UserSettingsAppearance from './UserSettingsAppearance';
|
||
|
|
import UserSettingsKeybinds from './UserSettingsKeybinds';
|
||
|
|
import UserSettingsStreamerMode from './UserSettingsStreamerMode';
|
||
|
|
import UserSettingsAuthedApps from './UserSettingsAuthedApps';
|
||
|
|
import UserSettingsLocale from './UserSettingsLocale';
|
||
|
|
import UserSettingsGames from './UserSettingsGames';
|
||
|
|
import UserSettingsNotifications from './UserSettingsNotifications';
|
||
|
|
import UserSettingsVoice from './UserSettingsVoice';
|
||
|
|
import UserSettingsOverlay from './UserSettingsOverlay';
|
||
|
|
import UserSettingsPrivacySafety from './UserSettingsPrivacySafety';
|
||
|
|
import UserSettingsPremium from './UserSettingsPremium';
|
||
|
|
import SocialLinks from './SocialLinks';
|
||
|
|
|
||
|
|
import ModalActionCreators from '../../actions/ModalActionCreators';
|
||
|
|
import AuthenticationActionCreators from '../../actions/AuthenticationActionCreators';
|
||
|
|
import UserSettingsModalActionCreators from '../../actions/UserSettingsModalActionCreators';
|
||
|
|
import ChangeLogActionCreators from '../../actions/ChangeLogActionCreators';
|
||
|
|
import {popLayer} from '../../actions/LayerActionCreators';
|
||
|
|
|
||
|
|
import UserSettingsStore from '../../stores/UserSettingsStore';
|
||
|
|
import UserSettingsModalStore from '../../stores/UserSettingsModalStore';
|
||
|
|
import DeveloperExperimentStore from '../../stores/DeveloperExperimentStore';
|
||
|
|
import VideoCallExperimentStore from '../../stores/experiments/VideoCallExperimentStore';
|
||
|
|
import ExperimentStore from '../../stores/ExperimentStore';
|
||
|
|
import MediaEngineStore from '../../stores/MediaEngineStore';
|
||
|
|
import OverlayStore from '../../stores/OverlayStore';
|
||
|
|
|
||
|
|
import AppAnalyticsUtils from '../../utils/AppAnalyticsUtils';
|
||
|
|
import NativeUtils from '../../utils/NativeUtils';
|
||
|
|
|
||
|
|
import {SectionTypes} from '../common/StandardSidebarView';
|
||
|
|
import {UserSettingsSections, ExperimentTypes, AnalyticEvents} from '../../Constants';
|
||
|
|
|
||
|
|
type Section = {
|
||
|
|
section: string,
|
||
|
|
label?: string,
|
||
|
|
className?: string,
|
||
|
|
element?: ReactClass<any>,
|
||
|
|
predicate?: Function,
|
||
|
|
onClick?: Function,
|
||
|
|
};
|
||
|
|
|
||
|
|
function generateSections(videoSettings: boolean): Array<Section> {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
section: SectionTypes.HEADER,
|
||
|
|
label: i18n.Messages.USER_SETTINGS,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.ACCOUNT,
|
||
|
|
label: i18n.Messages.USER_SETTINGS_MY_ACCOUNT,
|
||
|
|
element: UserSettingsAccount,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.PRIVACY_AND_SAFETY,
|
||
|
|
label: i18n.Messages.PRIVACY_AND_SAFETY,
|
||
|
|
element: UserSettingsPrivacySafety,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.AUTHORIZED_APPS,
|
||
|
|
label: i18n.Messages.AUTHORIZED_APPS,
|
||
|
|
element: UserSettingsAuthedApps,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.CONNECTIONS,
|
||
|
|
label: i18n.Messages.CONNECTIONS,
|
||
|
|
element: UserSettingsConnections,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: SectionTypes.DIVIDER,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.PREMIUM,
|
||
|
|
label: i18n.Messages.PREMIUM_TITLE,
|
||
|
|
element: UserSettingsPremium,
|
||
|
|
className: 'brand',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: SectionTypes.DIVIDER,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: SectionTypes.HEADER,
|
||
|
|
label: i18n.Messages.APP_SETTINGS,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.VOICE,
|
||
|
|
label: videoSettings ? i18n.Messages.VOICE_AND_VIDEO : i18n.Messages.VOICE,
|
||
|
|
element: UserSettingsVoice,
|
||
|
|
predicate() {
|
||
|
|
return MediaEngineStore.isSupported();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.OVERLAY,
|
||
|
|
label: i18n.Messages.OVERLAY,
|
||
|
|
element: UserSettingsOverlay,
|
||
|
|
predicate() {
|
||
|
|
return OverlayStore.isSupported();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.NOTIFICATIONS,
|
||
|
|
label: i18n.Messages.NOTIFICATIONS,
|
||
|
|
element: UserSettingsNotifications,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.KEYBINDS,
|
||
|
|
label: i18n.Messages.KEYBINDS,
|
||
|
|
element: UserSettingsKeybinds,
|
||
|
|
predicate() {
|
||
|
|
return NativeUtils.embedded || process.env.NODE_ENV === 'development';
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.GAMES,
|
||
|
|
label: i18n.Messages.GAMES,
|
||
|
|
element: UserSettingsGames,
|
||
|
|
predicate() {
|
||
|
|
return NativeUtils.embedded;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.TEXT,
|
||
|
|
label: i18n.Messages.TEXT_AND_IMAGES,
|
||
|
|
element: UserSettingsTextImages,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.APPEARANCE,
|
||
|
|
label: i18n.Messages.APPEARANCE,
|
||
|
|
element: UserSettingsAppearance,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.STREAMER_MODE,
|
||
|
|
label: i18n.Messages.STREAMER_MODE,
|
||
|
|
element: UserSettingsStreamerMode,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.LOCALE,
|
||
|
|
label: i18n.Messages.LANGUAGE,
|
||
|
|
element: UserSettingsLocale,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: SectionTypes.DIVIDER,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: 'changelog',
|
||
|
|
onClick: () => ChangeLogActionCreators.showChangeLog(),
|
||
|
|
label: i18n.Messages.CHANGE_LOG,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: UserSettingsSections.EXPERIMENTS,
|
||
|
|
// NOTE: This is for internal dev only, no need to i18n
|
||
|
|
label: 'Experiments',
|
||
|
|
element: UserSettingsExperiments,
|
||
|
|
predicate() {
|
||
|
|
return DeveloperExperimentStore.isDeveloper();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: SectionTypes.DIVIDER,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: 'logout',
|
||
|
|
onClick() {
|
||
|
|
ModalActionCreators.push(props => {
|
||
|
|
return (
|
||
|
|
<ConfirmModal
|
||
|
|
header={i18n.Messages.LOGOUT}
|
||
|
|
confirmText={i18n.Messages.LOGOUT}
|
||
|
|
cancelText={i18n.Messages.CANCEL}
|
||
|
|
onConfirm={() => AuthenticationActionCreators.logout()}
|
||
|
|
{...props}>
|
||
|
|
{i18n.Messages.USER_SETTINGS_CONFIRM_LOGOUT}
|
||
|
|
</ConfirmModal>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
label: i18n.Messages.LOGOUT,
|
||
|
|
className: 'danger',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: SectionTypes.DIVIDER,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
section: SectionTypes.CUSTOM,
|
||
|
|
element: SocialLinks,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function getUserSettingsSections(videoSettings: boolean) {
|
||
|
|
return generateSections(videoSettings)
|
||
|
|
.filter(
|
||
|
|
({section}) =>
|
||
|
|
section !== SectionTypes.HEADER && section !== SectionTypes.CUSTOM && section !== SectionTypes.DIVIDER
|
||
|
|
)
|
||
|
|
.filter(section => section.predicate == null || section.predicate());
|
||
|
|
}
|
||
|
|
|
||
|
|
/* eslint-disable camelcase */
|
||
|
|
function trackPaneViewed(destination_pane, origin_pane = null) {
|
||
|
|
AppAnalyticsUtils.trackWithMetadata(AnalyticEvents.SETTINGS_PANE_VIEWED, {
|
||
|
|
settings_type: 'user',
|
||
|
|
origin_pane,
|
||
|
|
destination_pane,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/* eslint-enable camelcase */
|
||
|
|
|
||
|
|
export default Flux.connectStores([UserSettingsModalStore, UserSettingsStore, VideoCallExperimentStore], () => {
|
||
|
|
let videoSettings = false;
|
||
|
|
const override = ExperimentStore.getOverrideExperimentDescriptor(VideoCallExperimentStore.getExperimentId());
|
||
|
|
if ((override != null && override.type === ExperimentTypes.DEVELOPER) || VideoCallExperimentStore.hasVideoCall()) {
|
||
|
|
videoSettings = true;
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
theme: UserSettingsStore.theme,
|
||
|
|
section: UserSettingsModalStore.getSection(),
|
||
|
|
videoSettings,
|
||
|
|
};
|
||
|
|
})(
|
||
|
|
class extends React.PureComponent {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
(this: any).generateSections = this.generateSections.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
trackPaneViewed(this.props.section);
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidUpdate({section: prevSection}) {
|
||
|
|
const {section} = this.props;
|
||
|
|
if (section !== prevSection) {
|
||
|
|
trackPaneViewed(section, prevSection);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
generateSections() {
|
||
|
|
return generateSections(this.props.videoSettings);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {theme, section} = this.props;
|
||
|
|
return (
|
||
|
|
<SettingsView
|
||
|
|
theme={theme}
|
||
|
|
section={section}
|
||
|
|
onSetSection={UserSettingsModalActionCreators.setSection}
|
||
|
|
onClose={popLayer}
|
||
|
|
sections={this.generateSections()}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// WEBPACK FOOTER //
|
||
|
|
// ./discord_app/components/user_settings/UserSettings.js
|