From dc6e153b92adb8b34ace30f7974e6f8e441083b2 Mon Sep 17 00:00:00 2001
From: ginnyTheCat <ginnythecat@lelux.net>
Date: Fri, 18 Mar 2022 04:37:11 +0100
Subject: [PATCH] Notification sounds (#367)

* Basic notification sound support

* Add settings option for notification sounds

* Allow sound without desktop notifications
---
 public/sound/notification.ogg           | Bin 0 -> 11295 bytes
 src/app/organisms/settings/Settings.jsx |  18 +++++++-
 src/client/action/settings.js           |   6 +++
 src/client/state/Notifications.js       |  59 +++++++++++++++---------
 src/client/state/cons.js                |   2 +
 src/client/state/settings.js            |  15 ++++++
 webpack.common.js                       |   2 +-
 7 files changed, 78 insertions(+), 24 deletions(-)
 create mode 100755 public/sound/notification.ogg

diff --git a/public/sound/notification.ogg b/public/sound/notification.ogg
new file mode 100755
index 0000000000000000000000000000000000000000..93b3a0144e69dc584f2e08e52e5547d6d9fa3f59
GIT binary patch
literal 11295
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
Qi;41!p~6RfexMEh4-yrmW&i*H

literal 0
HcmV?d00001

diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index f9cc631..87f2766 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -7,7 +7,7 @@ import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import {
   toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents,
-  toggleNotifications,
+  toggleNotifications, toggleNotificationSounds,
 } from '../../../client/action/settings';
 import logout from '../../../client/action/logout';
 import { usePermission } from '../../hooks/usePermission';
@@ -158,6 +158,16 @@ function NotificationsSection() {
         options={renderOptions()}
         content={<Text variant="b3">Show notifications when new messages arrive.</Text>}
       />
+      <SettingTile
+        title="Play notification sounds"
+        options={(
+          <Toggle
+            isActive={settings.isNotificationSounds}
+            onToggle={() => { toggleNotificationSounds(); updateState({}); }}
+          />
+          )}
+        content={<Text variant="b3">Play a sound when new messages arrive.</Text>}
+      />
     </div>
   );
 }
@@ -200,7 +210,7 @@ function AboutSection() {
       <div className="set-about__branding">
         <img width="60" height="60" src={CinnySVG} alt="Cinny logo" />
         <div>
-          <Text variant="h2" weight='medium'>
+          <Text variant="h2" weight="medium">
             Cinny
             <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>{`v${cons.version}`}</span>
           </Text>
@@ -223,6 +233,10 @@ function AboutSection() {
             {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
             <Text>The <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twemoji</a> emoji art is © <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twitter, Inc and other contributors</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>
           </li>
+          <li>
+            {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
+            <Text>The <a href="https://material.io/design/sound/sound-resources.html" target="_blank" rel="noreferrer noopener">Material sound resources</a> are © <a href="https://google.com" target="_blank" rel="noreferrer noopener">Google</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>
+          </li>
         </ul>
       </div>
     </div>
diff --git a/src/client/action/settings.js b/src/client/action/settings.js
index 1192341..7b539c8 100644
--- a/src/client/action/settings.js
+++ b/src/client/action/settings.js
@@ -36,3 +36,9 @@ export function toggleNotifications() {
     type: cons.actions.settings.TOGGLE_NOTIFICATIONS,
   });
 }
+
+export function toggleNotificationSounds() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_NOTIFICATION_SOUNDS,
+  });
+}
diff --git a/src/client/state/Notifications.js b/src/client/state/Notifications.js
index 11fd665..7bcd950 100644
--- a/src/client/state/Notifications.js
+++ b/src/client/state/Notifications.js
@@ -6,6 +6,8 @@ import cons from './cons';
 import navigation from './navigation';
 import settings from './settings';
 
