Merge pull request oxen-io#2534 from Bilb/add-settings-audio-notifications

Add support for audio notifications Windows/MacOS/Linux

Author: Bilb

_locales/en/messages.json

@@ -358,6 +358,7 @@
   "appearanceSettingsTitle": "Appearance",
   "privacySettingsTitle": "Privacy",
   "notificationsSettingsTitle": "Notifications",
+  "audioNotificationsSettingsTitle": "Audio Notifications",
   "notificationsSettingsContent": "Notification Content",
   "notificationPreview": "Preview",
   "recoveryPhraseEmpty": "Enter your recovery phrase",

sound/new_message.mp3

@@ -3,6 +3,7 @@ import React from 'react';
 import useUpdate from 'react-use/lib/useUpdate';
 import styled from 'styled-components';
 import { SettingsKey } from '../../data/settings-key';
+import { isAudioNotificationSupported } from '../../types/Settings';
 import { Notifications } from '../../util/notifications';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionRadioGroup } from '../basic/SessionRadioGroup';
@@ -30,10 +31,15 @@ export const SessionNotificationGroupSettings = (props: { hasPassword: boolean |
   if (props.hasPassword === null) {
     return null;
   }
-  const initialItem =
+
+  const initialNotificationEnabled =
     window.getSettingValue(SettingsKey.settingsNotification) || NOTIFICATION.MESSAGE;
 
-  const notificationsAreEnabled = initialItem && initialItem !== NOTIFICATION.OFF;
+  const initialAudioNotificationEnabled =
+    window.getSettingValue(SettingsKey.settingsAudioNotification) || false;
+
+  const notificationsAreEnabled =
+    initialNotificationEnabled && initialNotificationEnabled !== NOTIFICATION.OFF;
 
   const items = [
     {
@@ -58,7 +64,7 @@ export const SessionNotificationGroupSettings = (props: { hasPassword: boolean |
       {
         conversationId: `preview-notification-${Date.now()}`,
         message:
-          items.find(m => m.value === initialItem)?.label ||
+          items.find(m => m.value === initialNotificationEnabled)?.label ||
           window?.i18n?.('messageBody') ||
           'Message body',
         title: window.i18n('notificationPreview'),
@@ -83,14 +89,27 @@ export const SessionNotificationGroupSettings = (props: { hasPassword: boolean |
         title={window.i18n('notificationsSettingsTitle')}
         active={notificationsAreEnabled}
       />
+      {notificationsAreEnabled && isAudioNotificationSupported() && (
+        <SessionToggleWithDescription
+          onClickToggle={async () => {
+            await window.setSettingValue(
+              SettingsKey.settingsAudioNotification,
+              !initialAudioNotificationEnabled
+            );
+            forceUpdate();
+          }}
+          title={window.i18n('audioNotificationsSettingsTitle')}
+          active={initialAudioNotificationEnabled}
+        />
+      )}
       {notificationsAreEnabled ? (
         <SessionSettingsItemWrapper
           title={window.i18n('notificationsSettingsContent')}
           description={window.i18n('notificationSettingsDialog')}
           inline={false}
         >
           <SessionRadioGroup
-            initialItem={initialItem}
+            initialItem={initialNotificationEnabled}
             group={SettingsKey.settingsNotification}
             items={items}
             onClick={async (selectedRadioValue: string) => {

ts/components/settings/SessionNotificationGroupSettings.tsx

@@ -8,6 +8,7 @@ const settingsLinkPreview = 'link-preview-setting';
 const settingsStartInTray = 'start-in-tray-setting';
 const settingsOpengroupPruning = 'prune-setting';
 const settingsNotification = 'notification-setting';
+const settingsAudioNotification = 'audio-notification-setting';
 
 export const SettingsKey = {
   settingsReadReceipt,
@@ -19,4 +20,5 @@ export const SettingsKey = {
   settingsStartInTray,
   settingsOpengroupPruning,
   settingsNotification,
+  settingsAudioNotification,
 };

ts/data/settings-key.ts

@@ -63,7 +63,7 @@ describe('Settings', () => {
       });
 
       it('should return true', () => {
-        assert.isFalse(Settings.isAudioNotificationSupported());
+        assert.isTrue(Settings.isAudioNotificationSupported());
       });
     });
   });

ts/test/types/Settings_test.ts

@@ -118,6 +118,7 @@ export type LocalizerKeys =
   | 'appMenuUnhide'
   | 'timerOption_30_minutes_abbreviated'
   | 'pruneSettingDescription'
+  | 'audioNotificationsSettingsTitle'
   | 'voiceMessage'
   | 'primaryColorPink'
   | 'changePasswordTitle'

ts/types/LocalizerKeys.ts

@@ -2,7 +2,8 @@ import * as OS from '../OS';
 
 const MIN_WINDOWS_VERSION = '8.0.0';
 
-export const isAudioNotificationSupported = () => OS.isWindows(MIN_WINDOWS_VERSION) || OS.isMacOS();
+export const isAudioNotificationSupported = () =>
+  OS.isWindows(MIN_WINDOWS_VERSION) || OS.isMacOS() || OS.isLinux();
 
 // Using `Notification::tag` has a bug on Windows 7:
 // https://github.com/electron/electron/issues/11189

ts/types/Settings.ts

@@ -1,4 +1,5 @@
 import { debounce, last } from 'lodash';
+import { SettingsKey } from '../data/settings-key';
 import { getStatus } from '../notifications';
 import { UserSetting } from '../notifications/getStatus';
 import { isMacOS } from '../OS';
@@ -21,6 +22,8 @@ function filter(text?: string) {
     .replace(/>/g, '>');
 }
 
+let sound: any;
+
 export type SessionNotification = {
   conversationId: string;
   iconUrl: string | null;
@@ -117,7 +120,8 @@ function update(forceRefresh = false) {
   }
 
   const isAppFocused = isWindowFocused();
-  const isAudioNotificationEnabled = (Storage.get('audio-notification') as boolean) || false;
+  const isAudioNotificationEnabled =
+    (Storage.get(SettingsKey.settingsAudioNotification) as boolean) || false;
   const audioNotificationSupported = isAudioNotificationSupported();
   // const isNotificationGroupingSupported = Settings.isNotificationGroupingSupported();
   const numNotifications = currentNotifications.length;
@@ -216,10 +220,16 @@ function update(forceRefresh = false) {
   }
 
   window.drawAttention();
+  if (status.shouldPlayNotificationSound) {
+    if (!sound) {
+      sound = new Audio('sound/new_message.mp3');
+    }
+    void sound.play();
+  }
   lastNotificationDisplayed = new Notification(title || '', {
     body: window.platform === 'linux' ? filter(message) : message,
     icon: iconUrl || undefined,
-    silent: !status.shouldPlayNotificationSound,
+    silent: true,
   });
   lastNotificationDisplayed.onclick = () => {
     window.openFromNotification(lastNotification.conversationId);