135 lines
4.7 KiB
JavaScript
Executable file
135 lines
4.7 KiB
JavaScript
Executable file
import React from 'react';
|
|
import {findDOMNode} from 'react-dom';
|
|
import Flux from '../lib/flux/index';
|
|
import i18n from '../i18n';
|
|
|
|
import SettingsIcon from '../uikit/icons/SettingsIcon';
|
|
import ToggleIcon from '../uikit/ToggleIcon';
|
|
import IconButton from '../uikit/IconButton';
|
|
import Flex from '../uikit/Flex';
|
|
import Avatar from './common/Avatar';
|
|
import ContextMenu from './common/ContextMenu';
|
|
import UserSettingsCogContextMenu from './contextmenus/UserSettingsCogContextMenu';
|
|
import Tooltip from './common/Tooltip';
|
|
import Popout from './common/Popout';
|
|
import DiscordTag from './common/DiscordTag';
|
|
import TutorialIndicator from './common/TutorialIndicator';
|
|
import StatusPickerPopout from './StatusPickerPopout';
|
|
|
|
import UserStore from '../stores/UserStore';
|
|
import LocalPresenceStore from '../stores/LocalPresenceStore';
|
|
import MediaEngineStore from '../stores/MediaEngineStore';
|
|
|
|
import UserSettingsModalActionCreators from '../actions/UserSettingsModalActionCreators';
|
|
import AudioActionCreators from '../actions/AudioActionCreators';
|
|
|
|
import {UserSettingsSections, ActivityTypes} from '../Constants';
|
|
|
|
import styles from './Account.mod.css';
|
|
|
|
class Account extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
(this: any).getDOMNode = this.getDOMNode.bind(this);
|
|
(this: any).handleToggleSelfMute = this.handleToggleSelfMute.bind(this);
|
|
(this: any).handleToggleSelfDeaf = this.handleToggleSelfDeaf.bind(this);
|
|
(this: any).handleOpenSettings = this.handleOpenSettings.bind(this);
|
|
(this: any).handleOpenSettingsContextMenu = this.handleOpenSettingsContextMenu.bind(this);
|
|
}
|
|
|
|
getDOMNode() {
|
|
return findDOMNode(this);
|
|
}
|
|
|
|
handleToggleSelfMute() {
|
|
AudioActionCreators.toggleSelfMute();
|
|
}
|
|
|
|
handleToggleSelfDeaf() {
|
|
AudioActionCreators.toggleSelfDeaf();
|
|
}
|
|
|
|
handleOpenSettings() {
|
|
UserSettingsModalActionCreators.open(UserSettingsSections.ACCOUNT);
|
|
}
|
|
|
|
handleOpenSettingsContextMenu(event) {
|
|
ContextMenu.openContextMenu(event, props => <UserSettingsCogContextMenu {...props} />);
|
|
}
|
|
|
|
render() {
|
|
const {currentUser, mute, deaf, streaming, status} = this.props;
|
|
if (currentUser == null) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Popout
|
|
animationType="spring"
|
|
render={props => <StatusPickerPopout {...props} />}
|
|
position={Popout.TOP}
|
|
target={this.getDOMNode}>
|
|
<Avatar user={currentUser} status={status} streaming={streaming} />
|
|
</Popout>
|
|
<DiscordTag user={currentUser} className={styles.accountDetails} />
|
|
<Flex grow={0}>
|
|
<Tooltip text={mute ? i18n.Messages.UNMUTE : i18n.Messages.MUTE}>
|
|
<div>
|
|
<ToggleIcon
|
|
className={styles.button}
|
|
size={IconButton.Sizes.SMALL}
|
|
value={mute}
|
|
inactiveSrc={require('../images/calls/ic_mic_white_24px.svg')}
|
|
activeSrc={require('../images/calls/ic_mic_muted_white_red_hover_24px.svg')}
|
|
onChange={this.handleToggleSelfMute}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
<TutorialIndicator
|
|
tutorialId="voice-conversations"
|
|
position={TutorialIndicator.TOP}
|
|
offsetY={-38}
|
|
offsetX={-18}>
|
|
<Tooltip text={deaf ? i18n.Messages.UNDEAFEN : i18n.Messages.DEAFEN}>
|
|
<div>
|
|
<ToggleIcon
|
|
className={styles.button}
|
|
size={IconButton.Sizes.SMALL}
|
|
value={deaf}
|
|
inactiveSrc={require('../images/calls/ic_headset_white_24px.svg')}
|
|
activeSrc={require('../images/calls/ic_headset_deafened_white_red_hover_24px.svg')}
|
|
onChange={this.handleToggleSelfDeaf}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
</TutorialIndicator>
|
|
<Tooltip text={i18n.Messages.USER_SETTINGS}>
|
|
<div
|
|
className={styles.button}
|
|
onClick={this.handleOpenSettings}
|
|
onContextMenu={this.handleOpenSettingsContextMenu}>
|
|
<SettingsIcon />
|
|
</div>
|
|
</Tooltip>
|
|
</Flex>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Flux.connectStores([UserStore, MediaEngineStore, LocalPresenceStore], () => {
|
|
const activity = LocalPresenceStore.getActivity();
|
|
return {
|
|
currentUser: UserStore.getCurrentUser(),
|
|
mute: !MediaEngineStore.isEnabled() || MediaEngineStore.isSelfMute() || MediaEngineStore.isSelfMutedTemporarily(),
|
|
deaf: MediaEngineStore.isSelfDeaf(),
|
|
status: LocalPresenceStore.getStatus(),
|
|
streaming: activity != null && activity.type === ActivityTypes.STREAMING,
|
|
};
|
|
})(Account);
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/Account.js
|