Display new replies as browser notifications

1 files changed, 38 insertions, 3 deletions

diff --git a/src/main/assets/scripts.js b/src/main/assets/scripts.js
index 13f0cb75..73ca80df 100644
--- a/src/main/assets/scripts.js
+++ b/src/main/assets/scripts.js
@@ -57,7 +57,10 @@ const translations = {
         'loginDialog.facebook': 'Login with Facebook',
         'loginDialog.vk': 'Login with VK',
         'loginDialog.email': 'Registration',
-        'error.error': 'Error'
+        'error.error': 'Error',
+        'settings.notifications.granted': 'Enabled',
+        'settings.notifications.denied': 'Denied',
+        'settings.notifications.request': 'Enable',
     },
     'ru': {
         'message.inReplyTo': 'в ответ на',
@@ -82,7 +85,10 @@ const translations = {
         'loginDialog.facebook': 'Войти через Facebook',
         'loginDialog.vk': 'Войти через ВКонтакте',
         'loginDialog.email': 'Регистрация',
-        'error.error': 'Ошибка'
+        'error.error': 'Ошибка',
+        'settings.notifications.granted': 'Подключено',
+        'settings.notifications.denied': 'Запрещено',
+        'settings.notifications.request': 'Подключить',
     }
 };
 /* eslint-enable only-ascii/only-ascii */
@@ -189,6 +195,11 @@ function wsIncomingReply(msg) {
     document.getElementById('replies').appendChild(li);
 
     updateRepliesCounter();
+    var notify = new Notification(msg.user.uname, {
+        body: `${msg.replyQuote}\n${msg.body}`,
+        icon: msg.user.avatar
+    });
+    notify.onerror = console.log;
 }
 
 function newReply(e) {
@@ -531,6 +542,24 @@ function fetchUserUri(dataUri, callback) {
     }
 }
 
+function notificationsCheckPermissions(button) {
+    console.log(Notification.permission);
+    switch (Notification.permission.toLowerCase()) {
+        case 'granted':
+            button.innerHTML = `${i18n('settings.notifications.granted')}`;
+            button.disabled = true;
+            break;
+
+        case 'denied':
+            button.innerHTML = `${i18n('settings.notifications.denied')}`;
+            button.disabled = true;
+            break;
+
+        case 'default':
+            button.innerHTML = `${i18n('settings.notifications.request')}`;
+    }
+}
+
 /******************************************************************************/
 
 function ready(fn) {
@@ -771,6 +800,12 @@ ready(() => {
             es.close();
         }
     });
-
     embedAll();
+    const button = document.getElementById('notifications_toggle');
+    if (button) {
+        button.addEventListener('click', () => {
+            Notification.requestPermission(function(result) { notificationsCheckPermissions(button); });
+        });
+        notificationsCheckPermissions(button);
+    }
 });