2017-05-02 20:04:16 -04:00
import React from 'react' ;
2017-04-21 14:05:35 -04:00
import PropTypes from 'prop-types' ;
2017-01-02 08:09:57 -05:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-06-12 06:26:23 -04:00
import { FormattedMessage } from 'react-intl' ;
import ClearColumnButton from './clear_column_button' ;
2020-12-15 12:43:54 -05:00
import GrantPermissionButton from './grant_permission_button' ;
2017-01-10 11:25:10 -05:00
import SettingToggle from './setting_toggle' ;
2021-03-08 12:40:34 -05:00
import PillBarButton from './pill_bar_button' ;
2022-07-04 20:41:40 -04:00
import { PERMISSION _MANAGE _USERS , PERMISSION _MANAGE _REPORTS } from 'flavours/glitch/permissions' ;
2017-01-02 08:09:57 -05:00
2017-06-23 13:36:54 -04:00
export default class ColumnSettings extends React . PureComponent {
2017-01-02 08:09:57 -05:00
2022-07-04 20:41:40 -04:00
static contextTypes = {
identity : PropTypes . object ,
} ;
2017-05-12 08:44:10 -04:00
static propTypes = {
settings : ImmutablePropTypes . map . isRequired ,
2017-07-13 16:15:32 -04:00
pushSettings : ImmutablePropTypes . map . isRequired ,
2017-05-12 08:44:10 -04:00
onChange : PropTypes . func . isRequired ,
2017-06-12 06:26:23 -04:00
onClear : PropTypes . func . isRequired ,
2020-10-15 10:24:47 -04:00
onRequestNotificationPermission : PropTypes . func ,
2020-10-12 18:37:21 -04:00
alertsEnabled : PropTypes . bool ,
browserSupport : PropTypes . bool ,
2022-11-06 21:39:48 -05:00
browserPermission : PropTypes . string ,
2017-05-12 08:44:10 -04:00
} ;
2018-01-09 10:48:14 -05:00
onPushChange = ( path , checked ) => {
this . props . onChange ( [ 'push' , ... path ] , checked ) ;
2023-02-03 14:52:07 -05:00
} ;
2017-07-13 16:15:32 -04:00
2017-01-02 08:09:57 -05:00
render ( ) {
2020-12-15 12:43:54 -05:00
const { settings , pushSettings , onChange , onClear , alertsEnabled , browserSupport , browserPermission , onRequestNotificationPermission } = this . props ;
2017-01-02 08:09:57 -05:00
2021-10-25 10:32:28 -04: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-18 11:22:01 -05:00
const filterAdvancedStr = < FormattedMessage id = 'notifications.column_settings.filter_bar.advanced' defaultMessage = 'Display all categories' / > ;
2021-10-25 10:32:28 -04: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 08:09:57 -05:00
2017-07-13 16:15:32 -04:00
const showPushSettings = pushSettings . get ( 'browserSupport' ) && pushSettings . get ( 'isSubscribed' ) ;
const pushStr = showPushSettings && < FormattedMessage id = 'notifications.column_settings.push' defaultMessage = 'Push notifications' / > ;
2017-01-02 08:09:57 -05:00
return (
2017-06-03 19:39:38 -04:00
< div >
2020-10-15 10:24:47 -04: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-12 18:37:21 -04:00
< / div >
) }
2020-12-15 12:43:54 -05: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 06:26:23 -04:00
< div className = 'column-settings__row' >
< ClearColumnButton onClick = { onClear } / >
< / div >
2021-03-19 07:47:31 -04:00
< div role = 'group' aria - labelledby = 'notifications-unread-markers' >
< span id = 'notifications-unread-markers' className = 'column-settings__section' >
2021-10-25 10:32:28 -04:00
< FormattedMessage id = 'notifications.column_settings.unread_notifications.category' defaultMessage = 'Unread notifications' / >
2021-03-19 07:47:31 -04:00
< / span >
< div className = 'column-settings__row' >
2021-10-25 10:32:28 -04:00
< SettingToggle id = 'unread-notification-markers' prefix = 'notifications' settings = { settings } settingPath = { [ 'showUnread' ] } onChange = { onChange } label = { unreadMarkersShowStr } / >
2021-03-19 07:47:31 -04:00
< / div >
< / div >
2018-12-18 11:22:01 -05: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 10:24:47 -04:00
2018-12-18 11:22:01 -05:00
< div className = 'column-settings__row' >
2021-10-25 10:32:28 -04:00
< SettingToggle id = 'show-filter-bar' prefix = 'notifications' settings = { settings } settingPath = { [ 'quickFilter' , 'show' ] } onChange = { onChange } label = { filterBarShowStr } / >
2018-12-18 11:22:01 -05:00
< SettingToggle id = 'show-filter-bar' prefix = 'notifications' settings = { settings } settingPath = { [ 'quickFilter' , 'advanced' ] } onChange = { onChange } label = { filterAdvancedStr } / >
< / div >
< / div >
2017-07-26 07:46:53 -04: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 >
2021-03-08 12:40:34 -05:00
< div className = 'column-settings__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'follow' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'follow' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'follow' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'follow' ] } onChange = { onChange } label = { soundStr } / >
2017-07-26 07:46:53 -04:00
< / div >
2017-06-03 19:39:38 -04:00
< / div >
2017-01-10 11:25:10 -05:00
2019-12-01 11:25:29 -05: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 >
2021-03-08 12:40:34 -05:00
< div className = 'column-settings__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'follow_request' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'follow_request' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'follow_request' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'follow_request' ] } onChange = { onChange } label = { soundStr } / >
2019-12-01 11:25:29 -05:00
< / div >
< / div >
2017-07-26 07:46:53 -04: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-10 11:25:10 -05:00
2021-03-08 12:40:34 -05:00
< div className = 'column-settings__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'favourite' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'favourite' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'favourite' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'favourite' ] } onChange = { onChange } label = { soundStr } / >
2017-07-26 07:46:53 -04:00
< / div >
2017-06-03 19:39:38 -04:00
< / div >
2017-01-10 11:25:10 -05:00
2017-07-26 07:46:53 -04: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-10 11:25:10 -05:00
2021-03-08 12:40:34 -05:00
< div className = 'column-settings__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'mention' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'mention' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'mention' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'mention' ] } onChange = { onChange } label = { soundStr } / >
2017-07-26 07:46:53 -04:00
< / div >
2017-06-03 19:39:38 -04:00
< / div >
2017-01-10 11:25:10 -05:00
2017-07-26 07:46:53 -04: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-10 11:25:10 -05:00
2021-03-08 12:40:34 -05:00
< div className = 'column-settings__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'reblog' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'reblog' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'reblog' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'reblog' ] } onChange = { onChange } label = { soundStr } / >
2017-07-26 07:46:53 -04:00
< / div >
2017-01-10 11:25:10 -05:00
< / div >
2019-03-13 14:29:54 -04: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 >
2021-03-08 12:40:34 -05:00
< div className = 'column-settings__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'poll' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'poll' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'poll' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'poll' ] } onChange = { onChange } label = { soundStr } / >
2019-03-13 14:29:54 -04:00
< / div >
< / div >
2020-10-15 10:24:47 -04:00
< div role = 'group' aria - labelledby = 'notifications-status' >
2022-05-03 04:59:23 -04:00
< span id = 'notifications-status' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.status' defaultMessage = 'New posts:' / > < / span >
2020-10-15 10:24:47 -04:00
2021-03-08 12:40:34 -05:00
< div className = 'column-settings__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'status' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'status' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'status' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'status' ] } onChange = { onChange } label = { soundStr } / >
2020-10-15 10:24:47 -04:00
< / div >
< / div >
2022-02-11 16:20:19 -05:00
< div role = 'group' aria - labelledby = 'notifications-update' >
2022-02-23 10:45:22 -05:00
< span id = 'notifications-update' className = 'column-settings__section' > < FormattedMessage id = 'notifications.column_settings.update' defaultMessage = 'Edits:' / > < / span >
2022-02-11 16:20:19 -05:00
< div className = 'column-settings__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'update' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'update' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'update' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'update' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
2022-02-23 10:45:22 -05:00
2022-10-24 11:37:46 -04:00
{ ( ( this . context . identity . permissions & PERMISSION _MANAGE _USERS ) === PERMISSION _MANAGE _USERS ) && (
2022-02-23 10:45:22 -05: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__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'admin.sign_up' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'admin.sign_up' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'admin.sign_up' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'admin.sign_up' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
) }
2022-06-27 03:30:15 -04:00
2022-10-24 11:37:46 -04:00
{ ( ( this . context . identity . permissions & PERMISSION _MANAGE _REPORTS ) === PERMISSION _MANAGE _REPORTS ) && (
2022-06-27 03:30:15 -04: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__pillbar' >
< PillBarButton disabled = { browserPermission === 'denied' } prefix = 'notifications_desktop' settings = { settings } settingPath = { [ 'alerts' , 'admin.report' ] } onChange = { onChange } label = { alertStr } / >
{ showPushSettings && < PillBarButton prefix = 'notifications_push' settings = { pushSettings } settingPath = { [ 'alerts' , 'admin.report' ] } onChange = { this . onPushChange } label = { pushStr } / > }
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'shows' , 'admin.report' ] } onChange = { onChange } label = { showStr } / >
< PillBarButton prefix = 'notifications' settings = { settings } settingPath = { [ 'sounds' , 'admin.report' ] } onChange = { onChange } label = { soundStr } / >
< / div >
< / div >
) }
2017-06-03 19:39:38 -04:00
< / div >
2017-01-02 08:09:57 -05:00
) ;
}
2017-04-21 14:05:35 -04:00
}