Skip to content

Commit 17d9c58

Browse files
RuizhePangsetchy
RuizhePang
and
setchy
authored
feat: make the volume of notifications adjustable (#1967)
* Make the notification volume adjustable * Modify isNaN(val) to Number.isNaN(val) * Update the UI * move variable(notificationVolume) to SystemSettingsState * adjust styling, use default value Signed-off-by: Adam Setch <[email protected]> * update snapshots Signed-off-by: Adam Setch <[email protected]> * adjust styling, use default value Signed-off-by: Adam Setch <[email protected]> * adjust styling, use default value Signed-off-by: Adam Setch <[email protected]> * update snapshots Signed-off-by: Adam Setch <[email protected]> * update volume icons Signed-off-by: Adam Setch <[email protected]> --------- Signed-off-by: Adam Setch <[email protected]> Co-authored-by: Adam Setch <[email protected]>
1 parent 36a5f0f commit 17d9c58

File tree

9 files changed

+309
-38
lines changed

9 files changed

+309
-38
lines changed

‎src/renderer/__mocks__/state-mocks.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ const mockSystemSettings: SystemSettingsState = {
101101
showNotificationsCountInTray: true,
102102
showNotifications: true,
103103
playSound: true,
104+
notificationVolume: 20,
104105
useAlternateIdleIcon: false,
105106
openAtStartup: false,
106107
};

‎src/renderer/components/icons/VolumeDownIcon.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { FC } from 'react';
2+
3+
export const VolumeDownIcon: FC = () => (
4+
<svg
5+
className="size-4"
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 24 24"
8+
width="24"
9+
height="24"
10+
role="img"
11+
aria-label="Volume Down Icon"
12+
>
13+
<g transform="translate(2, 0)">
14+
<path d="M11.553 3.064A.75.75 0 0 1 12 3.75v16.5a.75.75 0 0 1-1.255.555L5.46 16H2.75A1.75 1.75 0 0 1 1 14.25v-4.5C1 8.784 1.784 8 2.75 8h2.71l5.285-4.805a.752.752 0 0 1 .808-.13ZM10.5 5.445l-4.245 3.86a.748.748 0 0 1-.505.195h-3a.25.25 0 0 0-.25.25v4.5c0 .138.112.25.25.25h3c.187 0 .367.069.505.195l4.245 3.86z" />
15+
<path d="M16.243 7.757a.75.75 0 1 0-1.061 1.061 4.5 4.5 0 0 1 0 6.364.75.75 0 0 0 1.06 1.06 6 6 0 0 0 0-8.485Z" />
16+
</g>
17+
</svg>
18+
);

‎src/renderer/components/icons/VolumeUpIcon.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { FC } from 'react';
2+
3+
export const VolumeUpIcon: FC = () => (
4+
<svg
5+
className="size-4"
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 24 24"
8+
width="24"
9+
height="24"
10+
role="img"
11+
aria-label="Volume Up Icon"
12+
>
13+
<path d="M11.553 3.064A.75.75 0 0 1 12 3.75v16.5a.75.75 0 0 1-1.255.555L5.46 16H2.75A1.75 1.75 0 0 1 1 14.25v-4.5C1 8.784 1.784 8 2.75 8h2.71l5.285-4.805a.752.752 0 0 1 .808-.13ZM10.5 5.445l-4.245 3.86a.748.748 0 0 1-.505.195h-3a.25.25 0 0 0-.25.25v4.5c0 .138.112.25.25.25h3c.187 0 .367.069.505.195l4.245 3.86Zm8.218-1.223a.75.75 0 0 1 1.06 0c4.296 4.296 4.296 11.26 0 15.556a.75.75 0 0 1-1.06-1.06 9.5 9.5 0 0 0 0-13.436.75.75 0 0 1 0-1.06Z" />
14+
<path d="M16.243 7.757a.75.75 0 1 0-1.061 1.061 4.5 4.5 0 0 1 0 6.364.75.75 0 0 0 1.06 1.06 6 6 0 0 0 0-8.485Z" />
15+
</svg>
16+
);

‎src/renderer/components/settings/SystemSettings.tsx‎

Lines changed: 78 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
import { type FC, useContext } from 'react';
22

3-
import { DeviceDesktopIcon } from '@primer/octicons-react';
4-
import { Box, Stack, Text } from '@primer/react';
3+
import { DeviceDesktopIcon, SyncIcon } from '@primer/octicons-react';
4+
import {
5+
Box,
6+
Button,
7+
ButtonGroup,
8+
IconButton,
9+
Stack,
10+
Text,
11+
} from '@primer/react';
512

613
import { APPLICATION } from '../../../shared/constants';
714
import { isLinux, isMacOS } from '../../../shared/platform';
8-
import { AppContext } from '../../context/App';
15+
import { AppContext, defaultSettings } from '../../context/App';
916
import { OpenPreference } from '../../types';
1017
import { Constants } from '../../utils/constants';
1118
import { Checkbox } from '../fields/Checkbox';
1219
import { RadioGroup } from '../fields/RadioGroup';
20+
import { VolumeDownIcon } from '../icons/VolumeDownIcon';
21+
import { VolumeUpIcon } from '../icons/VolumeUpIcon';
1322
import { Title } from '../primitives/Title';
1423

1524
export const SystemSettings: FC = () => {
@@ -70,12 +79,72 @@ export const SystemSettings: FC = () => {
7079
}
7180
/>
7281

73-
<Checkbox
74-
name="playSound"
75-
label="Play sound"
76-
checked={settings.playSound}
77-
onChange={(evt) => updateSetting('playSound', evt.target.checked)}
78-
/>
82+
<Box>
83+
<Stack
84+
direction="horizontal"
85+
gap="condensed"
86+
align="center"
87+
className="text-sm"
88+
>
89+
<Checkbox
90+
name="playSound"
91+
label="Play sound"
92+
checked={settings.playSound}
93+
onChange={(evt) => updateSetting('playSound', evt.target.checked)}
94+
/>
95+
96+
<ButtonGroup className="ml-2" hidden={!settings.playSound}>
97+
<IconButton
98+
aria-label="Volume down"
99+
size="small"
100+
icon={VolumeDownIcon}
101+
unsafeDisableTooltip={true}
102+
onClick={() => {
103+
const newVolume = Math.max(
104+
settings.notificationVolume - 10,
105+
0,
106+
);
107+
updateSetting('notificationVolume', newVolume);
108+
}}
109+
data-testid="settings-volume-down"
110+
/>
111+
112+
<Button aria-label="Volume percentage" size="small" disabled>
113+
{settings.notificationVolume.toFixed(0)}%
114+
</Button>
115+
116+
<IconButton
117+
aria-label="Volume up"
118+
size="small"
119+
icon={VolumeUpIcon}
120+
unsafeDisableTooltip={true}
121+
onClick={() => {
122+
const newVolume = Math.min(
123+
settings.notificationVolume + 10,
124+
100,
125+
);
126+
updateSetting('notificationVolume', newVolume);
127+
}}
128+
data-testid="settings-volume-up"
129+
/>
130+
131+
<IconButton
132+
aria-label="Reset volume"
133+
size="small"
134+
variant="danger"
135+
icon={SyncIcon}
136+
unsafeDisableTooltip={true}
137+
onClick={() => {
138+
updateSetting(
139+
'notificationVolume',
140+
defaultSettings.notificationVolume,
141+
);
142+
}}
143+
data-testid="settings-volume-reset"
144+
/>
145+
</ButtonGroup>
146+
</Stack>
147+
</Box>
79148

80149
<Checkbox
81150
name="useAlternateIdleIcon"

‎src/renderer/context/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ const defaultSystemSettings: SystemSettingsState = {
9393
showNotificationsCountInTray: true,
9494
showNotifications: true,
9595
playSound: true,
96+
notificationVolume: 20,
9697
useAlternateIdleIcon: false,
9798
openAtStartup: false,
9899
};

‎src/renderer/routes/__snapshots__/Settings.test.tsx.snap‎

Lines changed: 159 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderer/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export interface SystemSettingsState {
9090
showNotifications: boolean;
9191
useAlternateIdleIcon: boolean;
9292
playSound: boolean;
93+
notificationVolume: number;
9394
openAtStartup: boolean;
9495
}
9596

0 commit comments

Comments
 (0)