2017-04-22 03:05:35 +09:00
import PropTypes from 'prop-types' ;
2023-05-24 00:15:17 +09:00
import { PureComponent } from 'react' ;
2017-06-12 19:26:23 +09:00
import { FormattedMessage } from 'react-intl' ;
2023-05-24 00:15:17 +09:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { PERMISSION _MANAGE _USERS , PERMISSION _MANAGE _REPORTS } from 'mastodon/permissions' ;
2017-06-12 19:26:23 +09:00
import ClearColumnButton from './clear_column_button' ;
2020-12-16 02:43:54 +09:00
import GrantPermissionButton from './grant_permission_button' ;
2017-01-11 01:25:10 +09:00
import SettingToggle from './setting_toggle' ;
2017-01-02 22:09:57 +09:00
2023-05-23 17:52:27 +09:00
export default class ColumnSettings extends PureComponent {
2017-01-02 22:09:57 +09:00
2022-07-05 09:41:40 +09:00
static contextTypes = {
identity : PropTypes . object ,
} ;
2017-05-12 21:44:10 +09:00
static propTypes = {
settings : ImmutablePropTypes . map . isRequired ,
2017-07-14 05:15:32 +09:00
pushSettings : ImmutablePropTypes . map . isRequired ,
2017-05-12 21:44:10 +09:00
onChange : PropTypes . func . isRequired ,
2017-06-12 19:26:23 +09:00
onClear : PropTypes . func . isRequired ,
2020-10-15 23:24:47 +09:00
onRequestNotificationPermission : PropTypes . func ,
2020-10-13 07:37:21 +09:00
alertsEnabled : PropTypes . bool ,
browserSupport : PropTypes . bool ,
2022-11-07 11:39:48 +09:00
browserPermission : PropTypes . string ,
2017-05-12 21:44:10 +09:00
} ;
2018-01-02 21:50:54 +09:00
onPushChange = ( path , checked ) => {
this . props . onChange ( [ 'push' , ... path ] , checked ) ;
2023-01-30 09:45:35 +09:00
} ;
2017-07-14 05:15:32 +09:00
2017-01-02 22:09:57 +09:00
render ( ) {
2020-12-16 02:43:54 +09:00
const { settings , pushSettings , onChange , onClear , alertsEnabled , browserSupport , browserPermission , onRequestNotificationPermission } = this . props ;
2017-01-02 22:09:57 +09:00
2021-10-25 23:32:28 +09:00
const unreadMarkersShowStr = < FormattedMessage id = 'notifications.column_settings.unread_notifications.highlight' defaultMessage = 'Highlight unread notifications' / > ;
const filterBarShowStr = < FormattedMessage id = 'notifications.column_settings.filter_bar.show_bar' defaultMessage = 'Show filter bar' / > ;
2018-12-16 13:56:41 +09:00
const filterAdvancedStr = < FormattedMessage id = 'notifications.column_settings.filter_bar.advanced' defaultMessage = 'Display all categories' / > ;
2021-10-25 23:32:28 +09:00
const alertStr = < FormattedMessage id = 'notifications.column_settings.alert' defaultMessage = 'Desktop notifications' / > ;
const showStr = < FormattedMessage id = 'notifications.column_settings.show' defaultMessage = 'Show in column' / > ;
const soundStr = < FormattedMessage id = 'notifications.column_settings.sound' defaultMessage = 'Play sound' / > ;
2017-01-02 22:09:57 +09:00
2017-07-14 05:15:32 +09:00
const showPushSettings = pushSettings . get ( 'browserSupport' ) && pushSettings . get ( 'isSubscribed' ) ;
const pushStr = showPushSettings && < FormattedMessage id = 'notifications.column_settings.push' defaultMessage = 'Push notifications' / > ;
2017-01-02 22:09:57 +09:00
return (
2017-06-04 08:39:38 +09:00
< div >
2020-10-15 23:24:47 +09:00
{ alertsEnabled && browserSupport && browserPermission === 'denied' && (
< div className = 'column-settings__row column-settings__row--with-margin' >
< span className = 'warning-hint' > < FormattedMessage id = 'notifications.permission_denied' defaultMessage = 'Desktop notifications are unavailable due to previously denied browser permissions request' / > < / span >
2020-10-13 07:37:21 +09:00
< / div >
) }
2020-12-16 02:43:54 +09:00
{ alertsEnabled && browserSupport && browserPermission === 'default' && (
< div className = 'column-settings__row column-settings__row--with-margin' >
< span className = 'warning-hint' >
< FormattedMessage id = 'notifications.permission_required' defaultMessage = 'Desktop notifications are unavailable because the required permission has not been granted.' / > < GrantPermissionButton onClick = { onRequestNotificationPermission } / >
< / span >
< / div >
) }
2017-06-12 19:26:23 +09:00
< div className = 'column-settings__row' >
< ClearColumnButton onClick = { onClear } / >
< / div >
2021-03-19 10:44:57 +09:00
< div role = 'group' aria - labelledby = 'notifications-unread-markers' >
< span id = 'notifications-unread-markers' className = 'column-settings__section' >
2021-10-25 23:32:28 +09:00
< FormattedMessage id = 'notifications.column_settings.unread_notifications.category' defaultMessage = 'Unread notifications' / >
2021-03-19 10:44:57 +09:00
< / span >
< div className = 'column-settings__row' >
2021-10-25 23:32:28 +09:00
< SettingToggle id = 'unread-notification-markers' prefix = 'notifications' settings = { settings } settingPath = { [ 'showUnread' ] } onChange = { onChange } label = { unreadMarkersShowStr } / >
2021-03-19 10:44:57 +09:00
< / div >
< / div >
2018-12-16 13:56:41 +09:00
< div role = 'group' aria - labelledby = 'notifications-filter-bar' >
< span id = 'notifications-filter-bar' className = 'column-settings__section' >
< FormattedMessage id = 'notifications.column_settings.filter_bar.category' defaultMessage = 'Quick filter bar' / >
< / span >
2020-10-15 23:24:47 +09:00
2018-12-16 13:56:41 +09:00
< div className = 'column-settings__row' >
2021-10-25 23:32:28 +09:00
< SettingToggle id = 'show-filter-bar' prefix = 'notifications' settings = { settings } settingPath = { [ 'quickFilter' , 'show' ] } onChange = { onChange } label = { filterBarShowStr } / >
2018-12-16 13:56:41 +09:00
< SettingToggle id = 'show-filter-bar' prefix = 'notifications' settings = { settings } settingPath = { [ 'quickFilter' , 'advanced' ] } onChange = { onChange } label = { filterAdvancedStr } / >
< / div >
< / div >
2017-07-26 20:46:53 +09:00
< div role = 'group' aria - labelledby = 'notifications-follow' >
< span id = 'notifications-follow' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.follow' defaultMessage = 'New followers:' / > < / span >
< div className = 'column-settings__row' >
2020-12-16 02:43:54 +09:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'follow' ] } onChange = { onChange } label = { alertStr } / >
2018-09-25 22:59:19 +09:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'follow' ] } onChange = { this . onPushChange } label = { pushStr } / > }
2017-12-20 16:19:59 +09:00
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'follow' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'follow' ] } onChange = { onChange } label = { soundStr } / >
2017-07-26 20:46:53 +09:00
< / div >
2017-06-04 08:39:38 +09:00
< / div >
2017-01-11 01:25:10 +09:00
2019-12-02 01:25:29 +09:00
< div role = 'group' aria - labelledby = 'notifications-follow-request' >
< span id = 'notifications-follow-request' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.follow_request' defaultMessage = 'New follow requests:' / > < / span >
< div className = 'column-settings__row' >
2020-12-16 02:43:54 +09:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'follow_request' ] } onChange = { onChange } label = { alertStr } / >
2019-12-02 01:25:29 +09:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'follow_request' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'follow_request' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'follow_request' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
2017-07-26 20:46:53 +09:00
< div role = 'group' aria - labelledby = 'notifications-favourite' >
< span id = 'notifications-favourite' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.favourite' defaultMessage = 'Favourites:' / > < / span >
2017-01-11 01:25:10 +09:00
2017-07-26 20:46:53 +09:00
< div className = 'column-settings__row' >
2020-12-16 02:43:54 +09:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'favourite' ] } onChange = { onChange } label = { alertStr } / >
2018-09-25 22:59:19 +09:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'favourite' ] } onChange = { this . onPushChange } label = { pushStr } / > }
2017-12-20 16:19:59 +09:00
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'favourite' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'favourite' ] } onChange = { onChange } label = { soundStr } / >
2017-07-26 20:46:53 +09:00
< / div >
2017-06-04 08:39:38 +09:00
< / div >
2017-01-11 01:25:10 +09:00
2022-12-01 01:25:36 +09:00
< div role = 'group' aria - labelledby = 'notifications-reaction' >
< span id = 'notifications-reaction' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.reaction' defaultMessage = 'Reactions:' / > < / span >
< div className = 'column-settings__pillbar' >
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'reaction' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'reaction' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'reaction' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'reaction' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
2017-07-26 20:46:53 +09:00
< div role = 'group' aria - labelledby = 'notifications-mention' >
< span id = 'notifications-mention' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.mention' defaultMessage = 'Mentions:' / > < / span >
2017-01-11 01:25:10 +09:00
2017-07-26 20:46:53 +09:00
< div className = 'column-settings__row' >
2020-12-16 02:43:54 +09:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'mention' ] } onChange = { onChange } label = { alertStr } / >
2018-09-25 22:59:19 +09:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'mention' ] } onChange = { this . onPushChange } label = { pushStr } / > }
2017-12-20 16:19:59 +09:00
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'mention' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'mention' ] } onChange = { onChange } label = { soundStr } / >
2017-07-26 20:46:53 +09:00
< / div >
2017-06-04 08:39:38 +09:00
< / div >
2017-01-11 01:25:10 +09:00
2017-07-26 20:46:53 +09:00
< div role = 'group' aria - labelledby = 'notifications-reblog' >
< span id = 'notifications-reblog' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.reblog' defaultMessage = 'Boosts:' / > < / span >
2017-01-11 01:25:10 +09:00
2017-07-26 20:46:53 +09:00
< div className = 'column-settings__row' >
2020-12-16 02:43:54 +09:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'reblog' ] } onChange = { onChange } label = { alertStr } / >
2018-09-25 22:59:19 +09:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'reblog' ] } onChange = { this . onPushChange } label = { pushStr } / > }
2017-12-20 16:19:59 +09:00
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'reblog' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'reblog' ] } onChange = { onChange } label = { soundStr } / >
2017-07-26 20:46:53 +09:00
< / div >
2017-01-11 01:25:10 +09:00
< / div >
2019-03-14 03:29:54 +09:00
< div role = 'group' aria - labelledby = 'notifications-poll' >
< span id = 'notifications-poll' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.poll' defaultMessage = 'Poll results:' / > < / span >
< div className = 'column-settings__row' >
2020-12-16 02:43:54 +09:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'poll' ] } onChange = { onChange } label = { alertStr } / >
2019-03-14 03:29:54 +09:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'poll' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'poll' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'poll' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
2020-10-15 23:24:47 +09:00
< div role = 'group' aria - labelledby = 'notifications-status' >
2022-04-29 07:24:31 +09:00
< span id = 'notifications-status' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.status' defaultMessage = 'New posts:' / > < / span >
2020-10-15 23:24:47 +09:00
< div className = 'column-settings__row' >
2020-12-16 02:43:54 +09:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'status' ] } onChange = { onChange } label = { alertStr } / >
2020-10-15 23:24:47 +09:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'status' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'status' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'status' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
2022-02-12 06:20:19 +09:00
< div role = 'group' aria - labelledby = 'notifications-update' >
2022-02-24 00:45:22 +09:00
< span id = 'notifications-update' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.update' defaultMessage = 'Edits:' / > < / span >
2022-02-12 06:20:19 +09:00
< div className = 'column-settings__row' >
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'update' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'update' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'update' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'update' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
2022-02-24 00:45:22 +09:00
2022-10-25 00:37:46 +09:00
{ ( ( this . context . identity . permissions & PERMISSION _MANAGE _USERS ) === PERMISSION _MANAGE _USERS ) && (
2022-02-24 00:45:22 +09:00
< div role = 'group' aria - labelledby = 'notifications-admin-sign-up' >
< span id = 'notifications-status' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.admin.sign_up' defaultMessage = 'New sign-ups:' / > < / span >
< div className = 'column-settings__row' >
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'admin.sign_up' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'admin.sign_up' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'admin.sign_up' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'admin.sign_up' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
) }
2022-06-27 16:30:15 +09:00
2022-10-25 00:37:46 +09:00
{ ( ( this . context . identity . permissions & PERMISSION _MANAGE _REPORTS ) === PERMISSION _MANAGE _REPORTS ) && (
2022-06-27 16:30:15 +09:00
< div role = 'group' aria - labelledby = 'notifications-admin-report' >
< span id = 'notifications-status' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.admin.report' defaultMessage = 'New reports:' / > < / span >
< div className = 'column-settings__row' >
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'admin.report' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'admin.report' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'admin.report' ] } onChange = { onChange } label = { showStr } / >
< SettingToggle prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'admin.report' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
) }
2017-06-04 08:39:38 +09:00
< / div >
2017-01-02 22:09:57 +09:00
) ;
}
2017-04-22 03:05:35 +09:00
}