Make the notification volume adjustable

Author: Ruizhe Pang

src/renderer/__mocks__/state-mocks.ts

@@ -93,6 +93,7 @@ const mockNotificationSettings: NotificationSettingsState = {
   markAsDoneOnOpen: false,
   markAsDoneOnUnsubscribe: false,
   delayNotificationState: false,
+  notificationVolume: 20,
 };
 
 const mockSystemSettings: SystemSettingsState = {

src/renderer/components/settings/NotificationSettings.tsx

@@ -246,6 +246,26 @@ export const NotificationSettings: FC = () => {
             </Text>
           }
         />
+
+        <Box>
+          <Text as="label" htmlFor="notificationVolume">
+            Notification Volume: {settings.notificationVolume}%
+          </Text>
+          <input
+            id="notificationVolume"
+            type="range"
+            min={0}
+            max={100}
+            step={1}
+            value={settings.notificationVolume}
+            onChange={(evt) =>
+              updateSetting(
+                'notificationVolume',
+                Number.parseInt(evt.target.value, 10),
+              )
+            }
+          />
+        </Box>
       </Stack>
     </fieldset>
   );

src/renderer/context/App.tsx

@@ -85,6 +85,7 @@ const defaultNotificationSettings: NotificationSettingsState = {
   markAsDoneOnOpen: false,
   markAsDoneOnUnsubscribe: false,
   delayNotificationState: false,
+  notificationVolume: 20,
 };
 
 const defaultSystemSettings: SystemSettingsState = {

src/renderer/types.ts

@@ -81,6 +81,7 @@ export interface NotificationSettingsState {
   markAsDoneOnOpen: boolean;
   markAsDoneOnUnsubscribe: boolean;
   delayNotificationState: boolean;
+  notificationVolume: number;
 }
 
 export interface SystemSettingsState {

src/renderer/utils/notifications/native.test.ts

@@ -134,4 +134,33 @@ describe('renderer/utils/notifications/native.ts', () => {
       expect(window.Audio.prototype.play).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('triggerNativeNotifications', () => {
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should raise only sound notification with correct volume', () => {
+      const settings: SettingsState = {
+        ...defaultSettings,
+        playSound: true,
+        showNotifications: false,
+        notificationVolume: 80,
+      };
+
+      const raiseSoundNotificationMock = jest.spyOn(
+        native,
+        'raiseSoundNotification',
+      );
+      jest.spyOn(native, 'raiseNativeNotification');
+
+      native.triggerNativeNotifications([], mockAccountNotifications, {
+        auth: mockAuth,
+        settings,
+      });
+
+      expect(raiseSoundNotificationMock).toHaveBeenCalledWith(0.8);
+      expect(native.raiseNativeNotification).not.toHaveBeenCalled();
+    });
+  });
 });

src/renderer/utils/notifications/native.ts

@@ -48,7 +48,7 @@ export const triggerNativeNotifications = (
   }
 
   if (state.settings.playSound) {
-    raiseSoundNotification();
+    raiseSoundNotification(state.settings.notificationVolume / 100);
   }
 
   if (state.settings.showNotifications) {
@@ -86,7 +86,7 @@ export const raiseNativeNotification = (notifications: Notification[]) => {
   return nativeNotification;
 };
 
-export const raiseSoundNotification = () => {
+export const raiseSoundNotification = (volume = 0.2) => {
   const audio = new Audio(
     path.join(
       __dirname,
@@ -96,6 +96,6 @@ export const raiseSoundNotification = () => {
       Constants.NOTIFICATION_SOUND,
     ),
   );
-  audio.volume = 0.2;
+  audio.volume = volume;
   audio.play();
 };