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' ;
2024-03-12 00:02:21 +09:00
import { CheckboxWithLabel } from './checkbox_with_label' ;
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 ,
2024-03-12 00:02:21 +09:00
notificationPolicy : ImmutablePropTypes . map ,
onChangePolicy : PropTypes . func . isRequired ,
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
2024-03-12 00:02:21 +09:00
handleFilterNotFollowing = checked => {
this . props . onChangePolicy ( 'filter_not_following' , checked ) ;
} ;
handleFilterNotFollowers = checked => {
this . props . onChangePolicy ( 'filter_not_followers' , checked ) ;
} ;
handleFilterNewAccounts = checked => {
this . props . onChangePolicy ( 'filter_new_accounts' , checked ) ;
} ;
handleFilterPrivateMentions = checked => {
this . props . onChangePolicy ( 'filter_private_mentions' , checked ) ;
} ;
2017-01-02 22:09:57 +09:00
render ( ) {
2024-03-12 00:02:21 +09:00
const { settings , pushSettings , onChange , onClear , alertsEnabled , browserSupport , browserPermission , onRequestNotificationPermission , notificationPolicy } = 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 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 (
2024-03-12 00:02:21 +09:00
< div className = 'column-settings' >
2020-10-15 23:24:47 +09:00
{ alertsEnabled && browserSupport && browserPermission === 'denied' && (
2024-03-12 00:02:21 +09:00
< 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
) }
2024-03-12 00:02:21 +09:00
< section >
2017-06-12 19:26:23 +09:00
< ClearColumnButton onClick = { onClear } / >
2024-03-12 00:02:21 +09:00
< / section >
2017-06-12 19:26:23 +09:00
2024-03-20 20:06:44 +09:00
{ alertsEnabled && browserSupport && browserPermission === 'default' && (
< section >
< 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 >
< / section >
) }
2024-03-12 00:02:21 +09:00
< section >
< h3 > < FormattedMessage id = 'notifications.policy.title' defaultMessage = 'Filter out notifications from…' / > < / h3 >
2021-03-19 10:44:57 +09:00
< div className = 'column-settings__row' >
2024-03-12 00:02:21 +09:00
< CheckboxWithLabel checked = { notificationPolicy . get ( 'filter_not_following' ) } onChange = { this . handleFilterNotFollowing } >
< strong > < FormattedMessage id = 'notifications.policy.filter_not_following_title' defaultMessage = "People you don't follow" / > < / strong >
< span className = 'hint' > < FormattedMessage id = 'notifications.policy.filter_not_following_hint' defaultMessage = 'Until you manually approve them' / > < / span >
< / CheckboxWithLabel >
< CheckboxWithLabel checked = { notificationPolicy . get ( 'filter_not_followers' ) } onChange = { this . handleFilterNotFollowers } >
< strong > < FormattedMessage id = 'notifications.policy.filter_not_followers_title' defaultMessage = 'People not following you' / > < / strong >
< span className = 'hint' > < FormattedMessage id = 'notifications.policy.filter_not_followers_hint' defaultMessage = 'Including people who have been following you fewer than {days, plural, one {one day} other {# days}}' values = { { days : 3 } } / > < / span >
< / CheckboxWithLabel >
< CheckboxWithLabel checked = { notificationPolicy . get ( 'filter_new_accounts' ) } onChange = { this . handleFilterNewAccounts } >
< strong > < FormattedMessage id = 'notifications.policy.filter_new_accounts_title' defaultMessage = 'New accounts' / > < / strong >
< span className = 'hint' > < FormattedMessage id = 'notifications.policy.filter_new_accounts.hint' defaultMessage = 'Created within the past {days, plural, one {one day} other {# days}}' values = { { days : 30 } } / > < / span >
< / CheckboxWithLabel >
< CheckboxWithLabel checked = { notificationPolicy . get ( 'filter_private_mentions' ) } onChange = { this . handleFilterPrivateMentions } >
< strong > < FormattedMessage id = 'notifications.policy.filter_private_mentions_title' defaultMessage = 'Unsolicited private mentions' / > < / strong >
< span className = 'hint' > < FormattedMessage id = 'notifications.policy.filter_private_mentions_hint' defaultMessage = "Filtered unless it's in reply to your own mention or if you follow the sender" / > < / span >
< / CheckboxWithLabel >
2021-03-19 10:44:57 +09:00
< / div >
2024-03-12 00:02:21 +09:00
< / section >
2021-03-19 10:44:57 +09:00
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-unread-markers' >
< h3 id = 'notifications-unread-markers' >
< FormattedMessage id = 'notifications.column_settings.unread_notifications.category' defaultMessage = 'Unread notifications' / >
< / h3 >
2020-10-15 23:24:47 +09:00
2018-12-16 13:56:41 +09:00
< div className = 'column-settings__row' >
2024-03-12 00:02:21 +09:00
< SettingToggle id = 'unread-notification-markers' prefix = 'notifications' settings = { settings } settingPath = { [ 'showUnread' ] } onChange = { onChange } label = { unreadMarkersShowStr } / >
2018-12-16 13:56:41 +09:00
< / div >
2024-03-12 00:02:21 +09:00
< / section >
2018-12-16 13:56:41 +09:00
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-follow' >
< h3 id = 'notifications-follow' > < FormattedMessage id = 'notifications.column_settings.follow' defaultMessage = 'New followers:' / > < / h3 >
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' , '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 >
2024-03-12 00:02:21 +09:00
< / section >
2017-01-11 01:25:10 +09:00
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-follow-request' >
< h3 id = 'notifications-follow-request' > < FormattedMessage id = 'notifications.column_settings.follow_request' defaultMessage = 'New follow requests:' / > < / h3 >
2019-12-02 01:25:29 +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' , '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 >
2024-03-12 00:02:21 +09:00
< / section >
2019-12-02 01:25:29 +09:00
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-favourite' >
< h3 id = 'notifications-favourite' > < FormattedMessage id = 'notifications.column_settings.favourite' defaultMessage = 'Favorites:' / > < / h3 >
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 >
2024-03-12 00:02:21 +09:00
< / section >
2017-01-11 01:25:10 +09:00
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-mention' >
< h3 id = 'notifications-mention' > < FormattedMessage id = 'notifications.column_settings.mention' defaultMessage = 'Mentions:' / > < / h3 >
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 >
2024-03-12 00:02:21 +09:00
< / section >
2017-01-11 01:25:10 +09:00
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-reblog' >
< h3 id = 'notifications-reblog' > < FormattedMessage id = 'notifications.column_settings.reblog' defaultMessage = 'Boosts:' / > < / h3 >
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 >
2024-03-12 00:02:21 +09:00
< / section >
2019-03-14 03:29:54 +09:00
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-poll' >
< h3 id = 'notifications-poll' > < FormattedMessage id = 'notifications.column_settings.poll' defaultMessage = 'Poll results:' / > < / h3 >
2019-03-14 03:29:54 +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' , '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 >
2024-03-12 00:02:21 +09:00
< / section >
2020-10-15 23:24:47 +09:00
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-status' >
< h3 id = 'notifications-status' > < FormattedMessage id = 'notifications.column_settings.status' defaultMessage = 'New posts:' / > < / h3 >
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 >
2024-03-12 00:02:21 +09:00
< / section >
2022-02-12 06:20:19 +09:00
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-update' >
< h3 id = 'notifications-update' > < FormattedMessage id = 'notifications.column_settings.update' defaultMessage = 'Edits:' / > < / h3 >
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 >
2024-03-12 00:02:21 +09:00
< / section >
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 ) && (
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-admin-sign-up' >
< h3 id = 'notifications-status' > < FormattedMessage id = 'notifications.column_settings.admin.sign_up' defaultMessage = 'New sign-ups:' / > < / h3 >
2022-02-24 00:45:22 +09:00
< 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 >
2024-03-12 00:02:21 +09:00
< / section >
2022-02-24 00:45:22 +09:00
) }
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 ) && (
2024-03-12 00:02:21 +09:00
< section role = 'group' aria - labelledby = 'notifications-admin-report' >
< h3 id = 'notifications-status' > < FormattedMessage id = 'notifications.column_settings.admin.report' defaultMessage = 'New reports:' / > < / h3 >
2022-06-27 16:30:15 +09:00
< 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 >
2024-03-12 00:02:21 +09:00
< / section >
2022-06-27 16:30:15 +09:00
) }
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
}