2017-04-21 20:05:35 +02:00
import PropTypes from 'prop-types' ;
2023-05-23 17:15:17 +02:00
import { PureComponent } from 'react' ;
2017-06-12 12:26:23 +02:00
import { FormattedMessage } from 'react-intl' ;
2023-05-23 17:15:17 +02:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { PERMISSION _MANAGE _USERS , PERMISSION _MANAGE _REPORTS } from 'mastodon/permissions' ;
2024-03-11 16:02:21 +01:00
import { CheckboxWithLabel } from './checkbox_with_label' ;
2017-06-12 12:26:23 +02:00
import ClearColumnButton from './clear_column_button' ;
2020-12-15 18:43:54 +01:00
import GrantPermissionButton from './grant_permission_button' ;
2017-01-10 17:25:10 +01:00
import SettingToggle from './setting_toggle' ;
2017-01-02 14:09:57 +01:00
2023-05-23 10:52:27 +02:00
export default class ColumnSettings extends PureComponent {
2017-01-02 14:09:57 +01:00
2022-07-05 02:41:40 +02:00
static contextTypes = {
identity : PropTypes . object ,
} ;
2017-05-12 14:44:10 +02:00
static propTypes = {
settings : ImmutablePropTypes . map . isRequired ,
2017-07-13 22:15:32 +02:00
pushSettings : ImmutablePropTypes . map . isRequired ,
2017-05-12 14:44:10 +02:00
onChange : PropTypes . func . isRequired ,
2017-06-12 12:26:23 +02:00
onClear : PropTypes . func . isRequired ,
2020-10-15 16:24:47 +02:00
onRequestNotificationPermission : PropTypes . func ,
2020-10-13 00:37:21 +02:00
alertsEnabled : PropTypes . bool ,
browserSupport : PropTypes . bool ,
2022-11-07 03:39:48 +01:00
browserPermission : PropTypes . string ,
2024-03-11 16:02:21 +01:00
notificationPolicy : ImmutablePropTypes . map ,
onChangePolicy : PropTypes . func . isRequired ,
2017-05-12 14:44:10 +02:00
} ;
2018-01-02 13:50:54 +01:00
onPushChange = ( path , checked ) => {
this . props . onChange ( [ 'push' , ... path ] , checked ) ;
2023-01-30 01:45:35 +01:00
} ;
2017-07-13 22:15:32 +02:00
2024-03-11 16:02:21 +01: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 14:09:57 +01:00
render ( ) {
2024-03-11 16:02:21 +01:00
const { settings , pushSettings , onChange , onClear , alertsEnabled , browserSupport , browserPermission , onRequestNotificationPermission , notificationPolicy } = this . props ;
2017-01-02 14:09:57 +01:00
2021-10-25 16:32:28 +02: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 14:09:57 +01:00
2017-07-13 22:15:32 +02:00
const showPushSettings = pushSettings . get ( 'browserSupport' ) && pushSettings . get ( 'isSubscribed' ) ;
const pushStr = showPushSettings && < FormattedMessage id = 'notifications.column_settings.push' defaultMessage = 'Push notifications' / > ;
2017-01-02 14:09:57 +01:00
return (
2024-03-11 16:02:21 +01:00
< div className = 'column-settings' >
2020-10-15 16:24:47 +02:00
{ alertsEnabled && browserSupport && browserPermission === 'denied' && (
2024-03-11 16:02:21 +01: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 00:37:21 +02:00
) }
2024-03-11 16:02:21 +01:00
< section >
2017-06-12 12:26:23 +02:00
< ClearColumnButton onClick = { onClear } / >
2024-03-11 16:02:21 +01:00
< / section >
2017-06-12 12:26:23 +02:00
2024-03-20 12:06:44 +01: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-11 16:02:21 +01:00
< section >
< h3 > < FormattedMessage id = 'notifications.policy.title' defaultMessage = 'Filter out notifications from…' / > < / h3 >
2021-03-19 02:44:57 +01:00
< div className = 'column-settings__row' >
2024-03-11 16:02:21 +01: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 02:44:57 +01:00
< / div >
2024-03-11 16:02:21 +01:00
< / section >
2021-03-19 02:44:57 +01:00
2024-03-11 16:02:21 +01: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 16:24:47 +02:00
2018-12-16 05:56:41 +01:00
< div className = 'column-settings__row' >
2024-03-11 16:02:21 +01:00
< SettingToggle id = 'unread-notification-markers' prefix = 'notifications' settings = { settings } settingPath = { [ 'showUnread' ] } onChange = { onChange } label = { unreadMarkersShowStr } / >
2018-12-16 05:56:41 +01:00
< / div >
2024-03-11 16:02:21 +01:00
< / section >
2018-12-16 05:56:41 +01:00
2024-03-11 16:02:21 +01: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 13:46:53 +02:00
< div className = 'column-settings__row' >
2020-12-15 18:43:54 +01:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'follow' ] } onChange = { onChange } label = { alertStr } / >
2018-09-25 15:59:19 +02:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'follow' ] } onChange = { this . onPushChange } label = { pushStr } / > }
2017-12-20 08:19:59 +01: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 13:46:53 +02:00
< / div >
2024-03-11 16:02:21 +01:00
< / section >
2017-01-10 17:25:10 +01:00
2024-03-11 16:02:21 +01: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-01 17:25:29 +01:00
< div className = 'column-settings__row' >
2020-12-15 18:43:54 +01:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'follow_request' ] } onChange = { onChange } label = { alertStr } / >
2019-12-01 17:25:29 +01: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-11 16:02:21 +01:00
< / section >
2019-12-01 17:25:29 +01:00
2024-03-11 16:02:21 +01:00
< section role = 'group' aria - labelledby = 'notifications-favourite' >
< h3 id = 'notifications-favourite' > < FormattedMessage id = 'notifications.column_settings.favourite' defaultMessage = 'Favorites:' / > < / h3 >
2017-01-10 17:25:10 +01:00
2017-07-26 13:46:53 +02:00
< div className = 'column-settings__row' >
2020-12-15 18:43:54 +01:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'favourite' ] } onChange = { onChange } label = { alertStr } / >
2018-09-25 15:59:19 +02:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'favourite' ] } onChange = { this . onPushChange } label = { pushStr } / > }
2017-12-20 08:19:59 +01: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 13:46:53 +02:00
< / div >
2024-03-11 16:02:21 +01:00
< / section >
2017-01-10 17:25:10 +01:00
2024-03-11 16:02:21 +01:00
< section role = 'group' aria - labelledby = 'notifications-mention' >
< h3 id = 'notifications-mention' > < FormattedMessage id = 'notifications.column_settings.mention' defaultMessage = 'Mentions:' / > < / h3 >
2017-01-10 17:25:10 +01:00
2017-07-26 13:46:53 +02:00
< div className = 'column-settings__row' >
2020-12-15 18:43:54 +01:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'mention' ] } onChange = { onChange } label = { alertStr } / >
2018-09-25 15:59:19 +02:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'mention' ] } onChange = { this . onPushChange } label = { pushStr } / > }
2017-12-20 08:19:59 +01: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 13:46:53 +02:00
< / div >
2024-03-11 16:02:21 +01:00
< / section >
2017-01-10 17:25:10 +01:00
2024-03-11 16:02:21 +01:00
< section role = 'group' aria - labelledby = 'notifications-reblog' >
< h3 id = 'notifications-reblog' > < FormattedMessage id = 'notifications.column_settings.reblog' defaultMessage = 'Boosts:' / > < / h3 >
2017-01-10 17:25:10 +01:00
2017-07-26 13:46:53 +02:00
< div className = 'column-settings__row' >
2020-12-15 18:43:54 +01:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'reblog' ] } onChange = { onChange } label = { alertStr } / >
2018-09-25 15:59:19 +02:00
{ showPushSettings && < SettingToggle prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'reblog' ] } onChange = { this . onPushChange } label = { pushStr } / > }
2017-12-20 08:19:59 +01: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 13:46:53 +02:00
< / div >
2024-03-11 16:02:21 +01:00
< / section >
2019-03-13 19:29:54 +01:00
2024-03-11 16:02:21 +01:00
< section role = 'group' aria - labelledby = 'notifications-poll' >
< h3 id = 'notifications-poll' > < FormattedMessage id = 'notifications.column_settings.poll' defaultMessage = 'Poll results:' / > < / h3 >
2019-03-13 19:29:54 +01:00
< div className = 'column-settings__row' >
2020-12-15 18:43:54 +01:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'poll' ] } onChange = { onChange } label = { alertStr } / >
2019-03-13 19:29:54 +01: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-11 16:02:21 +01:00
< / section >
2020-10-15 16:24:47 +02:00
2024-03-11 16:02:21 +01: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 16:24:47 +02:00
< div className = 'column-settings__row' >
2020-12-15 18:43:54 +01:00
< SettingToggle disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'status' ] } onChange = { onChange } label = { alertStr } / >
2020-10-15 16:24:47 +02: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-11 16:02:21 +01:00
< / section >
2022-02-11 22:20:19 +01:00
2024-03-11 16:02:21 +01:00
< section role = 'group' aria - labelledby = 'notifications-update' >
< h3 id = 'notifications-update' > < FormattedMessage id = 'notifications.column_settings.update' defaultMessage = 'Edits:' / > < / h3 >
2022-02-11 22:20:19 +01: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-11 16:02:21 +01:00
< / section >
2022-02-23 16:45:22 +01:00
2022-10-24 17:37:46 +02:00
{ ( ( this . context . identity . permissions & PERMISSION _MANAGE _USERS ) === PERMISSION _MANAGE _USERS ) && (
2024-03-11 16:02:21 +01: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-23 16:45:22 +01: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-11 16:02:21 +01:00
< / section >
2022-02-23 16:45:22 +01:00
) }
2022-06-27 09:30:15 +02:00
2022-10-24 17:37:46 +02:00
{ ( ( this . context . identity . permissions & PERMISSION _MANAGE _REPORTS ) === PERMISSION _MANAGE _REPORTS ) && (
2024-03-11 16:02:21 +01: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 09:30:15 +02: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-11 16:02:21 +01:00
< / section >
2022-06-27 09:30:15 +02:00
) }
2017-06-04 01:39:38 +02:00
< / div >
2017-01-02 14:09:57 +01:00
) ;
}
2017-04-21 20:05:35 +02:00
}