+import NotificationSound from '../../../public/sound/notification.ogg';
+
 function isNotifEvent(mEvent) {
   const eType = mEvent.getType();
   if (!cons.supportEventTypes.includes(eType)) return false;
@@ -185,7 +187,7 @@ class Notifications extends EventEmitter {
   }
 
   async _displayPopupNoti(mEvent, room) {
-    if (!settings.showNotifications) return;
+    if (!settings.showNotifications && !settings.isNotificationSounds) return;
 
     const actions = this.matrixClient.getPushActionsForEvent(mEvent);
     if (!actions?.notify) return;
@@ -196,28 +198,43 @@ class Notifications extends EventEmitter {
       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})`;
+    if (settings.showNotifications) {
+      let title;
+      if (!mEvent.sender || room.name === mEvent.sender.name) {
+        title = room.name;
+      } else if (mEvent.sender) {
+        title = `${mEvent.sender.name} (${room.name})`;
+      }
+
+      const iconSize = 36;
+      const icon = await renderAvatar({
+        text: mEvent.sender.name,
+        bgColor: cssColorMXID(mEvent.getSender()),
+        imageSrc: mEvent.sender?.getAvatarUrl(this.matrixClient.baseUrl, iconSize, iconSize, 'crop'),
+        size: iconSize,
+        borderRadius: 8,
+        scale: 8,
+      });
+
+      const noti = new window.Notification(title, {
+        body: mEvent.getContent().body,
+        icon,
+        silent: settings.isNotificationSounds,
+      });
+      if (settings.isNotificationSounds) {
+        noti.onshow = () => this._playNotiSounds();
+      }
+      noti.onclick = () => selectRoom(room.roomId, mEvent.getId());
+    } else {
+      this._playNotiSounds();
     }
+  }
 
-    const iconSize = 36;
-    const icon = await renderAvatar({
-      text: mEvent.sender.name,
-      bgColor: cssColorMXID(mEvent.getSender()),
-      imageSrc: mEvent.sender?.getAvatarUrl(this.matrixClient.baseUrl, iconSize, iconSize, 'crop'),
-      size: iconSize,
-      borderRadius: 8,
-      scale: 8,
-    });
-
-    const noti = new window.Notification(title, {
-      body: mEvent.getContent().body,
-      icon,
-    });
-    noti.onclick = () => selectRoom(room.roomId, mEvent.getId());
+  _playNotiSounds() {
+    if (!this._notiAudio) {
+      this._notiAudio = new Audio(NotificationSound);
+    }
+    this._notiAudio.play();
   }
 
   _listenEvents() {
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index 6ec6c27..862bf5c 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -67,6 +67,7 @@ const cons = {
       TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
       TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
       TOGGLE_NOTIFICATIONS: 'TOGGLE_NOTIFICATIONS',
+      TOGGLE_NOTIFICATION_SOUNDS: 'TOGGLE_NOTIFICATION_SOUNDS',
     },
   },
   events: {
@@ -135,6 +136,7 @@ const cons = {
       MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
       NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',
       NOTIFICATIONS_TOGGLED: 'NOTIFICATIONS_TOGGLED',
+      NOTIFICATION_SOUNDS_TOGGLED: 'NOTIFICATION_SOUNDS_TOGGLED',
     },
   },
 };
diff --git a/src/client/state/settings.js b/src/client/state/settings.js
index 25d0b2d..0f476ef 100644
--- a/src/client/state/settings.js
+++ b/src/client/state/settings.js
@@ -29,6 +29,7 @@ class Settings extends EventEmitter {
     this.hideMembershipEvents = this.getHideMembershipEvents();
     this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
     this._showNotifications = this.getShowNotifications();
+    this.isNotificationSounds = this.getIsNotificationSounds();
 
     this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
   }
@@ -125,6 +126,15 @@ class Settings extends EventEmitter {
     return settings.showNotifications;
   }
 
+  getIsNotificationSounds() {
+    if (typeof this.isNotificationSounds === 'boolean') return this.isNotificationSounds;
+
+    const settings = getSettings();
+    if (settings === null) return true;
+    if (typeof settings.isNotificationSounds === 'undefined') return true;
+    return settings.isNotificationSounds;
+  }
+
   setter(action) {
     const actions = {
       [cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
@@ -164,6 +174,11 @@ class Settings extends EventEmitter {
         setSettings('showNotifications', this._showNotifications);
         this.emit(cons.events.settings.NOTIFICATIONS_TOGGLED, this._showNotifications);
       },
+      [cons.actions.settings.TOGGLE_NOTIFICATION_SOUNDS]: () => {
+        this.isNotificationSounds = !this.isNotificationSounds;
+        setSettings('isNotificationSounds', this.isNotificationSounds);
+        this.emit(cons.events.settings.NOTIFICATION_SOUNDS_TOGGLED, this.isNotificationSounds);
+      },
     };
 
     actions[action.type]?.();
diff --git a/webpack.common.js b/webpack.common.js
index dd45a06..9ff58da 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -39,7 +39,7 @@ module.exports = {
         use: ['html-loader'],
       },
       {
-        test: /\.(png|jpe?g|gif|otf|ttf|woff|woff2)$/,
+        test: /\.(png|jpe?g|gif|otf|ttf|woff|woff2|ogg)$/,
         type: 'asset/resource',
       },
       {