Skip to content

Commit ce27637

Browse files
adamdotdevinadamdotdevin
committed
fix(app): better sound effect disabling ux
1 parent 950df3d commit ce27637

17 files changed

Lines changed: 65 additions & 53 deletions

File tree

‎packages/app/src/components/settings-general.tsx‎

Lines changed: 49 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,17 @@ let demoSoundState = {
2020

2121
// To prevent audio from overlapping/playing very quickly when navigating the settings menus,
2222
// delay the playback by 100ms during quick selection changes and pause existing sounds.
23-
const playDemoSound = (src: string) => {
23+
const stopDemoSound = () => {
2424
if (demoSoundState.cleanup) {
2525
demoSoundState.cleanup()
2626
}
27-
2827
clearTimeout(demoSoundState.timeout)
28+
demoSoundState.cleanup = undefined
29+
}
30+
31+
const playDemoSound = (src: string | undefined) => {
32+
stopDemoSound()
33+
if (!src) return
2934

3035
demoSoundState.timeout = setTimeout(() => {
3136
demoSoundState.cleanup = playSound(src)
@@ -132,11 +137,17 @@ export const SettingsGeneral: Component = () => {
132137
] as const
133138
const fontOptionsList = [...fontOptions]
134139

135-
const soundOptions = [...SOUND_OPTIONS]
140+
const noneSound = { id: "none", label: "sound.option.none", src: undefined } as const
141+
const soundOptions = [noneSound, ...SOUND_OPTIONS]
136142

137-
const soundSelectProps = (current: () => string, set: (id: string) => void) => ({
143+
const soundSelectProps = (
144+
enabled: () => boolean,
145+
current: () => string,
146+
setEnabled: (value: boolean) => void,
147+
set: (id: string) => void,
148+
) => ({
138149
options: soundOptions,
139-
current: soundOptions.find((o) => o.id === current()),
150+
current: enabled() ? (soundOptions.find((o) => o.id === current()) ?? noneSound) : noneSound,
140151
value: (o: (typeof soundOptions)[number]) => o.id,
141152
label: (o: (typeof soundOptions)[number]) => language.t(o.label),
142153
onHighlight: (option: (typeof soundOptions)[number] | undefined) => {
@@ -145,6 +156,12 @@ export const SettingsGeneral: Component = () => {
145156
},
146157
onSelect: (option: (typeof soundOptions)[number] | undefined) => {
147158
if (!option) return
159+
if (option.id === "none") {
160+
setEnabled(false)
161+
stopDemoSound()
162+
return
163+
}
164+
setEnabled(true)
148165
set(option.id)
149166
playDemoSound(option.src)
150167
},
@@ -319,66 +336,45 @@ export const SettingsGeneral: Component = () => {
319336
title={language.t("settings.general.sounds.agent.title")}
320337
description={language.t("settings.general.sounds.agent.description")}
321338
>
322-
<div class="flex items-center gap-2">
323-
<div data-action="settings-sounds-agent-enabled">
324-
<Switch
325-
checked={settings.sounds.agentEnabled()}
326-
onChange={(checked) => settings.sounds.setAgentEnabled(checked)}
327-
/>
328-
</div>
329-
<Select
330-
disabled={!settings.sounds.agentEnabled()}
331-
data-action="settings-sounds-agent"
332-
{...soundSelectProps(
333-
() => settings.sounds.agent(),
334-
(id) => settings.sounds.setAgent(id),
335-
)}
336-
/>
337-
</div>
339+
<Select
340+
data-action="settings-sounds-agent"
341+
{...soundSelectProps(
342+
() => settings.sounds.agentEnabled(),
343+
() => settings.sounds.agent(),
344+
(value) => settings.sounds.setAgentEnabled(value),
345+
(id) => settings.sounds.setAgent(id),
346+
)}
347+
/>
338348
</SettingsRow>
339349

340350
<SettingsRow
341351
title={language.t("settings.general.sounds.permissions.title")}
342352
description={language.t("settings.general.sounds.permissions.description")}
343353
>
344-
<div class="flex items-center gap-2">
345-
<div data-action="settings-sounds-permissions-enabled">
346-
<Switch
347-
checked={settings.sounds.permissionsEnabled()}
348-
onChange={(checked) => settings.sounds.setPermissionsEnabled(checked)}
349-
/>
350-
</div>
351-
<Select
352-
disabled={!settings.sounds.permissionsEnabled()}
353-
data-action="settings-sounds-permissions"
354-
{...soundSelectProps(
355-
() => settings.sounds.permissions(),
356-
(id) => settings.sounds.setPermissions(id),
357-
)}
358-
/>
359-
</div>
354+
<Select
355+
data-action="settings-sounds-permissions"
356+
{...soundSelectProps(
357+
() => settings.sounds.permissionsEnabled(),
358+
() => settings.sounds.permissions(),
359+
(value) => settings.sounds.setPermissionsEnabled(value),
360+
(id) => settings.sounds.setPermissions(id),
361+
)}
362+
/>
360363
</SettingsRow>
361364

362365
<SettingsRow
363366
title={language.t("settings.general.sounds.errors.title")}
364367
description={language.t("settings.general.sounds.errors.description")}
365368
>
366-
<div class="flex items-center gap-2">
367-
<div data-action="settings-sounds-errors-enabled">
368-
<Switch
369-
checked={settings.sounds.errorsEnabled()}
370-
onChange={(checked) => settings.sounds.setErrorsEnabled(checked)}
371-
/>
372-
</div>
373-
<Select
374-
disabled={!settings.sounds.errorsEnabled()}
375-
data-action="settings-sounds-errors"
376-
{...soundSelectProps(
377-
() => settings.sounds.errors(),
378-
(id) => settings.sounds.setErrors(id),
379-
)}
380-
/>
381-
</div>
369+
<Select
370+
data-action="settings-sounds-errors"
371+
{...soundSelectProps(
372+
() => settings.sounds.errorsEnabled(),
373+
() => settings.sounds.errors(),
374+
(value) => settings.sounds.setErrorsEnabled(value),
375+
(id) => settings.sounds.setErrors(id),
376+
)}
377+
/>
382378
</SettingsRow>
383379
</div>
384380
</div>

‎packages/app/src/i18n/ar.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -565,6 +565,7 @@ export const dict = {
565565
"font.option.sourceCodePro": "Source Code Pro",
566566
"font.option.ubuntuMono": "Ubuntu Mono",
567567
"font.option.geistMono": "Geist Mono",
568+
"sound.option.none": "بلا",
568569
"sound.option.alert01": "تنبيه 01",
569570
"sound.option.alert02": "تنبيه 02",
570571
"sound.option.alert03": "تنبيه 03",

‎packages/app/src/i18n/br.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -571,6 +571,7 @@ export const dict = {
571571
"font.option.sourceCodePro": "Source Code Pro",
572572
"font.option.ubuntuMono": "Ubuntu Mono",
573573
"font.option.geistMono": "Geist Mono",
574+
"sound.option.none": "Nenhum",
574575
"sound.option.alert01": "Alerta 01",
575576
"sound.option.alert02": "Alerta 02",
576577
"sound.option.alert03": "Alerta 03",

‎packages/app/src/i18n/bs.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -639,6 +639,7 @@ export const dict = {
639639
"font.option.sourceCodePro": "Source Code Pro",
640640
"font.option.ubuntuMono": "Ubuntu Mono",
641641
"font.option.geistMono": "Geist Mono",
642+
"sound.option.none": "Nijedan",
642643
"sound.option.alert01": "Upozorenje 01",
643644
"sound.option.alert02": "Upozorenje 02",
644645
"sound.option.alert03": "Upozorenje 03",

‎packages/app/src/i18n/da.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,7 @@ export const dict = {
635635
"font.option.sourceCodePro": "Source Code Pro",
636636
"font.option.ubuntuMono": "Ubuntu Mono",
637637
"font.option.geistMono": "Geist Mono",
638+
"sound.option.none": "Ingen",
638639
"sound.option.alert01": "Alarm 01",
639640
"sound.option.alert02": "Alarm 02",
640641
"sound.option.alert03": "Alarm 03",

‎packages/app/src/i18n/de.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -580,6 +580,7 @@ export const dict = {
580580
"font.option.sourceCodePro": "Source Code Pro",
581581
"font.option.ubuntuMono": "Ubuntu Mono",
582582
"font.option.geistMono": "Geist Mono",
583+
"sound.option.none": "Keine",
583584
"sound.option.alert01": "Alarm 01",
584585
"sound.option.alert02": "Alarm 02",
585586
"sound.option.alert03": "Alarm 03",

‎packages/app/src/i18n/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -642,6 +642,7 @@ export const dict = {
642642
"font.option.sourceCodePro": "Source Code Pro",
643643
"font.option.ubuntuMono": "Ubuntu Mono",
644644
"font.option.geistMono": "Geist Mono",
645+
"sound.option.none": "None",
645646
"sound.option.alert01": "Alert 01",
646647
"sound.option.alert02": "Alert 02",
647648
"sound.option.alert03": "Alert 03",

‎packages/app/src/i18n/es.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,6 +643,7 @@ export const dict = {
643643
"font.option.sourceCodePro": "Source Code Pro",
644644
"font.option.ubuntuMono": "Ubuntu Mono",
645645
"font.option.geistMono": "Geist Mono",
646+
"sound.option.none": "Ninguno",
646647
"sound.option.alert01": "Alerta 01",
647648
"sound.option.alert02": "Alerta 02",
648649
"sound.option.alert03": "Alerta 03",

‎packages/app/src/i18n/fr.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -579,6 +579,7 @@ export const dict = {
579579
"font.option.sourceCodePro": "Source Code Pro",
580580
"font.option.ubuntuMono": "Ubuntu Mono",
581581
"font.option.geistMono": "Geist Mono",
582+
"sound.option.none": "Aucun",
582583
"sound.option.alert01": "Alerte 01",
583584
"sound.option.alert02": "Alerte 02",
584585
"sound.option.alert03": "Alerte 03",

‎packages/app/src/i18n/ja.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,7 @@ export const dict = {
569569
"font.option.sourceCodePro": "Source Code Pro",
570570
"font.option.ubuntuMono": "Ubuntu Mono",
571571
"font.option.geistMono": "Geist Mono",
572+
"sound.option.none": "なし",
572573
"sound.option.alert01": "アラート 01",
573574
"sound.option.alert02": "アラート 02",
574575
"sound.option.alert03": "アラート 03",

0 commit comments

Comments
 (0)