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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

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',
       },
       {