Add Desktop notifications (#252)

* Add notifications

* Abide push actions

* Handle browsers not having notification support

* Ask for notification permission after loading

* Make usePermission work without live permission support

* Focus message when clicking the notification

* make const all caps

* Fix usePermission error in Safari

* Fix live permissions

* Remove userActivity and use document.visibilityState instead

* Change setting label to "desktop notifications"

* Check for notification permissions in the settings.js

src/client/state/Notifications.js

@@ -1,5 +1,8 @@
 import EventEmitter from 'events';
+import { selectRoom } from '../action/navigation';
 import cons from './cons';
+import navigation from './navigation';
+import settings from './settings';
 
 function isNotifEvent(mEvent) {
   const eType = mEvent.getType();
@@ -24,6 +27,9 @@ class Notifications extends EventEmitter {
     this._initNoti();
     this._listenEvents();
 
+    // Ask for permission by default after loading
+    window.Notification?.requestPermission();
+
     // TODO:
     window.notifications = this;
   }
@@ -158,6 +164,32 @@ class Notifications extends EventEmitter {
     [...parentIds].forEach((parentId) => this._deleteNoti(parentId, total, highlight, roomId));
   }
 
+  async _displayPopupNoti(mEvent, room) {
+    if (!settings.showNotifications) return;
+
+    const actions = this.matrixClient.getPushActionsForEvent(mEvent);
+    if (!actions?.notify) return;
+
+    if (navigation.selectedRoomId === room.roomId && document.visibilityState === 'visible') return;
+
+    if (mEvent.isEncrypted()) {
+      await mEvent.attemptDecryption(this.matrixClient.crypto);
+    }
+
+    let title;
+    if (!mEvent.sender || room.name === mEvent.sender.name) {
+      title = room.name;
+    } else if (mEvent.sender) {
+      title = `${mEvent.sender.name} (${room.name})`;
+    }
+
+    const noti = new window.Notification(title, {
+      body: mEvent.getContent().body,
+      icon: mEvent.sender?.getAvatarUrl(this.matrixClient.baseUrl, 36, 36, 'crop'),
+    });
+    noti.onclick = () => selectRoom(room.roomId, mEvent.getId());
+  }
+
   _listenEvents() {
     this.matrixClient.on('Room.timeline', (mEvent, room) => {
       if (!isNotifEvent(mEvent)) return;
@@ -172,6 +204,10 @@ class Notifications extends EventEmitter {
 
       const noti = this.getNoti(room.roomId);
       this._setNoti(room.roomId, total - noti.total, highlight - noti.highlight);
+
+      if (this.matrixClient.getSyncState() === 'SYNCING') {
+        this._displayPopupNoti(mEvent, room);
+      }
     });
 
     this.matrixClient.on('Room.receipt', (mEvent, room) => {

src/client/state/cons.js

@@ -60,6 +60,7 @@ const cons = {
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
       TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
       TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
+      TOGGLE_NOTIFICATIONS: 'TOGGLE_NOTIFICATIONS',
     },
   },
   events: {
@@ -118,6 +119,7 @@ const cons = {
       PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
       MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
       NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',
+      NOTIFICATIONS_TOGGLED: 'NOTIFICATIONS_TOGGLED',
     },
   },
 };

src/client/state/settings.js

@@ -28,6 +28,7 @@ class Settings extends EventEmitter {
     this.isPeopleDrawer = this.getIsPeopleDrawer();
     this.hideMembershipEvents = this.getHideMembershipEvents();
     this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
+    this._showNotifications = this.getShowNotifications();
 
     this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
   }
@@ -110,6 +111,20 @@ class Settings extends EventEmitter {
     return settings.isPeopleDrawer;
   }
 
+  get showNotifications() {
+    if (window.Notification?.permission !== 'granted') return false;
+    return this._showNotifications;
+  }
+
+  getShowNotifications() {
+    if (typeof this._showNotifications === 'boolean') return this._showNotifications;
+
+    const settings = getSettings();
+    if (settings === null) return true;
+    if (typeof settings.showNotifications === 'undefined') return true;
+    return settings.showNotifications;
+  }
+
   setter(action) {
     const actions = {
       [cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
@@ -140,6 +155,15 @@ class Settings extends EventEmitter {
         setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents);
         this.emit(cons.events.settings.NICKAVATAR_EVENTS_TOGGLED, this.hideNickAvatarEvents);
       },
+      [cons.actions.settings.TOGGLE_NOTIFICATIONS]: async () => {
+        if (window.Notification?.permission !== 'granted') {
+          this._showNotifications = false;
+        } else {
+          this._showNotifications = !this._showNotifications;
+        }
+        setSettings('showNotifications', this._showNotifications);
+        this.emit(cons.events.settings.NOTIFICATIONS_TOGGLED, this._showNotifications);
+      },
     };
 
     actions[action.type]?.();