diff options
author | ThibG <thib@sitedethib.com> | 2020-10-13 00:37:21 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2020-10-21 21:28:47 +0200 |
commit | b5927301cf086035cb3e5eac008cad12bcdcb352 (patch) | |
tree | b67e158af4cf80c6bdabb22b22b8e0234ec74d3c /app/javascript/flavours/glitch/features/notifications/components | |
parent | 2eb054c07f37fc2a7b3881e25e4d26a3410fe56b (diff) |
[Glitch] Fix browser notification permission request logic
Port f54ca3d08e068af07a5b7a8b139e7658b3236db8 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/features/notifications/components')
-rw-r--r-- | app/javascript/flavours/glitch/features/notifications/components/column_settings.js | 39 |
1 files changed, 38 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js index e4d5d0eda..33ed139c7 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js +++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js @@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; import ClearColumnButton from './clear_column_button'; import SettingToggle from './setting_toggle'; +import Icon from 'flavours/glitch/components/icon'; export default class ColumnSettings extends React.PureComponent { @@ -12,6 +13,10 @@ export default class ColumnSettings extends React.PureComponent { pushSettings: ImmutablePropTypes.map.isRequired, onChange: PropTypes.func.isRequired, onClear: PropTypes.func.isRequired, + onRequestNotificationPermission: PropTypes.func.isRequired, + alertsEnabled: PropTypes.bool, + browserSupport: PropTypes.bool, + browserPermission: PropTypes.bool, }; onPushChange = (path, checked) => { @@ -19,7 +24,7 @@ export default class ColumnSettings extends React.PureComponent { } render () { - const { settings, pushSettings, onChange, onClear } = this.props; + const { settings, pushSettings, onChange, onClear, onRequestNotificationPermission, alertsEnabled, browserSupport, browserPermission } = this.props; const filterShowStr = <FormattedMessage id='notifications.column_settings.filter_bar.show' defaultMessage='Show' />; const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />; @@ -31,8 +36,40 @@ export default class ColumnSettings extends React.PureComponent { const pushStr = showPushSettings && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />; const pushMeta = showPushSettings && <FormattedMessage id='notifications.column_settings.push_meta' defaultMessage='This device' />; + const settingsIssues = []; + + if (alertsEnabled && browserSupport && browserPermission !== 'granted') { + if (browserPermission === 'denied') { + settingsIssues.push( + <button + className='text-btn column-header__issue-btn' + tabIndex='0' + onClick={onRequestNotificationPermission} + > + <Icon id='exclamation-circle' /> <FormattedMessage id='notifications.permission_denied' defaultMessage='Mastodon cannot show notifications because the permission has been denied' /> + </button> + ); + } else if (browserPermission === 'default') { + settingsIssues.push( + <button + className='text-btn column-header__issue-btn' + tabIndex='0' + onClick={onRequestNotificationPermission} + > + <Icon id='exclamation-circle' /> <FormattedMessage id='notifications.request_permission' defaultMessage='Enable browser notifications' /> + </button> + ); + } + } + return ( <div> + {settingsIssues && ( + <div className='column-settings__row'> + {settingsIssues} + </div> + )} + <div className='column-settings__row'> <ClearColumnButton onClick={onClear} /> </div> |