From 3de376650c700be81d893554b90ac8ce27646333 Mon Sep 17 00:00:00 2001 From: Fire Demon Date: Wed, 28 Oct 2020 21:22:04 -0500 Subject: Make push notifications optional --- app/javascript/flavours/glitch/actions/notifications.js | 7 ++++++- .../glitch/actions/push_notifications/registerer.js | 4 +++- .../components/notifications_permission_banner.js | 7 ++++++- .../flavours/glitch/styles/components/columns.scss | 14 ++++++++------ app/javascript/flavours/glitch/util/initial_state.js | 2 ++ 5 files changed, 25 insertions(+), 9 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js index eb7087027..583cc87a5 100644 --- a/app/javascript/flavours/glitch/actions/notifications.js +++ b/app/javascript/flavours/glitch/actions/notifications.js @@ -13,7 +13,7 @@ import { defineMessages } from 'react-intl'; import { List as ImmutableList } from 'immutable'; import { unescapeHTML } from 'flavours/glitch/util/html'; import { getFiltersRegex } from 'flavours/glitch/selectors'; -import { usePendingItems as preferPendingItems } from 'flavours/glitch/util/initial_state'; +import { usePendingItems as preferPendingItems, webPushEnabled } from 'flavours/glitch/util/initial_state'; import compareId from 'flavours/glitch/util/compare_id'; import { searchTextFromRawStatus } from 'flavours/glitch/actions/importer/normalizer'; import { requestNotificationPermission } from 'flavours/glitch/util/notifications'; @@ -336,6 +336,11 @@ export function markNotificationsAsRead() { // Browser support export function setupBrowserNotifications() { return dispatch => { + if (!webPushEnabled) { + dispatch(setBrowserSupport(false)); + return; + } + dispatch(setBrowserSupport('Notification' in window)); if ('Notification' in window) { dispatch(setBrowserPermission(Notification.permission)); diff --git a/app/javascript/flavours/glitch/actions/push_notifications/registerer.js b/app/javascript/flavours/glitch/actions/push_notifications/registerer.js index 8fdb239f7..1f9ebe569 100644 --- a/app/javascript/flavours/glitch/actions/push_notifications/registerer.js +++ b/app/javascript/flavours/glitch/actions/push_notifications/registerer.js @@ -1,7 +1,9 @@ import api from 'flavours/glitch/util/api'; +import { webPushEnabled } from 'flavours/glitch/util/initial_state'; import { pushNotificationsSetting } from 'flavours/glitch/util/settings'; import { setBrowserSupport, setSubscription, clearSubscription } from './setter'; + // Taken from https://www.npmjs.com/package/web-push const urlBase64ToUint8Array = (base64String) => { const padding = '='.repeat((4 - base64String.length % 4) % 4); @@ -49,7 +51,7 @@ const sendSubscriptionToBackend = (getState, subscription, me) => { }; // Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload -const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager' in window && 'getKey' in PushSubscription.prototype); +const supportsPushNotifications = (webPushEnabled && 'serviceWorker' in navigator && 'PushManager' in window && 'getKey' in PushSubscription.prototype); export function register () { return (dispatch, getState) => { diff --git a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js index 8e77f5a03..0ba929711 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js +++ b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js @@ -17,12 +17,17 @@ class NotificationsPermissionBanner extends React.PureComponent { this.props.dispatch(requestBrowserPermission()); } + handleClickDisable = () => { + window.location = '/settings/preferences/notifications'; + } + render () { return (

}} />

- + +
); } diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index be32ae52e..1109f17ea 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -696,15 +696,12 @@ } .notifications-permission-banner { - padding: 30px; + padding: 14px; border-bottom: 1px solid lighten($ui-base-color, 8%); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + text-align: center; h2 { - font-size: 16px; + font-size: 14px; font-weight: 500; margin-bottom: 15px; text-align: center; @@ -715,4 +712,9 @@ margin-bottom: 15px; text-align: center; } + + .button { + margin-left: 7px; + margin-right: 7px; + } } diff --git a/app/javascript/flavours/glitch/util/initial_state.js b/app/javascript/flavours/glitch/util/initial_state.js index 911468e6f..05868970c 100644 --- a/app/javascript/flavours/glitch/util/initial_state.js +++ b/app/javascript/flavours/glitch/util/initial_state.js @@ -11,6 +11,8 @@ const initialState = element && function () { const getMeta = (prop) => initialState && initialState.meta && initialState.meta[prop]; +export const webPushEnabled = getMeta('web_push') === true; + export const reduceMotion = getMeta('reduce_motion'); export const autoPlayGif = getMeta('auto_play_gif'); export const displaySensitiveMedia = getMeta('display_sensitive_media'); -- cgit