mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
455 lines
19 KiB
JavaScript
455 lines
19 KiB
JavaScript
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
|
|
// See License.txt for license information.
|
|
|
|
import SettingItemMin from 'components/setting_item_min.jsx';
|
|
import SettingItemMax from 'components/setting_item_max.jsx';
|
|
|
|
import * as Utils from 'utils/utils.jsx';
|
|
import * as UserAgent from 'utils/user_agent.jsx';
|
|
|
|
import React from 'react';
|
|
import {FormattedMessage} from 'react-intl';
|
|
|
|
export default class DesktopNotificationSettings extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.buildMaximizedSetting = this.buildMaximizedSetting.bind(this);
|
|
this.buildMinimizedSetting = this.buildMinimizedSetting.bind(this);
|
|
|
|
this.state = {};
|
|
}
|
|
|
|
buildMaximizedSetting() {
|
|
const inputs = [];
|
|
let extraInfo = null;
|
|
|
|
const activityRadio = [false, false, false];
|
|
if (this.props.activity === 'mention') {
|
|
activityRadio[1] = true;
|
|
} else if (this.props.activity === 'none') {
|
|
activityRadio[2] = true;
|
|
} else {
|
|
activityRadio[0] = true;
|
|
}
|
|
|
|
let soundSection;
|
|
let durationSection;
|
|
if (this.props.activity !== 'none') {
|
|
const soundRadio = [false, false];
|
|
if (this.props.sound === 'false') {
|
|
soundRadio[1] = true;
|
|
} else {
|
|
soundRadio[0] = true;
|
|
}
|
|
|
|
if (UserAgent.isFirefox()) {
|
|
soundSection = (
|
|
<div>
|
|
<hr/>
|
|
<label>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.sound'
|
|
defaultMessage='Notification sound'
|
|
/>
|
|
</label>
|
|
<br/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.soundConfig'
|
|
defaultMessage='Please configure notification sounds in your browser settings'
|
|
/>
|
|
</div>
|
|
);
|
|
} else {
|
|
soundSection = (
|
|
<div>
|
|
<hr/>
|
|
<label>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.sound'
|
|
defaultMessage='Notification sound'
|
|
/>
|
|
</label>
|
|
<br/>
|
|
<div className='radio'>
|
|
<label>
|
|
<input
|
|
type='radio'
|
|
name='notificationSounds'
|
|
checked={soundRadio[0]}
|
|
onChange={() => this.props.setParentState('desktopSound', 'true')}
|
|
/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.on'
|
|
defaultMessage='On'
|
|
/>
|
|
</label>
|
|
<br/>
|
|
</div>
|
|
<div className='radio'>
|
|
<label>
|
|
<input
|
|
type='radio'
|
|
name='notificationSounds'
|
|
checked={soundRadio[1]}
|
|
onChange={() => this.props.setParentState('desktopSound', 'false')}
|
|
/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.off'
|
|
defaultMessage='Off'
|
|
/>
|
|
</label>
|
|
<br/>
|
|
</div>
|
|
<br/>
|
|
<span>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.sounds_info'
|
|
defaultMessage='Notification sounds are available on IE11, Edge, Safari, Chrome and Mattermost Desktop Apps.'
|
|
/>
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const durationRadio = [false, false, false, false];
|
|
if (this.props.duration === '3') {
|
|
durationRadio[0] = true;
|
|
} else if (this.props.duration === '10') {
|
|
durationRadio[2] = true;
|
|
} else if (this.props.duration === '0') {
|
|
durationRadio[3] = true;
|
|
} else {
|
|
durationRadio[1] = true;
|
|
}
|
|
|
|
durationSection = (
|
|
<div>
|
|
<hr/>
|
|
<label>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.duration'
|
|
defaultMessage='Notification duration'
|
|
/>
|
|
</label>
|
|
<br/>
|
|
<div className='radio'>
|
|
<label>
|
|
<input
|
|
type='radio'
|
|
name='desktopDuration'
|
|
checked={durationRadio[0]}
|
|
onChange={() => this.props.setParentState('desktopDuration', '3')}
|
|
/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.seconds'
|
|
defaultMessage='{seconds} seconds'
|
|
values={{
|
|
seconds: '3'
|
|
}}
|
|
/>
|
|
</label>
|
|
<br/>
|
|
</div>
|
|
<div className='radio'>
|
|
<label>
|
|
<input
|
|
type='radio'
|
|
name='desktopDuration'
|
|
checked={durationRadio[1]}
|
|
onChange={() => this.props.setParentState('desktopDuration', '5')}
|
|
/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.seconds'
|
|
defaultMessage='{seconds} seconds'
|
|
values={{
|
|
seconds: '5'
|
|
}}
|
|
/>
|
|
</label>
|
|
<br/>
|
|
</div>
|
|
<div className='radio'>
|
|
<label>
|
|
<input
|
|
type='radio'
|
|
name='desktopDuration'
|
|
checked={durationRadio[2]}
|
|
onChange={() => this.props.setParentState('desktopDuration', '10')}
|
|
/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.seconds'
|
|
defaultMessage='{seconds} seconds'
|
|
values={{
|
|
seconds: '10'
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div className='radio'>
|
|
<label>
|
|
<input
|
|
type='radio'
|
|
name='desktopDuration'
|
|
checked={durationRadio[3]}
|
|
onChange={() => this.props.setParentState('desktopDuration', '0')}
|
|
/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.unlimited'
|
|
defaultMessage='Unlimited'
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
extraInfo = (
|
|
<span>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.durationInfo'
|
|
defaultMessage='Sets how long desktop notifications will remain on screen when using Firefox or Chrome. Desktop notifications in Edge and Safari can only stay on screen for a maximum of 5 seconds.'
|
|
/>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
inputs.push(
|
|
<div key='userNotificationLevelOption'>
|
|
<label>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop'
|
|
defaultMessage='Send desktop notifications'
|
|
/>
|
|
</label>
|
|
<br/>
|
|
<div className='radio'>
|
|
<label>
|
|
<input
|
|
type='radio'
|
|
name='desktopNotificationLevel'
|
|
checked={activityRadio[0]}
|
|
onChange={() => this.props.setParentState('desktopActivity', 'all')}
|
|
/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.allActivity'
|
|
defaultMessage='For all activity'
|
|
/>
|
|
</label>
|
|
<br/>
|
|
</div>
|
|
<div className='radio'>
|
|
<label>
|
|
<input
|
|
type='radio'
|
|
name='desktopNotificationLevel'
|
|
checked={activityRadio[1]}
|
|
onChange={() => this.props.setParentState('desktopActivity', 'mention')}
|
|
/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.onlyMentions'
|
|
defaultMessage='Only for mentions and direct messages'
|
|
/>
|
|
</label>
|
|
<br/>
|
|
</div>
|
|
<div className='radio'>
|
|
<label>
|
|
<input
|
|
type='radio'
|
|
name='desktopNotificationLevel'
|
|
checked={activityRadio[2]}
|
|
onChange={() => this.props.setParentState('desktopActivity', 'none')}
|
|
/>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.never'
|
|
defaultMessage='Never'
|
|
/>
|
|
</label>
|
|
</div>
|
|
<br/>
|
|
<span>
|
|
<FormattedMessage
|
|
id='user.settings.notifications.info'
|
|
defaultMessage='Desktop notifications are available on Edge, Firefox, Safari, Chrome and Mattermost Desktop Apps.'
|
|
/>
|
|
</span>
|
|
{soundSection}
|
|
{durationSection}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<SettingItemMax
|
|
title={Utils.localizeMessage('user.settings.notifications.desktop.title', 'Desktop notifications')}
|
|
extraInfo={extraInfo}
|
|
inputs={inputs}
|
|
submit={this.props.submit}
|
|
server_error={this.props.error}
|
|
updateSection={this.props.cancel}
|
|
/>
|
|
);
|
|
}
|
|
|
|
buildMinimizedSetting() {
|
|
let describe = '';
|
|
if (this.props.activity === 'mention') {
|
|
if (UserAgent.isFirefox()) {
|
|
if (this.props.duration === '0') {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.mentionsFirefoxForever'
|
|
defaultMessage='For mentions and direct messages, shown indefinitely'
|
|
/>
|
|
);
|
|
} else {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.mentionsFirefoxTimed'
|
|
defaultMessage='For mentions and direct messages, shown for {seconds} seconds'
|
|
values={{
|
|
seconds: this.props.duration
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
} else if (this.props.sound === 'false') {
|
|
if (this.props.duration === '0') {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.mentionsNoSoundForever'
|
|
defaultMessage='For mentions and direct messages, without sound, shown indefinitely'
|
|
/>
|
|
);
|
|
} else {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.mentionsNoSoundTimed'
|
|
defaultMessage='For mentions and direct messages, without sound, shown for {seconds} seconds'
|
|
values={{
|
|
seconds: this.props.duration
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
} else {
|
|
if (this.props.duration === '0') { //eslint-disable-line no-lonely-if
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.mentionsSoundForever'
|
|
defaultMessage='For mentions and direct messages, with sound, shown indefinitely'
|
|
/>
|
|
);
|
|
} else {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.mentionsSoundTimed'
|
|
defaultMessage='For mentions and direct messages, with sound, shown for {seconds} seconds'
|
|
values={{
|
|
seconds: this.props.duration
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
} else if (this.props.activity === 'none') {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.off'
|
|
defaultMessage='Off'
|
|
/>
|
|
);
|
|
} else {
|
|
if (UserAgent.isFirefox()) { //eslint-disable-line no-lonely-if
|
|
if (this.props.duration === '0') {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.allFirefoxForever'
|
|
defaultMessage='For all activity, shown indefinitely'
|
|
/>
|
|
);
|
|
} else {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.allFirefoxTimed'
|
|
defaultMessage='For all activity, shown for {seconds} seconds'
|
|
values={{
|
|
seconds: this.props.duration
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
} else if (this.props.sound === 'false') {
|
|
if (this.props.duration === '0') {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.allNoSoundForever'
|
|
defaultMessage='For all activity, without sound, shown indefinitely'
|
|
/>
|
|
);
|
|
} else {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.allNoSoundTimed'
|
|
defaultMessage='For all activity, without sound, shown for {seconds} seconds'
|
|
values={{
|
|
seconds: this.props.duration
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
} else {
|
|
if (this.props.duration === '0') { //eslint-disable-line no-lonely-if
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.allSoundForever'
|
|
defaultMessage='For all activity, with sound, shown indefinitely'
|
|
/>
|
|
);
|
|
} else {
|
|
describe = (
|
|
<FormattedMessage
|
|
id='user.settings.notifications.desktop.allSoundTimed'
|
|
defaultMessage='For all activity, with sound, shown for {seconds} seconds'
|
|
values={{
|
|
seconds: this.props.duration
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleUpdateDesktopSection = function updateDesktopSection() {
|
|
this.props.updateSection('desktop');
|
|
}.bind(this);
|
|
|
|
return (
|
|
<SettingItemMin
|
|
title={Utils.localizeMessage('user.settings.notifications.desktop.title', 'Desktop notifications')}
|
|
describe={describe}
|
|
updateSection={handleUpdateDesktopSection}
|
|
/>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
if (this.props.active) {
|
|
return this.buildMaximizedSetting();
|
|
}
|
|
|
|
return this.buildMinimizedSetting();
|
|
}
|
|
}
|
|
|
|
DesktopNotificationSettings.propTypes = {
|
|
activity: React.PropTypes.string.isRequired,
|
|
sound: React.PropTypes.string.isRequired,
|
|
duration: React.PropTypes.string.isRequired,
|
|
updateSection: React.PropTypes.func,
|
|
setParentState: React.PropTypes.func,
|
|
submit: React.PropTypes.func,
|
|
cancel: React.PropTypes.func,
|
|
error: React.PropTypes.string,
|
|
active: React.PropTypes.bool
|
|
};
|