feat: add support for audio notifications windows/macOS

Author: Bilb

_locales/en/messages.json

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

ts/components/settings/SessionNotificationGroupSettings.tsx

@@ -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/data/settings-key.ts

@@ -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/types/LocalizerKeys.ts

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

ts/types/Settings.ts

@@ -2,7 +2,7 @@ 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(); // currently, only linux does not support audio notification natively
 
 // Using `Notification::tag` has a bug on Windows 7:
 // https://github.com/electron/electron/issues/11189

ts/util/notifications.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';
@@ -117,7 +118,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;