import { usePendingItems as preferPendingItems } from 'mastodon/initial_state';
import compareId from 'mastodon/compare_id';
import { searchTextFromRawStatus } from 'mastodon/actions/importer/normalizer';
+import { requestNotificationPermission } from '../utils/notifications';
export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
export const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP';
export const NOTIFICATIONS_MOUNT = 'NOTIFICATIONS_MOUNT';
export const NOTIFICATIONS_UNMOUNT = 'NOTIFICATIONS_UNMOUNT';
+
export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ';
+export const NOTIFICATIONS_SET_BROWSER_SUPPORT = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
+export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
+
defineMessages({
mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' },
group: { id: 'notifications.group', defaultMessage: '{count} notifications' },
type: NOTIFICATIONS_UNMOUNT,
});
+
export const markNotificationsAsRead = () => ({
type: NOTIFICATIONS_MARK_AS_READ,
});
+
+// Browser support
+export function setupBrowserNotifications() {
+ return dispatch => {
+ dispatch(setBrowserSupport('Notification' in window));
+ if ('Notification' in window) {
+ dispatch(setBrowserPermission(Notification.permission));
+ }
+
+ if ('Notification' in window && 'permissions' in navigator) {
+ navigator.permissions.query({ name: 'notifications' }).then((status) => {
+ status.onchange = () => dispatch(setBrowserPermission(Notification.permission));
+ });
+ }
+ };
+}
+
+export function requestBrowserPermission(callback = noOp) {
+ return dispatch => {
+ requestNotificationPermission((permission) => {
+ dispatch(setBrowserPermission(permission));
+ callback(permission);
+ });
+ };
+};
+
+export function setBrowserSupport (value) {
+ return {
+ type: NOTIFICATIONS_SET_BROWSER_SUPPORT,
+ value,
+ };
+}
+
+export function setBrowserPermission (value) {
+ return {
+ type: NOTIFICATIONS_SET_BROWSER_PERMISSION,
+ value,
+ };
+}
import { changeSetting, saveSettings } from './settings';
+import { requestBrowserPermission } from './notifications';
export const INTRODUCTION_VERSION = 20181216044202;
export const closeOnboarding = () => dispatch => {
dispatch(changeSetting(['introductionVersion'], INTRODUCTION_VERSION));
dispatch(saveSettings());
+
+ dispatch(requestBrowserPermission((permission) => {
+ if (permission === 'granted') {
+ dispatch(changeSetting(['notifications', 'alerts', 'follow'], true));
+ dispatch(changeSetting(['notifications', 'alerts', 'favourite'], true));
+ dispatch(changeSetting(['notifications', 'alerts', 'reblog'], true));
+ dispatch(changeSetting(['notifications', 'alerts', 'mention'], true));
+ dispatch(changeSetting(['notifications', 'alerts', 'poll'], true));
+ dispatch(saveSettings());
+ }
+ }));
};
onMove: PropTypes.func,
onClick: PropTypes.func,
appendContent: PropTypes.node,
+ collapseIssues: PropTypes.bool,
};
state = {
}
render () {
- const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent } = this.props;
+ const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props;
const { collapsed, animating } = this.state;
const wrapperClassName = classNames('column-header__wrapper', {
}
if (children || (multiColumn && this.props.onPin)) {
- collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><Icon id='sliders' /></button>;
+ collapseButton = (
+ <button
+ className={collapsibleButtonClassName}
+ title={formatMessage(collapsed ? messages.show : messages.hide)}
+ aria-label={formatMessage(collapsed ? messages.show : messages.hide)}
+ aria-pressed={collapsed ? 'false' : 'true'}
+ onClick={this.handleToggleClick}
+ >
+ <i className='icon-with-badge'>
+ <Icon id='sliders' />
+ {collapseIssues && <i className='icon-with-badge__issue-badge' />}
+ </i>
+ </button>
+ );
}
const hasTitle = icon && title;
const formatNumber = num => num > 40 ? '40+' : num;
-const IconWithBadge = ({ id, count, className }) => (
+const IconWithBadge = ({ id, count, issueBadge, className }) => (
<i className='icon-with-badge'>
<Icon id={id} fixedWidth className={className} />
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
+ {issueBadge && <i className='icon-with-badge__issue-badge' />}
</i>
);
IconWithBadge.propTypes = {
id: PropTypes.string.isRequired,
count: PropTypes.number.isRequired,
+ issueBadge: PropTypes.bool,
className: PropTypes.string,
};
import { FormattedMessage } from 'react-intl';
import ClearColumnButton from './clear_column_button';
import SettingToggle from './setting_toggle';
+import Icon from 'mastodon/components/icon';
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) => {
}
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' />;
const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed');
const pushStr = showPushSettings && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />;
+ 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>
import ColumnSettings from '../components/column_settings';
import { changeSetting } from '../../../actions/settings';
import { setFilter } from '../../../actions/notifications';
-import { clearNotifications } from '../../../actions/notifications';
+import { clearNotifications, requestBrowserPermission } from '../../../actions/notifications';
import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications';
import { openModal } from '../../../actions/modal';
+import { showAlert } from '../../../actions/alerts';
const messages = defineMessages({
clearMessage: { id: 'notifications.clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all your notifications?' },
clearConfirm: { id: 'notifications.clear', defaultMessage: 'Clear notifications' },
+ permissionDenied: { id: 'notifications.permission_denied', defaultMessage: 'Cannot enable desktop notifications as permission has been denied.' },
});
const mapStateToProps = state => ({
settings: state.getIn(['settings', 'notifications']),
pushSettings: state.get('push_notifications'),
+ alertsEnabled: state.getIn(['settings', 'notifications', 'alerts']).includes(true),
+ browserSupport: state.getIn(['notifications', 'browserSupport']),
+ browserPermission: state.getIn(['notifications', 'browserPermission']),
});
const mapDispatchToProps = (dispatch, { intl }) => ({
onChange (path, checked) {
if (path[0] === 'push') {
- dispatch(changePushNotifications(path.slice(1), checked));
+ if (checked && typeof window.Notification !== 'undefined' && Notification.permission !== 'granted') {
+ dispatch(requestBrowserPermission((permission) => {
+ if (permission === 'granted') {
+ dispatch(changePushNotifications(path.slice(1), checked));
+ } else {
+ dispatch(showAlert(undefined, messages.permissionDenied));
+ }
+ }));
+ } else {
+ dispatch(changePushNotifications(path.slice(1), checked));
+ }
} else if (path[0] === 'quickFilter') {
dispatch(changeSetting(['notifications', ...path], checked));
dispatch(setFilter('all'));
+ } else if (path[0] === 'alerts' && checked && typeof window.Notification !== 'undefined' && Notification.permission !== 'granted') {
+ if (checked && typeof window.Notification !== 'undefined' && Notification.permission !== 'granted') {
+ dispatch(requestBrowserPermission((permission) => {
+ if (permission === 'granted') {
+ dispatch(changeSetting(['notifications', ...path], checked));
+ } else {
+ dispatch(showAlert(undefined, messages.permissionDenied));
+ }
+ }));
+ } else {
+ dispatch(changeSetting(['notifications', ...path], checked));
+ }
} else {
dispatch(changeSetting(['notifications', ...path], checked));
}
}));
},
+ onRequestNotificationPermission () {
+ dispatch(requestBrowserPermission());
+ },
+
});
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ColumnSettings));
numPending: state.getIn(['notifications', 'pendingItems'], ImmutableList()).size,
lastReadId: state.getIn(['notifications', 'readMarkerId']),
canMarkAsRead: state.getIn(['notifications', 'readMarkerId']) !== '0' && getNotifications(state).some(item => item !== null && compareId(item.get('id'), state.getIn(['notifications', 'readMarkerId'])) > 0),
+ needsNotificationPermission: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) !== 'granted',
});
export default @connect(mapStateToProps)
numPending: PropTypes.number,
lastReadId: PropTypes.string,
canMarkAsRead: PropTypes.bool,
+ needsNotificationPermission: PropTypes.bool,
};
static defaultProps = {
pinned={pinned}
multiColumn={multiColumn}
extraButton={extraButton}
+ collapseIssues={this.props.needsNotificationPermission}
>
<ColumnSettingsContainer />
</ColumnHeader>
const mapStateToProps = state => ({
count: state.getIn(['notifications', 'unread']),
+ issueBadge: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) !== 'granted',
id: 'bell',
});
navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage);
}
- if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') {
- window.setTimeout(() => Notification.requestPermission(), 120 * 1000);
- }
-
this.props.dispatch(fetchMarkers());
this.props.dispatch(expandHomeTimeline());
this.props.dispatch(expandNotifications());
import * as registerPushNotifications from './actions/push_notifications';
+import { setupBrowserNotifications } from './actions/notifications';
import { default as Mastodon, store } from './containers/mastodon';
import React from 'react';
import ReactDOM from 'react-dom';
const props = JSON.parse(mountNode.getAttribute('data-props'));
ReactDOM.render(<Mastodon {...props} />, mountNode);
+ store.dispatch(setupBrowserNotifications());
if (process.env.NODE_ENV === 'production') {
// avoid offline in dev mode because it's harder to debug
require('offline-plugin/runtime').install();
NOTIFICATIONS_MOUNT,
NOTIFICATIONS_UNMOUNT,
NOTIFICATIONS_MARK_AS_READ,
+ NOTIFICATIONS_SET_BROWSER_SUPPORT,
+ NOTIFICATIONS_SET_BROWSER_PERMISSION,
} from '../actions/notifications';
import {
ACCOUNT_BLOCK_SUCCESS,
readMarkerId: '0',
isTabVisible: true,
isLoading: false,
+ browserSupport: false,
+ browserPermission: 'default',
});
const notificationToMap = notification => ImmutableMap({
case NOTIFICATIONS_MARK_AS_READ:
const lastNotification = state.get('items').find(item => item !== null);
return lastNotification ? recountUnread(state, lastNotification.get('id')) : state;
+ case NOTIFICATIONS_SET_BROWSER_SUPPORT:
+ return state.set('browserSupport', action.value);
+ case NOTIFICATIONS_SET_BROWSER_PERMISSION:
+ return state.set('browserPermission', action.value);
default:
return state;
}
notifications: ImmutableMap({
alerts: ImmutableMap({
- follow: true,
+ follow: false,
follow_request: false,
- favourite: true,
- reblog: true,
- mention: true,
- poll: true,
+ favourite: false,
+ reblog: false,
+ mention: false,
+ poll: false,
}),
quickFilter: ImmutableMap({
--- /dev/null
+// Handles browser quirks, based on
+// https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
+
+const checkNotificationPromise = () => {
+ try {
+ Notification.requestPermission().then();
+ } catch(e) {
+ return false;
+ }
+
+ return true;
+};
+
+const handlePermission = (permission, callback) => {
+ // Whatever the user answers, we make sure Chrome stores the information
+ if(!('permission' in Notification)) {
+ Notification.permission = permission;
+ }
+
+ callback(Notification.permission);
+};
+
+export const requestNotificationPermission = (callback) => {
+ if (checkNotificationPromise()) {
+ Notification.requestPermission().then((permission) => handlePermission(permission, callback));
+ } else {
+ Notification.requestPermission((permission) => handlePermission(permission, callback));
+ }
+};
line-height: 14px;
color: $primary-text-color;
}
+
+ &__issue-badge {
+ position: absolute;
+ left: 11px;
+ bottom: 1px;
+ display: block;
+ background: $error-red;
+ border-radius: 50%;
+ width: 0.625rem;
+ height: 0.625rem;
+ }
}
.column-link--transparent .icon-with-badge__badge {
cursor: pointer;
}
+.column-header__issue-btn {
+ color: $warning-red;
+
+ &:hover {
+ color: $error-red;
+ text-decoration: underline;
+ }
+}
+
.column-header__icon {
display: inline-block;
margin-right: 5px;
cat aescling's git repositories / mastodon.git / commitdiff